SlideShare a Scribd company logo
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
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.
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
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
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
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
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
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.
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
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 devices are
the gateway drug for ubicomp
Following toddlers into the future
“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…”
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
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…

More Related Content

What's hot

Wearable computing and embodied interaction
Wearable computing and embodied interactionWearable computing and embodied interaction
Wearable computing and embodied interaction
UTFPR
 
Introduction to Interaction Design
Introduction to Interaction DesignIntroduction to Interaction Design
Introduction to Interaction Design
UTFPR
 
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 Update
a-small-lab
 
UX LX in short...
UX LX in short...UX LX in short...
UX LX in short...
pubsmith
 
Leadership
LeadershipLeadership
Leadership
Dylan Nirvana
 
Improving Discoverability
Improving DiscoverabilityImproving Discoverability
Improving Discoverability
Ginsburg Design
 
Embodied Cognition - Booch HICSS50
Embodied Cognition - Booch HICSS50Embodied Cognition - Booch HICSS50
Embodied Cognition - Booch HICSS50
diannepatricia
 
Make It So
Make It SoMake It So
Make It So
WebVisions
 
Embodied Cognition with Pproject Intu
Embodied Cognition with Pproject IntuEmbodied Cognition with Pproject Intu
Embodied Cognition with Pproject Intu
diannepatricia
 
Validating Ideas Through Prototyping
Validating Ideas Through PrototypingValidating Ideas Through Prototyping
Validating Ideas Through Prototyping
Chris 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 Life
CIT, NUS
 
Mobile UX: We’re still human
Mobile UX: We’re still humanMobile UX: We’re still human
Mobile UX: We’re still human
Reading Room
 
[I3 d]04 interactivity
[I3 d]04 interactivity[I3 d]04 interactivity
[I3 d]04 interactivity
jylee_kgit
 
[I3 d]03 interactivity
[I3 d]03 interactivity[I3 d]03 interactivity
[I3 d]03 interactivity
jylee6977
 
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
 
What the F*** is UX?
What the F*** is UX?What the F*** is UX?
What the F*** is UX?
Helena Levison
 
Hicss17 asakawa
Hicss17 asakawaHicss17 asakawa
Hicss17 asakawa
diannepatricia
 
시나리오 베이스 디자인 방법론 (Scenario Based Design)
시나리오 베이스 디자인 방법론 (Scenario Based Design)시나리오 베이스 디자인 방법론 (Scenario Based Design)
시나리오 베이스 디자인 방법론 (Scenario Based Design)
Hajin Lim
 
Introduction To HCI
Introduction To HCIIntroduction To HCI
Introduction To HCI
Kshitiz Anand
 

What's hot (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
 

Similar to Mobile Prototyping Essentials - Part II

Mobile Prototyping Essentials
Mobile Prototyping EssentialsMobile Prototyping Essentials
Mobile Prototyping Essentials
Rachel Hinman
 
Apdf Spontaneous Invention
Apdf Spontaneous InventionApdf Spontaneous Invention
Apdf Spontaneous Invention
Prarthana Johnson
 
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.0
Siobhan O'Flynn
 
Prototyping Experiences for Connected Products
Prototyping Experiences for Connected ProductsPrototyping Experiences for Connected Products
Prototyping Experiences for Connected Products
Martin Charlier
 
Concept design-second class
Concept design-second classConcept design-second class
Concept design-second class
Mariana Salgado
 
Mastering the Art of Promotion
Mastering the Art of PromotionMastering the Art of Promotion
Mastering the Art of Promotion
Hedren Sum
 
Ignite seoul 4-12 정기원 designfiction
Ignite seoul 4-12 정기원 designfictionIgnite seoul 4-12 정기원 designfiction
Ignite seoul 4-12 정기원 designfiction
Jinho 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_12067
Cynthia Calongne
 
Introduction to Prototyping: What, Why, How
Introduction to Prototyping: What, Why, HowIntroduction to Prototyping: What, Why, How
Introduction to Prototyping: What, Why, How
Abdallah 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 - 012920
melendez321
 
BCII 2016 - Visualizing Complexity
BCII 2016 - Visualizing ComplexityBCII 2016 - Visualizing Complexity
BCII 2016 - Visualizing Complexity
Simon Buckingham Shum
 
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
Michael 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 Skills
Paul 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 Vietnam
Kenji 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 products
Martin 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 relationship
Pietro 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 PIONEERS
Stefan Haas
 

Similar to 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
 

Recently uploaded

一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
aonx8o5f
 
SPICE PARK JUN2024 ( 6,826 SPICE Models )
SPICE PARK JUN2024 ( 6,826 SPICE Models )SPICE PARK JUN2024 ( 6,826 SPICE Models )
SPICE PARK JUN2024 ( 6,826 SPICE Models )
Tsuyoshi Horigome
 
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
w26izoeb
 
