Deep dive into Nokia Asha UI design: Fundamentals
-
Upload
microsoft-mobile-developer -
Category
Technology
-
view
1.442 -
download
8
description
Transcript of Deep dive into Nokia Asha UI design: Fundamentals
![Page 1: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/1.jpg)
LCDUI and LWUIT UI components in Nokia Asha UI Jan Krebber Senior User Experience Consultant OCTO3
![Page 2: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/2.jpg)
Overview
2 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
• What’s new? • Essentials • Nokia UI • LCDUI • LWUIT • Patterns • Take home messages
![Page 3: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/3.jpg)
3 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
The visualization changed, but the APIs remain compatible.
![Page 4: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/4.jpg)
What’s new?
![Page 5: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/5.jpg)
Design drivers are direct access and direct manipulation.
5 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 6: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/6.jpg)
The Swipe is reserved.
6 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 7: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/7.jpg)
The screen is optimized for mobility, convenience and effectiveness.
7 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 8: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/8.jpg)
Back-stepping is done via a dedicated hardware Back/Exit key.
8 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 9: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/9.jpg)
Obey the minimum touch area.
9 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 10: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/10.jpg)
Push notification lets people listen to your service if there is something new.
10 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 11: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/11.jpg)
Toolbar area can host actions or tabs, but no combination of those.
11 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 12: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/12.jpg)
Indicating selected items has been simplified.
12 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 13: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/13.jpg)
Launcher icon is cropped automatially from Fastlane icon.
13 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 14: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/14.jpg)
Make sure custom components work with the light background.
14 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 15: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/15.jpg)
Essentials
![Page 16: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/16.jpg)
Use standard gestures as intended
16 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
Drag Move item
Swipe
Flick Scroll quickly
Pinch open Zoom in
Pinch close Zoom out
Press down Open, select
Long press Opens item menu
![Page 17: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/17.jpg)
Only one application can run at a time.
17 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 18: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/18.jpg)
Portrait and landscape orientation are supported.
18 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 19: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/19.jpg)
Status bar, Header bar and optional toolbar area are chrome.
19 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 20: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/20.jpg)
Options menu contains only actions affecting the entire view.
20 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 21: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/21.jpg)
Context menu is only a collection of shortcuts of single item actions.
21 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 22: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/22.jpg)
Treat LWUIT and LCDUI as separate offerings – do not mix them.
22 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 23: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/23.jpg)
Select your approach according to your requirements.
23 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
Custom UI on Canvas
LCDUI components
LWUIT components
![Page 24: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/24.jpg)
Exercise: Do you use LWUIT or LCDUI or full custom solution? Why?
24 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 25: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/25.jpg)
Nokia UI
![Page 26: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/26.jpg)
Category bar can have tabs or actions. Do not mix them.
26 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 27: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/27.jpg)
If there is no Category bar, an Option’s item will be shown as textual button.
27 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 28: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/28.jpg)
PopupList may replace the long-press menu when necessary.
28 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 29: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/29.jpg)
Push notification shows only your service’s information, no app statuses.
29 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 30: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/30.jpg)
LCDUI
![Page 31: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/31.jpg)
LCDUI components are backward compatible.
31 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 32: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/32.jpg)
LCDUI requires only little layout work when using components.
32 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 33: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/33.jpg)
LCDUI is based on few view types.
33 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Alert List Form TextBox
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 34: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/34.jpg)
There are 2 types of displayable (views).
34 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Alert List Form TextBox
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 35: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/35.jpg)
Screens use pre-defined elements, but in a canvas you can draw freely.
35 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 36: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/36.jpg)
From UX point of view, there 2 different Canvases.
36 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Alert List Form TextBox
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 37: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/37.jpg)
Use header and optionally the toolbar area to maintain look and feel.
37 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 38: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/38.jpg)
Alerts can only be shown inside an application.
38 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Alert List Form TextBox
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 39: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/39.jpg)
In Alerts, place positive action at the top and negative action at the bottom.
39 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 40: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/40.jpg)
Lists allow only one list item type.
40 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Alert List Form TextBox
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 41: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/41.jpg)
Implicit choice Lists are made for drill down flows.
41 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 42: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/42.jpg)
Exclusive choice List must have always exactly one item highlighted.
42 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 43: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/43.jpg)
Multiple selection list should have select/unselect all actions in Options.
43 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 44: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/44.jpg)
Multiple choice List and Exclusive choice List require a ”Done” button.
44 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 45: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/45.jpg)
No focus in a list (1). Highlight only in a picker (2).
45 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 46: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/46.jpg)
A form is the most versatile screen to use with LCDUI components.
46 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Alert List Form TextBox
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 47: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/47.jpg)
Popup ChoiceGroup is preferred over the exclusive ChoiceGroup.
47 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 48: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/48.jpg)
The DateField components can only be used for setting a date and time.
48 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 49: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/49.jpg)
Hint text disappears now immediately when opening TextField.
49 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 50: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/50.jpg)
Gauge can be a slider or a progress indicator.
50 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 51: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/51.jpg)
StringItem displays text and allows hyperlinks and button creation.
51 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 52: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/52.jpg)
ImageItem crops the image if necessary.
52 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 53: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/53.jpg)
CustomItem allows drawing new elements e.g. a switch.
53 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 54: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/54.jpg)
Spacer adds space between two Form items.
54 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 55: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/55.jpg)
A text box can show editable text or non-editable text. Nothing else.
55 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Alert List Form TextBox
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 56: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/56.jpg)
Text color is changed according to the text state: non-editable, edit, edited.
56 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 57: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/57.jpg)
Ticker is available in Canvas, List, Form and TextBox.
57 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
Displayable
Screen Canvas
With chrome Full screen Alert List Form TextBox
Choice Group
Date Field
Text Field
Gauge
String Item
Image Item
Custom Item
Spacer
Implicit choice Exclusive choice Multiple choice
![Page 58: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/58.jpg)
Ticker always appears right below the Header bar.
58 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 59: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/59.jpg)
LWUIT
![Page 60: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/60.jpg)
60 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
LWUIT is based on components instead of ready screens.
![Page 61: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/61.jpg)
LWUIT runs in LCDUI’s Canvas with or without Canvas’ chrome.
61 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 62: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/62.jpg)
Styled components are made of LWUIT components but named differently.
62 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 63: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/63.jpg)
LWUIT (Feedback) Banner is only for in-app-notification.
63 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 64: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/64.jpg)
Button may contain text or icon and can be customized.
64 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 65: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/65.jpg)
Dialogs should have not more than one accent button – if any.
65 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 66: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/66.jpg)
Grid or table should not exceed the screen horizontally.
66 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 67: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/67.jpg)
Usually the header is sticky, but not all views require a header.
67 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 68: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/68.jpg)
Group header groups content and does not separate single items.
68 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 69: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/69.jpg)
Use Label to give components a title.
69 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 70: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/70.jpg)
Lists can be customized to create fancy, exclusive and multiple choice lists.
70 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 71: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/71.jpg)
Picker should be opened in a new view and not be an in-line-edit item.
71 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 72: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/72.jpg)
Usually a determinate progress bar is preferred over a spinner.
72 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 73: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/73.jpg)
Use Slider for a continuous range of numerical values.
73 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 74: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/74.jpg)
LWUIT long-press menu and LCDUI long-press menu work in the same way.
74 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 75: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/75.jpg)
Tabs can use text or icons and they can be customized.
75 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 76: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/76.jpg)
Switch should only be used with truly opposite items.
76 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 77: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/77.jpg)
Text field is for one line. Text area is for multiple lines.
77 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 78: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/78.jpg)
Patterns
![Page 79: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/79.jpg)
Indicate empty states and enable people to add content there.
79 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 80: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/80.jpg)
Highlight errors and help fixing them; either with an Alert or inline.
80 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 81: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/81.jpg)
In full screen view show the chrome before you hide it.
81 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 82: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/82.jpg)
“Delete” should have a confirmation. “Remove” does not require a query.
82 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 83: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/83.jpg)
If people can populate a list, enable clean sweep.
83 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 84: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/84.jpg)
Refresh content by drag-down from top. Add more content by drag-up from bottom.
84 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 85: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/85.jpg)
Add Cancel to each individual process.
85 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 86: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/86.jpg)
Drill down means also a clear single back-stepping path.
86 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 87: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/87.jpg)
Tabs are not inherited to the next lower hierarchy level.
87 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 88: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/88.jpg)
Since filtering by categories is based on textual items, it may replace tabs.
88 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 89: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/89.jpg)
Progressive Search is ideal for large internal content.
89 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 90: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/90.jpg)
Take home messages
![Page 91: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/91.jpg)
91 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
The visualization changed, but the APIs remain compatible.
![Page 92: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/92.jpg)
Back-stepping is done via a dedicated hardware Back/Exit key.
92 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 93: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/93.jpg)
Treat LWUIT and LCDUI as separate offerings – do not mix them.
93 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
![Page 94: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/94.jpg)
Literature and links
94 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
UX Library for Nokia Asha: http://www.developer.nokia.com/Resources/Library/Asha_UI/#!index.html Nokia Asha Web app UX guidelines: http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/#!design-library.html Nokia Asha UI component demos: https://projects.developer.nokia.com/asha_ui_component_demos
![Page 95: Deep dive into Nokia Asha UI design: Fundamentals](https://reader034.fdocuments.us/reader034/viewer/2022052505/55532abfb4c905a7778b54b3/html5/thumbnails/95.jpg)
Thanks. [email protected] #krebbixux