Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now


Intuitive Custom GUIs

How to design a better user interface.

Like you find with many of your current customers, I too have a very extensive collection of CDs. And over time I grew very frustrated with CD changer solutions, where it was difficult to locate a certain CD, let alone a specific song. Having run an Internet consulting and software firm, working with digital media software and Internet technology for several years, I knew there had to be a better solution.

With the help of our software development team, we began researching all of the hard disc drive music servers on the market. We all felt that even with all of the terrific technology available, there was a simpler, more intuitive solution that would not only hold my music collection, but also would allow me to easily manage it all. So we set on a course to develop one.

Developing an intuitive and friendly user-interface for use in home entertainment applications has many unique challenges and fundamentally requires a good understanding of the end-user and his or her typical needs. The challenge begins in trying to characterize these needs, as there are many different types of usersall with different expectations and comfort levels with technology, which can range from basic to advanced.

Define User Functions. The first step is to carefully inventory and define the key user functions of the system, starting with the most frequently used functions that support day-to-day activities. In a larger home control system, this would likely include elements such as Watch TV, Listen to Music, Watch DVD, Lighting Scenes, View Security Alerts, Cool the Lower Level, etc.

Once the key user needs have been defined, the second step is to thoughtfully layout a series of screens, panels, or tabs that present these functions. This is one of the most challenging aspects of designing a GUI, as you are inherently at conflict with keeping it simple, yet providing enough functionality. A good approach is to keep the most important functions readily accessible and uncluttered, and then add depth by placing more advanced and infrequently used functions on separate screens or tabs.

Properly Design GUI Structure. The fundamental ingredient in any well-designed GUI is the layout. This includes deciding on an overall structure, button placement, label nomenclature, and information display related to status, state, and other data used to help operate the system. Decisions must also be made about available screen real estate and optimal use of the target display resolutions. This will determine the overall space available and subsequently how big these individual elements can be. Functionality should also prevail over form. Something that is pretty or cute is great, but if its not usable, then you have failed in the mission.

Maximize Use of Technology. In designing Qsonixs GUI, we felt strongly that the tactile experience, offered by touchscreen technology, would create a more intuitive feel. Thats not new; just about all control systems offer touchscreens. But to further maximize user comfort and familiarity, we added drag-and-drop capabilities to make it easier for users to create and manage playlists. Engaging the customer can make all the difference in keeping them satisfied. A well-designed touchscreen GUI can offer the same level of intuitive operation.

Keep It Simple. Keep frequently used functions readily accessible. This cannot be overstated, as so many GUIs try to do too much in too little space. This creates a cluttered appearance, which has a tendency to make even frequently used functions hard to find or tedious to operate. Our designers favor the less is more rule as much as possible, which often means cutting features in favor of keeping it simple.

Use Non-Technical Labeling. This is a simple yet often overlooked design principle. Dont use techno jargon and lingo in your GUI. Your customer probably doesnt know, or care about things like bit rates, file formats, routing configurations, and so on. Things like Loading Quality should be labeled in terms like CD quality, High Quality, etc., and not 320 Kbps or FLAC. This same concept can and should be applied throughout the GUI design.

Provide Clear Visual Location Queues. When a GUI design requires a lot of depth as mentioned above, be sure that part of your core design includes a simple way to navigate through the depths or areas of the GUI layoutfor example, back, next, up, downso that the user can easily get from one area to the next in as few steps as possible. Providing a context-based label of where you are in the system can help. For instance, Lighting/Living Room shows that you are in the lighting area and dealing with the living room. These visual queues should be tightly integrated with your navigation method as well.

Include Basic, Context-Sensitive Help Content. The sign of any well-designed system is one in which users dont have to pick up the user manual to learn basic operations. Any manual should only be for backup or troubleshooting. And while there will undoubtedly be questions, it is more effective to incorporate built-in help throughout the system. Including a bit of context-sensitive help that can be called up with a button, or literally embedded in the GUI when appropriate, ensures that more complicated functions like setup, configuration, or options are explained when they are being used. Remember to be as brief as possible and to use non-technical language. This feature can easily be incorporated into nearly any GUI design, and it cuts down on the support calls.

Choose Straightforward Color Scheme. Developing color schemes can often become contentious when designing GUIs. Integrators are faced with the challenge of meeting their own expectations as well as those of both the interior designer and end user. This may mean creating a rustic old oak type of look, which may not really be the best solution for the user in terms of usability. Rustic old oak tends to be very dark in color and does not usually include much in the way of a contrast palette, so the result often means that buttons are hard to see, making the system difficult to use.

Another trend that has been carried over from the PC industry is the use of skins or themed buttons. While these may be cool or cute, they often reduce the usability of the system. We recommend using cool blues for the background and strong, high-contrast colors, such as red, green, yellow, and white for labeling, help, and information display.

Test Everything with Real Users. Nothing can replace real testing with real users. Its vitally important to not only gather input from potential users, but also to observe their behavior while using the system. It might mean spending some time refining your interface a bit, but that will pay off many times over as you do more installations.

Thankfully, finding potential test users for home entertainment-related work is not that hard. You can gain very valuable feedback with friends, family, customers, and associates. Its also interesting to note that there is a big difference between feedback that you observe by watching users with the system vs. the verbal feedback that you solicit from the same users later. Both are important, but capturing the true raw experience through observation is much more useful. You develop a much better understanding of the functions that they tend to favor, where they tend to get stuck or confused, what they learn on their own, and where they need to more training.

Whether you are a manufacturer or an installer, creating an enjoyable user experience is really the most important mission that we have. And the user interface that youre designing is the key to that experience.

Mike Weaver ([email protected]) is the president of Qsonix, which recently launched its Q100 Digital Music Entertainment System, the industrys first drag and drop digital music management system developed for residential and commercial applications.