1 / 36

Human-Computer Interaction IS 588 Spring 2007 Week 9

Human-Computer Interaction IS 588 Spring 2007 Week 9. Dr. Dania Bilal Dr. Lorraine Normore. Week 9 Overview. Physical design Interaction styles Interface components/devices Navigation. Interaction styles. Command line Menu-based Natural language Question and answer

munro
Download Presentation

Human-Computer Interaction IS 588 Spring 2007 Week 9

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. 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

More Related