Mobile Prototyping

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


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





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òns 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òn and other baPery hogs. Typical examples: Maps, Yelp, Foursquare.

COMMUNICATIONS

Provide instant feedback for every interacòn. 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òn), 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òn.

When you have to ask a user to confirm an acòn, it’s acceptable to display a modal confirmaòn dialog (such as 'Are you sure you want to delete this dra]?'). Confirmaòns are less intrusive than alerts because they are in response to a user acòn 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òn instantly. It’s OK if certain operaòns 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ònship to smartphones, paying a lot of aPenòn 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òn of touch interfaces is that they enable us to interact directly with our content. This removes abstracòns (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òn models for mobile apps but if you're going to use one of common navigaòn 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òn.

There are many keyboard variaòns 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òn.

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òn. 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òn. 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òns and plan execuòn

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ònal code based on the designs

BUILD

Review, test, and analyze effec`veness of the design

EVALUATE

RECAP



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


QUIZ

DESIGNING AND TESTING PAPER PROTOTYPES

MOBILE PROTOTYPING ESSENTIALS

Ideating

Need Analysis


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òns.

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òn

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òn 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.



Sketching

Paper Prototyping


1

2

3

Sketching is rapid, freehand drawing that we do with no intenòn of its becoming a finished product.

Sketching is a foundaòn 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òn 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òn features • To users -‐ gekng early feedback


Sketching

Paper 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àlly 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òns.

Inexpensive Ordinary office supplies can be used for paper prototypes: Sharpies, Pos`ts, printer paper. Most important, these up-‐front paper iteraòns 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òns such as

transiòns, 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òn clear? Are there too many steps to complete tasks?

3 Informaòn organizaòn -‐ Does the current organizaòn match user's expectaòns?

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



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


Sketching

Paper Prototyping


1

2

3

Interac`ve On-‐Device Prototyping includes:


Mobile browser prototype

Mobile prototype using presentaòn 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òns of sta`c image prototypes,

Interac`ve On-‐Device Prototyping are interac`ve

prototyping techniques.


You can explore almost any aspect of the user experience. In contrast to sta`c image prototypes, you can provide forms, transiòns, and scrolling content.

ISSUES TO EXPLORE

Although interac`ve prototypes are powerful, there are s`ll some aspects that differenàte them from the “real” experience. In par`cular, you will s`ll likely need to fake the current locaòn informaòn, live data feeds, and the handling of interrupòns (what happens when the connecòn is lost or disrupted?).

CHALLENGES


The idea behind this technique is simple: place the paper prototype of the mobile applicaòn inside the mobile device.


This prototyping technique is prac`cal since it leverages prototypes that are likely to have been previously made for tes`ng.


If a designer has sketched a number of paper prototypes to conduct a usability test or a heuris`c evaluaòn, 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.


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.


1

Mobile Browser Prototypes are medium fidelity, very

interac`ve and hence can be tested with full

interacòns

MOBILE BROWSER PROTOTYPE BENEFITS

Mobile Browser Prototype How to

Mobile Browser Prototype – 30 mins



exercises

2.  Create a click through version of your App

3.  Test it in mobile browser or emulators

Crea`ng prototypes using presentaòn so]ware such

as Apple Keynote or Microso] PowerPoint is an

efficient way to prototype interac`vity and transiòns

on a mobile device.


You can easily download pla_orm components from

the Web, build your prototype using the presentaòn

so]ware, fine-‐tune the interacòns and transiòns

included in the so]ware, and download the file to

your mobile device.


While designers use various types of tools to

document their wireframe ideas, presentaòn

so]ware is emerging as a favorite tool in the mobile

UX realm.


In addiòn to specifying the placement of design

elements on a screen, presentaòn 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òn

so]ware offers designers the ability to

experiment with transiòns and interac`vity.

MOBILE PROTOTYPE USING PRESENTATION SOFTWARE -‐ BENEFITS

MOBILE PROTOTYPE USING PRESENTATION SOFTWARE -‐ HOW TO

Mobile Prototyping – 30 mins

MOBILE PROTOTYPING


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ès


Storyboarding

Bodystorming


Concept videos


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àl scenarios.

STORYBOARDING HOW TO?

Storyboarding

Bodystorming


Concept videos


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


Concept videos


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?

Mobile Prototyping

Design

mobile users

mobile planet

type of mobile app

mobile phoneswill

mobile devices

mobile context4

sea of mobile apps

mobile design guidelines