Interaction Design

Transcript

1. Interaction Design 15-237 Cross-Platform Mobile Web Apps Spring 2013
2. Interaction Design is the design of how things are used and how they behave
3. Affordance a visual cue for what you can do and how
7. Providing Affordance 1. Skeuomorphism: Take advantage of people's experience with real objects; consider modeling visuals after them 2. Platform consistency: Take advantage of people's experience with other apps; use appropriate standard UI elements (buttons, sliders, etc.) 3. Internal consistency: Take advantage of people's experience with your app Don't tell. Show. Good affordance allows users to know what to do without an explicit explanation.
8. Feedback a visual cue for what happened after you did something
10. Providing Feedback 1. Use animations Ex: Page navigation in iOS 2. Change colors, icons, etc. Ex: buttons 3. Play sounds Good feedback ensures that users know the status of the application at all times.
14. Don't forget about indicating ongoing processes, especially if they're blocking (as in Shazam, on right).
15. Design Patterns you don't have to reinvent the wheel all the time; use established solutions pttrns.com
18. Shortcuts Consider providing shortcuts for power users. Gestures are often a good way to do this in mobile apps. Ex: iOS swipe to delete
19. Errors Make it difficult to make errors and easy to recover from them
20. But how should we actually do interaction design? (or: what can we do for next week's deadline?) User-Centered Design is a mindset towards design to address the needs of users
21. You don't know your user's needs. In fact, they might not, either.
22. Iterative Design 1. Research 2. Design 3. Evaluate
23. Research Methods Competitive Analysis find similar existing applications and analyze their feature sets Contextual Inquiry a combination of an interview and an observation of users in the context of them doing their usual tasks Persona based on research, create a bio for an imaginary target user
24. Competitive Analysis
26. Contextual Inquiry
27. Persona
28. Design Methods Navigation Map a flow chart of the screens in the application and how the user could navigate between them Storyboard a comic about your persona using the application Wireframe a rough sketch of an interface focusing on key elements Prototype an incomplete, usually limited scope version of the application
29. Navigation Map
31. Storyboarding
32. Wireframing
33. Prototyping (paper)
34. Prototyping (tool)
35. Prototyping (code)
36. Prototyping Resources Placeholder images: Placeholder text: placehold.it lipsum.com
37. Evaluation Methods Think-Aloud Interviews give someone a task to complete with a prototype and ask them to voice their thoughts as they go Heuristic Evaluation basically, review our interaction design principles against the prototype see Jakob Neilsen's heuristics
38. Think-Aloud Interviews
39. That's all! Images from http://pttrns.com/ http://answers.oreilly.com/ http://hollybrosnahan.com/portfolio/venture/