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

Designing Interactions Downloadable PDF Doc

  • 1.
    I Interact, ThereforeI 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 volvesa 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 interactivityoffer 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 interactivityoffer 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 Fordesigners, 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 scientistssay that simple interactions with the world can dramatically improve cognitive performance. Two examples follow ...
  • 10.
    Speech gestures show thebody is intimately tied up with thinking
  • 11.
    We use gesturesto 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 usean 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.
  • 15.
    We are inseparably linkedto the experiences of having a body located in a 3D world. Interaction is not just for doing things but for understanding things.
  • 16.
  • 17.
    What complaints doyou 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 somecommon 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 model is a representatio t of something in the real world tha explain behavior. we use to predict or
  • 20.
    How are mentalmodels built? Mental models are based on: β€’β€― Prior experience with something similar β€’β€― What you’ve read or heard β€’β€― Direct experience
  • 21.
    I heard alecturer say that our mental models are like a subway map, because of their minimal amount of detail.
  • 22.
    User’s Mental Model Mentalmodels 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 DesignModel 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 youcan’t innovate and try something new!
  • 27.
    If you doinnovate: β€’β€― 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 composedof 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.
  • 32.
  • 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 β€’β€― Interactivitycan 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