SlideShare a Scribd company logo
I Interact, Therefore I Am
                                           by Connie Malamed
    Modified presentation given to the Society of News Design, September 2010
What’s Ahead

  The Power of Interaction
Creating Positive Experiences
   Thinking About Design
THE POWER OF
 INTERACTION
Interactivity in volves a two-way
                               d
exchange    of engagement an
 response. It  is immediate and in
 real-time.
When users take
action, it helps to
make information
   meaningful
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
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
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
Some cognitive scientists say that simple
interactions with the world can dramatically
improve cognitive performance.




                          Two examples follow ...
Speech gestures show
the body is intimately
 tied up with thinking
We use gestures to
conceptually plan and
produce speech.
Gesturing lightens our
cognitive load,
showing the deep
connection between
mind and body.
Our brain extends
   to the tools
     we use
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.
Embodied
cognition
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.
CREATING
  POSITIVE
EXPERIENCES
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?
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!
n
A mental mod el is a representatio
                                   t
of something in the real world tha
                      explain behavior.
we use to predict or
How are mental models built?

Mental models are based on:
 •  Prior experience with something similar
 •  What you’ve read or heard
 •  Direct experience
I heard a lecturer say that our mental models
are like a subway map, because of their
minimal amount of detail.
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.
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.
=
   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.
=
   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.
This doesn’t
mean you can’t
innovate and
try something
new!
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!
Usability


“The effectivene   ss, efficiency and
satisfaction wit h which specified
 users achieve s   pecified goals in a
                            ”
 partic ular environment.
                              ---ISO, 1998
Usability


“Usability is composed of the
learnability, reta inability, efficiency
 of use, and use  r satisfaction of a
product.”                    Lockwood, 1999
            ---Cosantine and
Usability

                    K!”
          KE ME THIN2005
“DON’T MA    ---Steve Krug,
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.
THINKING
ABOUT DESIGN
BEHAVIORAL

                           VISUAL
CONCEPTUAL




                          Think through
                          these three
                          dimensions of
                          interactive
                          design.
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
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
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
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
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

More Related Content

PDF
Visual Explanations for Storytelling
PDF
Supercharge Your Writing for Instructional Design
PPTX
Microsoft.com Usability broken.
PPT
Serious games cwltgm
PDF
Don't let assumptions kill good ideas web con 2021
PPTX
Meta NLP Day 2
PPT
Serious games career quest
PPT
Nlp 2
Visual Explanations for Storytelling
Supercharge Your Writing for Instructional Design
Microsoft.com Usability broken.
Serious games cwltgm
Don't let assumptions kill good ideas web con 2021
Meta NLP Day 2
Serious games career quest
Nlp 2

Similar to Designing Interactions Downloadable PDF Doc (20)

PPTX
Usability and User Experience Training Seminar
PPTX
Interaction design workshop
PDF
LxD - Learner Experience Design
PDF
Web Usability: Making Your Sites More Awesomer
PDF
NYU Web Intensive - Week 3 Class 1
PDF
Principles of Interactive Design
PDF
Website Usability | Day 1
PDF
Introduction to Interaction Design
PDF
User Experience
PDF
Experience the Interface
PPT
Chapter 1 id2e_slides
PDF
chapter_01_5e.pdf
PPT
What Is Interaction Design
PDF
Producing design solutions
PPT
2nd part of Unit 1.ppt
PDF
enhancing-user-experience-through-effective-interaction-design-20231012223329...
PDF
User Experience Workshop
PPT
Chapter-10.pptytfjyjrdjrtjfdthdfrthrdthrd
PPT
Chapter-1 (1).pptdydidydydy6dydyyfydyuyd
PPTX
Ch 1 Introduction to User Interaction Design Mary Margarat
Usability and User Experience Training Seminar
Interaction design workshop
LxD - Learner Experience Design
Web Usability: Making Your Sites More Awesomer
NYU Web Intensive - Week 3 Class 1
Principles of Interactive Design
Website Usability | Day 1
Introduction to Interaction Design
User Experience
Experience the Interface
Chapter 1 id2e_slides
chapter_01_5e.pdf
What Is Interaction Design
Producing design solutions
2nd part of Unit 1.ppt
enhancing-user-experience-through-effective-interaction-design-20231012223329...
User Experience Workshop
Chapter-10.pptytfjyjrdjrtjfdthdfrthrdthrd
Chapter-1 (1).pptdydidydydy6dydyyfydyuyd
Ch 1 Introduction to User Interaction Design Mary Margarat
Ad

