Jan KrebberSenior User Experience ConsultantOCTO31 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan...
Overview2 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber- Know your phone- Package tracke...
3 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberKNOW YOUR PHONEWHAT WE FOUND
Know your phone UX map.4 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
We especially like the contextual search.5 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
Remove focus for touch phone.6 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
Split screen may work on large screens butit gets problems with small screens.7 © Nokia 2013 UI clinic for Series 40 April...
Use full content area for scrolling.8 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
Do not get stuck with the splash screen ifthere is nothing to do with it.9 © Nokia 2013 UI clinic for Series 40 April 2013...
Place navigation keys consistently, withconsistent icons and where expected.10 © Nokia 2013 UI clinic for Series 40 April ...
Ensure Back navigation from each page,since Series 40 style is hierarchy based.11 © Nokia 2013 UI clinic for Series 40 Apr...
Buttons which cannot perform any actionshould be hidden.12 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-0...
Make touch areas, icons and fonts largeenough.13 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan K...
Use the Nokia surround shape for thelauncher icon.14 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 J...
Optimize the app concept for the primaryuse case.15 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Ja...
Build the app around the main use case,note vice versa.16 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04...
17 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberPACKAGE TRACKERWHAT WE FOUND
Package Tracker UX map.18 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
We especially like the first time use caseand the clear structure of the app.19 © Nokia 2013 UI clinic for Series 40 April...
Use best keypad layout for character input,e.g. DHL requires only decimals.20 © Nokia 2013 UI clinic for Series 40 April 2...
Give users the feeling that they are incontrol.21 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan ...
Be careful with fast moving UI elements. Itmight cause harm to people.22 © Nokia 2013 UI clinic for Series 40 April 2013.p...
In LWUIT optimize for payload. Test alsowith less powerful phones.23 © Nokia 2013 UI clinic for Series 40 April 2013.pptx ...
Enable landscape if your text might becometruncated in portrait (only).24 © Nokia 2013 UI clinic for Series 40 April 2013....
Use a short name to avoid app nametruncation in the application menu.25 © Nokia 2013 UI clinic for Series 40 April 2013.pp...
Pressing Back from a form or setting shouldevoke a confirmation query.26 © Nokia 2013 UI clinic for Series 40 April 2013.p...
Use component titles to simplify the layout.27 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Kre...
Allow clean sweep of self populated lists.28 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebb...
29 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberUI CONSIDERATIONS FOR ADS
Ads could be repeated at key breaks insidelong content, e.g. custom lists.30 © Nokia 2013 UI clinic for Series 40 April 20...
Ads being part of the chrome should alwaysappear at the same position.31 © Nokia 2013 UI clinic for Series 40 April 2013.p...
The ad should always be selectable and notinterfere with any chrome.32 © Nokia 2013 UI clinic for Series 40 April 2013.ppt...
Differentiate the ad from the actualcontent.33 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Kre...
Full screen ads should be used atbreakpoints, not within tasks.34 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1...
35 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberTAKE HOME MESSAGES
Build the app around the main use case,note vice versa.36 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04...
Give users the feeling that they are incontrol.37 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan ...
Full screen ads should be used atbreakpoints, not within tasks.38 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1...
39 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberUX OFFERING FOR SERIES 40
There are LCDUI and LWUIT style guides –and more.40 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Ja...
The Nokia’s Series 40 stencils supportInkscape.41 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan ...
Series 40 UI component demo projectsshowcase UI and code.42 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-...
We offer reviews for the UI clinics.43 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
Series 40 UI design44 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber• UX Library for Seri...
Further reading and links45 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber• Know your pho...
46 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberTHANKS TO:MUSTAFA MANSOUR HASSANIENSHAI ...
47 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberTHANKS ext-jan.krebber@nokia.com#krebbi...
Upcoming SlideShare
Loading in …5
×

UI Clinic - Series 40 full touch, April 2013

1,258 views

Published on

Our UI expert Jan Krebber reviews two apps submitted by Nokia Developer members: Know your phone by Mustafa Mansour Hassanien and Package Tracker by Shai Ifrach of Futuresoft Jan shares the app reviews and provides details on how the UX of these applications might be improved, as well as providing general guidance that will help with the design of any app. In addition, Jan takes a quick look into where to place ads in an app based on a request from last month’s UI clinic.

Join the sessions:

* 23 April - 8 a.m. London; 12:30 p.m. New Delhi; 3 p.m. Singapore: http://forumnokia.adobeconnect.com/ui-clinic-ssn5/event/event_info.html
* 24 April - 8 a.m. San Francisco; 10 a.m. Mexico City; 4 p.m. London: http://forumnokia.adobeconnect.com/ui-clinic-ssn6/event/event_info.html

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,258
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
52
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

