Transcript
Page 1: Lessons learned from Nokia X UI reviews

Nokia X UX tipsWebinar

Jan Krebber @krebbixuxSenior User Experience Consultant

Page 2: Lessons learned from Nokia X UI reviews

Your app works without changes to the UI.

2 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 3: Lessons learned from Nokia X UI reviews

3 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

• UX tips• UX offering• Take home messages

Overview

Page 4: Lessons learned from Nokia X UI reviews

UX tips

Page 5: Lessons learned from Nokia X UI reviews

Consider the target audience.

5 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 6: Lessons learned from Nokia X UI reviews

Apps are used everywhere and at any time.

6 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 7: Lessons learned from Nokia X UI reviews

Use small file sizes.

7 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 8: Lessons learned from Nokia X UI reviews

8 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Touch items must be large enough.

www.4ourth.com

Page 9: Lessons learned from Nokia X UI reviews

9 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Make text large enough for reading –even without a magnifying glass.

Page 10: Lessons learned from Nokia X UI reviews

10 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 11: Lessons learned from Nokia X UI reviews

11 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

What did it say?

Page 12: Lessons learned from Nokia X UI reviews

12 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Make text large enough for reading –even without a magnifying glass.

Page 13: Lessons learned from Nokia X UI reviews

Use sp (scale independent pixels) for fonts.

13 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 14: Lessons learned from Nokia X UI reviews

Test if people understand the icons.

14 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 15: Lessons learned from Nokia X UI reviews

Use a high contrast for fonts/icons and their background.

15 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 16: Lessons learned from Nokia X UI reviews

Use a high contrast for fonts/icons and their background.

16 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 17: Lessons learned from Nokia X UI reviews

Use a high contrast for fonts/icons and their background.

17 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

http://snook.ca/technical/colour_contrast/colour.html

Are these colors compliant?- Font color: #FF0000- Background color: #0000FF

Page 18: Lessons learned from Nokia X UI reviews

Use a high contrast for fonts/icons and their background.

18 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

http://snook.ca/technical/colour_contrast/colour.html

Page 19: Lessons learned from Nokia X UI reviews

Touchable items must indicate that they are touchable.

19 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 20: Lessons learned from Nokia X UI reviews

Touchable items must show touch-down feedback.

20 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 21: Lessons learned from Nokia X UI reviews

Do not use more than 3 tabs with fixed tabs.

21 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 22: Lessons learned from Nokia X UI reviews

Do not use more than 7 scrolling tabs. 5 scrolling tabs might be already the limit.

22 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Media Player Music Folder Now Favorite Mine

Page 23: Lessons learned from Nokia X UI reviews

Do not use more than 7 scrolling tabs. 5 scrolling tabs might be already the limit.

23 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

What did it say in the 2nd and the 5th tab?

Page 24: Lessons learned from Nokia X UI reviews

Do not use more than 7 scrolling tabs. 5 scrolling tabs might be already the limit.

24 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Media Player Music Folder Now Favorite Mine

Page 25: Lessons learned from Nokia X UI reviews

Do not use more than 7 scrolling tabs. 5 scrolling tabs might be already the limit.

25 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Monday Tuesday Wednesday

Thursday Friday Saturday Sunday

Page 26: Lessons learned from Nokia X UI reviews

Avoid scrolling from action overflow.

26 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 27: Lessons learned from Nokia X UI reviews

Take care of proper alignment and design consistency.

27 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 28: Lessons learned from Nokia X UI reviews

Avoid scrolling if you can.

28 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 29: Lessons learned from Nokia X UI reviews

Use consistent labels: list to view header.

29 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 30: Lessons learned from Nokia X UI reviews

Use consistent labels: Title and action.

30 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 31: Lessons learned from Nokia X UI reviews

It is never the customer’s fault. Ever.Period.

31 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 32: Lessons learned from Nokia X UI reviews

Keep your app structure logical and easy to understand.

32 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 33: Lessons learned from Nokia X UI reviews

Back button should work as intended.

33 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 34: Lessons learned from Nokia X UI reviews

Games should start with music and sounds "off".

34 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 35: Lessons learned from Nokia X UI reviews

Design Dialogs correctly.

Dim –and dismissive action goes to the left.

35 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 36: Lessons learned from Nokia X UI reviews

UX offering

Page 37: Lessons learned from Nokia X UI reviews

You can find more UX considerations for Nokia X from the UX library.

37 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 38: Lessons learned from Nokia X UI reviews

38 © Nokia 2014 Kids apps and games.pptx 2014-18-03 Jan Krebber @krebbixux

Page 39: Lessons learned from Nokia X UI reviews

Take home messages

Page 40: Lessons learned from Nokia X UI reviews

Your app works without changes to the UI.

40 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

Page 41: Lessons learned from Nokia X UI reviews

Literature and links.

41 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux

• Nokia X UX considerations, http://developer.nokia.com/resources/library/nokia-x-ui/index.html

• Nokia X, http://developer.nokia.com/nokia-x• DVLUP, http://www.dvlup.com

Page 42: Lessons learned from Nokia X UI reviews

Thanks to:

- Maaike Beenen, - Sanna Hiukka,- Petri Kiukkonen.

Page 43: Lessons learned from Nokia X UI reviews

Thanks.

Jan [email protected]@krebbixux


Top Related