Nokia X UX tips
Webinar
Jan Krebber @krebbixux
Senior User Experience Consultant
Your app works without changes to the UI.
2 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
3 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
• UX tips
• UX offering
• Take home messa...
UX tips
Consider the target audience.
5 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
Apps are used everywhere and at any time.
6 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
Use small file sizes.
7 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
8 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
Touch items must be large enough.
www.4ou...
9 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
Maketextlargeenoughforreading–evenwithout...
10 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
11 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
What did it say?
12 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
Make text large enough for reading –
eve...
Use sp (scale independent pixels) for fonts.
13 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebb...
Test if people understand the icons.
14 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
Use a high contrast for fonts/icons and their
background.
15 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan K...
Use a high contrast for fonts/icons and their
background.
16 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan K...
Use a high contrast for fonts/icons and their
background.
17 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan K...
Use a high contrast for fonts/icons and their
background.
18 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan K...
Touchable items
must indicate
that they are
touchable.
19 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Kreb...
Touchable items must show touch-down
feedback.
20 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @kre...
Do not use
more than 3
tabs with fixed
tabs.
21 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebb...
Do not use more than 7 scrolling tabs.
5 scrolling tabs might be already the limit.
22 © Nokia 2014 nokia x ux porting web...
Do not use more than 7 scrolling tabs.
5 scrolling tabs might be already the limit.
23 © Nokia 2014 nokia x ux porting web...
Do not use more than 7 scrolling tabs.
5 scrolling tabs might be already the limit.
24 © Nokia 2014 nokia x ux porting web...
Do not use more than 7 scrolling tabs.
5 scrolling tabs might be already the limit.
25 © Nokia 2014 nokia x ux porting web...
Avoid scrolling from action overflow.
26 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
Take care of
proper
alignment and
design
consistency.
27 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebb...
Avoid scrolling
if you can.
28 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
Use consistent labels: list to view header.
29 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbi...
Use consistent
labels:
Title and action.
30 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
It is never the
customer’s
fault.
Ever.
Period.
31 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @kr...
Keep your app
structure logical
and easy to
understand.
32 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Kre...
Back button should work as intended.
33 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
Games should
start with music
and sounds
"off".
34 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @kr...
Design Dialogs
correctly.
Dim –
and dismissive
action goes to
the left.
35 © Nokia 2014 nokia x ux porting webinar.pptx 20...
UX offering
You can find more UX considerations for
Nokia X from the UX library.
37 © Nokia 2014 nokia x ux porting webinar.pptx 2014-...
38 © Nokia 2014 Kids apps and games.pptx 2014-18-03 Jan Krebber @krebbixux
Take home messages
Your app works without changes to the UI.
40 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
Literature and links.
41 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
• Nokia X UX consi...
Thanks to:
- Maaike Beenen,
- Sanna Hiukka,
- Petri Kiukkonen.
Thanks. 
Jan Krebber
ext-jan.krebber@nokia.com
@krebbixux
Upcoming SlideShare
Loading in …5
×

Lessons learned from Nokia X UI reviews

9,161 views

Published on

Most Android apps run properly on the Nokia X platform without any modification, but maybe you’d like some help with improving the user experience of your apps as you port them to Nokia X. UX expert Jan Krebber, from OCTO3, has been working with developers porting to Nokia X and has seen patterns of mistakes that are easy to correct. In this webinar, he’ll share his top tips on how to avoid the most common missteps.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Lessons learned from Nokia X UI reviews

  1. 1. Nokia X UX tips Webinar Jan Krebber @krebbixux Senior User Experience Consultant
  2. 2. Your app works without changes to the UI. 2 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  3. 3. 3 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux • UX tips • UX offering • Take home messages Overview
  4. 4. UX tips
  5. 5. Consider the target audience. 5 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  6. 6. Apps are used everywhere and at any time. 6 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  7. 7. Use small file sizes. 7 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  8. 8. 8 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux Touch items must be large enough. www.4ourth.com
  9. 9. 9 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux Maketextlargeenoughforreading–evenwithoutamagnifyingglass.
  10. 10. 10 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  11. 11. 11 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux What did it say?
  12. 12. 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.
  13. 13. Use sp (scale independent pixels) for fonts. 13 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  14. 14. Test if people understand the icons. 14 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. Touchable items must indicate that they are touchable. 19 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  20. 20. Touchable items must show touch-down feedback. 20 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  21. 21. 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
  22. 22. 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
  23. 23. 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?
  24. 24. 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
  25. 25. 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 Wednesda y Thursda y Friday Saturday Sunday
  26. 26. Avoid scrolling from action overflow. 26 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  27. 27. Take care of proper alignment and design consistency. 27 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  28. 28. Avoid scrolling if you can. 28 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  29. 29. Use consistent labels: list to view header. 29 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  30. 30. Use consistent labels: Title and action. 30 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  31. 31. It is never the customer’s fault. Ever. Period. 31 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  32. 32. Keep your app structure logical and easy to understand. 32 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  33. 33. Back button should work as intended. 33 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  34. 34. Games should start with music and sounds "off". 34 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  35. 35. 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
  36. 36. UX offering
  37. 37. 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
  38. 38. 38 © Nokia 2014 Kids apps and games.pptx 2014-18-03 Jan Krebber @krebbixux
  39. 39. Take home messages
  40. 40. Your app works without changes to the UI. 40 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
  41. 41. 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
  42. 42. Thanks to: - Maaike Beenen, - Sanna Hiukka, - Petri Kiukkonen.
  43. 43. Thanks.  Jan Krebber ext-jan.krebber@nokia.com @krebbixux

×