Nokia Asha Touch UI Style Guide Part 1

Series 40 Full TouchUI Style GuidePart 11 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

OverviewPart 1 (28.06.2012, 04.07.2012)• Essentials• UI Components• Exercises (solutions 04.07.2012)Part 2 (10.07.2012, 13.07.2012)• Chrome and Menus• UI Patterns• Customisation• Porting• UX offering for Series 40• Take Home Messages• Exercises (solutions 13.07.2012)2 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Essentials3 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Series 40 full touch UI is different – theAPIs are not.4 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Home screen allows direct access toapps, contacts, and my app. App My Page My App Launcher5 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Notification bar contains pre-definedshortcuts and global notifications. timeout6 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

The UI is composed of 5 main layers.7 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Use standard gestures as intended. Press, release Drag Select, open Move item Pinch open Zoom in Press and hold Swipe from the edge Opens context menu Pinch close Double tap Flick Zoom out Toggles zoom states Scroll quickly8 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Touch UI elements must show afeedback and evoke on finger lift.9 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Main orientation is portrait, most JavaUI elements support landscape.10 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Support for right-to-left languagesaffects chrome and content.11 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

UI Components12 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

LCDUI is based on few view types. Displayable Screen Canvas Form List Alert Text box With chrome Full screen Implicit choice Exclusive choice Multiple choice Choice Date Text Gauge String Image Custom Spacer Group Field Field Item Item Item13 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

2 types of displayable (views) Displayable Screen Canvas Form List Alert Text box With chrome Full screen Implicit choice Exclusive choice Multiple choice Choice Date Text Gauge String Image Custom Spacer Group Field Field Item Item Item14 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Screens allow pre-defined elements,but in a canvas you can draw freely.15 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

2 canvases Displayable Screen Canvas Form List Alert Text box With chrome Full screen Implicit choice Exclusive choice Multiple choice Choice Date Text Gauge String Image Custom Spacer Group Field Field Item Item Item16 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

A full screen canvas requires you toadd navigation elements.17 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

4 screens Displayable Screen Canvas Form List Alert Text box With chrome Full screen Implicit choice Exclusive choice Multiple choice Choice Date Text Gauge String Image Custom Spacer Group Field Field Item Item Item18 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

A form is the most versatile screen touse with LCDUI components.19 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Lists allow only one list item type.20 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Alerts can only be shown inside anapplication.21 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

A text box can show editable text ornon-editable text. Nothing else.22 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

3 different types of lists Displayable Screen Canvas Form List Alert Text box With chrome Full screen Implicit choice Exclusive choice Multiple choice Choice Date Text Gauge String Image Custom Spacer Group Field Field Item Item Item23 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Implicit choices are made for drill downand single selection.24 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Exclusive choice list does not closeautomatically after selection.25 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Also screens with multiple choices mayrequire some additional work.26 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

8 form items Displayable Screen Canvas Form List Alert Text box With chrome Full screen Implicit choice Exclusive choice Multiple choice Choice Date Text Gauge String Image Custom Spacer Group Field Field Item Item Item27 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Changes in forms are confirmed; orcancelled with a confirmation query.28 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Due to their nature, only exclusive pop-up choice groups can collapse.29 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

There is no ”single choice item” in JavaForm. custom30 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

DateField is a tumbler, only for settingtime and date.31 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

TextField is for inline text editing suchas names or passwords.32 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Gauge can be a slider or a progressindicator.33 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

StringItem displays text and allowshyperlinks and button creation.34 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

ImageItem crops the image to thescreen if necessary.35 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

CustomItem allows drawing newelements as needed.36 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Spacer adds space between two formitems.37 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Exercise: How would this screen lookin Series 40 Full touch?39 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Exercise: Create a sign in view - Username - Password - Setting for auto-fill password - Forgot password & help40 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Exercise: Which component would youuse to pick one of the following? - Monday - Tuesday - Wednesday - Thursday - Friday41 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Exercise: How would you replace asingle choice item (aka switch)?42 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Exercise: Which views can have abutton? Are there any limitations?43 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Links 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/44 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Answers and propsals fromhere:http://www.developer.nokia.com/Community/Wiki/Wiki_Home45 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber

Nokia Asha Touch UI Style Guide Part 1

by Nokia Developer on Jun 28, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics