SlideShare ist ein Scribd-Unternehmen logo
1 von 234
Downloaden Sie, um offline zu lesen
Mobile Prototyping Essentials
                                                    Part II




Rachel Hinman
Senior Research Scientist
Nokia Research Lab
Palo Alto, California USA
   Hinman
Our plan for today…
8:30am - Noon
What makes mobile UX different?
Three Design/Mobile UX Exercises:
• Identifying Mobile Needs
• Ideating in the Wild
• Creating a Good Hand
Noon – 1:30pm - LUNCH

1:30pm – 5:30pm
Mobile prototyping essentials
Three Mobile Prototyping Exercises
• Storyboarding
• Translating GUI to NUI
• Creating an In-Screen Prototype
Great Mobile Experiences:
1 are uniquely mobile

2 are sympathetic to context

3 speak their power
3
Our plan for today…
8:30am - Noon
What makes mobile UX different?
Three Design/Mobile UX Exercises:
• Identifying Mobile Needs
• Ideating in the Wild
• Creating a Good Hand
Noon – 1pm - LUNCH

1pm – 5pm
Mobile prototyping essentials
Three Mobile Prototyping Exercises
• Storyboarding
• Translating GUI to NUI
• Creating an In-Screen Prototype
Q:   What makes mobile UX different?

Q:




                                       5
A




    6
