Human-Computer Interaction IS 588 Spring 2007 Week 9

1. Human-Computer InteractionIS 588 Spring 2007Week 9 Dr. Dania Bilal Dr. Lorraine Normore

2. Week 9 Overview • Physical design • Interaction styles • Interface components/devices • Navigation

3. Interaction styles • Command line • Menu-based • Natural language • Question and answer • Form fills and spreadsheets • Direct manipulation • Point and click • WIMP

4. Command line interfaces • The original UI • Still widely used for program development • Good choice for expert users • Flexible, fast, user in control, powerful • Components • Command, parameters, keywords, equated keywords • Usability issues: • word choice, abbreviations, consistency across parameters and across commands

5. Menu-based interfaces • The original infrequent/inexperienced user interface • Components • Lists of options (text or graphic), selection mechanism, navigation, information architecture • Usability affected by • Allows explanation • Depends on recognition rather than recall • Simplicity, structure

6. Natural language interfaces • Most “natural” • Can be multi-modal (visual, auditory, haptic) • Components • Speech input, typed text, gesture recognition • Issues • Hard to do • Usability issues • Success rate which may be dependent on restricted vocabulary or training • May require feedback/correction cycle

7. Question and answer • Structured dialog through specific domain • Examples: questionnaires, wizards, programmed instruction • Components • Restricted set of options, limited input/selection tools, intelligent branching • Usability issues • Easy to use but • Limited functionality and power

8. Form-fills, spreadsheets • Data entry • Form-fill components • Multiple fields on full-screen display • Multiple data entry types • Spreadsheets • originally numeric grid with calculation, now everything • Spreadsheet components • Values, formulas, text • Usability issues • Grid design, navigation, data types

9. Direct manipulation • Components • Point/click sensitive places • Ability to move objects directly • Cursor, touchscreen input • Clipboards, toolboxes, templates, palettes • Icons, graphics • Usability issues • Speed, icon design, flexibility

10. Point-and-click • Basic web UI • Examples • Multimedia, 3D, games • Hypermedia • A direct manipulation variant • Sensitive point indicators through highlighting, shading, hover • Ability to navigate via hyperlinks • Usability issues • Lack of clear UI definition, navigation

11. WIMP • The current “default” direct manipulation interface across applications and platforms • “Windows, Icons, Menus, Pointers” • “Windows, Icons, Mouse, Pulldowns”

12. Activity • Which do you use and why? • Data: chemical graphics drawing program • Contexts • Chemists • Information specialists • Trained keyboarders

13. Interface components/devices • Windows • Icons • Menus • Pointers • Text boxes • Lists • Choice tools

14. Windows • “Independent terminals” • Multi-tasking: simultaneous presence of more than one application • Can be moved, sized, minimized, restored • Overlapping vs. tiled • Cascade vs. replace content • Components • Menu bars, title bars, scrollbars, handles

15. Icons • Graphic representation of application, window, command, parameters • May be representational, have cultural reference or be abstract • May be part of other functions (cf. minimizing) • May include no label, constant label or on hover • Components • Graphic object, sensitive area, scalability/sizing, labeling • Issues • Number, recognizability, aesthetics, scalability

16. Menus • Types • Application • Menu/toolbars • Pop-ups • Including dialog boxes • Pull-downs, dropdowns

17. Pointers • Cursors • For location • For selection • Indicator of “mode” (insert vs. select vs. rotate…) • Components • Icons, hot spots, motor response to activate

18. Text boxes • For free-form input • Size limits • Multi-line vs. marquee • Usability issues • Size limits, screen demands on readability

19. Lists • Shows options • Can be variable length text • Styles • Fully deployed • Submenus, cascading • Usability issues • Size, recognizability, styles

20. Choice tools • Buttons • Checkboxes • Radio buttons • Issue: hyperlinks

21. Choosing among interface devices • Appropriateness to the task • Appropriateness to the user • Nature of the “experience” • Designing for understandability and usability

22. Activity • Data: date entry • Issue: text box, pulldown(s), calendar • Which do you use and why? • Contexts • Airline reservation system • Class signup system • Art gallery or museum search system

23. Visual interface design* • Principles • Avoid visual noise and clutter • Distinguish and organize elements • Provide visual structure and flow at all levels • Use cohesive, consistent and contextually appropriate imagery • Integrate style and function comprehensively and purposefully * Additional source: A. Cooper & R. Reimann. About Face 2.0. Indianapolis: Wiley, 2003.

24. Avoid visual noise and clutter • Especially important for non-entertainment interfaces • Avoid visual elements that do not directly communicate software function and behavior • Use simple geometric forms, minimal contrast and less-saturated colors • If multiple elements serve a similar purpose, make them visually similar (size, shape, texture, color) • Why? Minimize cognitive load, improve response time

25. Distinguish and organize elements • Make controls distinguishable visually • Use color, size to distinguish the prominence of groups of elements • Organization may be based on function, sequential order, frequency of use, error prevention

26. Provide visual structure and flow at all levels • Align group elements vertically and horizontally • Includes labels, sets of controls within and outside of subunits in the display • Use a grid structure to support functional flow, identity of top level and low level elements • Where possible, use symmetry and balance to organize the display • Use white space and simple separating lines to create order

27. Use cohesive, consistent and contextually appropriate imagery • Use function-oriented icons • Represent the object • Be visually simple even though they can be photo-realistic • Reflect cultural differences • Use text to communicate setting or state, use visual elements to show behavior, results

28. Integrate style and function comprehensively and purposefully • Make visual brand consistent with the function of the application • Use stylistic features to improve the experience with the product, especially for educational, entertainment products • Build “first impression”

29. Activity: Evaluate visual design

30. Navigation • What does it mean • Consider the real world

31. Navigation • Navigation and screen design • The importance of era • Standard screen, application/site organization • When era doesn’t truly matter: above the fold! • Navigation types • Organizational structures • Navigation elements • Navigation documentation

32. Navigation types • Between windows or screens • Between panes within a window • Between tools or menus in a pane • Within a pane/frame • Scrolling • Panning • Zooming • Linking

33. Organizational structures • Types • Hierarchies • Depth and breadth issues • Networks • Linked pages • Piles • Model • The organization • The application structure • User tasks

34. Navigation elements • Browser navigation • Back and forward arrows • History • Bookmarks • Contextual features • Tabbed user interfaces • Breadcrumbs • Navigation bars (“nav bars”) • Site maps • Indexes • Links (ad hoc navigation)

35. Navigation documentation • Text descriptions • Graphical descriptions • Flow charts • Wire frames

36. In conclusion • Next week • User interface principles/guidelines/standards • Evaluation, part one