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

57
1 Increase Your Nokia Store Success with User-centric Design of Series 40 Apps © Nokia 2012 Increase_Your_Nokia_Store_Success_with_User-centric_Design_of_Series_40_Apps.pptx v.01 2012-08-22 Jan Krebber

Upload: microsoft-mobile-developer

Post on 13-May-2015

1.092 views

Category:

Technology


0 download

DESCRIPTION

Success in Nokia Store is dominated by apps with 4- or 5-star user ratings. Big companies know this and hire full-time UX specialists to ensure high ratings. If you can’t afford a dedicated UX specialist, this webinar is for you. UX expert Jan Krebber from Digia will walk you through a simple process focusing on UX-design principles that are critical for success in the growing market for Nokia Asha Touch apps. The ideas are easy to follow; after the webinar, you should be able to apply user-centric design to your own application projects. The presentation will point out the benefits of a superior user experience, apply the design process to a sample application, and give you a chance to try things yourself in an exercise. Possible solutions for the exercise will be published afterwards in a Nokia Developer Wiki article.

TRANSCRIPT

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

1

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

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

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

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

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

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

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

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

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

Why do I need a good UX?

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

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

A good UI will increase your reputation.

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

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

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

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

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

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

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

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

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

Effort to change a usabillity problem

Project time

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

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

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

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

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

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

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

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

Idea generation

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

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

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

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

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

Prepare your idea for an elevator pitch.

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

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

From ideas to goals

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

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

Which primary goal do people have when utilizing your idea?

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

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

What is needed to reach the goal?

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

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

Hands on: MyKahvi

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

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

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

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

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

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

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

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

Hands on: Write down all the goals – with somebody else.Goals written by Mark Goals written by Georg Goals written by Jingna

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

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

Obey the mobile mindset.

- Bored- Microtasking- Local

Josh Clark

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

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

Identify users and context of use?

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

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

Set the business drivers.

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

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

Prioritize the goals – with somebody else.

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

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

Hands on: Introduce and group goals.

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

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

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

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

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

Hands on: Prioritize by votes.

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

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

From goals to flows

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

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

Base your designs on flows.

Panta rhei.

Heraclitus

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

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

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

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

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

Hands on: Start point can be the splash screen.

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

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

Hands on: Fill the necessary steps in between.

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

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

Hands on: Create flows for all goals.

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

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

From flows to views

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

35

Hands on: Sort the flows.

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

36

Hands on: Sort the flows.

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

37

Hands on: Group flow steps to views.

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

38

Hands on: Group flow steps to views.

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

39

Hands on: Group flow steps to views.

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

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

Hands on: Find a navigation structure.

Drill down- Non-touch- Touch & Type

Categories (tabs)- Full touch

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

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

Hands on: Prioritize functions and information.

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

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

Hands on: Compose your view.

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

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

From views to tested views

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

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

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

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

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

Improve your app.

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

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

Take home messages

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

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

Do not design all alone.

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

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

Base your designs on flows.

Panta rhei.

Heraclitus

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

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

Last advice: Test earlier. Test more often.

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

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

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_Concept_Design

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

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

Exercises

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

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

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.

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

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

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

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

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

Panta rhei.

Heraclitus

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

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

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

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]

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

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

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

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

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

Thanks

[email protected]