AMX MXD-2001-PAN-P manual

Design Guide USER INTERF ACE FEBRUAR Y 2012[...]

2 | USER INTERF ACE DESIGN GUIDE T able of Contents Ove rv iew .............................................................................................................................................................................................................4 Th e Imp or ta nce o f a Well- D esig ne d Inte r face .........................[...]

3 | USER INTERF ACE DESIGN GUIDE Re a d a bi l i t y a n d Fl o w............................................................................................................................................................................... 1 3 D im e n s i o na l i t y................................................................................[...]

4 | USER INTERF ACE DESIGN GUIDE Overview AMX touc h panel s bridge a re lation shi p between human s and tec hnology , one that unfold s int uit ivel y through the na tural i nput of touch . This rela tions hip i s given space a nd form through the a ttention to desi gn. U sabi li ty of an interface design i s e ssenti al to the succ ess of your t[...]

5 | USER INTERF ACE 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. Y ou can help users be productive by pr omoting your interface’ s key features and functio[...]

6 | USER INTERF ACE 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 pr oper 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 shoul[...]

7 | USER INTERF ACE DESIGN GUIDE information about the state of the process and how to cancel the pr ocess if that is an option. Nothing is more disconcerting to users than a “dead” screen that is unr esponsive to input. A typical user will tolerate only a few seconds of an unresponsive interface. It is equally important that the type of feedba[...]

8 | USER INTERF ACE 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 mor e attention on tasks. This is because they do not have to spend time trying to remember the dif ferences in [...]

9 | USER INTERF ACE DESIGN GUIDE Design Methodology Effective interface design is mor e than just following a set of rules. It requires a user -centered attitude and design methodology . It also requir es early planning of the interface and continued work throughout the development process. Aesthetics Visual design is an important part of an interf[...]

10 | USER INTERF ACE DESIGN GUIDE • Beginningusersoftenhavedifcultyusingatouchscreen.Forexample,multi-touchgestur esareskillsthatmaytake time for new users to remember . • Navigationonatouchpanelcanbedifcultbecauseitrequir esrememberingthe?[...]

11 | USER INTERF ACE 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 ar e made available within the interface. Interaction diagrams are specifically helpful for complex tasks which requir e multiple action[...]

12 | USER INTERF ACE DESIGN GUIDE other visual elements. The outcome of this ordering af fects 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. T o further consider this principle, answer these questions regar ding your application: • W[...]

13 | USER INTERF ACE 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 interfer ence. Readability and flow can determine the [...]

14 | USER INTERF ACE DESIGN GUIDE The template example demonstrates a 20” T ouch Panel. The template is composed of five key functional ar eas: 1. Main T ouch Panel Contr ol Bar 2. Room Controls 3. Activity Area 4. Device Controls 5. T ask Bar These areas should be used consistently for the labeled functions to allow for ease of learning the int[...]

15 | USER INTERF ACE 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 T ask Bar fills the bottom of the scr een and includes high level functions for specific devices that are accessible to the system. Secondary tools such as Room Settings and Room Sche[...]

16 | USER INTERF ACE DESIGN GUIDE Designing in the T emplate Modero X Series Panoramic T ouch 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 •?[...]

17 | USER INTERF ACE DESIGN GUIDE Icons • Iconsarepictorialr epresentationsofobjects.Thetemplateincludesastandardiconsetthatshouldber epurposed for iterations of your interfaces. Icon states are the r esult of an action taken. Once an action is taken on an icon, the icon reflects that acti[...]

18 | USER INTERF ACE DESIGN GUIDE world objects to repr esent 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 r ecognition. Icons are primarily intended to r epresent objects with which users can interact. The[...]

19 | USER INTERF ACE DESIGN GUIDE Figure 5b: Fully Rendered Icon S et[...]

20 | USER INTERF ACE 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. Y ou can use animation effects for objects within a window and interface elements, such as icons and buttons. Avoid gratuitous use of animation. W[...]

21 | USER INTERF ACE 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 mor e likely to read short blocks of text than long ones. Review your work to eliminate wordiness, and keep user interface text sho[...]

22 | USER INTERF ACE 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co[...]

23 | USER INTERF ACE DESIGN GUIDE Swatch Element Color Opacity T ask and Utility Bars RGB: 24, 24, 24 ; Hex: #181818FF Horizontal Accent Bars RGB: 43, 43, 43 ; Hex: #2B2B2BFF V ertical Accent Bars (T abs) RGB: 45, 45, 45 ; Hex: #2D2D2DFF Sub-nav Background RGB: 45, 45, 45 ; Hex: #2D2D2DFF Pane Background RGB: 72, 72, 72 ; Hex: #484848FF Button Feed[...]

24 | USER INTERF ACE DESIGN GUIDE General Interaction T echniques Gestures and Movement Gestural navigation is an ever increasing method utilized acr oss technology platforms today . This form of navigation differs from traditional touch navigation in that finger movement is r ecognized when contact is made with the screen and the interface respon[...]

25 | USER INTERF ACE 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. T ransitions are used to pr ovide critical clues and to make sense of application states[...]

26 | USER INTERF ACE DESIGN GUIDE Putting It All T ogether 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 ar eas. The following steps in Fig. 11 illustrate a typical se[...]

27 | USER INTERF ACE 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: • T asksar eeasilyaccessedandstartedinaminimumnumberofsteps. • Users[...]

28 | USER INTERF ACE DESIGN GUIDE Appendix W ebsite resour ces: 1. http://www .boxesandarrows.com 2. http://adaptivepath.com/ideas/blog 3. http://www .thinkingandmaking.com/ 4. http://www .uie.com/brainsparks/ 5. http://bokar do.com/ 6. http://findability .or g/ 7. http://uxmag.com/ 8. http://usabilitygeek.com/official-usability-web-site-guidelin[...]

29 | USER INTERF ACE DESIGN GUIDE 18. Cato, John. User -Centered Web Design. Gr eat Britain: Pearson Education Limited, 2001 19. Stone, Debbie, Caroline Jarrett, Mark W oodroffe, Shailey Minocha. User Interface Design and Evaluation. California: Morgan Kaufmann, 2005 20. Porter , Joshua. Designing for the Social Web. California: New Riders, 2008 21[...]