UI Hall of Fame or Hall of Shame? - PowerPoint PPT Presentation

ui hall of fame or hall of shame n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
UI Hall of Fame or Hall of Shame? PowerPoint Presentation
Download Presentation
UI Hall of Fame or Hall of Shame?

play fullscreen
1 / 35
UI Hall of Fame or Hall of Shame?
350 Views
Download Presentation
channing-marcel
Download Presentation

UI Hall of Fame or Hall of Shame?

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

  1. UI Hall of Fame or Hall of Shame?

  2. UI Hall of Shame! • How do you cancel?

  3. Human-Computer Interaction (HCI) • Human • the end-user of a program • the others in the organization • Computer • the machine the program runs on • Interaction • the user tells the computer what they want • the computer communicates results

  4. User Interfaces • Part of a software program that allows • user to interact with computer • user to carry out their task • HCI = design, prototyping, evaluation, and implementation of user interfaces (UIs)

  5. Bad User Interfaces

  6. Bad User Interfaces • Hard to tell the difference between the two icons and names

  7. Design Evaluate Prototype UI Design Cycle

  8. User-centered Design “Know thy User” • Cognitive abilities • perception • physical manipulation • memory • Organizational / job abilities • Keep users involved throughout project

  9. UI Hall of Fame or Shame? • View menu from Visual Forms • two options: • Non-Visual Objects (e.g., formatting labels) • Source...

  10. UI Hall of Shame • Terminology • what are “Non-Visual Objects” & how can you view them? • why not “Formatting Labels” instead?

  11. Attributes of Good UIs ? • Invisible • Minimal training required • easy to learn • High transfer of training • easy to remember • Predictable • Few errors • Easy to recover from errors

  12. Attributes of Good UIs (cont.) • Allow people perform real tasks well • efficient • Flexible • Seem “intelligent” • “do the right thing” • People like it “It is easy to make things hard. It is hard to make things easy.” -- A. Chapanis, ‘82

  13. From IBM’s RealCD application Good Graphic Design & Color Choice • Appropriately direct attention. How? • use color and layout • black on black is a bad color choice • shouldn’t need label to tell you this is a button

  14. A Toolbar from MS Word Good Graphic Design & Color Choice (cont.) • Group related objects • alignment & spacing • decorations • Balance & white space • Few fonts & colors (5 to 7 colors max.) • Remember color deficiency (8% of males)

  15. Provide Feedback

  16. Feedback Placement • Where the eyes are • insertion point • screen cursor • Audio output • sounds • voice • when might this not be a good idea?

  17. Error Prevention • Why? • avoid “fear of failure” • allow faster work • Suppress unavailable commands • Confirm dangerous actions

  18. UI Hall of Fame or Shame? • Dialog box • ask if you want to delete • yes (green) • no (red) • Problems? • R-G color deficiency • cultural mismatch • Western • green good • red bad • Eastern & others differ

  19. Can you guess the woman’s age? Keep looking. Visual Illusions

  20. Color Guidelines • Avoid simultaneous display of highly saturated, spectrally extreme colors • Opponent colors go well together • (red & green) or (yellow & blue)

  21. Pick Non-adjacent Colors on the Hue Circle

  22. Conceptual Models • Mental representation of how object works & how interface controls effect it • People have preconceived models that you may not be able to change • dragging to trash deletes • Interface must communicate model • online help / documentation can help, but shouldn’t be necessary

  23. Visual Clues (affordances) • Well-designed objects have affordances • visible clues to their operation • Poorly-designed objects • no clues • false clues • teapot with handle and spout on the same side

  24. User’s Model Design Model System Image Design Model & User’s Model • Users gets model from experience & usage • through system image • What if the two models don’t match?

  25. Design Guides • Provide good conceptual model • user wants to understand how interface control impacts object • Make things visible • if object has function, interface should show it • Map interface controls to user’s model • Provide feedback • what you see is what you get!

  26. Interface Hall of Shame or Fame? • For setting cache size in MS Internet Explorer (since changed) • Slider from 1% to 100%

  27. Interface Hall of Shame or Fame? • What if you have a big disk? (e.g., 40GB • forced to have at least a 400MB cache • takes away control from the user • What if they don’t know their disk size?

  28. Why Model Human Performance? • To test understanding • To predict influence of new technology

  29. Long-term Memory Working Memory sensory buffers (Dix) Visual Image Store Auditory Image Store Eyes Motor Processor Cognitive Processor Perceptual Processor Ears Fingers, etc. The Model Human Processor • Developed by Card, Moran, & Newell (‘83)

  30. What is User-centered Design? • Developers working with target users • help define what the system will do & how • lots of iterative exploration & feedback • Think of the world in users terms • user & customer not the same person ->? • don’t design for manager’s work process • Understanding work process • points where humans and computers intersect • Not technology-centered/feature driven

  31. What is Usability? • Ease of learning • faster the second time and so on... • Recall • remember how from one session to the next • Productivity • perform tasks quickly and efficiently • Minimal error rates • if they occur, good feedback so user can recover • High user satisfaction • confident of success

  32. Understanding the User • How do your users work? • task analysis, interviews, & observation • How do your users think? • understand human cognition • observe users performing tasks • How do your users interact with UIs? • observe!

  33. Involving the User • Users help designers learn • what is involved in their jobs • what tools they use • i.e, what they do • Developers reveal technical capabilities • builds rapport & an idea of what is possible • Users try prototype & comment on it • developers make incremental changes & iterate

  34. Observation Techniques • In the work place • Use recording technologies • notebooks • tape recorders • video cameras • Ask users to think out loud while working • look for job-specific procedures / terminology • Show users transcript & ask about it

  35. Summary • User-centered design is different than traditional methodologies • Leads to solving problems up front (cheaper) • Know thy user & involve them in design • Evaluate this web-site Example