mobile prototyping
DESCRIPTION
Prototyping for Mobile Design Workshop - January, 2012. Bangalore PresentationTRANSCRIPT
Special Thanks to our Sponsors
Introduction to Mobile Design
Ideating
Need Analysis
3 ACTIVITES - DESIGNING FOR MOBILITY
IDENTIFYING NEED FOR A MOBILE APPLICATION
BRAINSTORMING AND IDEATING
PRESENTING CONCEPTS
Mobile Design Guidelines and patterns The Design Process
3 ACTIVITES - DESIGNING FOR MOBILITY
Card Sort
Story Boards
MOBILE IS GROWING LIKE CRAZY
“MOBILE PHONES
WILL OVERTAKE PC’S
AS THE MOST COMMON
WEB ACCESS DEVICES
BY 2013”
Gartner Research, 2010
Google: Our Mobile Planet, May 2012
Google: Our Mobile Planet, May 2012
Google: Our Mobile Planet, May 2012
Google: Our Mobile Planet, May 2012
Google: Our Mobile Planet, May 2012
MOBILE PRESENTS AN
OPPORTUNITY TO INVENT
NEW WAYS FOR USERS TO
INTERACT WITH
INFORMATION.
NEXT BIG QUESTION WHAT TYPE OF MOBILE APP TO START WITH
RESPONSIVE WEBSITE? WEB APP ? NATIVE APP? HYBRID APPS?
Thin Client Browser Apps
PROS
CONS
Rich Client Native Apps
PROS
CONS
MOBILE DESIGN
CHALLENGES
AND
GUIDELINES
Who are the users? What do you know about them? What type of behavior can you assume or predict about the users? What is happening? What are the circumstances in which the users will best absorb the content you intend to present?
FACTORS THAT INFLUENCE PERFORMANCE.
OPTIMIZE
YOUR
APP FOR
HIGH
PERFORMANCE
ONLY DESIGN WHAT
MAKES SENSE FOR A
MOBILE CONTEXT
COMMON FEATURES THAT IMPACT THE
USER EXPERIENCE
FEATURE WHAT IT DOES EXAMPLE APP OR FEATURE
Camera Takes photos & often video.
Too many to list!
GPS Provides the phone’s location.
Maps
Accelerometer Detects the phone’s orientation.
Determines when to switch from portrait to landscape view
Magnetometer Detects the phone’s direction.
Compass
Gyroscope Detects 3-axis angular acceleration around the X, Y and Z axes.
Gaming
Proximity sensor Detects proximity of user to phone.
Cue to dim screen when user speaking on phone.
Light sensor Determines how much light is available in the area surrounding the phone
Adjusts screen brightness to conserve battery.
How can food joints use mobile
devices to improve their customer
experience?
Identifying Needs – 30 mins
1. Divide into groups 2. Head to the nearest food joint 3. Observe mobile users in a mobile context 4. Develop a list of customer needs based on your
observations
Ideating the Context – 30 mins
1. Brainstorm with the team 2. Create 2-3 unique concepts based on the needs
your team identified 3. Give your concept a name 4. Create user profiles
Presenting Concepts
1. Each team would present a 10 minute introduction to their app which would include 1. Elevator Pitch: What your app does 2. User Profiles: Who your app is targeting and why 3. User Research Summary: What you learned in the user
research/observation study conducted
MOBILE MINDSET
Because of the differences between mobile and desktop, it’s imperative to get yourself into a mobile mindset before getting started.
Be focused: More is not bePer. Edit your features ruthlessly. You are going to have to leave stuff out 1
Be unique: Know what makes your app different and amplify it. There are lots of fish in the sea of mobile apps. If there’s nothing special about your app, why would anyone pick it?
2
3 Be charming: Mobile devices are intensely personal. They are our constant companions. Apps that are friendly, reliable and fun are a delight to use, and people will become quite aPached to the experience.
Be considerate: App developers too o]en focus on what would be fun to develop, their own mental model of the app or their personal business goals. These are good places to start, but you have to put yourself in your user’s shoes if you ever hope to create an engaging experience.
4
MOBILE CONTEXTS
IS THIS THE
CONTEXTS?
It is certainly one context, but it’s not the only one.
To begin to put ourselves in the shoes of our users, we need to consider three major mobile contexts
There are a lot of people using their smartphones on the couch at home. In this context, immersive and deligh_ul experiences geared toward a longer usage session are a great fit. S`ll, interrup`ons are highly likely, so be sure your app can pick up where your user le] off. Examples: Facebook, TwiPer, Angry Birds, web browser.
This is the 'running though the airport' scenario. The ability to accomplish micro-‐tasks quickly and reliably with one hand in a hec`c environment is cri`cal. Remember that the user will have tunnel vision in this context, so huge targets and bold design are important. Examples: TripIt, email, calendar, banking.
Users who are in transit, in unfamiliar surroundings, or in familiar surroundings but interested in something unknown around fall into the lost category. In this context, sketchy connec`vity and baPery life are big concerns, so you should offer some level of offline support and be sparing with your use of geoloca`on and other baPery hogs. Typical examples: Maps, Yelp, Foursquare.
COMMUNICATIONS
Provide instant feedback for every interac`on. If you don’t, the user will wonder if the app has frozen up, or if they missed the target they were trying to hit. The feedback could be tac`le (like the Android ‘thump’ vibra`on), or visual (highligh`ng a tapped buPon, for instance).
Modal alerts are extremely pushy and intrusive to the user’s flow, so you should only use them when something is seriously wrong. Even then, try to mi`gate the intensity by keeping language reassuring and friendly. Remember not to use modal alerts for 'FYI' type informa`on.
When you have to ask a user to confirm an ac`on, it’s acceptable to display a modal confirma`on dialog (such as 'Are you sure you want to delete this dra]?'). Confirma`ons are less intrusive than alerts because they are in response to a user ac`on and therefore in context and perhaps even expected.
GLOBAL GUIDELINES
Different apps call for different approaches, designs and techniques. The inherent nature of a pocket-‐sized touchscreen device suggests several global guidelines; ie, the stuff that always maPers.
Responsiveness is absolutely cri`cal. If your user does something, your app needs to acknowledge the interac`on instantly. It’s OK if certain opera`ons take `me. Just make sure you let the user know you’re working on it.
Polish is extremely valuable. Because of the 'constant companion' nature of our rela`onship to smartphones, paying a lot of aPen`on to gekng the liPle details perfect will be no`ced and appreciated.
With the advent of touchscreen interfaces, everyone is always talking about 'finger this' and 'finger that'. In reality, the thumb is what we need to design for.
The revolu`on of touch interfaces is that they enable us to interact directly with our content. This removes abstrac`ons (such as mouse and trackpad) and is more in line with how our brains are wired. Leverage the intui`ve power of touch UI by minimising interface chrome (buPons, tab bars, checkboxes, sliders and so on) wherever possible and pukng your content front and centre.
Avoid scrolling. Having a non-‐scrolling screen has a more solid and dependable 'feel' than a scrolling view because it’s more predictable. Of course, certain screens have to scroll, but it’s good to avoid it where you can.
NAVIGATION MODEL
There are plenty of novel naviga`on models for mobile apps but if you're going to use one of common naviga`on models, be sure to pick the one that makes the most sense for your app.
None: Single screen u`lity apps (eg Weather app on iPhone)
Tab bar: Three to six dis`nct content areas (eg TwiPer for iPhone)
Drill down: List and detail content hierarchy (eg Sekngs app on iPhone)
USER INPUT
Typing s`nks even on the best devices, so you should do what you can to make it easier for your users.
If your app invites a lot of typing, you should ensure you support landscape orienta`on.
There are many keyboard varia`ons on popular smartphones (text, number, email, URL and so on). Consider each of your input fields and be sure to display the keyboard that will be most useful for the data entry being done.
GESTURES
One of the most iconic aspects of modern touch interfaces is that they support gesture-‐based user interac`on.
Gestures are invisible, so discovery is an issue. You have to decide how to reveal their existence to the user.
Mul`-‐touch gestures require two-‐handed opera`on. EXAMPLE in the na`ve Maps app on iOS which uses a pinch open gesture to zoom out. When I’m traveling in a foreign city with a coffee in one hand and my phone in the other, this is an annoying limita`on. Android addresses this issue by including zoom in/out buPons overlaid on the map
Understand and iden`fy the core
problems first
Discover
HOW DO WE
DEFINE
PROBLEMS?
CULTURAL AND SOCIAL
CHALLENGES
AND
NEEDS
DEMOGRAPHICS AND ABILITIES
ENVIRONMENTAL AND CONTEXTUAL
HOW DO WE
IDENTIFY
PROBLEMS?
STAKEHOLDER INTERVIEWS
KICKOFF MEETINGS
CONTENT AUDIT/INVENTORY
FOCUS GROUP
CONTEXTUAL INQUIRIES
PERSONAS
Iden`fy possible solu`ons and plan execu`on
PLAN
Create designs that resolve the core problems
Design
HOW DO WE
RESOLVE
THE
PROBLEMS?
SCENARIOS
CARD SORTING
APP MAP OR FLOWCHART
WIREFRAME
PROTOTYPE
USABILITY TESTING
Develop func`onal code based on the designs
BUILD
Review, test, and analyze effec`veness of the design
EVALUATE
RECAP
How can food joints use mobile
devices to improve their customer
experience?
Information Gathering– 45 mins
1. Note down a list of possible features for your app concept
2. Prepare the cards 3. Execute card sorting 4. Analyze the results
INFORMATION GATHERING
15 MINUTES BREAK
Storyboarding – 60 mins
STORYBOARDING
1. Based on your previous activities, Identify the central
idea(s) you are trying to communicate.
2. Storyboard one scenario using the templates provided.
3. Remember to identify the key issues the character faces
and rough out the complete story before filling in details.
4. Present a small demo of your storyboard concept
MOBILE PROTOTYPING ESSENTIALS
Ideating
Need Analysis
2 ACTIVITES - DESIGNING FOR MOBILITY
QUIZ
DESIGNING AND TESTING PAPER PROTOTYPES
MOBILE PROTOTYPING ESSENTIALS
Ideating
Need Analysis
3 ACTIVITES - DESIGNING FOR MOBILITY
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE
IN DEVICE INTERACTIVE PROTOTYPES
MOBILE BROWSER PROTOTYPE
Mobile Prototyping Tools and Methods
What is
Prototyping?
THE WORD PROTOTYPE comes from the Greek pratos, which means "first," and typos. which means "impression.”
FIRST
IMPRESSION
Why
Prototyping?
Prototypes can help you
solve design problems,
evaluate designs and
communicate design
ideas
Prototypes can be an efficient way to
work through design problems before
gekng deep into coding.
SOLVE DESIGN PROBLEMS
They can help address everything from
higher-‐level conceptual issues to lower-‐
level interac`ons.
SOLVE DESIGN PROBLEMS
Prototypes are often used to evaluate
design ideas, concepts, flows, and
Interactions before investing
development time.
EVALUATE DESIGN IDEAS
Prototypes make your designs bePer
IN A NUTSHELL
Prototypes facilitate communica`on
Prototypes enable user input and usability assessment
Prototypes help assess technical feasibility
1
2
3
4
THE PROTOTYPING
SPECTRUM
LOW FIDELITY
MEDIUM FIDELITY
HIGH FIDELITY
THE PROTOTYPING
GENRES
TACTICAL PROTOTYPING
Sketching
Paper Prototyping
Interac`ve On-‐Device Prototyping
1
2
3
Interac`ve On-‐Device Prototyping includes:
In-‐screen mobile prototype
Mobile browser prototype
Mobile prototype using presenta`on so]ware
Pla_orm specific prototype
1
2
3
44
Best suited for design explorations where:
You are working on a “focused” mobile project.
1
2
3
Target mobile hardware and software scope is known.
The design space is relatively known.
Storyboarding
Bodystorming
Speed da`ng prototypes
Concept videos
EXPERIENTIAL PROTOTYPING
1
2
3
4
Best suited for design explorations where:
You are working on a “broader” mobile project.
1
2
3
Target mobile hardware and software scope is unknown (perhaps being created).
The design space is relatively unchartered.
TACTICAL PROTOTYPING
TACTICAL PROTOTYPING
Sketching
Paper Prototyping
Interac`ve On-‐Device Prototyping
1
2
3
Sketching is rapid, freehand drawing that we do with no inten`on of its becoming a finished product.
Sketching is a founda`on upon which we can overlay our actual design work.
SKETCHING BENEFITS
Quick: A sketch is quick to make, or at least gives that impression.
Timely: A sketch can be provided when needed.
Inexpensive: A sketch is cheap. Cost must not inhibit the ability to explore a concept, especially early in the design process.
WHEN DO WE USE THESE SKETCH PROTOTYPES?
DESIGNING INTERFACES • Visualizing concepts • Exploring alterna`ves • Resolving feature details • Developing interac`on scenarios
TESTING INTERFACES • Intelligibility -‐ can you read or interpret this? • Trackability -‐ can you follow this? • Fumble factor -‐ can you make this work?
PRESENTING INTERFACE IDEAS • To UI designers -‐ looking at all parts of the interface • To programmers -‐ implemen`ng the interface • To marke`ng and management -‐ determining applica`on features • To users -‐ gekng early feedback
TACTICAL PROTOTYPING
Sketching
Paper Prototyping
Interac`ve On-‐Device Prototyping
1
2
3
PAPER PROTOTYPE?
Paper prototyping is a key component of the DESIGN process and is a popular method among designers.
Paper prototypes are essen`ally paper models of your smartphone apps
PAPER PROTOTYPE BENEFITS
Quick itera+ons Paper prototypes enable you to rapidly iterate and experiment with many ideas. The modest `me investment makes it easier to throw away less promising direc`ons.
Inexpensive Ordinary office supplies can be used for paper prototypes: Sharpies, Pos`ts, printer paper. Most important, these up-‐front paper itera`ons can reduce costly changes on the development end.
Collabora+ve Paper prototypes do not require any technical skills; thus everyone (users, too!) can par`cipate.
Easy to edit You or your users can edit paper prototypes on the & y (e.g., change labels, add screens, add buPons)
PAPER PROTOTYPE CHALLENGES
Paper prototypes are less suitable for
refining low-‐level interac`ons such as
transi`ons, scrolling, and swiping.
PAPER PROTOTYPE CHALLENGES
Less useful for certain classes of apps,
such as musical instruments, videos, and
games.
User experience issues o]en explored with paper prototypes include
App concept -‐ Do users understand your app’s central concept? 1
2 Workflows -‐ Is the overall naviga`on clear? Are there too many steps to complete tasks?
3 Informa`on organiza`on -‐ Does the current organiza`on match user's expecta`ons?
4 Terminology -‐ Are the labels on tabs, screens, and buPons clear?
PAPER PROTOTYPING HOW TO?
PAPER, PEN, CARDBOARD, REMOVABLE TAPE, GLUE, CORRECTION FLUID, AND SCISSORS.
At some point your designs will have to match the PHONE screen dimensions—320 × 480 pixels (640 × 960 for iPhone 4)—but paper prototypes can be less exact. Using a larger form factor will make it easier for others to interact with the design (e.g., rearrange the layout and write in text Fields)
Your prototype will include a background, the screens, and the user interface controls.
RECAP
How can food joints use mobile
devices to improve their customer
experience?
Create Paper Prototype – 60 mins
PAPER PROTOTYPE
1. Create a paper prototype that illustrates 3 major tasks for
your interface / interaction design, likely (but not
necessarily) based on your storyboards.
2. The prototype should be complete enough to "run" a new
user through each task.
Test Paper Prototype – 60 mins
PAPER PROTOTYPE
1. Prepare for testing your paper prototype
2. Identify a participant as user, provide him a test script
3. Identify and make notes of your finding
LUNCH
TACTICAL PROTOTYPING
Sketching
Paper Prototyping
Interac`ve On-‐Device Prototyping
1
2
3
Interac`ve On-‐Device Prototyping includes:
In-‐screen mobile prototype
Mobile browser prototype
Mobile prototype using presenta`on so]ware
Pla_orm specific prototype
1
2
3
44
Pros and Cons of Common On-‐Device Prototyping Tools
Level of Complexity/Difficulty to Create
Level of Interac+vity
Level of Programming Required
In-‐Screen Prototype Low Low None
Browser Prototype Medium Low Low
Keynote/Powerpoint Prototype
Medium Medium None
Pla_orm-‐Specific Prototype (example: XCode for the Apple pla_orm)
High High High
Given the limita`ons of sta`c image prototypes,
Interac`ve On-‐Device Prototyping are interac`ve
prototyping techniques.
Interac`ve On-‐Device Prototyping
You can explore almost any aspect of the user experience. In contrast to sta`c image prototypes, you can provide forms, transi`ons, and scrolling content.
ISSUES TO EXPLORE
Although interac`ve prototypes are powerful, there are s`ll some aspects that differen`ate them from the “real” experience. In par`cular, you will s`ll likely need to fake the current loca`on informa`on, live data feeds, and the handling of interrup`ons (what happens when the connec`on is lost or disrupted?).
CHALLENGES
In-‐screen mobile prototype
The idea behind this technique is simple: place the paper prototype of the mobile applica`on inside the mobile device.
In-‐screen mobile prototype
This prototyping technique is prac`cal since it leverages prototypes that are likely to have been previously made for tes`ng.
In-‐screen mobile prototype
If a designer has sketched a number of paper prototypes to conduct a usability test or a heuris`c evalua`on, these can be easily turned into paper-‐in-‐screen prototypes.
In-‐screen Mobile Prototype How to
In-Screen Prototype – 60 mins
IN-‐SCREEN PROTOTYPE
1. Identify one of the scenarios/flows from your previous
exercise
2. Create a quick paper version of the prototype
3. Take pictures from your camera, upload it, optimize it and
test it
10 MINS BREAK
A browser prototype is simply a prototype that is
rendered by using your mobile device’s browser,
which is using HTML and other browser-‐based
programming such as JavaScript.
MOBILE BROWSER PROTOTYPE
For those less familiar with extensive markup,
you can easily upload a series of linked image
maps of screen layouts and view them through
your phone’s browser.
MOBILE BROWSER PROTOTYPE
1
Mobile Browser Prototypes are medium fidelity, very
interac`ve and hence can be tested with full
interac`ons
MOBILE BROWSER PROTOTYPE BENEFITS
Mobile Browser Prototype How to
Mobile Browser Prototype – 30 mins
MOBILE BROWSER PROTOTYPE
1. Identify one of the scenarios/flows from your previous
exercises
2. Create a click through version of your App
3. Test it in mobile browser or emulators
Crea`ng prototypes using presenta`on so]ware such
as Apple Keynote or Microso] PowerPoint is an
efficient way to prototype interac`vity and transi`ons
on a mobile device.
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE
You can easily download pla_orm components from
the Web, build your prototype using the presenta`on
so]ware, fine-‐tune the interac`ons and transi`ons
included in the so]ware, and download the file to
your mobile device.
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE
While designers use various types of tools to
document their wireframe ideas, presenta`on
so]ware is emerging as a favorite tool in the mobile
UX realm.
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE
In addi`on to specifying the placement of design
elements on a screen, presenta`on so]ware
enables designers to turn their work into low-‐
fidelity on-‐device prototypes.
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE -‐ BENEFITS
Instead of flat, sta`c documents, presenta`on
so]ware offers designers the ability to
experiment with transi`ons and interac`vity.
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE -‐ BENEFITS
MOBILE PROTOTYPE USING PRESENTATION SOFTWARE -‐ HOW TO
Mobile Prototyping – 30 mins
MOBILE PROTOTYPING
1. Identify one of the scenarios/flows from your previous
exercises
2. Create a click through prototype using power point or
keynote
3. Upload your design file into mobile device
4. Test it on device
BREAK
PLATFORM SPECIFIC PROTOTYPING
PLATFORM SPECIFIC PROTOTYPING
Is a technique where pla_orm specific prototypes are created using na`ve SDK’s
PLATFORM SPECIFIC PROTOTYPING – CHALLENGES
Requires pla_orm specialized Programming skills
PLATFORM SPECIFIC PROTOTYPING – CHALLENGES
Development `me and effort is more
PLATFORM SPECIFIC PROTOTYPING – BENEFITS
Completely interac`ve and can leverage device’s na`ve capabili`es
EXPERIENTIAL PROTOTYPING
Storyboarding
Bodystorming
Speed da`ng prototypes
Concept videos
EXPERIENTIAL PROTOTYPING
1
2
3
4
STORYBOARDING
is a powerful UX technique borrowed from the filmmaking process
Storyboarding helps us to understand exis`ng scenarios, a well as test hypotheses for poten`al scenarios.
STORYBOARDING HOW TO?
Storyboarding
Bodystorming
Speed da`ng prototypes
Concept videos
EXPERIENTIAL PROTOTYPING
1
2
3
4
BODYSTORMING
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.
Body storming involves acting out possible scenarios or use cases with actors and props.
BODYSTORMING HOW TO?
BODYSTORMING HOW TO?
Bodystorming will help you capture the emotional tenor of mobile interactions
Storyboarding
Bodystorming
Speed da`ng prototypes
Concept videos
EXPERIENTIAL PROTOTYPING
1
2
3
4
SPEED DATING PROTOTYPES
Speed Da`ng Prototypes are especially well-‐suited for gathering user impressions of a new-‐to-‐the-‐world experience
SPEED DATING PROTOTYPE HOW TO?