HCI User Interface - PowerPoint PPT Presentation

hci user interface n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HCI User Interface PowerPoint Presentation
Download Presentation
HCI User Interface

play fullscreen
1 / 88
HCI User Interface
151 Views
Download Presentation
elpida
Download Presentation

HCI User Interface

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. HCIUser Interface

  2. Why HCI?

  3. What is an interface? the place at which independent and often unrelated systems meet and act on or communicate with each other. — Meriam-Webster

  4. Why do we remember only the bad? • A good interface should be transparent • Bad interfaces cause user frustration • “What was this product designer thinking?” GOOD BAD

  5. The First Graphical User Interfaces Apple Computer’s Lisa GUI (1983) XEROX’s GUI (1981) Microsoft’s Window (1985)

  6. A Brief History of User Interfaces • Batch-processing • No interactive capabilities • All user input specified in advance (punch cards, ...) • All system output collected at end of program run (printouts,...) • -> Applications have no user interface component distinguishable from File I/O • Job Control Languages (example: IBM3090–JCL, anyone?): specify job and parameters

  7. A Brief History of User Interfaces • Time-sharing Systems • Command-line based interaction with simple terminal • Shorter turnaround (per-line), but similar program structure • Example: still visible in Unix commands • Full-screen textual interfaces • Shorter turnaround (per-character) • Interaction starts to feel "real-time" • -> Applications receive UI input and react immediately in main "loop" (threading becomes important)

  8. A Brief History of User Interfaces • Menu-based systems • Discover "Read & Select" over "Memorize & Type" advantage • Still text-based! • Example: UCSD Pascal Development Environment • -> Applications have explicit UI component • But: choices are limited to a particular menu item at a time (hierarchical selection)

  9. A Brief History of User Interfaces • Graphical User Interface Systems • From character generator to bitmap display • Pointing devices in addition to keyboard -> Event-based program structure • Most dramatic paradigm shift for application development • User is "in control" • Application only reacts to user (or system) events • Event handling

  10. Conceptual model • Need to first think about how the system will appear to users (i.e. how they will understand it) • A conceptual model is a high level description of: • “the proposed system in terms of a set of integrated ideas and concepts about what it should do, behave and look like, that will be understandable by the users in the manner intended”

  11. Physical, perceptual, and conceptual aspects of the user interface

  12. Interface • User interfaces handle inputs and outputs that involve the system user directly • Interactions with the user and computer (HCI) can be modeled with dialog designs • User-interface design occurs in each iteration

  13. Well, “…it could be better …”

  14. “Better …”

  15. Good Designs => Usable Systems • Work the way the user thinks they should • Allows the user to focus on task at hand and not worry about the underlying technology and interaction technology • Minimize user errors • Promote user satisfaction (users should feel that they are accomplishing more with the system than without the system)

  16. What Is “Design” in HCI? • It is a process: • a goal-directed problem solving activity informed by intended use, target domain, materials, cost, and feasibility • a creative activity • a decision-making activity to balance trade-offs • It is a representation: • a plan for development • a set of alternatives & successive elaborations

  17. what is design? achieving goals within constraints • goals - purpose • who is it for, why do they want it • constraints • materials, platforms • trade-offs

  18. Graphical Representation • From the design point of view • Screen  two-dimensional • Objects  two-dimensional/three-dimensional • Representation of 2D objects on a 2D screen • Straightforward graphics is enough • Representation of 3D objects on a 2D screen • Required special techniques • Human vision psychology is required to be considered

  19. Four basic activities • There are four basic activities in Interaction Design: • 1. Identifying needs and establishing requirements • 2. Developing alternative designs • 3. Building interactive versions of the designs • 4. Evaluating designs

  20. Some practical issues • Who are the users? • What are ‘needs’? • Where do alternatives come from? • How do you choose among alternatives?

  21. What are the users’ capabilities? • Humans vary in many dimensions: • size of hands may affect the size and positioning of input buttons • motor abilities may affect the suitability of certain input and output devices • strength - a child’s toy requires little strength to operate, but greater strength to change batteries • disabilities(e.g. sight, hearing, dexterity)

  22. What are ‘needs’? • Users rarely know what is possible • Users can’t tell you what they ‘need’ to help them achieve their goals • Instead, look at existing tasks: • their context • what information do they require? • who collaborates to achieve the task? • why is the task achieved the way it is? • Envisioned tasks: • can be rooted in existing behaviour • can be described as future scenarios

  23. What is interaction design? • Designing interactive products to support people in their everyday and working lives • Sharp, Rogers and Preece (2002) • The design of spaces for human communication and interaction • Winograd (1997)

  24. Testing prototypes to choose among alternatives

  25. Many kinds of interaction styles available… • Command line interface • Speech • Data-entry • Form fill-in • Query • Graphical • Web • Pen • Augmented reality • three–dimensional interfaces

  26. UI implementation • Console applications (CUI’s) • Command-line and natural language interfaces • Interaction devises (input & output devises) • User interfaces for virtual environments • Graphical User Interfaces (GUI’s) • Window systems, toolkits, frameworks • GUI builders

  27. Command line interface • Way of expressing instructions to the computer directly • function keys, single characters, short abbreviations, whole words, or a combination • Exact spelling • suitable for repetitive tasks • better for expert users than novices • offers direct access to system functionality • command names/abbreviations should be meaningful! • Hard to remember Typical example: the Unix system

  28. Linux/UNIX:Shell Command Language

  29. Windows XP “DOS” Shell Command Language

  30. Natural language • Familiar to user • speech recognition or typed natural language • Problems • vague • ambiguous • hard to do well! • Solutions • try to understand a subset • pick on key words

  31. Query interfaces • Question/answer interfaces • user led through interaction via series of questions • suitable for novice users but restricted functionality • often used in information systems • Query languages (e.g. SQL) • used to retrieve information from database • requires understanding of database structure and language syntax, hence requires some expertise

  32. Form-fills • Primarily for data entry or data retrieval • Screen like paper form. • Data put in relevant place • Requires • good design • obvious correctionfacilities

  33. Three dimensional interfaces • virtual reality • ‘ordinary’ window systems • highlighting • visual affordance • indiscriminate usejust confusing! • 3D workspaces • use for extra virtual space • light and occlusion give depth • distance effects flat buttons … click me! … or sculptured

  34. Graphical User Interface (GUI) • Standard elements in GUI based direct manipulation • Bitmapped screen • WIMP • Windows • Icon • Menus • Pointers

  35. Graphical User Interface (GUI) • Standard elements in GUI based direct manipulation • WIMP • Windows • Multiple windows • Tiled vs. overlapping • Reduce and restore • Move • Resize • Scroll contents

  36. Icons • small picture or image • represents some object in the interface • often a window or action • windows can be closed down (iconised) • small representation if many accessible windows • icons can be many and various • highly stylized • realistic representations.

  37. Icons • Icons get used for lots of different things • Representing objects • Files • Tools • Representing commands • Open • Undo • ..often shortcuts to menu commands that have no icon

  38. Icons • There are guidelines for these too • Apple: • Design and composition should indicate purpose • Perspective should agree with real-life interactions • Differentiate them from other UI elements • Microsoft: • Colors that complement the XP design • Perspective is either at a certain angle, or straight-on • Everyday objects should look modern

  39. Microsoft Icon Composition • Exceptions: • Document icons • Symbols such as warning • Single objects • Objects not recognizable at an angle

  40. Apple Icon Composition • Icon “genres” • Application: media (paper) and tool (pen) • Utility: straight perspective, subdued colors • ..also document, plug-in, toolbar

  41. Dialog Styles • Q & A • Old style. • Used with setup. • Answer selected (menu).

  42. Graphical User Interface (GUI) • Standard elements in GUI based direct manipulation • WIMP • Pointers • Property sheets/dialogue boxes • Check box • Selection / radio buttons • Fill-in blanks • Pallets • Tool bars • etc.

  43. Pointers • important component • WIMP style relies on pointing and selecting things • uses mouse, trackpad, joystick, trackball, cursor keys or keyboard shortcuts • wide variety of graphical images

  44. Graphical User Interface (GUI) • Standard elements in GUI based direct manipulation • WIMP • Menus • Pull-down (from bar or top) • Pop-up/contextual (from item)

  45. Menus • Set of options displayed on the screen • Options visible • less recall - easier to use • rely on recognition so names should be meaningful • Selection by: • numbers, letters, arrow keys, mouse • combination (e.g. mouse plus accelerators) • Often options hierarchically grouped • sensible grouping is needed • Restricted form of full WIMP system

  46. Menu Selection