UI Clinic - Series 40 full touch, March 2013

812 views

Published on

Our UI expert Jan Krebber reviews two apps submitted by Nokia Developer members: Random Table and a Compass Research app concept. 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.

Submit your app to a future UI Clinic by sending details to webinar.experts@nokia.com

Find out more about developing for Series 40 at: http://www.developer.nokia.com/Series40 and more about design for full-touch Series 40 apps here: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!index.html

Check out the current webinar schedule here: http://www.developer.nokia.com/webinars

Published in: Technology
2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
812
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
49
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

UI Clinic - Series 40 full touch, March 2013

  1. 1. UX CLINIC FOR SERIES 40MARCH 2013Jan KrebberSenior User Experience ConsultantOCTO3 1 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  2. 2. Overview - Random Table - What we found - What we propose to add - Compass Research concept2 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  3. 3. RANDOM TABLE WHAT WE FOUND3 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  4. 4. Random Table is a good example of how tocreate a great app with LCDUI.4 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  5. 5. Back/Exit on main view is disabled, but Exitis duplicated as a list item.5 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  6. 6. Back should move back in hierarchy. 1 2 3 46 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  7. 7. Help and About are usually found fromOptions menu – preferably in all views.7 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  8. 8. Keep the hierarchy flat where possible. 1 2 38 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  9. 9. A dialogue is interrupting the flow. Current solution Proposal9 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  10. 10. People must have enough time to read adialogue.10 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  11. 11. A shorter application name will avoidtruncation.11 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  12. 12. Consider the red end key closing theapplication immediately.12 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  13. 13. Name views consistently and use short viewnames.13 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  14. 14. Avoid typos and inconsistent language withcopy edit and a style guide.14 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  15. 15. If there is only one text (input) field, setfocus on it automatically. 1 2 3 415 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  16. 16. RANDOM TABLE WHAT WE PROPOSE TO ADD16 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  17. 17. Statistics give abetter idea of theperformance thanjust a table ofresults.17 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  18. 18. Consider gamification of the task.18 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  19. 19. Additional modes for special trainingpurposes.19 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  20. 20. COMPASS RESEARCH CONCEPT20 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  21. 21. Compass Research app is a powerful geosolution for limited screen size.Traverse Inverse C y Axis y Axis A A x Axis x Axis B B 21 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  22. 22. There are some main use cases. Those work with selected input values.y Axis y Axis y Axis y Axis known C C C find A ref A x Axis x Axis x Axis B B B B Coordinates (A) Coordinates (B) Coordinates (B) Coordinates (A) Coordinates (B) Angle (yBC) Angle (xBref) Coordinates (B) Angle (xBA) Distance (BC) Angle (refBC) Angle (ABC) Distance (AB) Coordinates (C) Distance (BC) Distance (BC) Coordinates (C) Coordinates (C) 22 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  23. 23. Sometimes requires review of all values andrelated outputs (results).23 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  24. 24. Use descriptive text andicons for a launchpad view.24 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  25. 25. Correction might beneeded. Try to keep itsimple, e.g. with a button.25 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  26. 26. The design is based on splitting use casesand a launchpad view.26 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  27. 27. TAKE HOME MESSAGES27 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  28. 28. Simplify.28 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  29. 29. Be consistent.29 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  30. 30. Base the layout on use cases.30 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  31. 31. UX OFFERING FOR SERIES 4031 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  32. 32. There are LCDUI and LWUIT style guides –and more.32 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  33. 33. The Nokia’s Series 40 stencils supportInkscape.33 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
  34. 34. Series 40 UI component demo projectsshowcase UI and code.34 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
  35. 35. We offer reviews for the UI clinics.35 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  36. 36. Series 40 UI design• 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• UI Component Demos project: https://projects.developer.nokia.com/s40uivisualisation• Web Apps UI visualisation project: https://projects.developer.nokia.com/webappsuivisualisation36 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
  37. 37. Further reading and links• Random Math Table project https://projects.developer.nokia.com/RandomMathTable• Random Math tabel in the store http://store.nokia.com/content/347006• Mobile Design Pattern Gallery. Theresa Neil (2012).• Designing Mobile Interfaces. Steven Hoober and Eric Berkman (2011).• nngroup.com (Jacob Nielsen’s blog)• http://snook.ca/technical/colour_contrast/colour.html (contrast checker)37 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
  38. 38. THANKS TO:RON HARDY, COMPASS RESEARCH, INC.GIRISH PADIASANNA HIUKKAANNE KIVIMAA38 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber
  39. 39. THANKS ext-jan.krebber@nokia.com#krebbixux 39 © Nokia 2013 UX clinic for Series 40 March 2013.pptx v.1 2013-03-26 Jan Krebber

×