UI Clinic - Series 40 full touch, April 2013

  1. 1. Jan KrebberSenior User Experience ConsultantOCTO31 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberUI CLINIC FOR SERIES 40APRIL 2013
  2. 2. Overview2 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber- Know your phone- Package tracker- UI considerations for ads
  3. 3. 3 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberKNOW YOUR PHONEWHAT WE FOUND
  4. 4. Know your phone UX map.4 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  5. 5. We especially like the contextual search.5 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  6. 6. Remove focus for touch phone.6 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  7. 7. Split screen may work on large screens butit gets problems with small screens.7 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberProposal, entirecontent scrolls
  8. 8. Use full content area for scrolling.8 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  9. 9. Do not get stuck with the splash screen ifthere is nothing to do with it.9 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  10. 10. Place navigation keys consistently, withconsistent icons and where expected.10 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  11. 11. Ensure Back navigation from each page,since Series 40 style is hierarchy based.11 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  12. 12. Buttons which cannot perform any actionshould be hidden.12 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  13. 13. Make touch areas, icons and fonts largeenough.13 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  14. 14. Use the Nokia surround shape for thelauncher icon.14 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  15. 15. Optimize the app concept for the primaryuse case.15 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberCurrent structure
  16. 16. Build the app around the main use case,note vice versa.16 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberProposed structureCurrent structure
  17. 17. 17 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberPACKAGE TRACKERWHAT WE FOUND
  18. 18. Package Tracker UX map.18 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  19. 19. We especially like the first time use caseand the clear structure of the app.19 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  20. 20. Use best keypad layout for character input,e.g. DHL requires only decimals.20 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberUIvisualizationexamples
  21. 21. Give users the feeling that they are incontrol.21 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebberproposalproposal
  22. 22. Be careful with fast moving UI elements. Itmight cause harm to people.22 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  23. 23. In LWUIT optimize for payload. Test alsowith less powerful phones.23 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  24. 24. Enable landscape if your text might becometruncated in portrait (only).24 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  25. 25. Use a short name to avoid app nametruncation in the application menu.25 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  26. 26. Pressing Back from a form or setting shouldevoke a confirmation query.26 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebberproposal
  27. 27. Use component titles to simplify the layout.27 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebberproposal
  28. 28. Allow clean sweep of self populated lists.28 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebberproposalproposal
  29. 29. 29 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberUI CONSIDERATIONS FOR ADS
  30. 30. Ads could be repeated at key breaks insidelong content, e.g. custom lists.30 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  31. 31. Ads being part of the chrome should alwaysappear at the same position.31 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  32. 32. The ad should always be selectable and notinterfere with any chrome.32 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber?
  33. 33. Differentiate the ad from the actualcontent.33 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebberrecommended
  34. 34. Full screen ads should be used atbreakpoints, not within tasks.34 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  35. 35. 35 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberTAKE HOME MESSAGES
  36. 36. Build the app around the main use case,note vice versa.36 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  37. 37. Give users the feeling that they are incontrol.37 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  38. 38. Full screen ads should be used atbreakpoints, not within tasks.38 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  39. 39. 39 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberUX OFFERING FOR SERIES 40
  40. 40. There are LCDUI and LWUIT style guides –and more.40 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  41. 41. The Nokia’s Series 40 stencils supportInkscape.41 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  42. 42. Series 40 UI component demo projectsshowcase UI and code.42 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  43. 43. We offer reviews for the UI clinics.43 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber
  44. 44. Series 40 UI design44 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber• UX Library for Series 40 full touch:http://www.developer.nokia.com/Resources/Library/Full_Touch/• LWUIT UX Overview:http://www.developer.nokia.com/Resources/Library/LWUIT/#!ux-overview.html• Iconography:http://www.developer.nokia.com/Resources/Library/Full_Touch/#!icon-creation/launcher-icon-templates.html• UI Component Demos project:https://projects.developer.nokia.com/s40uivisualisation• Web Apps UI visualisation project:https://projects.developer.nokia.com/webappsuivisualisation
  45. 45. Further reading and links45 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan Krebber• Know your phone in store:http://store.ovi.com/content/330978?clickSource=search&pos=1• Package tracker in the store:http://store.ovi.com/content/352191?clickSource=search&pos=1• UX blogs in Nokia developer Code Blog:http://www.developer.nokia.com/Blogs/Code/• Mobile Design Pattern Gallery. Theresa Neil (2012).• Designing Mobile Interfaces. Steven Hoober and Eric Berkman(2011).• http://www.nngroup.com/articles/ (Jacob Nielsen’s blog)
  46. 46. 46 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberTHANKS TO:MUSTAFA MANSOUR HASSANIENSHAI IFRACH, FUTURESOFTSANNA HIUKKA
  47. 47. 47 © Nokia 2013 UI clinic for Series 40 April 2013.pptx v.1 2013-04-23 Jan KrebberTHANKS ext-jan.krebber@nokia.com#krebbixux

×