Become a GUI guru with Extron
09 February 2011
This GUI is segmented into logical collections of nine or fewer controls.
How can you guarantee that your user interface is a help not a hindrance? The latest guide from Extron won’t turn you into a designer in seconds, but it does provide a solid basis for learning the fundamentals of user interface creation. It's available to download from the Extron Website, but here is a summary of some of the tips.
The control panel interface is likely to be the most visible component of an AV system, as well as being possibly the only hardware with which a user has direct interaction. The quality of the entire system is often judged by the experience that a user has with the touchpanel.
A quality user interface maintains a balance of style and functionality, with the emphasis on function. Aesthetics though remain important. A good interface meets the needs of the user, and functions in the way he expects. Using a poorly design interface can be intimidating and frustrating, so eliminating confusion is the key element to a successful design.
The Extron Guide to Graphical User Interface Design provides details on a number of principles however that can help the designer to overcome the almost limitless number of colour choices, graphics and logos available to the designer, to make sure they don’t stray too far from the path.
One of the most important rules of design is consistency. This is also one of the most often broken ones. Consistency of colour choice, shapes, sizes, fonts, labels and locations must be maintained in all aspects of any interface and system. This will provide familiarity across all rooms or spaces and minimises the learning curve required to operate new systems.
To this end, a designer should make layouts on touchpanels consistent from page to page and interface to interface. An example might be DVD and Blu-ray players, which have similar controls. The common controls should be laid arranged similarly for both players. Further more, such devices should have identical control pages throughout a facility.
Affordance is the quality of an object that provides a user with the visual cue to perform an action. The user should naturally perceive how to interact with touchpanel objects and quickly determine what can be pressed, what areas need input and what areas will provide feedback.
False affordance is the direct opposite, in short. Never make something look like a button, when it isn’t!
This is how NOT to do it. The font is unclear, controls are not well divided and the images and colours use distract from the function of the interface.
Information mapping is a method for breaking down large amounts of information into chunks. It reduces the cognitive load on a user and the amount of time required to identify the correct control when scanning an interface.
A good rule of thumb is to divide an interface into chunks which contain no more than nine controls each.
The example image shows a screen divided into eight areas, each of which contains a logically related set of controls or feedback indicators.
Aesthetics and functionality
An AV system is only effective if the touchpanel interface is inviting and encourages the user to interact with it. An attractive and aesthetically pleasing layout is more likely to be used. A successful touchpanel’s appearance and usability are products of the intelligent use of colours, shapes and space, all working together.
The screen should have a clean appearance with each section separated and labelled clearly. The sections should be distinguished also by button shape, size, colour text and icons.
Selecting a colour scheme or colour palette is a core part of creating an appealing interface. Some colour combinations are aesthetically pleasing, whilst others distract and complicate. A knowledge of how colours mix and their relationships will help the designer choose compatible colours. Information on colour theory and what colours do and do not work with each other is available in the Extron guide, as well as all over the internet on design resource sites, however there are five safe rules that all colour palettes will follow.
The rules of colour
1. Never use more than six colours on a project.
2. Use grays, or low brightness / saturation colours for backgrounds.
3. Use complimentary colours to draw attention to text or buttons.
4. Avoid using too many saturated colours.
5. Always maintain good contrast between elements.
Here are a few of the suggested web resources:
Extron Graphical User Interface Design Resources
Extron has dedicated considerable efforts to help system designers understand the fundamentals of GUI design and to provide them with resources to satisfy their customers’ interface needs. Extron’s Graphical User Interface Design Resources Web page hosts a variety of resources and tools to help you meet your customers’ expectations of interface designs that balance function, style, and ease-of-use. Here you will find the Extron Guide to Graphical User Interface Design referenced in this article, as well as other GUI reference guides, FAQs, best practices, plus links to GUI design themes, configurable control training and certification, software downloads, special services, and more.