1. ACS 367 Interface Design Chapter 2 Galitz, Wilbert O. The Essential Guide to User Interface Design

2. Graphical User Interface n User interface –collection of techniques & mechanisms to interact with something

3. GUI n Use pointing device –primary interaction mechanism –equivalent to human hand n Interact with objects –visible to user –used to perform tasks n Perform operations/actions on objects –access & modify

4. Direct Manipulation n System portrayed as extension of real world –(real-time) n Continuous visibility of objects and actions WYSIWYG n Actions –rapid & incremental –visible display of results –easily reversible

5. Indirect Manipulation n Used when direct manipulation not feasible –operation difficult to conceptualize/depict graphically –graphics capability limited –limited space or screen real estate –operation and action learning overload n Substitutes words & text –pull-down or pop-up menus for symbols –typing for pointing

6. GUI: Advantages n Symbols recognized faster than text n Faster learning n Faster use and problem solving n Easier remembering n More natural n Exploits visual/spatial cues n Fosters more concrete thinking

7. GUI: Advantages (2) n Provides context n Fewer errors n Increased feeling of control n Immediate feedback n Predictable system responses n Easily reversible action n Less anxiety concerning use

8. GUI: Advantages (3) n More attractive n May consume less space n Replaces national languages n Easily augmented with text displays n Low typing requirements n Smooth transition form command language system

9. GUI: Disadvantages n Greater design complexity n Learning still necessary n Lack of experimentally derived design guidelines n Inconsistencies in technique and terminology n May consume more screen space n Hardware limitations

10. GUI: Disadvantages (2) n Ease of use –best determined by design not interaction style n Consider user preference for interaction style n Content of graphical screen critical for usefulness: more confusion not less if –wrong presentation –cluttered presentation

11. GUI Success Dependent n On skills of designer n On application of established principles of usability

12. n Hall of Fame –Examples of good interfaces – won’t see many! n Hall of Shame –Examples of poor interfaces www.webpagesthatsuck.com

13. Bad Design n How do you cancel?

14. UI Development Process  Design cycle  User-centered design  Task analysis  Rapid prototyping  Evaluation  Programming  Iteration

15. Design Goals n Aesthetically pleasing n Clarity n Compatibility n Comprehensibility n Consistency n Control

16. Design Goals (2) n Directness n Efficiency n Familiarity n Flexibility n Forgiveness n Predictability n Recovery

17. Design Goals (3) n Responsiveness n Simplicity n Transparency n Trade-Offs

18. Design Process Problems by Gould n Nobody gets it right the first time n Development full of surprises n Good design requires living in sea of changes n Making contracts to ignore change will never eliminate the need for change

19. Design Process Problems (cont.) by Gould n People will still make mistakes using best designed system n Designers need good tools n Must have behavioral design goals like performance design goals

20. Five Commandments in Designing for People 1.Gain complete understanding of users & their tasks 2.Solicit early & ongoing user involvement 3.Perform rapid prototyping and testing 4.Modify and iterate the design as much as necessary 5.Integrate the design of all the system components

21. Design Team n Balanced design team with expertise in: –development –human factors –visual design –usability assessment –documentation –training

22. Design Team n Select team who can effectively –work together –communicate with each other n Keep team together –locate in close proximity

23. Usability n Little to do with icons or flashy graphics n Starting goal: working the computer –let users get work done without spending a lot of time dealing with working the computer n Additional goal: work better and faster with –help users work better and faster with application than without it.

24. Development of Guidelines n Designers of Lisa & Macintosh –importance of good user interface design –publish ideas to others »development of set of human interface guidelines

25. Development of Guidelines n Most important guidelines were the design principles -- universal n Design principles not tied to platform –based on human abilities and psychology –not dependent on conventions of a particular platform

26. 10 Basic Principles (drove design of Macintosh) n Consistency –allows users to learn something once and then apply it again & again n Aesthetic integrity –good design is understated –user can concentrate on information/content

27. 10 Basic Principles (drove design of Macintosh) n Perceived stability –let user control changes –for any change user should know about and okay n See-and-point, Not Remember-and-type n Direct manipulation –lets user feel as if they directly control the world inside the computer

28. 10 Basic Principles (drove design of Macintosh) n Metaphors from the real world –way to make an interface understandable to new users n WYSIWYG -- What You See Is What You Get –not something like ^bThis is a bold phrase^b –but like this -- This is a bold phrase

29. 10 Basic Principles (drove design of Macintosh) n Feedback and dialog –never keep the user guessing –study showed: when no visible response to button click user assumed machine was hung and restarted it in 8.5 seconds n Forgiveness –humans make mistakes –computer should allow for human mistakes n User control

30. Additions to the Basics n Constraints n Intelligence n Elegance n Transparency n Attention to detail

31. Additions to the Basics: Constraints n Reduce complexity n Example of Japanese vending machine –lead customer through the process –general to specifics »notify when new mail arrives? »If yes, then -- beep, put up a notifier window, or both

32. Additions to the Basics: Intelligence n Augment constraints with intelligence so computer helps user to make proper choice n Minor tasks taken care of –formatting phone numbers –option of automatically aligning objects n Know when to stop –let users override or turn off features

33. Additions to the Basics: Elegance n Elegant products –don’t do everything –what they do, they do extremely well –and they make it look easy n Meet users requirements/needs in most simple and straightforward way n Just say “No” -- to feature creep n 80/20 solution

34. Additions to the Basics: Transparency n Interface transparent when user doesn’t really notice or think about it not because user can’t see it n Hide features in plain sight -- no need to search for a particular feature n Avoid technical jargon (computerese) –“SysErr Code: -34” or “The disk is full”

35. Additions to the Basics: Transparency n Keep status messages simple –general statement about what’s happening –concise statements n Don’t interrupt (or if you must do it quietly) –problem when background process (like printer out of paper) interrupts a foreground task (writing paper/developing slide) »results in increase in stress level for user performing foreground task

36. Additions to the Basics: Attention to Detail n Sentence in text: –“We worry about all this… because your users notice it to.” n What is the author’s credibility? The text’s?

37. Additions to the Basics: Attention to Detail n Details can destroy user’s faith/confidence in an application n Development problems don’t concern the user -- n The user wants a program that looks and works exactly the way it should