Design Guide USER INTERFACE F E B R U A RY 2 0 1 2
DESIGN GUIDE Table of Contents Overview.............................................................................................................................................................................................................4 The Importance of a Well-Designed Interface........................................................................................................................................4 The First Experience...............................................................
DESIGN GUIDE Readability and Flow...............................................................................................................................................................................13 Dimensionality..........................................................................................................................................................................................13 Areas of the Interface Template.................................................................
DESIGN GUIDE Overview AMX touch panels bridge a relationship between humans and technology, one that unfolds intuitively through the natural input of touch. This relationship is given space and form through the attention to design. Usability of an interface design is essential to the success of your touch panels. Investment in the design of your interfaces directly affects your customer’s ability to understand and use the touch panels.
DESIGN GUIDE task. As part of your design, it is recommended to consider adding help tools that describe tasks in further detail; however the primary system tasks should be clear and understandable without prior review of any help tools. You can help users be productive by promoting your interface’s key features and functions at the highest level of navigation on the initial start-up page. At the same time, avoid overwhelming users with all the features in your interface.
DESIGN GUIDE interaction. This can make an interface more complex and cumbersome. Minimal doesn’t mean small, but rather elegant and simple, so be sure to maintain a proper sense of scale to preserve text legibility, the users’ context, and their sense of place in the interface on the whole. User in Control The user should always feel in control of the interface rather than feeling controlled by it.
DESIGN GUIDE information about the state of the process and how to cancel the process if that is an option. Nothing is more disconcerting to users than a “dead” screen that is unresponsive to input. A typical user will tolerate only a few seconds of an unresponsive interface. It is equally important that the type of feedback you use be appropriate to the task.
DESIGN GUIDE Consistency Visuals must be consistent to help the users find their way through an interface. Consistency allows users to transfer existing knowledge to new tasks, learn new things more quickly and focus more attention on tasks. This is because they do not have to spend time trying to remember the differences in interaction. By providing a sense of stability, consistency makes the interface familiar and predictable.
DESIGN GUIDE Design Methodology Effective interface design is more than just following a set of rules. It requires a user-centered attitude and design methodology. It also requires early planning of the interface and continued work throughout the development process. Aesthetics Visual design is an important part of an interface. Visual attributes provide valuable impressions and communicate important cues to the interactive behavior of particular objects.
DESIGN GUIDE • Beginning users often have difficulty using a touch screen. For example, multi-touch gestures are skills that may take time for new users to remember. • Navigation on a touch panel can be difficult because it requires remembering the hierarchy and path they have traveled, which differs from a website with a crumb trail. • Sliding a finger is different from a tap selection, so many beginning users have difficulty distinguishing these two actions, or they overdo it.
DESIGN GUIDE Interaction diagrams visualize the sequence of activities within an interface. The flow of actions needed to perform specific tasks is documented to ensure all needed functions are made available within the interface. Interaction diagrams are specifically helpful for complex tasks which require multiple actions to complete. Creating them is a key to catching interface errors early in the design process.
DESIGN GUIDE other visual elements. The outcome of this ordering affects all of the other composition and organization principles. It also determines which information a user sees first and what a user is encouraged to do first.
DESIGN GUIDE a spatial relationship between the button and the list. This helps the user make the connection clearly and quickly just by looking at the placement. Readability and Flow This principle calls for ideas to be communicated directly and simply with minimal visual interference. Readability and flow can determine the usability of a dialog box or other interface component.
DESIGN GUIDE The template example demonstrates a 20” Touch Panel. The template is composed of five key functional areas: 1. Main Touch Panel Control Bar 2. Room Controls 3. Activity Area 4. Device Controls 5. Task Bar Figure 1 These areas should be used consistently for the labeled functions to allow for ease of learning the interface by end users. The Main Touch Panel Control Bar functions as a persistent location for tools such as Room Power, Volume and Mute.
DESIGN GUIDE the right. Upon beginning an activity, users will naturally look to the right and use their right hand to navigate this area. The Task Bar fills the bottom of the screen and includes high level functions for specific devices that are accessible to the system. Secondary tools such as Room Settings and Room Schedule may be placed here as well.
DESIGN GUIDE Designing in the Template Modero X Series Panoramic Touch Panel displays come in two sizes and two orientations per size: • 20.3” Landscape: 18.7” x 7.8” (475mm x 198mm), 1920x800 pixels • 20.3” Portrait: 7.8” x 18.7” (198mm x 475mm), 800x1920 pixels • 19.4” Landscape: 18.7” x 5.9” (475mm x 151mm), 1920x530 pixels • 19.4” Portrait: 5.9” x 18.
DESIGN GUIDE Figure 4 Icons • Icons are pictorial representations of objects. The template includes a standard icon set that should be repurposed for iterations of your interfaces. Icon states are the result of an action taken. Once an action is taken on an icon, the icon reflects that action by showing its state. An enabled icon state is consistently the same color and style throughout the interface. This state indicates that a command is active and available for use.
DESIGN GUIDE world objects to represent abstract ideas allows the user to draw from previous learning and experiences. Recollection is created by designing icons to be simple and distinct, and by using them consistently to build recognition. Icons are primarily intended to represent objects with which users can interact. Therefore, reference Fig. 5a and Fig.
DESIGN GUIDE Figure 5b: Fully Rendered Icon Set 1 9 | U S E R INTERFACE
DESIGN GUIDE Animation Animation can illustrate the operation of a particular tool or reflect a particular state. It can also be used to include an element of fun in your interface. You can use animation effects for objects within a window and interface elements, such as icons and buttons. Avoid gratuitous use of animation. When animation is used only for a decorative effect, it can distract or annoy the user. Typography Limit the number of fonts and styles you use in your interface.
DESIGN GUIDE The wording you use in your interface is a primary form of communication with the user. Keep text in the user interface as brief as possible, usability studies indicate that users are more likely to read short blocks of text than long ones. Review your work to eliminate wordiness, and keep user interface text short without sacrificing clarity. Position the text so that any relationship with a particular control is clear. Use sentence-style capitalization and ending punctuation.
DESIGN GUIDE cause distraction. Special color considerations must be taken into account. Certain colors have specific meanings in the real world, and those meanings must be adhered to. Note the following: • Green is used to indicate that something is being initiated or is active and as a common accent color. (Fig. 7 demonstrates green to begin a conference call.) • Red is used to indicate a stop, an error or to signal an alert.
DESIGN GUIDE Swatch WHITE Element Color Task and Utility Bars RGB: 24, 24, 24 ; Hex: #181818FF Horizontal Accent Bars RGB: 43, 43, 43 ; Hex: #2B2B2BFF Vertical Accent Bars (Tabs) RGB: 45, 45, 45 ; Hex: #2D2D2DFF Sub-nav Background RGB: 45, 45, 45 ; Hex: #2D2D2DFF Pane Background RGB: 72, 72, 72 ; Hex: #484848FF Button Feedback - Off RGB: 29, 29, 29 ; Hex: #1D1D1DFF Button Feedback – On RGB: 31, 171, 219 ; Hex: #21ABDBFF Button Fill RGB: 78, 78, 78 ; Hex: #4E4E4EFF Icon – Main Nav – Off
DESIGN GUIDE General Interaction Techniques Gestures and Movement Gestural navigation is an ever increasing method utilized across technology platforms today. This form of navigation differs from traditional touch navigation in that finger movement is recognized when contact is made with the screen and the interface responds with the appropriate action. Multi-touch navigation requires a minimum of 1cm (28 pixels) between any two fingers for the gesture to be recognized as two independent finger actions.
DESIGN GUIDE Motion Design Motion design defines how things move on-screen, and is a critical part of an interactive experience. Motion design should never be gratuitous; animations always support the content and the experience as a whole. Transitions are used to provide critical clues and to make sense of application states. They also allow the user to understand where tools have gone when they are in a hidden state. (Fig.
DESIGN GUIDE Putting It All Together Creating a good user interface is a compilation of all the principles described thus far. The following scenario describes an activity flow demonstrating use of color, navigation, motion and status in the appropriate template areas. The following steps in Fig. 11 illustrate a typical sequence of events using a Blue-ray player device as an example: 1. User selects activity source (Blue-ray) in the Task Bar a. Icon highlights 2.
DESIGN GUIDE Checklist for a Good Interface The following checklist summarizes the information described previously. Use it to help you confirm that your interface is designed to provide the best user experience: • Tasks are easily accessed and started in a minimum number of steps. • Users do not have to read instructions before using your interface. • Interface does not use jargon in its user interface task and folder text.
DESIGN GUIDE Appendix Website resources: 1. http://www.boxesandarrows.com 2. http://adaptivepath.com/ideas/blog 3. http://www.thinkingandmaking.com/ 4. http://www.uie.com/brainsparks/ 5. http://bokardo.com/ 6. http://findability.org/ 7. http://uxmag.com/ 8. http://usabilitygeek.com/official-usability-web-site-guidelines-of-governments-from-around-the-world/ 9. http://www.usability.gov Recommended reading: 1. Norman, Donald A. The Design of Everyday Things. New York: Basic Books, 1988 2. Krug, Steve.
DESIGN GUIDE 18. Cato, John. User-Centered Web Design. Great Britain: Pearson Education Limited, 2001 19. Stone, Debbie, Caroline Jarrett, Mark Woodroffe, Shailey Minocha. User Interface Design and Evaluation. California: Morgan Kaufmann, 2005 20. Porter, Joshua. Designing for the Social Web. California: New Riders, 2008 21. Garrett, Jesse James. The Elements of User Experience. Indiana: New Riders, 2003 22. Raskin, Jeff. The Humane Interface. Massachusetts: ACM Press, 2000 23. Csikszentmihalyi, Mihaly.
