Your SlideShare is downloading. ×
Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

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

621
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. …

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
621
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
46
Comments
3
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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. 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. 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. 1ST NAVIGATION4 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  • 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. 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. 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. 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. Gallery thumbnails benefit from additionaltext.9 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  • 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. Gallery thumbnails benefit from additionaltext.11 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  • 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. 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. 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. 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. FORMS16 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  • 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. 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. 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. Calculator view should be tidy.20 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  • 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. Calculator view should be tidy.22 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  • 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. 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. 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. UX OFFERING FOR SERIES 4026 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  • 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. 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. 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. 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. 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. 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. 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. 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. TAKE HOME MESSAGES35 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  • 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. 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. THANKS TO:SANNA HIUKKAANNE KIVIMAA38 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
  • 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