Embed Size (px)
DESCRIPTION
This webinar covers UI essentials and UI components for Series 40 full touch phones as found in the LCDUI. Participants will learn when to use a certain UI component and when to prioritise one component to make the application work as expected by people using Series 40 phones.
Citation preview
1
Part 1
Series 40 Full Touch UI Style Guide
© Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Overview
2 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Part 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)
Essentials
3 © 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 – the APIs are not.
4 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber 4
Home screen allows direct access to apps, contacts, and my app.
5 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
My Page App Launcher
My App
Notification bar contains pre-defined shortcuts and global notifications.
6 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
timeout
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.
8 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Press, release Select, open
Press and hold Opens context
menu
Double tap Toggles zoom states
Drag Move item
Swipe from the edge
Flick Scroll quickly
Pinch open Zoom in
Pinch close Zoom out
Touch UI elements must show a feedback 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 Java UI 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 languages affects chrome and content.
11 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
UI Components
12 © 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.
13 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Form List Alert Text box
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
2 types of displayable (views)
14 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Form List Alert Text box
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
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
16 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Form List Alert Text box
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
17 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
A full screen canvas requires you to add navigation elements.
4 screens
18 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Form List Alert Text box
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
A form is the most versatile screen to use 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 an application.
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 or non-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
23 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Form List Alert Text box
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
Implicit choices are made for drill down and 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 close automatically 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 may require 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
27 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Form List Alert Text box
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
Changes in forms are confirmed; or cancelled 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 Java Form.
30 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
custom
DateField is a tumbler, only for setting time 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 such as 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 progress indicator.
33 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
StringItem displays text and allows hyperlinks 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 the screen if necessary.
35 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
CustomItem allows drawing new elements 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 form items.
37 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Exercises
38 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Exercise: How would this screen look in 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 & help
40 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Exercise: Which component would you use to pick one of the following? - Monday - Tuesday - Wednesday - Thursday - Friday
41 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Exercise: How would you replace a single 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 a button? 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 Design
44 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Library: http://www.developer.nokia.com/Resources/Library/Full_Touch/ Checklist: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ux-checklist.html Icon Creation: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!icon-creation.html UI Components: http://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-components.html UI Components Demos App: https://projects.developer.nokia.com/s40uivisualisation Basics: http://www.developer.nokia.com/Resources/Library/Design_and_UX/
Answers and propsals from here: http://www.developer.nokia.com/Community/Wiki/Wiki_Home
45 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
Thanks [email protected]
46 © Nokia 2012 Series 40 Full Touch UI Style Guide p1.pptx v.01 2012-06-28 Jan Krebber
