series 40 ui clinic: basic ui layouts in series 40 full touch
DESCRIPTION
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/-pg3hzYM9PkTRANSCRIPT
![Page 1: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/1.jpg)
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
BASIC UI LAYOUTS IN SERIES 40 FULL TOUCH
![Page 2: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/2.jpg)
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
![Page 3: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/3.jpg)
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
![Page 4: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/4.jpg)
4 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
1ST NAVIGATION
![Page 5: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/5.jpg)
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
![Page 6: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/6.jpg)
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
![Page 7: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/7.jpg)
List gives room for informative text.
7 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
![Page 8: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/8.jpg)
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
![Page 9: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/9.jpg)
Gallery thumbnails benefit from additional text.
9 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
![Page 10: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/10.jpg)
Gallery thumbnails benefit from additional text.
10 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
![Page 11: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/11.jpg)
Gallery thumbnails benefit from additional text.
11 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
![Page 12: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/12.jpg)
Gallery thumbnails benefit from additional text.
12 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
![Page 13: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/13.jpg)
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
![Page 14: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/14.jpg)
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
![Page 15: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/15.jpg)
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
![Page 16: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/16.jpg)
16 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
FORMS
![Page 17: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/17.jpg)
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
![Page 18: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/18.jpg)
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
![Page 19: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/19.jpg)
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
![Page 20: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/20.jpg)
Calculator view should be tidy.
20 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
![Page 21: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/21.jpg)
Calculator view should be tidy.
21 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
![Page 22: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/22.jpg)
Calculator view should be tidy.
22 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
![Page 23: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/23.jpg)
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
![Page 24: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/24.jpg)
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
![Page 25: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/25.jpg)
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
![Page 26: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/26.jpg)
26 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
UX OFFERING FOR SERIES 40
![Page 27: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/27.jpg)
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
![Page 28: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/28.jpg)
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
![Page 29: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/29.jpg)
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
![Page 30: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/30.jpg)
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
![Page 31: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/31.jpg)
Series 40 UI component demo projects showcase UI and code.
31 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
LCDUI Web apps
![Page 32: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/32.jpg)
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
![Page 33: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/33.jpg)
Series 40 UI design
33 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
• 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/webappsuivisualisation
![Page 34: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/34.jpg)
Further readings and links
34 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
• 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/
![Page 35: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/35.jpg)
35 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
TAKE HOME MESSAGES
![Page 36: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/36.jpg)
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
![Page 37: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/37.jpg)
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
![Page 38: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/38.jpg)
38 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
THANKS TO: SANNA HIUKKA ANNE KIVIMAA
![Page 39: Series 40 UI Clinic: Basic UI layouts in Series 40 Full Touch](https://reader033.vdocuments.site/reader033/viewer/2022042714/55532aceb4c905a7778b54c0/html5/thumbnails/39.jpg)
39 © Nokia 2013 Basic patterns in Series 40 full touch.pptx v.01 2013-01-29 Jan Krebber
THANKS
#krebbixux