UI Components in Nokia Asha: LCDUI and LWUIT

LCDUI and LWUIT
UI components in Nokia Asha UI
Jan Krebber
Senior User Experience Consultant
OCTO3

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

The visualization changed,
but the APIs remain compatible.

Design drivers are
direct access and
direct manipulation.

The Swipe
is reserved.

The screen is optimized for mobility,
convenience and eﬀectiveness.

Back-stepping is done via a dedicated
hardware Back/Exit key.

Obey the minimum touch area.

Push notiﬁcation lets people listen to
your service if there is something new.

Toolbar area can host actions or tabs,
but no combination of those.

Indicating selected items has been
simpliﬁed.

Launcher icon is cropped automatially
from Fastlane icon.

Make sure custom components work
with the light background.

Use standard gestures as intended
Drag
Move item
Swipe
Flick
Scroll quickly
Pinch open
Zoom in
Pinch close
Zoom out
Press down
Open, select
Long press
Opens item menu

Only one application can run at a time.

Portrait and landscape orientation are
supported.

Status bar, Header bar and optional
toolbar area are chrome.

Options menu contains only actions
aﬀecting the entire view.

Context menu is only a collection of
shortcuts of single item actions.

Treat LWUIT and LCDUI as separate
oﬀerings – do not mix them.

Select your approach according to your
requirements.
Custom UI
on Canvas
LCDUI
components
LWUIT
components

Exercise: Do you use LWUIT or LCDUI or
full custom solution? Why?

Category bar can have tabs or actions.
Do not mix them.

If there is no Category bar, an Option’s
item will be shown as textual button.

PopupList may replace the long-press
menu when necessary.

Push notiﬁcation shows only your
service’s information, no app statuses.

LCDUI components are backward
compatible.

LCDUI requires only little layout work
when using components.

LCDUI is based on few view types.
Displayable
ScreenCanvas
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

There are 2 types of displayable (views).
Displayable
ScreenCanvas
Choice
Group
Date
Field
Text
Field
Gauge String
Item
Image
Item
Custom
Item
Spacer

Screens use pre-deﬁned elements, but
in a canvas you can draw freely.

From UX point of view, there 2
diﬀerent Canvases.
Displayable
ScreenCanvas
Choice
Group
Date
Field
Text
Field
Gauge String
Item
Image
Item
Custom
Item
Spacer

Use header and optionally the toolbar
area to maintain look and feel.

Alerts can only be shown inside an
application.
Displayable
ScreenCanvas
Choice
Group
Date
Field
Text
Field
Gauge String
Item
Image
Item
Custom
Item
Spacer

In Alerts, place positive action at the
top and negative action at the bottom.

Lists allow only one list item type.
Displayable
ScreenCanvas
Choice
Group
Date
Field
Text
Field
Gauge String
Item
Image
Item
Custom
Item
Spacer

Implicit choice Lists are made for drill
down ﬂows.

Exclusive choice List must have always
exactly one item highlighted.

Multiple selection list should have
select/unselect all actions in Options.

Multiple choice List and Exclusive
choice List require a ”Done” button.

No focus in a list (1).
Highlight only in a picker (2).

A form is the most versatile screen to
use with LCDUI components.
Displayable
ScreenCanvas
Choice
Group
Date
Field
Text
Field
Gauge String
Item
Image
Item
Custom
Item
Spacer

Popup ChoiceGroup is preferred over
the exclusive ChoiceGroup.

The DateField components can only be
used for setting a date and time.

Hint text disappears now immediately
when opening TextField.

Gauge can be a slider or a progress
indicator.

StringItem displays text and allows
hyperlinks and button creation.

ImageItem crops the image if
necessary.

CustomItem allows drawing new
elements e.g. a switch.

Spacer adds space between two Form
items.

A text box can show editable text or
non-editable text. Nothing else.
Displayable
ScreenCanvas
Choice
Group
Date
Field
Text
Field
Gauge String
Item
Image
Item
Custom
Item
Spacer

Text color is changed according to the
text state: non-editable, edit, edited.

Ticker is available in Canvas, List, Form
and TextBox.
Displayable
ScreenCanvas
Choice
Group
Date
Field
Text
Field
Gauge String
Item
Image
Item
Custom
Item
Spacer

Ticker always appears right below the
Header bar.

LWUIT is based on components instead
of ready screens.

LWUIT runs in LCDUI’s Canvas with or
without Canvas’ chrome.

Styled components are made of LWUIT
components but named diﬀerently.

LWUIT (Feedback) Banner is only for in-
app-notiﬁcation.

Button may contain text or icon and
can be customized.

Dialogs should have not more than one
accent button – if any.

Grid or table should not exceed the
screen horizontally.

Usually the header is sticky, but not all
views require a header.

Group header groups content and
does not separate single items.

Use Label to give components a title.

Lists can be customized to create fancy,
exclusive and multiple choice lists.

Picker should be opened in a new view
and not be an in-line-edit item.

Usually a determinate progress bar is
preferred over a spinner.

Use Slider for a continuous range of
numerical values.

LWUIT long-press menu and LCDUI
long-press menu work in the same way.

Tabs can use text or icons and they can
be customized.

Switch should only be used with truly
opposite items.

Text ﬁeld is for one line.
Text area is for multiple lines.

Indicate empty states and enable
people to add content there.

Highlight errors and help ﬁxing them;
either with an Alert or inline.

In full screen view show the chrome
before you hide it.

“Delete” should have a conﬁrmation.
“Remove” does not require a query.

If people can
populate a list,
enable clean
sweep.

Refresh content by
drag-down from top.
Add more content by
drag-up from bottom.

Add Cancel to each individual process.

Drill down means also a clear single
back-stepping path.

Tabs are not inherited to the next lower
hierarchy level.

Since ﬁltering by categories is based
on textual items, it may replace tabs.

Progressive Search is ideal for large
internal content.

The visualization changed,
but the APIs remain compatible.

Back-stepping is done via a dedicated
hardware Back/Exit key.

Treat LWUIT and LCDUI as separate
oﬀerings – do not mix them.

Literature and links
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

Thanks.
ext-jan.krebber@nokia.com
#krebbixux

UI Components in Nokia Asha: LCDUI and LWUIT

Recommended

Recommended

More Related Content

Similar to UI Components in Nokia Asha: LCDUI and LWUIT

Similar to UI Components in Nokia Asha: LCDUI and LWUIT (20)

More from Microsoft Mobile Developer

More from Microsoft Mobile Developer (20)

Recently uploaded

Recently uploaded (20)

UI Components in Nokia Asha: LCDUI and LWUIT