Post

7 sure-fire ways to improve your automation system GUIs

Crestron-Smart-Graphics-Theme_iPhone-Hand_Mica-01Touchscreen user interface design is a very different beast than traditional, mouse-pointer operated UI/UX design. Moreover, within the realm of touchscreen UI design, creating interfaces for home and commercial automation systems presents its own unique set of challenges. In this article I will suggest several “rules of the road” to make the design process go more smoothly, and in turn improve your touchscreen-based automation system user interfaces.

Keep Button Size in Check

button-size-compare
Not all pixels are created equal; in fact, they keep getting smaller! Newer, high-resolution screens like Apple’s Retina display, have more than twice the number of pixels per inch than standard displays, so a button that is sized correctly for a standard display would need to be about 4 to 6 times larger in order to be useable on a high-res display.

Perhaps the most important aspect of any touchscreen user interface, is button size. If buttons are too small and too close together to be easily pressed by an average user’s finger, it will be difficult and frustrating to operate – the kiss of death for any touchscreen user interface. A good rule of thumb is that no button should be smaller than 1/3” high by ½” wide. You can easily figure out how many pixels this equals for a given touchscreen by using a dpi calculation tool such as pxcalc.com


 

Use a Grid

grid
Find a grid size that works for you and stick to it. This will ensure consistent sizing and spacing across all the pages in your project.

When I talk to fellow programmers and UI developers, I’m usually very surprised by how many of them don’t use a grid when designing. I consider this an absolutely essential design tool as it’s really the only effective way to enforce consistent element spacing and location from page to page. Most GUI design software offers a grid in one form or another, and while some are more flexible and versatile than others, they can all make it much easier to lay out your pages neatly and consistently.


 

Use Persistent Elements

This one is quite simple, but surprisingly, it’s a convention that many programmers and UI designers do not observe. Basically, persistent elements are any controls that need to be accessed across multiple pages, such as volume or subsystem menus that allow quick access to lighting or climate control. These items should remain in the same location from page to page. In other words, volume up/down should not be on the right side of the screen on one page and on the left side on another. Again, this one may seem like common sense, and it should be; but to this day, I still see examples of this rule being broken, so I felt I should mention it.


 

Place Commonly Used Controls Near Screen Edges

This applies primarily to wireless touchscreens and tabletop models that can be grasped around their sides and operated by the user’s thumbs. Because holding the sides of the panel provides an anchor point for the user’s hands, placing controls like ‘channel up/down’ and dpads near the edges of the screen, makes it much easier for users to operate them without having to look down at the screen as often. This is also an area where size is very important. Making these ‘side-based’ controls as large as possible also enhances their ease of use.


 

Use Size to Emphasize

use-size-to-emphasize
Making the “play/pause” button on a media player larger than surrounding buttons, is a great example of effectively using size to emphasize an element.

If you want to draw attention to a particular control, make it bigger than the surrounding controls. This is a good practice for a ‘play’ button, flanked by smaller ‘reverse’ and ‘forward’ buttons. Another place I like to use this technique is with my ‘guide’ and ‘list’ buttons on a DVR. If you’re cramped for space, this effect can also be achieved by simply using larger or bolder text on more important buttons.


 

Use Alternate Pages for Lesser Used Elements

Devices like DVD players and DVRs have extensive sets of controls, many of which are seldom used. Rather than clutter the main control page with a bunch of infrequently used buttons and make things more confusing for the end user, make a secondary page that is identical to the main page, with the addition or substitution of these less needed controls. This way, all controls are available when needed, but they won’t be visible the majority of the time, simplifying the interface and making it easier to grasp for most users.


 

Don’t Forget About Style & Aesthetics

Crestron-Smart-Graphics-Theme_NTDesigns-1280_Prosaic-02

 

With all this focus on the technical aspects of GUI design, it’s important that we don’t forget to place equal emphasis on the aesthetic look and feel of our user interfaces. All of the aforementioned techniques can easily be executed without sacrificing style and visual appeal. At the end of the day, if an interface is just downright ugly, it won’t be a pleasure to use, no matter how user-friendly and well laid out it is.

Aaron Craig

Aaron Craig is a graphic designer & entrepreneur. He is the founder of NTDesigns, a UI design firm that specializes in touchscreen based interfaces, especially in the home automation industry. He is the primary author for the NTDesigns Blog, and writes periodically for other blogs and publications in the UI design and automation realms when he can. Aaron lives in Milwaukee with his family and two dogs, Napoleon and Kip.

Leave a comment  

name*

email*

website

Submit comment