Human-Computer Interaction IS 588 Spring 2007 Week 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