7
:-(
A
A




    8
?
    9
10
  10
Bad
Decision-Making




                  11
The final diamonds are where good
design decisions matter most…

…and where designers new to mobile
have the least domain specific skill
and confidence.




                                       12
Seated in a relatively predictable environment


          Large screen enables multi-tasking

             Keyboard and a mouse for input




                                            13
Highly variable context and environment


Small screen size and limited text input

UI takes up the entire screen


Difficult to multi-task and easy to get lost


                                               14
Designers new to mobile
A   don‟t have the domain
    specific skills or heuristics to
    lean on.




                                       15
Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
Prototype
Prototype

            16
PC Prototyping
    is considered a

    Luxury
A




                      17
Mobile Prototyping is

    Essential
A




                             18
The best way
to develop those skills
is to prototype early
and often.

                          19
A




Prototypes are the ultimate
decision-making aid



                              20
Our plan for today…
 Review the four “whys” of mobile prototyping

 Identify the two genres of prototyping and
 overview of six prototyping methods

 Review the key differences between NUI
 and GUI interfaces
 Overview of animation principles that can be
 incorporated into your mobile experiences

 Three hands-on activities
                                                21
Our plan for today…
 Review the four “whys” of mobile prototyping

 Identify the two genres of prototyping and
 overview six prototyping methods

 Review the key differences between NUI
 and GUI interfaces
 Overview of animation principles that can be
 incorporated into your mobile experiences

 Three hands-on activities
                                                22
Our plan for today…
 Review the four “whys” of mobile prototyping

 Identify the two genres of prototyping and
 overview six prototyping methods

 Review the key differences between NUI
 and GUI interfaces
 Overview of animation principles that can be
 incorporated into your mobile experiences

 Three hands-on activities
                                                23
Our plan for today…
 Review the four “whys” of mobile prototyping

 Identify the two genres of prototyping and
 overview six prototyping methods

 Review the key differences between NUI
 and GUI interfaces
 Overview of animation principles that can be
 incorporated into your mobile experiences

 Three hands-on activities
                                                24
Our plan for today…
 Review the four “whys” of mobile prototyping

 Identify the two genres of prototyping and
 overview six prototyping methods

 Review the key differences between NUI
 and GUI interfaces
 Overview of animation principles that can be
 incorporated into your mobile experiences

 Three hands-on activities
                                                25
Okay, let‟s get started!




                           26
Prototyping




          27
“Whys” of prototyping
  Improve your design decision-making

  Communicate an Idea

  Gather User Feedback

  Explore the “Unknowns”

  Fine-tune an Idea
                                        28
Communicating an Idea or Experience




             YouTube Video        29
Gather User Feedback




                       30
Explore the Unknowns




                       31
Fine-Tune an Idea




                    32
Two Genres



             33
Experiential Prototyping




                           34
Tactical Prototyping




                       35
Experiential Prototyping:
Best suited for design explorations where:

   1    You are working on a “broader”
        mobile project.

   2    Target mobile hardware and software
        scope is unknown.
        (perhaps being created).



   3    The design space is relatively
        unchartered.
                                              36
Tactical Prototyping:
Best suited for design explorations where:


 1   You are working on a “focused”
     mobile project.


 2   Target mobile hardware and software
     scope is known.


 3   The design space is relatively known.

                                             37
Experiential Prototyping




                           38
39
40
Context Matters




                  41
Context will likely be
  your blindside




                         42
Context Framework




                    43
Context Framework




                    44
Experiential Prototyping
will help you understand
          context




                           45
Experiential Prototyping:
Best suited for design explorations where:
      You are working on a “broader”
  1   mobile project.


  2   Target mobile hardware and software
      scope is unknown.
      (perhaps being created).


  3   The design space is relatively
      unchartered.
Experiential Prototypes
  Body Storming

  Speed Dating Prototypes

  Storyboarding

  Concept Videos
Experiential Prototypes
  Body Storming

  Speed Dating Prototypes

  Storyboarding

  Concept Videos
Bodystorming




               49
Through Lines
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
In reality… people‟s lives are messy
Similar to improvisational theater, body storming
involves acting out possible scenarios or use
cases with actors and props. Unlike computer-
based technology that is logic based and only
makes visible the conditions that existed
before, people are
illogical, perceptive, aware, and self-correcting.

Body storming is a technique that helps capture
and harness these messy yet essential aspects
of human behavior and account for them in the
mobile design process.
                                                     56
1. Select groups of five to eight
                                           participants in a troupe.




Photo by Christian Crumlish (xian), 2009 on Flickr                      57
1. Select groups of five to eight
                                            participants in a troupe.

                                         2. Identify 3-5 experience
                                            scenarios for your troupe to
                                            “perform.”

                                              Examples: Purchasing a cup of
                                              coffee with my iPhone, selecting
                                              which phone to purchase in
                                              a carrier‟s store.




Photo by Christian Crumlish (xian), 2009 on Flickr                               58
3. Every player must have a
                                            role; there should be no
                                            “trees” that are just for
                                            background. Use large
                                            cards that label the roles
                                            people are playing.




                                                                         59
Photo by Christian Crumlish (xian), 2009 on Flickr
4. Props can have
                                             feelings, thoughts, and the
                                             ability to speak. Use
                                             thought-bubble cards to
                                             show what a participant is
                                             thinking versus saying.




Photo by Christian Crumlish (xian), 2009 on Flickr                     60
5. Have a narrator or color commentator who
    can explain things. The narrator can
    pretend the scenario is like television,
    using a remote to stop action, rewind,
    or fast-forward.
Photo by Christian Crumlish (xian), 2009 on Flickr   61
6. De-brief after each scenario. What did
   the group learn? What was surprising?
   What seemed important? Capture what
   you learned from the exercise and
   discuss how you can integrate it into
   what happens next.

 Photo by Christian Crumlish (xian), 2009 on Flickr   62
Bodystorming will help you capture
  the emotional tenor of mobile
          interactions




                                     63
Design in Context




                64
Experiential Prototypes
  Body Storming

  Speed Dating Prototypes

  Storyboarding

  Concept Videos
Speed Dating Prototypes




Illustration courtesy of Scott Davidoff
Rapidly Exploring Application Design through Speed Dating                  66
Scott Davidoff of CMU
                                     •Few design tools

                                     •High Cost of Failure

                                     •Unpredictable social consequences




Rapidly Exploring Application Design through Speed Dating                 67
Speed Dating Prototypes
Builds on three theories:

 1   Abundance brings perspective.

     Need to cross boundaries to know
 2   they exist.

     Multiple low-cost engagements with
 3   multiple concepts enables a broader
     perspective to emerge.
                                           68
Step One
Identify most
promising
concepts




                69
Step Two
Create storyboards
that
depict each concept




Illustration courtesy of Scott Davidoff
Rapidly Exploring Application Design through Speed Dating   70
Step Three
Present storyboards to
users & gather
feedback




                         71
Step Four
Create prototypes




Photo courtesy of Scott Davidoff
Rapidly Exploring Application Design through Speed Dating   72
Step Five
Conduct user enactments
with prototypes




Photo courtesy of Scott Davidoff
Rapidly Exploring Application Design through Speed Dating   73
Speed Dating Prototypes are
especially well-suited for gathering
user impressions of
a new-to-the-world experience




                                       74
Experiential Prototypes
  Body Storming

  Speed Dating Prototypes

  Storyboarding

  Concept Videos
Storyboarding




            76
77
Mobile UX Storyboarding
  Identify the central idea(s) you are
  trying to communicate.




                                         78
Mobile UX Storyboarding
  Identify the central idea(s) you are
  trying to communicate.

  Create a character and identify the key
  issues he/she currently faces.




                                            79
Mobile UX Storyboarding
  Identify the central idea(s) you are
  trying to communicate.

  Create a character and identify the key
  issues he/she currently faces.
  Rough out a basic story.




                                            80
Mobile UX Storyboarding
  Identify the central idea(s) you are
  trying to communicate.

  Create a character and identify the key
  issues he/she currently faces.
  Rough out a basic story.

  Start filling in the cells. Rough out the
  complete story, then fill in details.
                                              81
Mobile UX Storyboarding
  Identify the central idea(s) you are
  trying to communicate.

  Create a character and identify the key
  issues he/she currently faces.
  Rough out the basic story

  Start filling in the cells. Rough out the
  complete story, then fill in details.
                                              82
83
84
Your Design Challenge!
Storyboarding


 1 Select one concept you‟d like to explore more
   deeply using the storyboarding technique.

   Storyboard one scenario using the templates
 2 provided.
   Remember to identify the key issues the
 3 character faces and rough out the complete
   story before filling in details.
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
30 Minutes
Experiential Prototypes
  Body Storming

  Speed Dating Prototypes

  Storyboarding

  Concept Videos
Concept Videos




Nokia 888 communicator concept phone design by Tamer Nakisci                    91
92
93
93
Concept Videos
Pros
•High Impact

•Highly Shareable

•Good for High-Level
 Ideas

•Technology still in
 development
                       94
Concept Videos
Pros                   Cons
•High Impact           •Resource Intensive!!!

•Highly Shareable      •Skill Intensive

•Good for High-Level   •Cultural Fit
 Ideas
                       •Concept videos don‟t
•Technology still in   make bad ideas good.
 development
                                                95
Tactical Prototyping
Tactical Prototypes
  Sketching/Paper Prototyping

  In-Screen Mobile Prototypes

  Mobile Browser Prototypes

  Keynote/Powerpoint Prototypes

  Flash Prototype

  Platform Specific Prototype
                                  97
Tactical Prototypes
  Sketching/Paper Prototyping

  In-Screen Mobile Prototypes

  Mobile Browser Prototypes

  Keynote/Powerpoint Prototypes

  Flash Prototype

  Platform Specific Prototype
                                  98
Sketching




        99
Great mobile UIs
speak their power




                100
Ruthless
 Editing

           101
A Brave NUI World




               102
103
Seated in a relatively predictable environment


          Large screen enables multi-tasking

             Keyboard and a mouse for input




                                            104
We‟re reaching the edges
       of what GUI can do




                        105
Most mobile smartphones
have touchscreens with
Natural User Interfaces
                          106
GUIs Become Brittle
 on a Mobile Device




                  107
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
110
GUI/NUI Chasm
                111
Key differences between
     NUI and GUI




                          112
Defining Attributes of




GUIs…

                         113
GUI Mental Model =
Computer as tool

                     114
GUI = Recognition
“What you see is what you get”


                            115
GUI = Metaphorics, containment and place



                                       116
GUIs = Heavy Chrome, Icons & Buttons

                                       117
Defining Attributes of




NUIs…

                         118
NUI Mental Model =
Computer as media

                     119
NUI = Intuition
“What you do is what you get”


                            120
NUI = Fluid, Unmediated, and Organic




                                       121
NUIs = Content is the Star
                         122
Highly variable context and environment


Small screen size and limited text input

UI takes up the entire screen


Difficult to multi-task and easy to get lost


                                               123
GUI = Experiences are anchored

                             124
NUI = Experiences Unfold

                      125
NUIs Unfold Like a Game




                          126
NUIs Can Feel Anchor-less


                       127
128
Mobile Experiences Unfold
Patterns for how mobile experiences unfold
and progressively reveal their nature

 1 The Nested Doll Pattern

 2 The Hub and Spoke Pattern

 3 The Bento Box Pattern

 4 The Filtered View Pattern
                                             129
Nested Doll Pattern




                 130
Hub and Spoke Pattern



                   131
Bento Box Pattern




                    132
Filtered View Pattern




                   133
A




               Trick to unfolding =
    Information boulders to pebbles




                                      134
Your Design Challenge!
From GUI to NUI


 1 Identify an interaction sequence you‟d like to
    recreate using NUI principles.

 2 Sketch out the interaction using the
   templates provided.

 3 Identify how you‟d like your mobile
    experience to unfold.

                                                    135
REMEMBER!
It‟s easy to go crazy and try to do it all.
Instead, focus on applying what we‟ve covered…

  Understanding the differences between
  graphical and natural user interfaces.

  Experimenting with how your mobile experience
  can unfold and and progressively reveal its
  nature.

  Play around with the unfolding patterns that have
  been presented… or invent some of your own.
                                                  136
137
30 Minutes
Paper In-Screen Prototypes




Following Process documented by Diego Pulidovia
UX Magazine – Paper In-Screen Prototypes
Photos courtesy of Diego Pulido and UX Magazine


                                                  139
1. Sketch screen layouts.




                                                                             140
Photo courtesy of Diego Pulido and UX Magazine
1. Sketch screen layouts.

                                                 2. Scan or photograph
                                                    the sketches.




                                                                         141
Photo courtesy of Diego Pulido and UX Magazine
1. Sketch screen layouts.

                                                 2. Scan or photograph
                                                    the sketches.

                                                 3. Making sizing
                                                    adjustments to the
                                                    files.




                                                                         142
Photo courtesy of Diego Pulido and UX Magazine
4. Save the resized
                                                 images in a file format
                                                 supported by the mobile
                                                 device. Be mindful of the
                                                 sequencing of your
                                                 screens and label files
                                                 accordingly.




                                                                         143
Photo courtesy of Diego Pulido and UX Magazine
4. Save the resized
                                                 images in a file format
                                                 supported by the mobile
                                                 device. Be mindful of the
                                                 sequencing of your
                                                 screens and label files
                                                 accordingly.

                                                 5. Import the files into the
                                                 mobile device‟s photo
                                                 gallery.


                                                                          144
Photo courtesy of Diego Pulido and UX Magazine
4. Save the resized
                                                 images in a file format
                                                 supported by the mobile
                                                 device. Be mindful of the
                                                 sequencing of your
                                                 screens and label files
                                                 accordingly.

                                                 5. Import the files into the
                                                 mobile device‟s photo
                                                 gallery.

                                                 6. Click and swipe away.
                                                                           145
Photo courtesy of Diego Pulido and UX Magazine
Your Design Challenge!
Create an in-screen prototype.

  Hang your screen designs on the wall.

  Photograph each design.

  Transfer photos from the camera to computer
  and make any sizing adjustments.

  Sync images to your mobile device
  and swipe away….

                                                146
Tactical Prototypes
  Sketching

  In-Screen Mobile Prototypes

  Mobile Browser Prototypes

  Keynote/Powerpoint Prototypes

  Flash Prototype

  Platform Specific Prototype
                                  147
Keynote/Powerpoint Prototypes




                                148
149
Reasons for Prototyping
in Keynote/Powerpoint
  It‟s super efficient and fast!

  Level of fidelity is high – gives you an end
  result that looks and feels like a real app.

  Supports *some* gestures and transitions.


  It‟s as close as you can get to the real thing
  without digging into code.
                                                   150
151
Tactical Prototypes
  Sketching

  In-Screen Mobile Prototypes

  Mobile Browser Prototypes

  Keynote/Powerpoint Prototypes

  Flash Prototype

  Platform Specific Prototype
                                  152
Emergent Mobile Topics
 1 Shapeshifting

 2 A Brave NUI World

 3 Comfortable Computing
Shapeshifting
Mobile Prototyping Essentials - Part II
156
“We made the web
in the image of
ourselves, and in
the U.S., that
means OBESE.”

~Jason Grigsby
A




    158
159
Q:
   “I think a lot of web design in the
   past five to ten years is actually
Q:
   just a reflection of print again.
   We‟ve been designing for one
   context, which isn‟t much better
   than a PDF document.”

 ~ Bryan Rieger

                                         160
Q:   “Our obsession with layout
     (carried over from print design)
Q:
     keeps us from seizing much
     bigger opportunities on mobile.”

     ~ Luke Wroblewski



                                        161
162
Shapeshifting
Plans & Situated Action
Mutual Reconfiguration
Mobile Prototyping Essentials - Part II
Q:   Suchman‟s theory of mutual
     reconfiguration suggests a person‟s
Q:
     capacity to act (their agency) is
     reconfiguredwhen it comes into contact
     with another thing or person -
     thathuman action is constantly
     constructed and reconstructed
     from dynamic interactions with the
     material and social worlds.
Mobile Prototyping Essentials - Part II
168
Q:



Q:

        Two
     Design Implications
Q:



Q:




     1. Shift in contextual assumptions
Q:



Q:




               2. Shift in our sensibilities
     around content as a design material
Q:



Q:




     1. Shift in contextual assumptions
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
A
A
    Throughout the design process,
    our work should be situated in
    the contexts where it will be used.
Go to the Gemba
Go to the Gemba
Go to the Gemba
Q:



Q:




               2. Shift in our sensibilities
     around content as a design material
Design as the manipulation of materials.
Mobile Prototyping Essentials - Part II
Q:



Q:




              Pages and screens
     are not our design material
Content as a design material.
“Right now many designers end up
focusing a lot of energy on the overlying
Q:
view – the whole template and look and
feel. But the smaller the screen gets, the
Q:
less that stuff matters.

One of the most important things we‟ve
started looking at is writing and working
with APIs rather than designing „pages‟
for one context.”

~Stephanie Rieger
“For so much digital content, there is no
good metaphor to render anymore – the
content is just information, text and
images – so new approaches to
Q:
interaction and visual UI design are
needed.”

~Mike Kruzeniski
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Emergent Mobile Topics
 1 Shapeshifting

 2 A Brave NUI World

 3 Comfortable Computing
Mark Weiser
Q:



Q:
“The most profound technologies
Q:
are those that disappear.
Q:
They weave themselves into the
fabric of everyday life until they are
indistinguishable from it.”

~ Mark Weiser
The Computer for the 21st Century
Q:



Q:




     Tab   Pad          Yard-Sized Board



                 1991
2010
Mobile Prototyping Essentials - Part II
Mobile devices are
the gateway drug for ubicomp
Following toddlers into the future
Mobile Prototyping Essentials - Part II
“I like cuddling up in bed with Netflix
Q:
on the iPad instead of sitting in front
of the TV. It‟s more comfortable to
Q:
go to bed with a movie the same
way I used to go to bed with a
book”

~ Norbert
iPad Study Participant
“It‟s almost like my blankie…
Q:
I curl up in bed with it, or on the
couch. I usually have it with
Q:
me, regardless of extenuating
circumstances ”

~ Erin
iPad Study Participant
“It’s almost like my blankie…”
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Mobile Prototyping Essentials - Part II
Say Goodbye to Done
This should look familiar…




                             213
This should look familiar…


        The web has evolved around a
            task-efficiency model.

           Mobile can be different.




                                       214
Tasks are about completion…




                              215
Tasks are about completion…



Possibilities are interactions that
accrue over time…




                                      216
Tasks are about completion…



Possibilities are interactions that
accrue over time…




… or facilitate
exploration…
                                      217
Tasks are about completion…



Possibilities are interactions that
accrue over time…



                                ..or are about
… or facilitate                     SENSING
exploration…                          INTENT!
                                             218
219
220
221
222
223
224
Mobile Prototyping Essentials - Part II
Fidelity




           226
Failure




          227
Prototyping is not a Panacea




                           228
PC Prototyping
    is considered a

    Luxury
A
Mobile Prototyping is

    Essential
A
Great Mobile Experiences:
1 are uniquely mobile

2 are sympathetic to context

3 speak their power
3
Mobile presents an
opportunity to invent new
ways for users to interact
with information.


                             232
Thank you!
Email:
rachel.hinman@nokia.com




Templates and Online Resources:
www.rachelhinman.com/mobile_prototyping_essentials
Oh! By the way, I‟m writing a book..


The Mobile Frontier
A Guide for Designing
Mobile Experiences


Expected Publication: May 2012




Follow along…

Weitere ähnliche Inhalte

Was ist angesagt?

Wearable computing and embodied interaction
Wearable computing and embodied interactionWearable computing and embodied interaction
Wearable computing and embodied interactionUTFPR
 
Introduction to Interaction Design
Introduction to Interaction DesignIntroduction to Interaction Design
Introduction to Interaction DesignUTFPR
 
Designing Useful and Usable Augmented Reality Experiences
Designing Useful and Usable Augmented Reality Experiences Designing Useful and Usable Augmented Reality Experiences
Designing Useful and Usable Augmented Reality Experiences Yan Xu
 
Kokonohanashi Project Update
Kokonohanashi Project UpdateKokonohanashi Project Update
Kokonohanashi Project Updatea-small-lab
 
UX LX in short...
UX LX in short...UX LX in short...
UX LX in short...pubsmith
 
Improving Discoverability
Improving DiscoverabilityImproving Discoverability
Improving DiscoverabilityGinsburg Design
 
Embodied Cognition - Booch HICSS50
Embodied Cognition - Booch HICSS50Embodied Cognition - Booch HICSS50
Embodied Cognition - Booch HICSS50diannepatricia
 
Embodied Cognition with Pproject Intu
Embodied Cognition with Pproject IntuEmbodied Cognition with Pproject Intu
Embodied Cognition with Pproject Intudiannepatricia
 
Validating Ideas Through Prototyping
Validating Ideas Through PrototypingValidating Ideas Through Prototyping
Validating Ideas Through PrototypingChris Risdon
 
A case study on experiential learning in NUS Second Life
A case study on experiential learning in NUS Second LifeA case study on experiential learning in NUS Second Life
A case study on experiential learning in NUS Second LifeCIT, NUS
 
Mobile UX: We’re still human
Mobile UX: We’re still humanMobile UX: We’re still human
Mobile UX: We’re still humanReading Room
 
[I3 d]04 interactivity
[I3 d]04 interactivity[I3 d]04 interactivity
[I3 d]04 interactivityjylee_kgit
 
[I3 d]03 interactivity
[I3 d]03 interactivity[I3 d]03 interactivity
[I3 d]03 interactivityjylee6977
 
Saiful hidayat : Teknik Elektro Universitas Brawijaya Malang : being creativ...
Saiful hidayat : Teknik Elektro Universitas Brawijaya Malang :  being creativ...Saiful hidayat : Teknik Elektro Universitas Brawijaya Malang :  being creativ...
Saiful hidayat : Teknik Elektro Universitas Brawijaya Malang : being creativ...Saiful Hidayat
 
시나리오 베이스 디자인 방법론 (Scenario Based Design)
시나리오 베이스 디자인 방법론 (Scenario Based Design)시나리오 베이스 디자인 방법론 (Scenario Based Design)
시나리오 베이스 디자인 방법론 (Scenario Based Design)Hajin Lim
 

Was ist angesagt? (20)

Wearable computing and embodied interaction
Wearable computing and embodied interactionWearable computing and embodied interaction
Wearable computing and embodied interaction
 
Introduction to Interaction Design
Introduction to Interaction DesignIntroduction to Interaction Design
Introduction to Interaction Design
 
Designing Useful and Usable Augmented Reality Experiences
Designing Useful and Usable Augmented Reality Experiences Designing Useful and Usable Augmented Reality Experiences
Designing Useful and Usable Augmented Reality Experiences
 
Kokonohanashi Project Update
Kokonohanashi Project UpdateKokonohanashi Project Update
Kokonohanashi Project Update
 
UX LX in short...
UX LX in short...UX LX in short...
UX LX in short...
 
Leadership
LeadershipLeadership
Leadership
 
Improving Discoverability
Improving DiscoverabilityImproving Discoverability
Improving Discoverability
 
Embodied Cognition - Booch HICSS50
Embodied Cognition - Booch HICSS50Embodied Cognition - Booch HICSS50
Embodied Cognition - Booch HICSS50
 
Make It So
Make It SoMake It So
Make It So
 
Embodied Cognition with Pproject Intu
Embodied Cognition with Pproject IntuEmbodied Cognition with Pproject Intu
Embodied Cognition with Pproject Intu
 
Validating Ideas Through Prototyping
Validating Ideas Through PrototypingValidating Ideas Through Prototyping
Validating Ideas Through Prototyping
 
A case study on experiential learning in NUS Second Life
A case study on experiential learning in NUS Second LifeA case study on experiential learning in NUS Second Life
A case study on experiential learning in NUS Second Life
 
Mobile UX: We’re still human
Mobile UX: We’re still humanMobile UX: We’re still human
Mobile UX: We’re still human
 
[I3 d]04 interactivity
[I3 d]04 interactivity[I3 d]04 interactivity
[I3 d]04 interactivity
 
[I3 d]03 interactivity
[I3 d]03 interactivity[I3 d]03 interactivity
[I3 d]03 interactivity
 
Saiful hidayat : Teknik Elektro Universitas Brawijaya Malang : being creativ...
Saiful hidayat : Teknik Elektro Universitas Brawijaya Malang :  being creativ...Saiful hidayat : Teknik Elektro Universitas Brawijaya Malang :  being creativ...
Saiful hidayat : Teknik Elektro Universitas Brawijaya Malang : being creativ...
 
What the F*** is UX?
What the F*** is UX?What the F*** is UX?
What the F*** is UX?
 
Hicss17 asakawa
Hicss17 asakawaHicss17 asakawa
Hicss17 asakawa
 
시나리오 베이스 디자인 방법론 (Scenario Based Design)
시나리오 베이스 디자인 방법론 (Scenario Based Design)시나리오 베이스 디자인 방법론 (Scenario Based Design)
시나리오 베이스 디자인 방법론 (Scenario Based Design)
 
Introduction To HCI
Introduction To HCIIntroduction To HCI
Introduction To HCI
 

Ähnlich wie Mobile Prototyping Essentials - Part II

Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping EssentialsRachel Hinman
 
Show and Tell (with notes)
Show and Tell (with notes)Show and Tell (with notes)
Show and Tell (with notes)Tom Jenkins
 
CWC Social Story Business & You Web 2.0
CWC Social Story Business & You Web 2.0CWC Social Story Business & You Web 2.0
CWC Social Story Business & You Web 2.0Siobhan O'Flynn
 
Prototyping Experiences for Connected Products
Prototyping Experiences for Connected ProductsPrototyping Experiences for Connected Products
Prototyping Experiences for Connected ProductsMartin Charlier
 
Concept design-second class
Concept design-second classConcept design-second class
Concept design-second classMariana Salgado
 
Mastering the Art of Promotion
Mastering the Art of PromotionMastering the Art of Promotion
Mastering the Art of PromotionHedren Sum
 
Ignite seoul 4-12 정기원 designfiction
Ignite seoul 4-12 정기원 designfictionIgnite seoul 4-12 정기원 designfiction
Ignite seoul 4-12 정기원 designfictionJinho Jung
 
Designing 3D Holograms TCC Session 1_12067
Designing 3D Holograms TCC Session 1_12067Designing 3D Holograms TCC Session 1_12067
Designing 3D Holograms TCC Session 1_12067Cynthia Calongne
 
Introduction to Prototyping: What, Why, How
Introduction to Prototyping: What, Why, HowIntroduction to Prototyping: What, Why, How
Introduction to Prototyping: What, Why, HowAbdallah El Ali
 
HPAI Class 2 - human aspects and computing systems in ai - 012920
HPAI  Class 2 - human aspects and computing systems in ai - 012920HPAI  Class 2 - human aspects and computing systems in ai - 012920
HPAI Class 2 - human aspects and computing systems in ai - 012920melendez321
 
eXtreme User eXperience (XUX) - How one team melded UX with XP
eXtreme User eXperience (XUX) - How one team melded UX with XPeXtreme User eXperience (XUX) - How one team melded UX with XP
eXtreme User eXperience (XUX) - How one team melded UX with XPMichael Rawling
 
The very basics of human-Centered Interaction Design (sigchi.be 11/2010)
The very basics of human-Centered Interaction Design (sigchi.be 11/2010)The very basics of human-Centered Interaction Design (sigchi.be 11/2010)
The very basics of human-Centered Interaction Design (sigchi.be 11/2010)Koen Peters
 
The UX Unicorn Is Dead: Soft Skills Trump Coding Skills
The UX Unicorn Is Dead: Soft Skills Trump Coding SkillsThe UX Unicorn Is Dead: Soft Skills Trump Coding Skills
The UX Unicorn Is Dead: Soft Skills Trump Coding SkillsPaul Sherman
 
People As the Conveyor of Knowledge at Agile Vietnam
People As the Conveyor of Knowledge at Agile VietnamPeople As the Conveyor of Knowledge at Agile Vietnam
People As the Conveyor of Knowledge at Agile VietnamKenji Hiranabe
 
Video as a prototyping tool for connected products
Video as a prototyping tool for connected productsVideo as a prototyping tool for connected products
Video as a prototyping tool for connected productsMartin Charlier
 
Development and storytelling: a many-to-many relationship
Development and storytelling: a many-to-many relationshipDevelopment and storytelling: a many-to-many relationship
Development and storytelling: a many-to-many relationshipPietro Polsinelli
 
Design Research (is not Market Research)
Design Research (is not Market Research)Design Research (is not Market Research)
Design Research (is not Market Research)Joyce Chou
 
Agile leadership practices for PIONEERS
 Agile leadership practices for PIONEERS Agile leadership practices for PIONEERS
Agile leadership practices for PIONEERSStefan Haas
 

Ähnlich wie Mobile Prototyping Essentials - Part II (20)

Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
 
Apdf Spontaneous Invention
Apdf Spontaneous InventionApdf Spontaneous Invention
Apdf Spontaneous Invention
 
Show and Tell (with notes)
Show and Tell (with notes)Show and Tell (with notes)
Show and Tell (with notes)
 
CWC Social Story Business & You Web 2.0
CWC Social Story Business & You Web 2.0CWC Social Story Business & You Web 2.0
CWC Social Story Business & You Web 2.0
 
Prototyping Experiences for Connected Products
Prototyping Experiences for Connected ProductsPrototyping Experiences for Connected Products
Prototyping Experiences for Connected Products
 
Concept design-second class
Concept design-second classConcept design-second class
Concept design-second class
 
Mastering the Art of Promotion
Mastering the Art of PromotionMastering the Art of Promotion
Mastering the Art of Promotion
 
Ignite seoul 4-12 정기원 designfiction
Ignite seoul 4-12 정기원 designfictionIgnite seoul 4-12 정기원 designfiction
Ignite seoul 4-12 정기원 designfiction
 
Designing 3D Holograms TCC Session 1_12067
Designing 3D Holograms TCC Session 1_12067Designing 3D Holograms TCC Session 1_12067
Designing 3D Holograms TCC Session 1_12067
 
Introduction to Prototyping: What, Why, How
Introduction to Prototyping: What, Why, HowIntroduction to Prototyping: What, Why, How
Introduction to Prototyping: What, Why, How
 
HPAI Class 2 - human aspects and computing systems in ai - 012920
HPAI  Class 2 - human aspects and computing systems in ai - 012920HPAI  Class 2 - human aspects and computing systems in ai - 012920
HPAI Class 2 - human aspects and computing systems in ai - 012920
 
BCII 2016 - Visualizing Complexity
BCII 2016 - Visualizing ComplexityBCII 2016 - Visualizing Complexity
BCII 2016 - Visualizing Complexity
 
eXtreme User eXperience (XUX) - How one team melded UX with XP
eXtreme User eXperience (XUX) - How one team melded UX with XPeXtreme User eXperience (XUX) - How one team melded UX with XP
eXtreme User eXperience (XUX) - How one team melded UX with XP
 
The very basics of human-Centered Interaction Design (sigchi.be 11/2010)
The very basics of human-Centered Interaction Design (sigchi.be 11/2010)The very basics of human-Centered Interaction Design (sigchi.be 11/2010)
The very basics of human-Centered Interaction Design (sigchi.be 11/2010)
 
The UX Unicorn Is Dead: Soft Skills Trump Coding Skills
The UX Unicorn Is Dead: Soft Skills Trump Coding SkillsThe UX Unicorn Is Dead: Soft Skills Trump Coding Skills
The UX Unicorn Is Dead: Soft Skills Trump Coding Skills
 
People As the Conveyor of Knowledge at Agile Vietnam
People As the Conveyor of Knowledge at Agile VietnamPeople As the Conveyor of Knowledge at Agile Vietnam
People As the Conveyor of Knowledge at Agile Vietnam
 
Video as a prototyping tool for connected products
Video as a prototyping tool for connected productsVideo as a prototyping tool for connected products
Video as a prototyping tool for connected products
 
Development and storytelling: a many-to-many relationship
Development and storytelling: a many-to-many relationshipDevelopment and storytelling: a many-to-many relationship
Development and storytelling: a many-to-many relationship
 
Design Research (is not Market Research)
Design Research (is not Market Research)Design Research (is not Market Research)
Design Research (is not Market Research)
 
Agile leadership practices for PIONEERS
 Agile leadership practices for PIONEERS Agile leadership practices for PIONEERS
Agile leadership practices for PIONEERS
 

Kürzlich hochgeladen

Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 

Kürzlich hochgeladen (19)

Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 

Mobile Prototyping Essentials - Part II

  • 1. Mobile Prototyping Essentials Part II Rachel Hinman Senior Research Scientist Nokia Research Lab Palo Alto, California USA Hinman
  • 2. Our plan for today… 8:30am - Noon What makes mobile UX different? Three Design/Mobile UX Exercises: • Identifying Mobile Needs • Ideating in the Wild • Creating a Good Hand Noon – 1:30pm - LUNCH 1:30pm – 5:30pm Mobile prototyping essentials Three Mobile Prototyping Exercises • Storyboarding • Translating GUI to NUI • Creating an In-Screen Prototype
  • 3. Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 speak their power 3
  • 4. Our plan for today… 8:30am - Noon What makes mobile UX different? Three Design/Mobile UX Exercises: • Identifying Mobile Needs • Ideating in the Wild • Creating a Good Hand Noon – 1pm - LUNCH 1pm – 5pm Mobile prototyping essentials Three Mobile Prototyping Exercises • Storyboarding • Translating GUI to NUI • Creating an In-Screen Prototype
  • 5. Q: What makes mobile UX different? Q: 5
  • 6. A 6
  • 8. A 8
  • 9. ? 9
  • 10. 10 10
  • 12. The final diamonds are where good design decisions matter most… …and where designers new to mobile have the least domain specific skill and confidence. 12
  • 13. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 13
  • 14. Highly variable context and environment Small screen size and limited text input UI takes up the entire screen Difficult to multi-task and easy to get lost 14
  • 15. Designers new to mobile A don‟t have the domain specific skills or heuristics to lean on. 15
  • 17. PC Prototyping is considered a Luxury A 17
  • 18. Mobile Prototyping is Essential A 18
  • 19. The best way to develop those skills is to prototype early and often. 19
  • 20. A Prototypes are the ultimate decision-making aid 20
  • 21. Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview of six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities 21
  • 22. Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities 22
  • 23. Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities 23
  • 24. Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities 24
  • 25. Our plan for today… Review the four “whys” of mobile prototyping Identify the two genres of prototyping and overview six prototyping methods Review the key differences between NUI and GUI interfaces Overview of animation principles that can be incorporated into your mobile experiences Three hands-on activities 25
  • 26. Okay, let‟s get started! 26
  • 28. “Whys” of prototyping Improve your design decision-making Communicate an Idea Gather User Feedback Explore the “Unknowns” Fine-tune an Idea 28
  • 29. Communicating an Idea or Experience YouTube Video 29
  • 36. Experiential Prototyping: Best suited for design explorations where: 1 You are working on a “broader” mobile project. 2 Target mobile hardware and software scope is unknown. (perhaps being created). 3 The design space is relatively unchartered. 36
  • 37. Tactical Prototyping: Best suited for design explorations where: 1 You are working on a “focused” mobile project. 2 Target mobile hardware and software scope is known. 3 The design space is relatively known. 37
  • 39. 39
  • 40. 40
  • 42. Context will likely be your blindside 42
  • 45. Experiential Prototyping will help you understand context 45
  • 46. Experiential Prototyping: Best suited for design explorations where: You are working on a “broader” 1 mobile project. 2 Target mobile hardware and software scope is unknown. (perhaps being created). 3 The design space is relatively unchartered.
  • 47. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  • 48. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  • 55. In reality… people‟s lives are messy
  • 56. Similar to improvisational theater, body storming involves acting out possible scenarios or use cases with actors and props. Unlike computer- based technology that is logic based and only makes visible the conditions that existed before, people are illogical, perceptive, aware, and self-correcting. Body storming is a technique that helps capture and harness these messy yet essential aspects of human behavior and account for them in the mobile design process. 56
  • 57. 1. Select groups of five to eight participants in a troupe. Photo by Christian Crumlish (xian), 2009 on Flickr 57
  • 58. 1. Select groups of five to eight participants in a troupe. 2. Identify 3-5 experience scenarios for your troupe to “perform.” Examples: Purchasing a cup of coffee with my iPhone, selecting which phone to purchase in a carrier‟s store. Photo by Christian Crumlish (xian), 2009 on Flickr 58
  • 59. 3. Every player must have a role; there should be no “trees” that are just for background. Use large cards that label the roles people are playing. 59 Photo by Christian Crumlish (xian), 2009 on Flickr
  • 60. 4. Props can have feelings, thoughts, and the ability to speak. Use thought-bubble cards to show what a participant is thinking versus saying. Photo by Christian Crumlish (xian), 2009 on Flickr 60
  • 61. 5. Have a narrator or color commentator who can explain things. The narrator can pretend the scenario is like television, using a remote to stop action, rewind, or fast-forward. Photo by Christian Crumlish (xian), 2009 on Flickr 61
  • 62. 6. De-brief after each scenario. What did the group learn? What was surprising? What seemed important? Capture what you learned from the exercise and discuss how you can integrate it into what happens next. Photo by Christian Crumlish (xian), 2009 on Flickr 62
  • 63. Bodystorming will help you capture the emotional tenor of mobile interactions 63
  • 65. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  • 66. Speed Dating Prototypes Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 66
  • 67. Scott Davidoff of CMU •Few design tools •High Cost of Failure •Unpredictable social consequences Rapidly Exploring Application Design through Speed Dating 67
  • 68. Speed Dating Prototypes Builds on three theories: 1 Abundance brings perspective. Need to cross boundaries to know 2 they exist. Multiple low-cost engagements with 3 multiple concepts enables a broader perspective to emerge. 68
  • 70. Step Two Create storyboards that depict each concept Illustration courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 70
  • 71. Step Three Present storyboards to users & gather feedback 71
  • 72. Step Four Create prototypes Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 72
  • 73. Step Five Conduct user enactments with prototypes Photo courtesy of Scott Davidoff Rapidly Exploring Application Design through Speed Dating 73
  • 74. Speed Dating Prototypes are especially well-suited for gathering user impressions of a new-to-the-world experience 74
  • 75. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  • 77. 77
  • 78. Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. 78
  • 79. Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. 79
  • 80. Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. Rough out a basic story. 80
  • 81. Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. Rough out a basic story. Start filling in the cells. Rough out the complete story, then fill in details. 81
  • 82. Mobile UX Storyboarding Identify the central idea(s) you are trying to communicate. Create a character and identify the key issues he/she currently faces. Rough out the basic story Start filling in the cells. Rough out the complete story, then fill in details. 82
  • 83. 83
  • 84. 84
  • 85. Your Design Challenge! Storyboarding 1 Select one concept you‟d like to explore more deeply using the storyboarding technique. Storyboard one scenario using the templates 2 provided. Remember to identify the key issues the 3 character faces and rough out the complete story before filling in details.
  • 90. Experiential Prototypes Body Storming Speed Dating Prototypes Storyboarding Concept Videos
  • 91. Concept Videos Nokia 888 communicator concept phone design by Tamer Nakisci 91
  • 92. 92
  • 93. 93 93
  • 94. Concept Videos Pros •High Impact •Highly Shareable •Good for High-Level Ideas •Technology still in development 94
  • 95. Concept Videos Pros Cons •High Impact •Resource Intensive!!! •Highly Shareable •Skill Intensive •Good for High-Level •Cultural Fit Ideas •Concept videos don‟t •Technology still in make bad ideas good. development 95
  • 97. Tactical Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 97
  • 98. Tactical Prototypes Sketching/Paper Prototyping In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 98
  • 99. Sketching 99
  • 100. Great mobile UIs speak their power 100
  • 102. A Brave NUI World 102
  • 103. 103
  • 104. Seated in a relatively predictable environment Large screen enables multi-tasking Keyboard and a mouse for input 104
  • 105. We‟re reaching the edges of what GUI can do 105
  • 106. Most mobile smartphones have touchscreens with Natural User Interfaces 106
  • 107. GUIs Become Brittle on a Mobile Device 107
  • 110. 110
  • 112. Key differences between NUI and GUI 112
  • 114. GUI Mental Model = Computer as tool 114
  • 115. GUI = Recognition “What you see is what you get” 115
  • 116. GUI = Metaphorics, containment and place 116
  • 117. GUIs = Heavy Chrome, Icons & Buttons 117
  • 119. NUI Mental Model = Computer as media 119
  • 120. NUI = Intuition “What you do is what you get” 120
  • 121. NUI = Fluid, Unmediated, and Organic 121
  • 122. NUIs = Content is the Star 122
  • 123. Highly variable context and environment Small screen size and limited text input UI takes up the entire screen Difficult to multi-task and easy to get lost 123
  • 124. GUI = Experiences are anchored 124
  • 125. NUI = Experiences Unfold 125
  • 126. NUIs Unfold Like a Game 126
  • 127. NUIs Can Feel Anchor-less 127
  • 128. 128
  • 129. Mobile Experiences Unfold Patterns for how mobile experiences unfold and progressively reveal their nature 1 The Nested Doll Pattern 2 The Hub and Spoke Pattern 3 The Bento Box Pattern 4 The Filtered View Pattern 129
  • 131. Hub and Spoke Pattern 131
  • 134. A Trick to unfolding = Information boulders to pebbles 134
  • 135. Your Design Challenge! From GUI to NUI 1 Identify an interaction sequence you‟d like to recreate using NUI principles. 2 Sketch out the interaction using the templates provided. 3 Identify how you‟d like your mobile experience to unfold. 135
  • 136. REMEMBER! It‟s easy to go crazy and try to do it all. Instead, focus on applying what we‟ve covered… Understanding the differences between graphical and natural user interfaces. Experimenting with how your mobile experience can unfold and and progressively reveal its nature. Play around with the unfolding patterns that have been presented… or invent some of your own. 136
  • 137. 137
  • 139. Paper In-Screen Prototypes Following Process documented by Diego Pulidovia UX Magazine – Paper In-Screen Prototypes Photos courtesy of Diego Pulido and UX Magazine 139
  • 140. 1. Sketch screen layouts. 140 Photo courtesy of Diego Pulido and UX Magazine
  • 141. 1. Sketch screen layouts. 2. Scan or photograph the sketches. 141 Photo courtesy of Diego Pulido and UX Magazine
  • 142. 1. Sketch screen layouts. 2. Scan or photograph the sketches. 3. Making sizing adjustments to the files. 142 Photo courtesy of Diego Pulido and UX Magazine
  • 143. 4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly. 143 Photo courtesy of Diego Pulido and UX Magazine
  • 144. 4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly. 5. Import the files into the mobile device‟s photo gallery. 144 Photo courtesy of Diego Pulido and UX Magazine
  • 145. 4. Save the resized images in a file format supported by the mobile device. Be mindful of the sequencing of your screens and label files accordingly. 5. Import the files into the mobile device‟s photo gallery. 6. Click and swipe away. 145 Photo courtesy of Diego Pulido and UX Magazine
  • 146. Your Design Challenge! Create an in-screen prototype. Hang your screen designs on the wall. Photograph each design. Transfer photos from the camera to computer and make any sizing adjustments. Sync images to your mobile device and swipe away…. 146
  • 147. Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 147
  • 149. 149
  • 150. Reasons for Prototyping in Keynote/Powerpoint It‟s super efficient and fast! Level of fidelity is high – gives you an end result that looks and feels like a real app. Supports *some* gestures and transitions. It‟s as close as you can get to the real thing without digging into code. 150
  • 151. 151
  • 152. Tactical Prototypes Sketching In-Screen Mobile Prototypes Mobile Browser Prototypes Keynote/Powerpoint Prototypes Flash Prototype Platform Specific Prototype 152
  • 153. Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
  • 156. 156
  • 157. “We made the web in the image of ourselves, and in the U.S., that means OBESE.” ~Jason Grigsby
  • 158. A 158
  • 159. 159
  • 160. Q: “I think a lot of web design in the past five to ten years is actually Q: just a reflection of print again. We‟ve been designing for one context, which isn‟t much better than a PDF document.” ~ Bryan Rieger 160
  • 161. Q: “Our obsession with layout (carried over from print design) Q: keeps us from seizing much bigger opportunities on mobile.” ~ Luke Wroblewski 161
  • 162. 162
  • 164. Plans & Situated Action Mutual Reconfiguration
  • 166. Q: Suchman‟s theory of mutual reconfiguration suggests a person‟s Q: capacity to act (their agency) is reconfiguredwhen it comes into contact with another thing or person - thathuman action is constantly constructed and reconstructed from dynamic interactions with the material and social worlds.
  • 168. 168
  • 169. Q: Q: Two Design Implications
  • 170. Q: Q: 1. Shift in contextual assumptions
  • 171. Q: Q: 2. Shift in our sensibilities around content as a design material
  • 172. Q: Q: 1. Shift in contextual assumptions
  • 179. A
  • 180. A Throughout the design process, our work should be situated in the contexts where it will be used.
  • 181. Go to the Gemba
  • 182. Go to the Gemba
  • 183. Go to the Gemba
  • 184. Q: Q: 2. Shift in our sensibilities around content as a design material
  • 185. Design as the manipulation of materials.
  • 187. Q: Q: Pages and screens are not our design material
  • 188. Content as a design material.
  • 189. “Right now many designers end up focusing a lot of energy on the overlying Q: view – the whole template and look and feel. But the smaller the screen gets, the Q: less that stuff matters. One of the most important things we‟ve started looking at is writing and working with APIs rather than designing „pages‟ for one context.” ~Stephanie Rieger
  • 190. “For so much digital content, there is no good metaphor to render anymore – the content is just information, text and images – so new approaches to Q: interaction and visual UI design are needed.” ~Mike Kruzeniski
  • 196. Emergent Mobile Topics 1 Shapeshifting 2 A Brave NUI World 3 Comfortable Computing
  • 198. Q: Q:
  • 199. “The most profound technologies Q: are those that disappear. Q: They weave themselves into the fabric of everyday life until they are indistinguishable from it.” ~ Mark Weiser The Computer for the 21st Century
  • 200. Q: Q: Tab Pad Yard-Sized Board 1991
  • 201. 2010
  • 203. Mobile devices are the gateway drug for ubicomp
  • 204. Following toddlers into the future
  • 206. “I like cuddling up in bed with Netflix Q: on the iPad instead of sitting in front of the TV. It‟s more comfortable to Q: go to bed with a movie the same way I used to go to bed with a book” ~ Norbert iPad Study Participant
  • 207. “It‟s almost like my blankie… Q: I curl up in bed with it, or on the couch. I usually have it with Q: me, regardless of extenuating circumstances ” ~ Erin iPad Study Participant
  • 208. “It’s almost like my blankie…”
  • 212. Say Goodbye to Done
  • 213. This should look familiar… 213
  • 214. This should look familiar… The web has evolved around a task-efficiency model. Mobile can be different. 214
  • 215. Tasks are about completion… 215
  • 216. Tasks are about completion… Possibilities are interactions that accrue over time… 216
  • 217. Tasks are about completion… Possibilities are interactions that accrue over time… … or facilitate exploration… 217
  • 218. Tasks are about completion… Possibilities are interactions that accrue over time… ..or are about … or facilitate SENSING exploration… INTENT! 218
  • 219. 219
  • 220. 220
  • 221. 221
  • 222. 222
  • 223. 223
  • 224. 224
  • 226. Fidelity 226
  • 227. Failure 227
  • 228. Prototyping is not a Panacea 228
  • 229. PC Prototyping is considered a Luxury A
  • 230. Mobile Prototyping is Essential A
  • 231. Great Mobile Experiences: 1 are uniquely mobile 2 are sympathetic to context 3 speak their power 3
  • 232. Mobile presents an opportunity to invent new ways for users to interact with information. 232
  • 233. Thank you! Email: rachel.hinman@nokia.com Templates and Online Resources: www.rachelhinman.com/mobile_prototyping_essentials
  • 234. Oh! By the way, I‟m writing a book.. The Mobile Frontier A Guide for Designing Mobile Experiences Expected Publication: May 2012 Follow along…

Hinweis der Redaktion

  1. Instead, the web was built upon a static model – the web page. And we’ve allowed those pages to become bloated and unweildy…