1 / 41

User Interface Design

User Interface Design. Overview. The Developer’s Responsibilities Goals and Considerations of UI Design Common UI Methods A UI Design Process Guidelines + Helpful Resources. The Developer’s Responsibilities. Software engineers must often take responsibility for user interface design.

curt
Download Presentation

User Interface Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. User Interface Design

  2. Overview • The Developer’s Responsibilities • Goals and Considerations of UI Design • Common UI Methods • A UI Design Process • Guidelines + Helpful Resources

  3. The Developer’s Responsibilities

  4. Software engineers must often take responsibility for user interface design Only large organizations normally employ special interface designers

  5. Technologies for GUIs • Java Swing • Win32/MFC • HTML • QT • GTK • Aqua

  6. Programmers may be proficient using these technologies However, the UIs they develop are often unattractive and inappropriate for their target users

  7. Good user interface design is critical for system dependability Many “user errors” are caused by user interfaces that don’t consider the capabilities of real users in their working environments

  8. Goals and Considerations of UI Design

  9. Important Factors to Keep in Mind when Creating UIs • People have limited short-term memory • We all make mistakes • We have a diverse range of physical capabilities • We have different interaction preferences

  10. People have limited short-term memory • We can instantaneously remember about seven items of information • If you present too much information to the user at once, he/she may not be able to take it all in

  11. We all make mistakes • Especially when we have to handle too much information, or are stressed • When systems go wrong and issue warning messages and alarms, this often puts more stress on the user

  12. We have a diverse range of physical capabilities • Some people see and hear better than others • Some people are color-blind • Some people are better than others at physical manipulation • Don’t design for just your own capabilities

  13. We have different interaction preferences • Some people like to work with pictures • Others, with text • Direct manipulation is natural for some • Others like command-oriented systems

  14. Basic Considerations of UI Design • User familiarity • Consistency • Minimal surprise • Recoverability • User guidance • User diversity

  15. User familiarity • The interface should use terms and concepts drawn from the experience of the people who will make the most use of the system

  16. Consistency • The interface should be consistent in that, wherever possible, comparable operations should be activated in the same way

  17. Minimal surprise • Users should never be surprised by the behavior of a system

  18. Recoverability • The interface should include mechanisms to allow users to recover from errors • Confirmation of destructive actions • Undo/Multiple-Undo (checkpointing)

  19. User guidance • The interface should provide meaningful feedback when errors occur and provide context-sensitive user help facilities

  20. User diversity • The interface should provide appropriate interaction facilities for different types of system users

  21. Common UI Methods

  22. Five Common Approaches for User Interaction • Direct manipulation • Menu selection • Form fill-in • Command language • Natural language

  23. Direct manipulation • The user interacts directly with objects on the screen • Usually involves a pointing device (mouse, stylus, touchpad/finger)

  24. Menu selection • Possible commands are categorized and listed in menus • So the user doesn’t have to remember exact command syntax

  25. Form fill-in • The user fills in fields of a form • Some fields have associated menus and/or action buttons

  26. Command language • Similar to command-line input • The user enters a command and possibly a list of parameters

  27. Natural language • Similar to command language, except that the language is more flexible (I.e. English) • This could also be used for spoken interfaces

  28. A GUI Design Process

  29. UI design is an iterative process where users interact with designers and prototypes Decide on features, organization, and the look-and-feel of the system user interface

  30. Guidelines

  31. Presenting information? Answer the following • Is the user interested in precise information or in the relationships between data values? • How quickly do the information values change? Should the change value be indicated immediately to the user? • Must the user take some action in response to a change in information? • Does the user need to interact with the displayed information via a direct manipulation interface? • Is the information to be displayed textual or numeric? Are relative values of information items important?

  32. Text vs. Graphics • Text requires less space and is more precise, but cannot be interpreted at a glance • Graphics are useful for data that changes quickly or when relationships between data values are more important than precise values

  33. Guidelines for Using Color • Limit the number of colors • 4 to 5 in a window • ≤ 7 in a system interface • Use color change to show a change in system status • Use color coding to support tasks • Highlight anomalies and/or similarities • Be consistent and thoughtful • Be careful about color pairing

  34. Error Messages

  35. Error Messages: A Video Clip • WWDC 2003 Disc #1, Session 001, 15:08 - 17:45

  36. Guidelines for Layout • See Apple Human Interface Guidelines and MSDN User Interface Guidelines • Links on Software Engineering website

  37. Layout: A Video Clip • WWDC 2003 Disc #1, Session 001, 22:00 - 32:47

  38. Cross-Platform Best Practices • Be consistent yet adaptive • Provide identical functionality • Deliver a platform-appropriate experience • Deliver platform-appropriate behaviors • Leverage platform strengths • Embrace file name extensions and their display name • Avoid lowest common denominator user experience

  39. Overall, Good Design: A Video Clip • WWDC 2003 Disc #1, Session 001, 17:45 - 21:15

More Related