World trade center in kerala proposal- AR. DEEKSHITH MAROLI 724519251008 REPORT
World trade center in kerala proposal- AR. DEEKSHITH MAROLI 724519251008 REPORTWorld trade center in kerala proposal- AR. DEEKSHITH MAROLI 724519251008 REPORT
World trade center in kerala proposal- AR. DEEKSHITH MAROLI 724519251008 REPORT
deekshithmaroli666
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
bz42w9z0
 
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
aprhf21y
 
Value based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docxValue based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docx
JIT KUMAR GUPTA
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
yqyquge
 
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
lyurzi7r
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
EricHo305923
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
RPWORLD Manufacturing
 
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
bel9p89b
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
t34zod9l
 
Call Girls Jaipur 📞 8445551418 🌟Door Step Delivery We Offering You 100% Genuine
Call Girls Jaipur 📞 8445551418 🌟Door Step Delivery We Offering You 100% GenuineCall Girls Jaipur 📞 8445551418 🌟Door Step Delivery We Offering You 100% Genuine
Call Girls Jaipur 📞 8445551418 🌟Door Step Delivery We Offering You 100% Genuine
parulsinha
 
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
batchelorerbm45967
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
kohd1ci2
 
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
twqryq79
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
ubogumo
 
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
k4krdgxx
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
zv943dhb
 

Recently uploaded (20)

一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
一比一原版(Hull毕业证)英国哈珀亚当斯大学毕业证如何办理
 
SPICE PARK JUN2024 ( 6,826 SPICE Models )
SPICE PARK JUN2024 ( 6,826 SPICE Models )SPICE PARK JUN2024 ( 6,826 SPICE Models )
SPICE PARK JUN2024 ( 6,826 SPICE Models )
 
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
一比一原版(McGill毕业证)加拿大麦吉尔大学毕业证如何办理
 
World trade center in kerala proposal- AR. DEEKSHITH MAROLI 724519251008 REPORT
World trade center in kerala proposal- AR. DEEKSHITH MAROLI 724519251008 REPORTWorld trade center in kerala proposal- AR. DEEKSHITH MAROLI 724519251008 REPORT
World trade center in kerala proposal- AR. DEEKSHITH MAROLI 724519251008 REPORT
 
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
一比一原版澳洲科廷科技大学毕业证(Curtin毕业证)如何办理
 
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
一比一原版(brunel毕业证书)布鲁内尔大学毕业证如何办理
 
Value based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docxValue based approach to heritae conservation -.docx
Value based approach to heritae conservation -.docx
 
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
一比一原版(ututaustin毕业证书)美国德克萨斯大学奥斯汀分校毕业证如何办理
 
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
一比一原版美国俄勒冈大学毕业证(UO,UofO学位证)如何办理
 
Intel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelinesIntel-Centrino-Mobile-Technology-guidelines
Intel-Centrino-Mobile-Technology-guidelines
 
Plastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdfPlastic Molding Infographic - RPWORLD.pdf
Plastic Molding Infographic - RPWORLD.pdf
 
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
一比一原版(UofT毕业证)加拿大多伦多大学毕业证如何办理
 
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
一比一原版(UWS毕业证)澳洲西悉尼大学毕业证如何办理
 
Call Girls Jaipur 📞 8445551418 🌟Door Step Delivery We Offering You 100% Genuine
Call Girls Jaipur 📞 8445551418 🌟Door Step Delivery We Offering You 100% GenuineCall Girls Jaipur 📞 8445551418 🌟Door Step Delivery We Offering You 100% Genuine
Call Girls Jaipur 📞 8445551418 🌟Door Step Delivery We Offering You 100% Genuine
 
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
欧洲杯足彩-欧洲杯足彩买球软件-欧洲杯足彩买球软件下载|【​网址​🎉ac123.net🎉​】
 
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
一比一原版(ECU毕业证)澳洲埃迪斯科文大学毕业证如何办理
 
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
一比一原版美国加州大学戴维斯分校毕业证(ucdavis学位证)如何办理
 
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
一比一原版(lu毕业证书)英国拉夫堡大学毕业证如何办理
 
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
一比一原版英国伦敦政治经济学院毕业证(LSE学位证)如何办理
 
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
一比一原版(UCB毕业证)英国伯明翰大学学院毕业证如何办理
 

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
  • 51.
  • 52.
  • 53.
  • 54.
  • 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.
  • 86.
  • 87.
  • 88.
  • 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
  • 108.
  • 109.
  • 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
  • 155.
  • 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
  • 165.
  • 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.
  • 167.
  • 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
  • 173.
  • 174.
  • 175.
  • 176.
  • 177.
  • 178.
  • 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.
  • 186.
  • 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
  • 191.
  • 192.
  • 193.
  • 194.
  • 195.
  • 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
  • 202.
  • 203. Mobile devices are the gateway drug for ubicomp
  • 204. Following toddlers into the future
  • 205.
  • 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…”
  • 209.
  • 210.
  • 211.
  • 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
  • 225.
  • 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…

Editor's Notes

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