Successfully reported this slideshow.
Your SlideShare is downloading. ×

Designing Interactions Downloadable PDF Doc

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 38 Ad

More Related Content

Similar to Designing Interactions Downloadable PDF Doc (20)

Recently uploaded (20)

Advertisement

Designing Interactions Downloadable PDF Doc

  1. 1. I Interact, Therefore I Am by Connie Malamed Modified presentation given to the Society of News Design, September 2010
  2. 2. What’s Ahead The Power of Interaction Creating Positive Experiences Thinking About Design
  3. 3. THE POWER OF INTERACTION
  4. 4. Interactivity in volves a two-way d exchange of engagement an response. It is immediate and in real-time.
  5. 5. When users take action, it helps to make information meaningful
  6. 6. What does interactivity offer users? Layered content: Social experiences: •  Nonlinear access to •  Comments information •  Discussion •  Access to information •  Sharing at different levels •  Control of information flow
  7. 7. What does interactivity offer users? Learning opportunities to: Ways to explore: •  Build a foundation •  Creating new ways of •  Construct meaning thinking •  Restructure knowledge •  Problem-solving •  Gaining insights
  8. 8. Advantages To Designers For designers, interactivity offers ways to: •  Expand a story’s breadth and depth •  Visualize data in unique ways •  Get users involved and engaged •  Add multimedia elements •  Limit design tradeoffs
  9. 9. Some cognitive scientists say that simple interactions with the world can dramatically improve cognitive performance. Two examples follow ...
  10. 10. Speech gestures show the body is intimately tied up with thinking
  11. 11. We use gestures to conceptually plan and produce speech. Gesturing lightens our cognitive load, showing the deep connection between mind and body.
  12. 12. Our brain extends to the tools we use
  13. 13. When we use an input device, we integrate this sensory information into a representation of the current state of the body. The sense of our body extends to our tools.
  14. 14. Embodied cognition
  15. 15. We are inseparably linked to the experiences of having a body located in a 3D world. Interaction is not just for doing things but for understanding things.
  16. 16. CREATING POSITIVE EXPERIENCES
  17. 17. What complaints do you hear? People complain when they can’t figure out how to use a website or software products. What kind of complaints do you hear?
  18. 18. Here are some common ones … This doesn’t do I keep I’m not sure what it’s what to do. getting supposed to do. errors. What does it This doesn’t mean? I don’t How do I get have the understand. back to the information I first screen? want. Understanding mental models can help stop the complaints!
  19. 19. n A mental mod el is a representatio t of something in the real world tha explain behavior. we use to predict or
  20. 20. How are mental models built? Mental models are based on: •  Prior experience with something similar •  What you’ve read or heard •  Direct experience
  21. 21. I heard a lecturer say that our mental models are like a subway map, because of their minimal amount of detail.
  22. 22. User’s Mental Model Mental models are: •  Unstable •  Subject to change •  Able to get revised •  Simpler than reality Mental models define how we approach problems and solve them.
  23. 23. Conceptual or Design Model There’s another kind of model that’s important. It’s how the designer represents the program to the user through the interface. It’s known as the Conceptual or Design Model.
  24. 24. = Conceptual Model User’s Mental Model When the conceptual model of the system is close to matching the user’s mental model, an interaction is considered easier to use.
  25. 25. = Conceptual Model User’s Mental Model When the conceptual model of the system doesn’t come close to matching the user’s mental model, users make errors and feel frustrated.
  26. 26. This doesn’t mean you can’t innovate and try something new!
  27. 27. If you do innovate: •  Make sure it’s a good fit for your audience and content. •  Provide excellent but simple user instructions. Make sure your designs are usable!
  28. 28. Usability “The effectivene ss, efficiency and satisfaction wit h which specified users achieve s pecified goals in a ” partic ular environment. ---ISO, 1998
  29. 29. Usability “Usability is composed of the learnability, reta inability, efficiency of use, and use r satisfaction of a product.” Lockwood, 1999 ---Cosantine and
  30. 30. Usability K!” KE ME THIN2005 “DON’T MA ---Steve Krug,
  31. 31. High Usability Example This well-received interaction from the Washington Post used the conceptual model of a form. One reason it may have been successful is because most people are familiar with forms.
  32. 32. THINKING ABOUT DESIGN
  33. 33. BEHAVIORAL VISUAL CONCEPTUAL Think through these three dimensions of interactive design.
  34. 34. The Conceptual Dimension 1.  Define the problem space thoroughly 2.  Consider timing and pacing of information flow 3.  Consider using metaphors from common objects in the environment
  35. 35. The Behavioral Dimension 1.  Map out actions and reactions (you may want to use mind maps for this) 2.  Provide feedback for every action the user takes, in the form of a change on the screen 3.  Consider whether interactions will allow for discovery or will be locked
  36. 36. The Visual Dimension 1.  Consider whether the user interface will be visible from the start or whether users will need to find it (visible is generally best) 2.  Consider where the user interface will be positioned (group elements to show relationships) 3.  Keep the user interface consistent throughout the interaction
  37. 37. Key Points •  Interactivity can improve cognitive performance •  Align the conceptual model of your interface with the user’s mental model •  Organize design around conceptual, behavioral and visual considerations
  38. 38. For More … Book: Visual Language For Designers Graphics Blog: understandinggraphics.com eLearning Blog: theelearningcoach.com Twitter: @cmalamed FB: www.facebook.com/understandgraphics Biz Site: malamedconsulting.com

×