Slides from the Concepting your app day at the UX Meets Code track in Barcelona, Spain 4-6 December 2009

1. Concepting
1

2. 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.

3. What is…
GD:
UX: • Draw button image
• The button looks nice • Set margins
• It is placed at the right position • Define colors
• It does the right action
IxD:
Usability: • Define button action
Good, since 9 out of 10 • Define button text
users know how to use this • Define which view comes next
button.
3

4. Result
4

5. 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)

6. 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

7. Concept vs. Proof of Concept
Technology
Proof of concept
Business
Appearance
Product The description of the concept is
the core document for further
Concept design, specification and
development.
Interaction Functionality
• 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
7

8. Concept Descriptions
Textual Sketch Graphical Prototype
Fiat FCC concept Ego, VW's 2028 concepts Suzuki Kiashi Concept Car
There are many ways how concepts can be communicated.
8

9. Concept Description
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
9

10. Concept Definition
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

10

11. Concepts for Mobile Devices
A concept can describe an existing or non-existing product,
application or service.
11

12. Concept Objectives
Objectives
Summarize To describe the essence of your product (idea)
Visualize To make your ideas more visible and concrete
To convince some stakeholders (investor, product
Prove a point management, product development,…) to invest
more on your idea
To study different design and implementation
Share to evaluate alternatives
To provoke discussion
Investments of more interest,
time, money, effort,…
12

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

14. 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

15. 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

16. UX Design Drivers
Mobile
Practical UX Hedonic
Define the common UX Design Drivers.
Adapted from: Roto & Rautava: User Experience Elements and Brand
promise (2008)
16

17. 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?”

18. Describe the Context of Use
• People
• Places
Context
• Things
• Time
The concept description should document not only the product
itself, but also the context: people, places, things and time.
18

19. Mobile Context Issues
Handling
Motion Outfit Senses Time Social Technical
items
Stationary See: Network
Jackets, Fragmented
• Lay, sit Carry obstacles, Friends • Access
bikinis flow
lighting • Costs
On-the- Hear: noise, Waiting, People Battery
move Use Pockets
speech rushing, .. around you power
• Walking
• Running
Connections
Move Gloves Feel: cold Privacy • Wireless/
Travelling wired
• Web, GPS,
• Drive Bluetooth,
other devices
• Sit
Holders
• Stand
There are many issues that can define the mobile context at any
given moment.
19

20. Mobile Context Examples
At home/office On the move
High
Feature B is useful
Mobile Application
while walking.
Medium
Utility
Low Feature C is usable in
Feature A requires most mobile situations.
two hands.
Impossible
Example A Example B Example C
Two-finger gesture Navigate and scroll Reject call and hit
required for the map with your the red hardkey on
zooming an image thumb while the run
walking
20

21. 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
User’s No disturbance, full focus on Many distractions, potentially
attention device on all senses
21

22. Storyboards
Use case Storyboard
Accessing
phone from
web browser
Write storyboards to illustrate the desired and realistic use cases.
22

23. UX Benchmarking
Look at the competing applications
• What is the core concept?
Your
Competitor
product • 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?
How is your concept/storyboard better than other apps or services
out there?
23

24. Platform Guidelines
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
24

25. Wireframes A “map” showing an overview of all
Sketches of the screens and the interactions
the screens between them.
Descriptions of interaction
between the screens
More about this in the interaction design session.
25

26. Prototypes
• 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
Sometimes it is good if the
prototype is not that well
-polished.
26

27. Exercise
Write a storyboard for your own application or service.
27

28. 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 

29. 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

30. Take Home Messages
• 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.
30

31. 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
32