LCDUI and LWUITUI components in Nokia Asha UIJan KrebberSenior User Experience ConsultantOCTO3
Overview2 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber•  What’s new?•  Essenti...
3 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberThe visualization changed,but th...
What’s new?
Design drivers aredirect access anddirect manipulation.5 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1...
The Swipeis reserved.6 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
The screen is optimized for mobility,convenience and effectiveness.7 © Nokia 2013 LCDUI and LWUIT UI components in Nokia As...
Back-stepping is done via a dedicatedhardware Back/Exit key.8 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.ppt...
Obey the minimum touch area.9 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
Push notification lets people listen toyour service if there is something new.10 © Nokia 2013 LCDUI and LWUIT UI components...
Toolbar area can host actions or tabs,but no combination of those.11 © Nokia 2013 LCDUI and LWUIT UI components in Nokia A...
Indicating selected items has beensimplified.12 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-2...
Launcher icon is cropped automatiallyfrom Fastlane icon.13 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v...
Make sure custom components workwith the light background.14 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx...
Essentials
Use standard gestures as intended16 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebb...
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...
Portrait and landscape orientation aresupported.18 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-...
Status bar, Header bar and optionaltoolbar area are chrome.19 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.ppt...
Options menu contains only actionsaffecting the entire view.20 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.ppt...
Context menu is only a collection ofshortcuts of single item actions.21 © Nokia 2013 LCDUI and LWUIT UI components in Noki...
Treat LWUIT and LCDUI as separateofferings – do not mix them.22 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pp...
Select your approach according to yourrequirements.23 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 20...
Exercise: Do you use LWUIT or LCDUI orfull custom solution? Why?24 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Ash...
Nokia UI
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...
If there is no Category bar, an Option’sitem will be shown as textual button.27 © Nokia 2013 LCDUI and LWUIT UI components...
PopupList may replace the long-pressmenu when necessary.28 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v...
Push notification shows only yourservice’s information, no app statuses.29 © Nokia 2013 LCDUI and LWUIT UI components in No...
LCDUI
LCDUI components are backwardcompatible.31 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Ja...
LCDUI requires only little layout workwhen using components.32 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pp...
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 Krebb...
There are 2 types of displayable (views).34 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 J...
Screens use pre-defined elements, butin a canvas you can draw freely.35 © Nokia 2013 LCDUI and LWUIT UI components in Nokia...
From UX point of view, there 2different Canvases.36 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-...
Use header and optionally the toolbararea to maintain look and feel.37 © Nokia 2013 LCDUI and LWUIT UI components in Nokia...
Alerts can only be shown inside anapplication.38 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05...
In Alerts, place positive action at thetop and negative action at the bottom.39 © Nokia 2013 LCDUI and LWUIT UI components...
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 Kr...
Implicit choice Lists are made for drilldown flows.41 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 201...
Exclusive choice List must have alwaysexactly one item highlighted.42 © Nokia 2013 LCDUI and LWUIT UI components in Nokia ...
Multiple selection list should haveselect/unselect all actions in Options.43 © Nokia 2013 LCDUI and LWUIT UI components in...
Multiple choice List and Exclusivechoice List require a ”Done” button.44 © Nokia 2013 LCDUI and LWUIT UI components in Nok...
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...
A form is the most versatile screen touse with LCDUI components.46 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Ash...
Popup ChoiceGroup is preferred overthe exclusive ChoiceGroup.47 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.p...
The DateField components can only beused for setting a date and time.48 © Nokia 2013 LCDUI and LWUIT UI components in Noki...
Hint text disappears now immediatelywhen opening TextField.49 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.ppt...
Gauge can be a slider or a progressindicator.50 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-...
StringItem displays text and allowshyperlinks and button creation.51 © Nokia 2013 LCDUI and LWUIT UI components in Nokia A...
ImageItem crops the image ifnecessary.52 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan ...
CustomItem allows drawing newelements e.g. a switch.53 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2...
Spacer adds space between two Formitems.54 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Ja...
A text box can show editable text ornon-editable text. Nothing else.55 © Nokia 2013 LCDUI and LWUIT UI components in Nokia...
Text color is changed according to thetext state: non-editable, edit, edited.56 © Nokia 2013 LCDUI and LWUIT UI components...
Ticker is available in Canvas, List, Formand TextBox.57 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 ...
Ticker always appears right below theHeader bar.58 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-...
LWUIT
60 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberLWUIT is based on components in...
LWUIT runs in LCDUI’s Canvas with orwithout Canvas’ chrome.61 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.ppt...
Styled components are made of LWUITcomponents but named differently.62 © Nokia 2013 LCDUI and LWUIT UI components in Nokia ...
LWUIT (Feedback) Banner is only for in-app-notification.63 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v....
Button may contain text or icon andcan be customized.64 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 ...
Dialogs should have not more than oneaccent button – if any.65 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pp...
Grid or table should not exceed thescreen horizontally.66 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v....
Usually the header is sticky, but not allviews require a header.67 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Ash...
Group header groups content anddoes not separate single items.68 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha....
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 K...
Lists can be customized to create fancy,exclusive and multiple choice lists.70 © Nokia 2013 LCDUI and LWUIT UI components ...
Picker should be opened in a new viewand not be an in-line-edit item.71 © Nokia 2013 LCDUI and LWUIT UI components in Noki...
Usually a determinate progress bar ispreferred over a spinner.72 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha....
Use Slider for a continuous range ofnumerical values.73 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 ...
LWUIT long-press menu and LCDUIlong-press menu work in the same way.74 © Nokia 2013 LCDUI and LWUIT UI components in Nokia...
Tabs can use text or icons and they canbe customized.75 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 ...
Switch should only be used with trulyopposite items.76 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2...
Text field is for one line.Text area is for multiple lines.77 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx...
Patterns
Indicate empty states and enablepeople to add content there.79 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pp...
Highlight errors and help fixing them;either with an Alert or inline.80 © Nokia 2013 LCDUI and LWUIT UI components in Nokia...
In full screen view show the chromebefore you hide it.81 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1...
“Delete” should have a confirmation.“Remove” does not require a query.82 © Nokia 2013 LCDUI and LWUIT UI components in Noki...
If people canpopulate a list,enable cleansweep.83 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-0...
Refresh content bydrag-down from top.Add more content bydrag-up from bottom.84 © Nokia 2013 LCDUI and LWUIT UI components ...
Add Cancel to each individual process.85 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan ...
Drill down means also a clear singleback-stepping path.86 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v....
Tabs are not inherited to the next lowerhierarchy level.87 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v...
Since filtering by categories is basedon textual items, it may replace tabs.88 © Nokia 2013 LCDUI and LWUIT UI components i...
Progressive Search is ideal for largeinternal content.89 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1...
Take home messages
91 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberThe visualization changed,but t...
Back-stepping is done via a dedicatedhardware Back/Exit key.92 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pp...
Treat LWUIT and LCDUI as separateofferings – do not mix them.93 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pp...
Literature and links94 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberUX Library ...
Thanks.ext-jan.krebber@nokia.com#krebbixux
Upcoming SlideShare
Loading in...5
×

