1

Concepting

What is…

• User experience (UX) is the overall perception and interaction of a user with an entity.

• Usability is an undefined measurement about how a user can reach his goal with an entity.

• Interaction design (IxD) is the process of specifying an entity with regards to usability.

• Graphical design (GD) is the artistic arrangement of visual items to communicate the content.

What is…

3

GD: •  Draw button image •  Set margins •  Define colors

IxD: •  Define button action •  Define button text •  Define which view comes next

UX: •  The button looks nice •  It is placed at the right position •  It does the right action

Usability: Good, since 9 out of 10 users know how to use this button.

Result

4

How Much Does User Experience Cost?

Mean amount of time: 6% of total project time

Ideal amount of time: 10% of total project time

(For professionals)

5 (Nielsen 1993)

What Does it Return?

• Ideally: • Reduces development time • Saves money to the author and the user

• Usually: • Prevents from major usability problems • Reduces the user’s time to reach a goal • Increases the reputation of your work by users and other authors

• Unfortunately: • Time savings and resulting cost savings are hard to measure • The same holds for reputation

• The concept describes the essence of interaction and functionality taking the user requirements into account

• The concept explains also the effect of the business, technology and appearance on interaction and functionality

• The ”Proof of concept” relates only to technology

Concept vs. Proof of Concept Technology

Business

Functionality Interaction

Appearance Product

Concept

7

The description of the concept is the core document for further

design, specification and development.

Proof of concept

Textual Sketch Graphical Prototype

Concept Descriptions

Ego, VW's 2028 concepts Fiat FCC concept Suzuki Kiashi Concept Car

8

There are many ways how concepts can be communicated.

Concept Description

9

My cool travel-mate concept

The level of detail of the UX concept description can vary based on • The maturity of your concept idea (verbal working prototype) • The target audience you are trying to impress (partners, co-authors,

communities) • The next Go / No-go decisions to make

Concept Definition

10

Concepting is the process to reach a proven vision of an entity with regards to usability.

• A concept can describe a product or service that does not yet exist • Some parts of the product are explained, the rest is left to your imagination

and reasoning • The concept description is a subset of a full product or service description

(e.g. detailed specification document) • A concept is a “high-level” summary, not going into product details

Concepts for Mobile Devices

11

A concept can describe an existing or non-existing product, application or service.

Concept Objectives

12

Objectives

Summarize To describe the essence of your product (idea)

Visualize To make your ideas more visible and concrete

Prove a point To convince some stakeholders (investor, product management, product development,…) to invest more on your idea

Share to evaluate To study different design and implementation alternatives To provoke discussion

Investments of more interest, time, money, effort,…

Exercise

How would you describe the concept of your application or service?

13

Target Groups

• Not everyone wants to use your product • Different user groups have different needs and

reasons for their purchase and usage decisions •  There is no point to try to make a design that will

satisfy everyone

• Identify potential end users and end user groups •  The aim is to recognize user groups where the

product/service can serve best and be most profitable

• When you know the user group, you can create a “user persona”

• You are most likely a part of the target group, but not the whole group

Maemo 5 Target Group

• The most modern, leading edge consumers

• Technology is their life • Highly sociable with and active

lifestyle • More likely to be male, single

and young (under 30) with high economic level

• Digital Natives

Define the common UX Design Drivers.

UX Design Drivers

16

Adapted from: Roto & Rautava: User Experience Elements and Brand promise (2008)

Practical Hedonic Mobile UX

User Persona(s)

• Who is she/he • Name, gender, age, location •  Family ties and photos •  Profession and lifestyle

• Additional information •  Personality traits •  Technology choices • Goals, behaviors or motivations • Differentiators

• Base them on people that you personally know • Personas help to create scenarios and stories • ”Would my persona really behave like this?”

Describe the Context of Use

•  People •  Places •  Things •  Time

Context

18