Recently uploaded (20)

PPTX
Special finishes, classification and types, explanation
PPTX
rapid fire quiz in your house is your india.pptx
DOCX
The story of the first moon landing.docx
PDF
Skskkxiixijsjsnwkwkaksixindndndjdjdjsjjssk
PDF
Urban Design Final Project-Site Analysis
PPT
UNIT I- Yarn, types, explanation, process
PPTX
An introduction to AI in research and reference management
PDF
Interior Structure and Construction A1 NGYANQI
PPTX
6- Architecture design complete (1).pptx
PPTX
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
PPTX
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
PDF
The Advantages of Working With a Design-Build Studio
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
PPT
Machine printing techniques and plangi dyeing
PPTX
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
PPT
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
PDF
Phone away, tabs closed: No multitasking
PPTX
DOC-20250430-WA0014._20250714_235747_0000.pptx
PPT
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
PDF
Quality Control Management for RMG, Level- 4, Certificate
Special finishes, classification and types, explanation
rapid fire quiz in your house is your india.pptx
The story of the first moon landing.docx
Skskkxiixijsjsnwkwkaksixindndndjdjdjsjjssk
Urban Design Final Project-Site Analysis
UNIT I- Yarn, types, explanation, process
An introduction to AI in research and reference management
Interior Structure and Construction A1 NGYANQI
6- Architecture design complete (1).pptx
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
ANATOMY OF ANTERIOR CHAMBER ANGLE AND GONIOSCOPY.pptx
The Advantages of Working With a Design-Build Studio
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
Machine printing techniques and plangi dyeing
BSCS lesson 3.pptxnbbjbb mnbkjbkbbkbbkjb
EGWHermeneuticsffgggggggggggggggggggggggggggggggg.ppt
Phone away, tabs closed: No multitasking
DOC-20250430-WA0014._20250714_235747_0000.pptx
WHY_R12 Uaafafafpgradeaffafafafaffff.ppt
Quality Control Management for RMG, Level- 4, Certificate
Ad

Designing Interactions Downloadable PDF Doc

  • 1. I Interact, Therefore I Am by Connie Malamed Modified presentation given to the Society of News Design, September 2010
  • 2. What’s Ahead The Power of Interaction Creating Positive Experiences Thinking About Design
  • 3. THE POWER OF INTERACTION
  • 4. Interactivity in volves a two-way d exchange of engagement an response. It is immediate and in real-time.
  • 5. When users take action, it helps to make information meaningful
  • 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. 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. 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. Some cognitive scientists say that simple interactions with the world can dramatically improve cognitive performance. Two examples follow ...
  • 10. Speech gestures show the body is intimately tied up with thinking
  • 11. We use gestures to conceptually plan and produce speech. Gesturing lightens our cognitive load, showing the deep connection between mind and body.
  • 12. Our brain extends to the tools we use
  • 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.
  • 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.
  • 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. 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. n A mental mod el is a representatio t of something in the real world tha explain behavior. we use to predict or
  • 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. I heard a lecturer say that our mental models are like a subway map, because of their minimal amount of detail.
  • 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. 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. = 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. = 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. This doesn’t mean you can’t innovate and try something new!
  • 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. Usability “The effectivene ss, efficiency and satisfaction wit h which specified users achieve s pecified goals in a ” partic ular environment. ---ISO, 1998
  • 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. Usability K!” KE ME THIN2005 “DON’T MA ---Steve Krug,
  • 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.
  • 33. BEHAVIORAL VISUAL CONCEPTUAL Think through these three dimensions of interactive design.
  • 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. 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. 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. 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. 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