Nokia Asha Touch UI Style Guide Part 2

Series 40 Full TouchUI Style GuidePart 21 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

OverviewPart 1 (28.06.2012, 04.07.2012)• Essentials• UI Components• ExercisesPart 2 (10.07.2012, 13.07.2012)• Chrome and Menus• UI Patterns• Customisation• Porting• UX offering for Series 40• Take Home Messages• Exercises2 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Chrome and Menus3 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Ensure there is a Back button in allviews.4 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Do not place actions in a Category bar.5 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Instead of scrolling horizontally, usethe Category bar extension.6 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Category bar disappears with drilldown.7 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

It is possible to add a Ticker to a view.8 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

The former MSK is now the primaryfunction in Action button 1.9 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

If there is no MSK metaphore, place allscreen commands to Options.10 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

If there are no options at all, the menuicon is dimmed automatically.11 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Options menu contains only globalview functions.12 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Context menu is only a collection ofshortcuts of single item actions.13 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

There are different ’Options’ and’Selection’ lists. LCDUI Nokia UI Options list Popup list (all) (Form, Canvas) Options Long press Options Selection list (screen (item list layout layout commands) commands) + tail position Nested Nested list list14 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Options lists in LCDUI do not allownested lists. LCDUI Options list (all) Options Long press (screen (item commands) commands)15 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Popup lists with options list layout aredefined by positioning the tail. Nokia UI Popup list (Form, Canvas) Options Selection list list layout layout + tail position Nested Nested list list16 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Popup lists with selection list layoutare defined by specifying a title. Nokia UI Popup list (Form, Canvas) Options Selection list list layout layout + tail position Nested Nested list list17 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Use nested lists for more items toavoid scrolling or for settings. Nokia UI Popup list (Form, Canvas) Options Selection list list layout layout + tail position Nested Nested list list18 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

UI Patterns19 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

End key ends calls and dataconnections or exits applications.20 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Notify or confirm at least in case ofpossible loss.21 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Instead of dimming, use dynamic viewcontent.22 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

If you need Action Button #1 in a List,you can use a Form instead.23 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

If you need and alternative to aDateField, use a TextField instead.24 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Use a form as wait notification, sincealerts cannot listen to app events. custom25 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Participate to theAsha Touch Competition 2012Q326 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Customization27 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Use the entire screen.28 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Place your chrome elements wherethe platform chrome would be.29 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Fonts are between 14 pt light and20 pt regular.30 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Minimum touch area is43 x 43 pixels and 6 pixels margin.Pixel size: 0,163 mm x 0,163 mm for 3’’, 240 x 400 pixels31 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Show the status bar to allow access tothe notification bar.32 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Define the expected keyboard layout.33 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Porting34 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

We will look briefly into 2 portingcases:1. Series 40 non-touch to Series 40 touch and type (NT )2. Series 40 touch and type to Series 40 full touch (T&T)35 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

NT T&T removes focus and changes MSK.36 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

NT T&T splits Options to screen and item. Context Options37 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

NT Context menu items must be repeated. Names Contact (drill down) Context Options38 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

T&T FT requires icons for Action button #1.39 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

T&T FT needs Cancel button instead of.40 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

UI porting between T&T and FT iseasier than between NT and T&T. T&T  FT NT  T&T41 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

The UX checklist collects the mostimportant UI style issues.44 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

The Nokia Icon Toolkit supportsInkscape.45 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Stencils help to create high fidelitywireframes or help to check sizes.46 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Series 40 UI component demos appshowcases UI and code.47 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

To maintain look and feel, chrome andcomponents are a good start.49 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

UI porting between T&T and FT iseasier than between NT and T&T.50 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

UX offering is not just a style guide.51 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Series 40 Full Touch UI DesignLibrary: http://www.developer.nokia.com/Resources/Library/Full_Touch/Checklist: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ux-checklist.htmlIcon Creation: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!icon-creation.htmlUI Components: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-components.htmlUI Components Demos App: https://projects.developer.nokia.com/s40uivisualisationBasics: http://www.developer.nokia.com/Resources/Library/Design_and_UX/Asha Touch Competition 2012Q3:http://www.developer.nokia.com/Community/Wiki/Asha_Touch_Competition_2012Q3Wiki article to this webinar:http://www.developer.nokia.com/Community/Wiki/index.php?title=Webinar_Series_40_UI_Design52 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Exercise: How could these screenslook in full touch?54 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Exercise: If Action Button 1 should beused for confirmation, how would youbuild a multi selction view?55 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Exercise: Sketch a download dialogwhich shows the remaining amount ofdata.56 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Exercise: Sketch a view- 2 categories- 3 primary actions - call - add - edit- 3 secondary actions - Share FB, TW, Reddit- Options menu- use chrome- maximize the content area57 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Exercise: How many touch elements fitthe content area?58 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Exercise: How many touch elements fitthe entire canvas?59 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Thanks ext-jan.krebber@nokia.com60 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber

Nokia Asha Touch UI Style Guide Part 2

by Nokia Developer on Jul 10, 2012

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Nokia Asha Touch UI Style Guide Part 2 Presentation Transcript