One day a dealer called me with a technical question: his customer needed help with her remote control. I arrived at the residence of a 70-year-old woman who could not turn on her television. She was visibly upset and frustrated, wanting the dealer to remove all of the equipment from her house. When I left, she was channel surfing and very happy with her new system.
In this case, the system in question was designed, installed, and programmed perfectly. The graphical user interface (GUI), however, was not designed wella problem that Ive encountered many times in my 12-plus years as an independent Crestron programmer.
It is important to realize that while each interface is custom and unique, there are rules that apply when designing a successful user interface.
Have a Clear Vision. The key to successfully designing a user interface is having a clear vision of the project, the home and subsystems and the customers desires and expectations. These elements, in turn, will dictate the functionality needs of your design. Notice that I have not mentioned anything about the control system or code. Too often designers and programmers either opt for expediency, giving the customer a stock template, or they are eager to use the latest software or the new technique that they learned. Technology should not necessarily be integrated just because it exists. Instead, the technology applied to a given project should reflect the sophistication of the end user. Everything should have a purpose; form should always follow function.
First, you need to understand what the functions of the interface are going to be, and then attain a clear vision from the end user on how the system will actually be used.
To get a general idea of the system, physically walk the space and investigate all of the integrated subsystems in the house. Will the touchscreen interface with subsystems such as lighting, HVAC and security? Is there a true home theater or is it a media room? How does the customer want the zones divided and controlled for lighting, audio and video? Does the customer expect complex lighting, water and climate control events and scenarios, or do they just want the lights to turn on and off?
Also, it is important to evaluate your customers level of technical sophistication. It is vital that a programmer works within the customers abilities while striving to meet his or her expectations. If the customer is pushed beyond his comfort zone, then the system will not appeal to him, resulting in disappointment and/or intimidation. Managing expectations is extremely important and knowing when and why to say No is critical to the success of any given project.
Start with the Right Hardware. Next, you should perform a hardware review to ensure that the proper equipment has been specified. The integrator should have a thorough understanding of the equipment being provided. This should be consistent with the customers understanding about the system that he is receiving. The hardware delivered must be adequate and appropriate to provide the functionality expected by the customer.
A small touchscreen is acceptable for relatively simple control solutions, and for some customers that is enough. Too often, however, there is an effort by the integrator to cram full integration control and monitoring of myriad subsystems into a small five- or six-inch display. Clearly, the proper solution for this application is a 12-inch or larger touchscreen. This is obvious because the number of buttons that can comfortably be positioned on a screen is determined by the size of the touchscreen display.
Therefore, a more attractive, intuitive, easy-to-read and easy-to-use interface is achieved with a larger touchscreen. The result is reduced navigation, button presses and sub-pages for the end user providing simpler and quicker monitoring and control of the home. One to three button presses are the ideal numbers to affect an event from anywhere in the GUI.
In many larger systems multiple subsystems will often generate voluminous network traffic. In these instances control system memory and processor speed come into play, and may require multiple processors to manage the feedback traffic. Add to this GUI candy, which may include animation and graphic intensive GUI design, are more memory will be required for the touchscreen. The best interface will not work without the right hardware in place.
Colors, Backgrounds and Fonts. Now that a clear vision of the complete system is established, including the environment in which it will be used and those using it, a GUI designer can begin to consider graphics, colors, fonts and the general layout of the interface. First, determine if the customer likes any of the templates in your library or if a custom interface is desired. Often, some minor changes to a template such as font styles, colors and labels will satisfy the end user.
For the custom interface, start by talking to the customer about the dcor of the room or house, hobbies, interests and favorite colors. It is essential to understand how the interface is intended to complement or match the clients lifestyle, dcor and environment. For instance, there was a house built entirely of formed concrete walls that appeared to change color throughout the day as the sun moved across the structure. A variety of digital photos were taken at different times of the day to capture the subtle changes in contrast. The photos were then used as the background of the touchscreen interface as chosen by the homeowner.
The client and the touchscreen designer must collaborate to determine colors and graphics that will ultimately work well. The palette for the GUI should provide significant contrast of both color and hue for the fonts and backgrounds. For example, contrasting hues of light and dark green may not be easy to read. Alternatively, contrast of color such as fire engine red against royal blue will also be difficult to view. If the fonts and graphics are too distracting or if the color combinations are not well contrasted, the customer will have difficulty using the touchscreen. There was a customer that wanted an image of his aquarium as the background. I advised against that because he would not be able to distinguish the buttons in the busy environment provided by the aquarium. Backgrounds need not be completely flat and boring. If a textured background image is desired, try allowing the full detail of the image to come through at the bottom of the screen then fade to a solid color at the top two-thirds of the display where the majority of the viewing and control will be done.
Outline the Navigation. Before starting to program or lay out pages, plan the navigation of the entire interface; outline the pages much like a site tree on a computer. Depending on the size of the display, you may only be able to design four or five source buttons on a page. For larger displays no more source selection buttons may be used. If there are too many buttons on a page, then you should reorganize or reprioritize sub-categories to reduce the number of buttons per page.
A typical navigation structure organizes systems, components and available content. The main page lists the primary subsystems, such as audio, video, security, lighting, climate, etc. Each system would then list the various components within it, such as Video (SAT, DVD, CATV, VCR).
Direct satellite may then be organized into subcategories, such as Network TV, Sports, News, Kids, Movies, etc. The goal is to make it very simple for users to find what they are looking for. The interface should make all of the technology so intuitive and simple that anyone could use it without any training. This is a perfect example of why a thorough client interview is critical in defining the scope.
Page Layout Design. Once the navigation is outlined, begin the design layout using the page with the maximum number of buttons. This is essential because the main function keys should be in the exact same position on all pages. Visual consistency is typically more important than aesthetic balance. In other words, if one page has 10 source buttons and another has three, then the first three buttons should appear in the same position on both pages. Users should not have to hunt for buttons and page flips should be seamless.
Some conventions and norms have evolved for GUI layout designs. Most people are right-handed and therefore the most frequently used functions, such as channel and volume up and down, are located on the right. Navigation (source buttons) are then left to the top, bottom or left side, leaving the center for main sub-page control. Spacing of function and number buttons should be comfortable for the users. Any numbering system should be consistent with that of a phone keypad, as agreed upon by the end user.
The main area or middle of the screen also may accommodate a video display or preview windows. The video preview window is normally kept at eye level toward the top center of the GUI. Secondary source-select buttons are often placed at the bottom of screen. These conventions are customary and logical, but not etched in stone. If a user is left-handed you may want to reverse the layout, placing the source-select buttons on the right and the primary function buttons on the left. Designers should engage the client and understand his personal preferences.
Labeling. Labeling is the next step and is often considered incidental. Labeling is actually critical for the success of the interface. Font styles for labels should be clean and clear. Dont get too fancy; labels need to be very easy to read at a glance and should not require any mental translations.
In many cases, icons are used instead of labels. This may be considered shortsighted because designers often assume that users understand the icon and the relationship between the icon and the function desired. For example, it is typical that icons are used to designate TV networks. Everyone probably knows the network that is associated with the peacock, but the customer may not be looking for NBCshe is looking for Judge Judy on Channel 2. The favorite channel for one customer is the Food Network, but she does not recognize its logo. Icons and logos are great to use, but they should not replace labeling; they should only supplement the labels, unless previously agreed to during the initial client interview.
Radio stations are potentially very confusing. Understanding how the user relates to radio stations is critical to providing an intuitive interface. Will the customer look for call letters, frequency numbers, music categories or station names? For instance, there is a rock station WQRX 92.3FM that is commonly known as K-Rock. How should that radio station be labeled? If the designer does not ask the right questions and listen to the customer, then the interface will not be intuitive to that user. Similarly, Main Menu is preferable to Exit. Channel is better than Scan. Always remember that labels should speak the clients language and indicate what the user is looking for rather than the functionality behind the programming.
Feedback. Feedback is another significant design element that often is glossed over. Feedback indicates that a button has been pressed or a function has been performed, and it tracks navigation within the interface. Color change is the primary method of providing feedback. The choice of color is relevant because many colors have inherent contextual meaning. For example, red generally means stop or danger; green suggests go, OK, peace or serenity; yellow connotes warning or caution; blue is cool, aquatic, comfort.
Indentions and shading are other graphically attractive ways to provide feedback. Even when these or other graphical devices are used, color should be used in tandem. For example, if indentation is used to indicate a button press, the button or the font within the button should also change color. Feedback must be very obvious to the user. The same type of feedback indicator should also be provided, and remain visible on all pages, for the primary and secondary source selections as a frame of reference for the user within the interface. The user needs to know contextually at a glance where he is within the operation of the system.
Review and Test. Testing and reviewing is the next stage. When the design and layout have been created for one page, that template then gets replicated and slightly modified across all pages. Create a couple of pages for the customer to review before delving too far into a project. The customer can get a good sense of the look and feel of the interface from just two or three pages. With the culmination of pre-design consultations, one should be able to simply hand the touchscreen to the client and watch them successfully navigate through the interface. If they hesitate or question anything, then make a note and modify that part of the design. If the design necessitates an owners manual for anything but the most complex operation, and the design is mine, I would consider it a failure.
There are several software packages and technologies available to enhance your GUI and assist with interface programming and design. For example, Crestrons VisionTools Pro-e and Synapse provide an intuitive design tool and incredible high-resolution, 3D graphics. Dynamic text and transition effects, translucency and 3D graphics can greatly enhance the aesthetic of the interface. These techniques should be used in moderation so they do not become distracting or impede the speed and operation of the system.
Once a client wanted the Starship Enterprise to fly across the screen. While this type of effect may have a big Wow! factor, it used an inordinate amount of memory from the system. High-resolution graphics and animation are sexy, but they should be used judiciously. There is a tendency among programmers and designers to want to add all the bells and whistles and show off what they can do. Programmers should never program to impress themselves or each other. We have an obligation to our customers, and ultimately, it is the customer that must live with the interface.
Jim Snel ([email protected]) is Crestron Authorized Independent Programmer (CAIP) with Elexos Corp. (www.elexos.com) in Rosemont, Illinois.
