lessons learned from nokia x ui reviews
DESCRIPTION
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.TRANSCRIPT
![Page 1: Lessons learned from Nokia X UI reviews](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/1.jpg)
Nokia X UX tipsWebinar
Jan Krebber @krebbixuxSenior User Experience Consultant
![Page 2: Lessons learned from Nokia X UI reviews](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/2.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/3.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/4.jpg)
UX tips
![Page 5: Lessons learned from Nokia X UI reviews](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/5.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/6.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/7.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/8.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/9.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/10.jpg)
10 © Nokia 2014 nokia x ux porting webinar.pptx 2014-18-03 Jan Krebber @krebbixux
![Page 11: Lessons learned from Nokia X UI reviews](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/11.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/12.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/13.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/14.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/15.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/16.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/17.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/18.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/19.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/20.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/21.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/22.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/23.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/24.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/25.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/26.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/27.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/28.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/29.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/30.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/31.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/32.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/33.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/34.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/35.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/36.jpg)
UX offering
![Page 37: Lessons learned from Nokia X UI reviews](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/37.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/38.jpg)
38 © Nokia 2014 Kids apps and games.pptx 2014-18-03 Jan Krebber @krebbixux
![Page 39: Lessons learned from Nokia X UI reviews](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/39.jpg)
Take home messages
![Page 40: Lessons learned from Nokia X UI reviews](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/40.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/41.jpg)
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](https://reader033.vdocuments.net/reader033/viewer/2022051400/54c799034a795977028b45b6/html5/thumbnails/42.jpg)
Thanks to:
- Maaike Beenen, - Sanna Hiukka,- Petri Kiukkonen.