Deep dive into Nokia Asha UI design: Fundamentals

1,452

Published on

In this deep dive into the Nokia Asha UI, the first in a two-part series, you’ll get to know the new features in the Nokia Asha UI and the improvements over Series 40 releases. Join UX expert Jan Krebber of OCT03 as he leads an intensive Nokia Asha boot camp at Nokia headquarters. He discusses the UI components of LCDUI and LWUIT and provides pointers on when to use one or the other from a UI-design point of view. In addition, he explains the most common UI patterns and what it will take to make an application an integral part of the new Nokia Asha family on the Nokia Asha software platform.

If you find this webinar useful you may also be interested in the Deep dive into Nokia Asha UI design: Fundamentals: http://www.slideshare.net/nokia-developer/deep-dive-into-nokia-asha-ui-design-fundamentals (Join the live session on 29 May - 7 a.m. London; 9 a.m. Helsinki; 11:30 a.m. New Delhi; 2 p.m. Singapore: http://forumnokia.adobeconnect.com/asha-deep-dive-app-design/event/event_info.html)

Find out more about:
* developing for Nokia Asha: http://www.developer.nokia.com/Develop/asha
* UX guidelines for Java apps: http://www.developer.nokia.com/Resources/Library/Asha_UI/
* UX guidelines for web apps: http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/
* component demos: https://projects.developer.nokia.com/asha_ui_component_demos

