Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch

820 views

Published on

Presentation by Jan Krebber of OCTO3 for the first UI Clinic addressing questions about the basic full-touch UI layouts for Series 40.

Recording of the presentation from the first session can be found here: http://youtu.be/-pg3hzYM9Pk

Published in: Technology
3 Comments
0 Likes
Statistics
Notes
  • Video of 30 January session is now live: http://forumnokia.adobeconnect.com/p5s447564qr/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Video of the 29 January session is now live: http://forumnokia.adobeconnect.com/p8ks7ymr7rd/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • This was a very useful webinar for me. I am just now starting on the User Interface design of my application. Because the hardware/software platform has different capabiliites from my original target platforms, I need to revisit UI. Jan and Satyam were very insightful about some issues that I find, which I too am facing. I recommend this webinar to anyone writing or designing applications for Nokia phones and for other platforms, since much of the advice is portable. Great Job!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

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

No notes for slide

Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch

  1. 1. BASIC UI LAYOUTS IN SERIES 40FULL TOUCHJan KrebberSenior User Experience ConsultantOCTO3 1 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  2. 2. Overview• 1st navigation• Forms• UX offering• Take home messages 2 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  3. 3. Disclaimer: Examples shown here arecustom solutions and require extra work.3 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  4. 4. 1ST NAVIGATION4 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  5. 5. 1st navigation is the 1st touch point and setsthe users’ attitude towards your app.5 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  6. 6. Launchpad grid is icon-based and workswell for large application suites.6 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  7. 7. List gives room for informative text.7 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  8. 8. Category bar reduces taps by featuring upto 4 views – but with icons only.8 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  9. 9. Gallery thumbnails benefit from additionaltext.9 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  10. 10. Gallery thumbnails benefit from additionaltext.10 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  11. 11. Gallery thumbnails benefit from additionaltext.11 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  12. 12. Gallery thumbnails benefit from additionaltext.12 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  13. 13. Dashboard shows core information foreach drill down section of the app.13 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  14. 14. Metaphor view requires artwork by anartist.14 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  15. 15. Carousel works best with few items only.15 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  16. 16. FORMS16 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  17. 17. Forms should never stop people fromreaching their goal.17 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  18. 18. Login can be obsolete or simplified in manycases.18 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  19. 19. Registration should be very simple –remove non-important fields.19 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  20. 20. Calculator view should be tidy.20 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  21. 21. Calculator view should be tidy.21 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  22. 22. Calculator view should be tidy.22 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  23. 23. Fit Search settings into the screen. Showvalues and one inline setting.23 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  24. 24. Wizards should be short and they require aposition indicator.24 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  25. 25. Long form’s “OK” can go to action button#1 or to the end of the view – but test it.25 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  26. 26. UX OFFERING FOR SERIES 4026 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  27. 27. There is a UI style guide – and more.27 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  28. 28. There is a UI style guide – and more.28 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  29. 29. The Nokia’s Series 40 stencils supportInkscape.29 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  30. 30. The Nokia’s Series 40 stencils supportInkscape.30 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  31. 31. Series 40 UI component demo projectsshowcase UI and code. LCDUI Web apps31 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  32. 32. Series 40 UI component demo projectsshowcase UI and code.32 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  33. 33. Series 40 UI design• UX Library for Series 40 full touch: http://www.developer.nokia.com/Resources/Library/Full _Touch/• UI Component Demos project: https://projects.developer.nokia.com/s40uivisualisation• Web Apps UI visualisation project: https://projects.developer.nokia.com/webappsuivisualis ation33 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  34. 34. Further readings and links• Mobile Design Pattern Gallery. Theresa Neil (2012).• Designing Mobile Interfaces. Steven Hoober and Eric Berkman (2011).• Forms that Work: Designing Web Forms for Usability. Caroline Jarrett and Gerry Gaffney (2008).• useit.com (Jacob Nielsen’s blog)• http://snook.ca/technical/colour_contrast/colour.html (contrast checker)• http://www.uxbooth.com/articles/mobile-form-design-strategies/• http://uxdesign.smashingmagazine.com/2010/03/11/forms-on-mobile- devices-modern-solutions/• http://www.formsthatwork.com/Mobile-forms• http://www.nngroup.com/articles/stop-password-masking/34 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  35. 35. TAKE HOME MESSAGES35 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  36. 36. 1st navigation is the 1st touch point and setsthe users’ attitude towards your app.36 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  37. 37. Forms should never stop people fromreaching their goal.37 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  38. 38. THANKS TO:SANNA HIUKKAANNE KIVIMAA38 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  39. 39. THANKS ext-jan.krebber@nokia.com#krebbixux 39 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber

×