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

1. BASIC UI LAYOUTS IN SERIES 40
FULL TOUCH
Jan Krebber
Senior User Experience Consultant
OCTO3
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 are
custom 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 NAVIGATION
4 © 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 sets
the 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 works
well 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 up
to 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 additional
text.
9 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber

10. Gallery thumbnails benefit from additional
text.
10 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber

11. Gallery thumbnails benefit from additional
text.
11 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber

12. Gallery thumbnails benefit from additional
text.
12 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber

13. Dashboard shows core information for
each 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 an
artist.
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. FORMS
16 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber

17. Forms should never stop people from
reaching 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 many
cases.
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. Show
values 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 a
position 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 40
26 © 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 support
Inkscape.
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 support
Inkscape.
30 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber

31. Series 40 UI component demo projects
showcase UI and code.
LCDUI Web apps
31 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber

32. Series 40 UI component demo projects
showcase 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
ation
33 © 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 MESSAGES
35 © 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 sets
the 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 from
reaching their goal.
37 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber

38. THANKS TO:
SANNA HIUKKA
ANNE KIVIMAA
38 © 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