Check out the current webinar schedule here: http://www.developer.nokia.com/webinars

Published in: Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,452
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
147
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Deep dive into Nokia Asha UI design: Fundamentals

  1. 1. LCDUI and LWUITUI components in Nokia Asha UIJan KrebberSenior User Experience ConsultantOCTO3
  2. 2. Overview2 © 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
  3. 3. 3 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberThe visualization changed,but the APIs remain compatible.
  4. 4. What’s new?
  5. 5. Design drivers aredirect access anddirect manipulation.5 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  6. 6. The Swipeis reserved.6 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  7. 7. 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
  8. 8. Back-stepping is done via a dedicatedhardware Back/Exit key.8 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  9. 9. Obey the minimum touch area.9 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  10. 10. Push notification lets people listen toyour 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
  11. 11. 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
  12. 12. Indicating selected items has beensimplified.12 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  13. 13. Launcher icon is cropped automatiallyfrom Fastlane icon.13 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  14. 14. Make sure custom components workwith the light background.14 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  15. 15. Essentials
  16. 16. Use standard gestures as intended16 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberDragMove itemSwipeFlickScroll quicklyPinch openZoom inPinch closeZoom outPress downOpen, selectLong pressOpens item menu
  17. 17. 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
  18. 18. Portrait and landscape orientation aresupported.18 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  19. 19. Status bar, Header bar and optionaltoolbar area are chrome.19 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  20. 20. Options menu contains only actionsaffecting the entire view.20 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  21. 21. Context menu is only a collection ofshortcuts of single item actions.21 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  22. 22. Treat LWUIT and LCDUI as separateofferings – do not mix them.22 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  23. 23. Select your approach according to yourrequirements.23 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberCustom UIon CanvasLCDUIcomponentsLWUITcomponents
  24. 24. Exercise: Do you use LWUIT or LCDUI orfull custom solution? Why?24 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  25. 25. Nokia UI
  26. 26. 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
  27. 27. If there is no Category bar, an Option’sitem 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
  28. 28. PopupList may replace the long-pressmenu when necessary.28 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  29. 29. Push notification shows only yourservice’s information, no app statuses.29 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  30. 30. LCDUI
  31. 31. LCDUI components are backwardcompatible.31 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  32. 32. LCDUI requires only little layout workwhen using components.32 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  33. 33. 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 KrebberDisplayableScreenCanvasWith chrome Full screen Alert List Form TextBoxChoiceGroupDateFieldTextFieldGauge StringItemImageItemCustomItemSpacerImplicit choice Exclusive choice Multiple choice
  34. 34. 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 KrebberDisplayableScreenCanvasWith chrome Full screen Alert List Form TextBoxChoiceGroupDateFieldTextFieldGauge StringItemImageItemCustomItemSpacerImplicit choice Exclusive choice Multiple choice
  35. 35. Screens use pre-defined elements, butin 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
  36. 36. From UX point of view, there 2different Canvases.36 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberDisplayableScreenCanvasWith chrome Full screen Alert List Form TextBoxChoiceGroupDateFieldTextFieldGauge StringItemImageItemCustomItemSpacerImplicit choice Exclusive choice Multiple choice
  37. 37. Use header and optionally the toolbararea to maintain look and feel.37 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  38. 38. Alerts can only be shown inside anapplication.38 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberDisplayableScreenCanvasWith chrome Full screen Alert List Form TextBoxChoiceGroupDateFieldTextFieldGauge StringItemImageItemCustomItemSpacerImplicit choice Exclusive choice Multiple choice
  39. 39. In Alerts, place positive action at thetop 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
  40. 40. 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 KrebberDisplayableScreenCanvasWith chrome Full screen Alert List Form TextBoxChoiceGroupDateFieldTextFieldGauge StringItemImageItemCustomItemSpacerImplicit choice Exclusive choice Multiple choice
  41. 41. Implicit choice Lists are made for drilldown flows.41 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  42. 42. Exclusive choice List must have alwaysexactly one item highlighted.42 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  43. 43. Multiple selection list should haveselect/unselect all actions in Options.43 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  44. 44. Multiple choice List and Exclusivechoice List require a ”Done” button.44 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  45. 45. 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
  46. 46. A form is the most versatile screen touse with LCDUI components.46 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberDisplayableScreenCanvasWith chrome Full screen Alert List Form TextBoxChoiceGroupDateFieldTextFieldGauge StringItemImageItemCustomItemSpacerImplicit choice Exclusive choice Multiple choice
  47. 47. Popup ChoiceGroup is preferred overthe exclusive ChoiceGroup.47 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  48. 48. The DateField components can only beused 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
  49. 49. Hint text disappears now immediatelywhen opening TextField.49 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  50. 50. Gauge can be a slider or a progressindicator.50 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  51. 51. StringItem displays text and allowshyperlinks and button creation.51 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  52. 52. ImageItem crops the image ifnecessary.52 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  53. 53. CustomItem allows drawing newelements e.g. a switch.53 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  54. 54. Spacer adds space between two Formitems.54 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  55. 55. A text box can show editable text ornon-editable text. Nothing else.55 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberDisplayableScreenCanvasWith chrome Full screen Alert List Form TextBoxChoiceGroupDateFieldTextFieldGauge StringItemImageItemCustomItemSpacerImplicit choice Exclusive choice Multiple choice
  56. 56. Text color is changed according to thetext state: non-editable, edit, edited.56 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  57. 57. Ticker is available in Canvas, List, Formand TextBox.57 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberDisplayableScreenCanvasWith chrome Full screen Alert List Form TextBoxChoiceGroupDateFieldTextFieldGauge StringItemImageItemCustomItemSpacerImplicit choice Exclusive choice Multiple choice
  58. 58. Ticker always appears right below theHeader bar.58 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  59. 59. LWUIT
  60. 60. 60 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberLWUIT is based on components insteadof ready screens.
  61. 61. LWUIT runs in LCDUI’s Canvas with orwithout Canvas’ chrome.61 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  62. 62. Styled components are made of LWUITcomponents but named differently.62 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  63. 63. 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
  64. 64. Button may contain text or icon andcan be customized.64 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  65. 65. Dialogs should have not more than oneaccent button – if any.65 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  66. 66. Grid or table should not exceed thescreen horizontally.66 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  67. 67. Usually the header is sticky, but not allviews require a header.67 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  68. 68. Group header groups content anddoes not separate single items.68 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  69. 69. 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
  70. 70. 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
  71. 71. Picker should be opened in a new viewand 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
  72. 72. Usually a determinate progress bar ispreferred over a spinner.72 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  73. 73. Use Slider for a continuous range ofnumerical values.73 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  74. 74. LWUIT long-press menu and LCDUIlong-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
  75. 75. Tabs can use text or icons and they canbe customized.75 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  76. 76. Switch should only be used with trulyopposite items.76 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  77. 77. 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
  78. 78. Patterns
  79. 79. Indicate empty states and enablepeople to add content there.79 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  80. 80. 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
  81. 81. In full screen view show the chromebefore you hide it.81 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  82. 82. “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
  83. 83. If people canpopulate a list,enable cleansweep.83 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  84. 84. Refresh content bydrag-down from top.Add more content bydrag-up from bottom.84 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  85. 85. 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
  86. 86. Drill down means also a clear singleback-stepping path.86 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  87. 87. Tabs are not inherited to the next lowerhierarchy level.87 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  88. 88. Since filtering by categories is basedon 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
  89. 89. Progressive Search is ideal for largeinternal content.89 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  90. 90. Take home messages
  91. 91. 91 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberThe visualization changed,but the APIs remain compatible.
  92. 92. Back-stepping is done via a dedicatedhardware Back/Exit key.92 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  93. 93. Treat LWUIT and LCDUI as separateofferings – do not mix them.93 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan Krebber
  94. 94. Literature and links94 © Nokia 2013 LCDUI and LWUIT UI components in Nokia Asha.pptx v.1 2013-05-28 Jan KrebberUX Library for Nokia Asha:http://www.developer.nokia.com/Resources/Library/Asha_UI/#!index.htmlNokia Asha Web app UX guidelines:http://www.developer.nokia.com/Resources/Library/Nokia_Asha_web_apps_library/#!design-library.htmlNokia Asha UI component demos:https://projects.developer.nokia.com/asha_ui_component_demos
  95. 95. Thanks.ext-jan.krebber@nokia.com#krebbixux

×