1 / 35

UI Hall of Fame or Hall of Shame?

UI Hall of Fame or Hall of Shame?. UI Hall of Shame!. How do you cancel?. 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

channing-marcel
Download Presentation

UI Hall of Fame or Hall of Shame?

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

More Related