1 / 44

Course summary, Q3 review

This course covers the principles of interaction design, usability testing, and mobile user interfaces. Learn about heuristic evaluation, think-alouds, audio in UIs, and UI metaphors. Understand the importance of accessibility in design.

edwinm
Download Presentation

Course summary, Q3 review

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. Course summary,Q3 review IS 403: User Interface Design Shaun Kane

  2. Admin Assignment 9 extended from Friday until Tuesday (our last class) Will accept resubmissions until Thursday, December 12 Q2 back at end of class

  3. Upcoming events • Thursday: • Quiz 3 • Monday 1:59pm: • A10: 3.5 minute presentation on your project • Tuesday: • Assignment 9 (final design) due • Assignment 10 prez • Participation form (optional, by email) • Wednesday: FREEDOM!

  4. Quiz 3 review

  5. Quiz 3 preparation • Covers content since the last quiz • Interaction design • Heuristic evaluation • Usability testing • Mobile UIs • Accessibility • Audio and UI metaphors

  6. Q3: Interaction design • Principles of interaction design • Web site layout features (e.g. navigation) • Norman • Gulf of execution, evaluation • Affordances, mapping, system status, feedback

  7. Q3: Heuristic evaluation • Usability heuristics • What are they? • What a heuristic evaluation is

  8. Q3: Usability testing Guidelines for conducting a think-aloud What a think-aloud is Krug on user testing (not covered in class)

  9. Q3: Today’s class Principles of audio UIs UI metaphors (basics)

  10. Q3: Mobile UIs Reading: Cui (what they did, high level findings) How mobile devices are different Effects of mobility (at a high level) Responsive web design: what it is

  11. Q3: Accessibility What accessibility is Types of disabilities covered in class (and how to accommodate them) Assistive technology (screen readers and magnifiers)

  12. Q3: Today’s class Summary Using audio in UIs: when and how? UI metaphors (whatever we get to today)

  13. Today Summary of class topics Audio UI overview UI metaphors

  14. Summary What have you learned from this class? What are the big ideas?

  15. Big ideas Design methods Design principles

  16. Design methods User research Ideate Prototype Evaluate Done! User-centered design process Research methods: interviews, affinity diagrams, observation Ideation: sketching, storyboarding Prototyping Testing

  17. Design principles • Principles of visual design • Grids, CARP, type rules, color theory • Principles of interaction design • Mapping, feedback, affordance • Accessibility / universal design

  18. The secret • These principles can be applied across many domains • Designing audio • Designing physical interfaces • Designing databases • Programming • …

  19. Quick example • Designing for audio UIs • What happens when we design for a device with no screen?!

  20. Case study: Roomba

  21. Applying design principles to audio feedback

  22. Applying design principles to audio feedback Contrast: major vs. minor key, tempo, volume, Repetition: finding dead roomba Mapping: ascending, descending Feedback: button press boop Visibility: repeated light, beep Recognition vs. recall: speech

  23. And finally…Metaphors

  24. What’s a metaphor? Comparison between two things Mountain of grading

  25. Metaphors Metaphors: Use of concepts and properties which are already familiar to the user Usually interfaces that tie back to physical artifacts Why are they useful?

  26. Metaphors • Why are they useful? • Can help “jump start” user’s conceptual models • “Instant knowledge” about how to interact with UI • A way to introduce new technology

  27. Common UI metaphors? • Desktop computer • Mouse -> eats stuff, scares people, makes holes • Inbox • Facebook • “Like” • Poke • Send gifts, post on walls • Friends

  28. Metaphor: Magic Cap 1994 • Desktop or hallway metaphor • Information is on paper: letters, files, drawers, roladex etc

  29. “Skeuomorphism” Using visual identity of a physical object to convey a metaphor

  30. Microsoft Bob, 1995 http://www.telecommander.com/pics/links/application%20software/microsoft/Microsoft_Bob_1_0/Microsoft_Bob_1_0.htm

  31. Microsoft Bob, 1995

  32. Southwest Airlines

  33. Examples of metaphors we see? • Desktop • Folders • Documents • Trash can/Recycle bin • Accessories: • Calculator • Clock • Notepad

  34. Shallow Metaphor • Depth of the metaphor has to do with how much of the metaphor you are capitalizing on • Shallow metaphors make use of the one most recognizable aspects of something • Example: Search dog (XP) • Dogs are good at fetching things, so use image of dog under search box • But dogs do other things: • Chew newspapers  eat files • Not return object to you  share your search with your friends • Other ideas?

  35. Broken/Inappropriate Metaphor • Not informative, may just be confusing • Example: Use a cat (cats don’t fetch on command!) • Why is a paper clip talking to me?

  36. Mixed Metaphor • When two or more different metaphors coexist • May seem related, but not actually • Can be confusing • How do you eject a USB stick or CD in Mac OS X? • Trashcan metaphor: put items you are done with in the trashcan • Empty trash when you are done to delete them forever • What happens when I drag my USB stick to the trashcan?

  37. What about Twitter’s metaphors?

  38. When to use metaphor? • Challenges: • Cute vs. Functional • Shallow, mixed, or broken metaphors make understanding metaphors more difficult • Can prematurely constrain interfaces • But...with the right metaphor, learning interfaces can be much easier

  39. Metaphor Guidelines Do use metaphor sparingly, carefully, and respectfully. Do take metaphors far enough—but don’t take them too far. Do make metaphors culturally appropriate. Do make metaphors brand appropriate. Do reinforce metaphors with visuals and media. Do test your metaphors. Full list of Dos and Don’ts: http://www.uxmatters.com/mt/archives/2008/10/the-magic-of-metaphor.php

  40. Good Examples of Metaphor Bump Top (CHI, 2006) http://www.youtube.com/watch?v=M0ODskdEPnQ Fold n’ Drop (UIST, 2004) http://www.youtube.com/watch?v=VAWnIGo9Kro

  41. Activity (time permitting) Pair up with a partner Find examples of good and bad metaphors on your mobile device Bonus: find examples of good/bad audio design

  42. Upcoming classes Thursday: quiz :( Tuesday: presentations :D

  43. Q2 overview Mean 85.6 Median 88.3 Max 106.7 Min 55.0 SD 15.2 Up slightly from Q1, but spread is larger

More Related