The concept description should document not only the product itself, but also the context: people, places, things and time.

Motion

Stationary • Lay, sit

On-the-move • Walking • Running

Travelling •  Drive •  Sit •  Stand

Handling items

Carry

Use

Move

Outfit

Jackets, bikinis

Pockets

Gloves

Holders

Senses

See: obstacles, lighting

Hear: noise, speech

Feel: cold

Time

Fragmented flow

Waiting, rushing, ..

Social

Friends

People around you

Privacy

Technical

Network •  Access •  Costs

Battery power

Connections • Wireless/

wired • Web, GPS,

Bluetooth, other devices

Mobile Context Issues

19

There are many issues that can define the mobile context at any given moment.

Mobile Context Examples

20

Mob

ile A

pplic

atio

n U

tilit

y

High

Impossible

Low

Medium

Feature B is useful while walking.

Feature C is usable in most mobile situations.

At home/office On the move

Feature A requires two hands.

Example C Reject call and hit

the red hardkey on the run

Example A Two-finger gesture

required for zooming an image

Example B Navigate and scroll the map with your

thumb while walking

Mobile Context: Home vs. On the Move Issue At home/office On the move

Motion Sitting steadily in armchair User and device are moving

Light Stable indoor lighting Bright daylight, dark at night

Noise Air conditioning humming Traffic, people talking

Flow of time Few system interruptions Many context interruptions

Connections Always on-line 3G connection lost, off-line use

Cost Fixed rate WLAN Charged by downloaded data

21

User’s attention

No disturbance, full focus on device

Many distractions, potentially on all senses

Storyboards

22

Use case Storyboard

Accessing phone from web browser

Write storyboards to illustrate the desired and realistic use cases.

How is your concept/storyboard better than other apps or services out there?

UX Benchmarking

23

Your product Competitor

Look at the competing applications • What is the core concept? • What kinds of UX targets they might have? • What kinds of tasks the user can do with the

applications? • What kind of UI solutions there are for certain tasks? • What are task times and task steps? • What kind of visual design styles and solutions are

being used?

Relevant documents •  Maemo 5 Desktop Widget UI Guidelines v1.1 •  Fremantle Master Layout Guide v1.1 •  Hildon 2.2 Widget Spec

•  Hildon 2.2 UI Style Guide

Platform Guidelines

24

Wireframes

25

Descriptions of interaction between the screens

Sketches of the screens

A “map” showing an overview of all the screens and the interactions between them.

More about this in the interaction design session.

•  A prototype simulates the functionality of the UI •  A prototype can be

•  Paper-prototype (even hand-made) •  Screenshots •  Computer/terminal-based prototype •  Flash demo

•  Basically anything showing the main task flow •  The purpose predefines the level of the prototype

26

Sometimes it is good if the prototype is not that well-polished.

Prototypes

Exercise

Write a storyboard for your own application or service.

27

Transfer the Vision to a Document

• Write down all ideas related to the application or service – “The user does…” • Tell stories how the user interacts with your application/service • Take

•  Pencil •  Paper •  Credit card • … and draw a screen of the N900

• Sketch your main flows according to the stories • Discuss your main flows with people • You just learned the basics of paper prototyping • You just did your first concept

Move Towards Interaction Design

• Concepting usually requires many iterations before the concept is “proven” • The concept contains only the major use cases • The concept may also contain

•  Short description of the main views •  Short description of possible gestures for the main views •  Evaluation of portrait vs. landscape orientation

• After that interaction design takes care of the details • Minor use cases •  Exceptions •  Etc. • More about this in the interaction design session

Take Home Messages

30

•  Write down the vision of your application or service and try it out with others.

•  The better the user experience, the higher the recognition and appreciation of your work.

•  You are not the target group of your application or service.

Creative Commons - Disclaimer

UX Driven Development For Mobile SW Developers by Forum Nokia

is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0

United States License

31

32

forum.nokia.com/ux

32