Increase your nokia store success with user centric design of series 40 apps

Increase Your Nokia Store
Success with User-centric
Design of Series 40 Apps

1 © Nokia 2012 Increase_Your_Nokia_Store_Success_with_User-centric_Design_of_Series_40_Apps.pptx v.01 2012-08-22 Jan Krebber

Before we start: learn to step back and
observe the whole thing.


Overview

Overview
• Why do I need a good UX?
• Idea generation
• From ideas to goals
• From goals to flows
• From flows to views
• From views to tested views
• Take home messages
• Exercises


Why do I need a good UX?


A good UI will increase your reputation.


A good UI will allow you to make money
out of your work.


An easy-to-work-with UI is necessary
to create a helpful app.


Start with usability and it will save you
time – easily a 100 times.

Effort to change a
usabillity problem

Project time


With good UX, your architecture is
more stable and your code is cleaner.


Your rating must be 4 or more stars –
otherwise it is just a proof of concept.


Idea generation


An idea is often a combination of world
knowledge and special knowledge.


Prepare your idea for an elevator pitch.


From ideas to goals


Which primary goal do people have
when utilizing your idea?


What is needed to reach the goal?


Hands on: MyKahvi


Hands on: Write down all the goals –
with somebody else.


with somebody else.


with somebody else.
Goals written by Mark Goals written by Georg Goals written by Jingna


Obey the mobile mindset.

- Bored
- Microtasking
- Local
Josh Clark


Identify users and context of use?


Set the business drivers.


Prioritize the goals – with somebody
else.


Hands on: Introduce and group goals.


Hands on: Vote for groups
(vote per person = groups/2).


Hands on: Prioritize by votes.


From goals to flows


Base your designs on flows.

Panta rhei.
Heraclitus

Hands on: Create a flow-end based on
a goal.


Hands on: Start point can be the splash
screen.


Hands on: Fill the necessary steps in
between.


Hands on: Create flows for all goals.


From flows to views


Hands on: Sort the flows.

35

Hands on: Sort the flows.

36

Hands on: Group flow steps to views.

37


38


39

Hands on: Find a navigation structure.
Drill down
- Non-touch
- Touch & Type

Categories (tabs)
- Full touch


Hands on: Prioritize functions and
information.


Hands on: Compose your view.


From views to tested views


Test early – test often.
Fail fast – fail cheap.


Improve your app.


Take home messages


Do not design all alone.


Base your designs on flows.

Panta rhei.
Heraclitus

Last advice:
Test earlier. Test more often.


Series 40 Full Touch UI Design
Library: http://www.developer.nokia.com/Resources/Library/Full_Touch/

Checklist: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ux-
checklist.html

Icon Creation: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!icon-
creation.html

UI Components: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-
components.html

UI Components Demos App: https://projects.developer.nokia.com/s40uivisualisation

Basics: http://www.developer.nokia.com/Resources/Library/Design_and_UX/

Asha Touch Competition 2012Q3:
http://www.developer.nokia.com/Community/Wiki/Asha_Touch_Competition_2012Q3

Wiki article to this webinar:
http://www.developer.nokia.com/Community/Wiki/index.php?title=Webinar_Series_40_UI_C
oncept_Design


Exercises


Exercise: When do you choose a
tumbler instead of a list?
Do not restrict this problem to Series 40 Full Touch
LCDUI or Nokia UI.


Exercise: What are the differences
between radio buttons and check
boxes? When to use them?



Exercise: Check ”panta rhei” from
www.wikipedia.org and other sources.

Panta rhei.
Heraclitus

Exercise: Compose a view.
- Business driver is to sell e-tickets for a soccer game within an entire soccer
league
- In the previous view, the user has chosen this certain game. For this game she
wants to buy tickets
- Only Series 40 full touch
- No category bar, standard header bar and Back button
- View items [amount of votes, max 8]
- Buy tickets (link) [6]
- More information about the stadium (info) [1]
- Show how many tickets have been bought for this game by this user (info) [8]
- Display the e-tickets (link) [6]
- Show start time (info) [7]
- More information about the soccer teams (link) [1]
- Show stadium name (info) [5]
- Show who is playing (info) [8]
- Navigate me to the stadium (link) [4]
- Show stadium address (info) [2]
- Show images of the stadium (link) [3]
- Show emblems of soccer clubs (info) [8]


Thanks to:
- Tuulikki Lepola
- Anne Kivimaa
- Sanna Hiukka

Thanks 

ext-jan.krebber@nokia.com


Increase your nokia store success with user centric design of series 40 apps

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de Microsoft Mobile Developer

Mais de Microsoft Mobile Developer (20)

Último

Último (20)

Increase your nokia store success with user centric design of series 40 apps

Notas do Editor