Control Page design best practices

I am redesigning my control pages for hopefully the last time in my new house. I am no web designer, but I can tool around in photoshop.

I suppose I’m going for an iPhone/iPad-like interface, and am wondering about tips for design e.g. icon sizing, scrolling vs non-scrolling, home-pages, handling of webcam images, etc.

I think I have looked at every graphic on the “kudos and success stories/ show us your control pages” thread.


Sent from my iPhone using Tapatalk

I have done both scrolling (iphone) and non-scrolling (Kindle Fire HD) ones. I think I like the non-scrolling ones better, but that forces you to design more linked pages to capture whatever you don't scroll to anymore. For example, my sprinkler page has about 2 phone-lengths worth of graphics/controls. If this is to be non scrolled, there will have to be some kind of nested sub-page.

My favorite design element that I copied from at least one of the entries deep on the Post-Your-CP's-Here forum page was a large navigation bar. On the phone versions this is on the left. On the Kindle (wall kiosk type thing) it runs along the bottom. This elements remain the same no matter what page I am on (except that the icon changes to a a bright white for that page), which allows easy jumping around to different functions without having to use a back button or returning to some central/Home page.

I do have a "Home" page which displays the most used info/controls, and the phone always opens to this page. I'll attach a screenshot.

Nice- how did you decide icon sizes?


Sent from my iPhone using Tapatalk

This is work in progress as im moving away from control pages with Alexa. HT still needs a control page though as Alexa is not great with high background noise levels.

A few icons need tidying up. I created a background grid based on the number of buttons i needed across the screen, then changed the background to a blank grey for now.

Icon size is 63 pixels square, which i think i based on the apple developers guide (EDIT: Apple are 72 pixel square) https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/color/

Nice- how did you decide icon sizes?


Sent from my iPhone using Tapatalk

I mock up the whole thing in one PS document sized for the display device. If you really want to see how it'll display, you can save that whole thing as a PNG, then drop it in your backgrounds folder on the server. You can then load it up as a test page and see if you like it. But I almost never do that anymore.

I then open a second PS document and individually drag each element (or set of elements in the case of variable/state changing things) into that document. The system is basically:

1) hide all previous layers
2) drag new item into document
3) recrop document to match size of whatever I just dropped in
4) save as PNG
5) drag new PNG (or sets for changing images) to server machine via screen sharing
6) incorporate into growing CP
7) rinse and repeat

If done right, when you are done you have 2 PS documents; the mock up with all pieces on it, on which you can play with spacing, etc, and one which I call "x page components" with all the pieces dragged onto it to save as a PNG. I think the very newest versions of PS CC can export a single layer, so you wouldn't have to drag into a second doc. My older MacBook Pro won't run the newest PS versions though.

Also, if you are doing a "navigation bar" style like my example above, once you have your layout, the easiest thing when making a new page is to dupicate a completed page in the CP designer, then go through and delete all the stuff in the non-nav bar area (in my example, all the stuff in the white section). This way, almost all of your navigation icons don't have to be re-done (except changing which one is indicating the current page).

This is awesome advice- thank you!


Sent from my iPhone using Tapatalk

Really nice control page. Funny, the first thing that came to mind on the icon just above the sprinkler
was a music icon...a tone arm with a needle in the groove.
I was very impressed that anyone would think of that till I saw the security cam.

Carl

The mix of B&W & color means that the eye is drawn immediately to the few color icons. If this is intentional, great!

Out of interest what’s the use case you’re looking to solve with control pages?

I’ve always loved the idea of decent control pages but i’m Not sure where they now fit in with modern Indigo HA life. (Still want them though!)

Out of interest what’s the use case you’re looking to solve with control pages?

I’ve always loved the idea of decent control pages but i’m Not sure where they now fit in with modern Indigo HA life. (Still want them though!)

We don't do voice control, and our Indigo setup is structured to run as automatically as possible. Where we do interact with Indigo (temp, lights, etc.), we do a lot of that with Indigo Touch or DomoPad (device controls, not control pages).

One thing we really love is that I've created a control page that has the most-used functions all in one place and the page is saved to the OS X Dashboard. If we're working on a Mac and want to bump a device, we can access the page with a single four-finger swipe. This works great, and we use it all the time.

One thing we really love is that I've created a control page that has the most-used functions all in one place and the page is saved to the OS X Dashboard. If we're working on a Mac and want to bump a device, we can access the page with a single four-finger swipe.

This is brilliant!!!! Going to implement it today!!!

One caveat is that Indigo will prompt you to log in to the server after reboot. Small price to pay IMO.


Sent from my iPhone using Tapatalk

That’s very cool! Would you be happy to share a pic?!

That’s very cool! Would you be happy to share a pic?!

Sure. Here's a sloppy screen grab. These are the lights we interact with most often, and climate control for our two zones. This isn't the state of the devices now--rather, the snapshot of the state the last time I looked at it (I'm not home at the moment). I've been thinking about adding some controls to access certain Action Groups, but haven't found a compelling need. To be honest, a few of the lights could come off this page, too. But it gives an idea of what I'm trying to do!

Screen Shot 2018-06-20 at 4.39.29 PM.png (126.81 KiB) Viewed 2941 times