Nokia Asha Touch UI Style Guide Part 2
Upcoming SlideShare
Loading in...5
×
 

Nokia Asha Touch UI Style Guide Part 2

on

  • 2,154 views

Series 40 full touch: UI style guide part 2 covers UI chrome, menus, UI patterns, customization, and porting within Series 40. It will show how to utilize the essentials and how to assemble the ...

Series 40 full touch: UI style guide part 2 covers UI chrome, menus, UI patterns, customization, and porting within Series 40. It will show how to utilize the essentials and how to assemble the components (which were discussed in part 1) into an application.
The webinar closes with some exercises as “homework” to let participants try out the new knowledge by themselves. The proposals to these homework problems will be published afterwards

Statistics

Views

Total Views
2,154
Views on SlideShare
2,153
Embed Views
1

Actions

Likes
0
Downloads
168
Comments
2

1 Embed 1

http://www.docseek.net 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Recording of session two is now available: http://forumnokia.adobeconnect.com/p32mrr5m1f2/
    Are you sure you want to
    Your message goes here
    Processing…
  • Recording of session one is now available: http://forumnokia.adobeconnect.com/p3weos66i45/
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Nokia Asha Touch UI Style Guide Part 2 Nokia Asha Touch UI Style Guide Part 2 Presentation Transcript

  • Series 40 Full TouchUI Style GuidePart 21 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • OverviewPart 1 (28.06.2012, 04.07.2012)• Essentials• UI Components• ExercisesPart 2 (10.07.2012, 13.07.2012)• Chrome and Menus• UI Patterns• Customisation• Porting• UX offering for Series 40• Take Home Messages• Exercises2 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Chrome and Menus3 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Ensure there is a Back button in allviews.4 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Do not place actions in a Category bar.5 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Instead of scrolling horizontally, usethe Category bar extension.6 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Category bar disappears with drilldown.7 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • It is possible to add a Ticker to a view.8 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • The former MSK is now the primaryfunction in Action button 1.9 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • If there is no MSK metaphore, place allscreen commands to Options.10 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • If there are no options at all, the menuicon is dimmed automatically.11 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Options menu contains only globalview functions.12 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Context menu is only a collection ofshortcuts of single item actions.13 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • There are different ’Options’ and’Selection’ lists. LCDUI Nokia UI Options list Popup list (all) (Form, Canvas) Options Long press Options Selection list (screen (item list layout layout commands) commands) + tail position Nested Nested list list14 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Options lists in LCDUI do not allownested lists. LCDUI Options list (all) Options Long press (screen (item commands) commands)15 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Popup lists with options list layout aredefined by positioning the tail. Nokia UI Popup list (Form, Canvas) Options Selection list list layout layout + tail position Nested Nested list list16 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Popup lists with selection list layoutare defined by specifying a title. Nokia UI Popup list (Form, Canvas) Options Selection list list layout layout + tail position Nested Nested list list17 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Use nested lists for more items toavoid scrolling or for settings. Nokia UI Popup list (Form, Canvas) Options Selection list list layout layout + tail position Nested Nested list list18 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • UI Patterns19 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • End key ends calls and dataconnections or exits applications.20 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Notify or confirm at least in case ofpossible loss.21 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Instead of dimming, use dynamic viewcontent.22 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • If you need Action Button #1 in a List,you can use a Form instead.23 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • If you need and alternative to aDateField, use a TextField instead.24 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Use a form as wait notification, sincealerts cannot listen to app events. custom25 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Participate to theAsha Touch Competition 2012Q326 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Customization27 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Use the entire screen.28 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Place your chrome elements wherethe platform chrome would be.29 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Fonts are between 14 pt light and20 pt regular.30 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Minimum touch area is43 x 43 pixels and 6 pixels margin.Pixel size: 0,163 mm x 0,163 mm for 3’’, 240 x 400 pixels31 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Show the status bar to allow access tothe notification bar.32 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Define the expected keyboard layout.33 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Porting34 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • We will look briefly into 2 portingcases:1. Series 40 non-touch to Series 40 touch and type (NT )2. Series 40 touch and type to Series 40 full touch (T&T)35 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • NT T&T removes focus and changes MSK.36 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • NT T&T splits Options to screen and item. Context Options37 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • NT Context menu items must be repeated. Names Contact (drill down) Context Options38 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • T&T FT requires icons for Action button #1.39 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • T&T FT needs Cancel button instead of.40 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • UI porting between T&T and FT iseasier than between NT and T&T. T&T  FT NT  T&T41 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • UX offering for Series 4042 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • There is a UI style guide.43 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • The UX checklist collects the mostimportant UI style issues.44 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • The Nokia Icon Toolkit supportsInkscape.45 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Stencils help to create high fidelitywireframes or help to check sizes.46 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Series 40 UI component demos appshowcases UI and code.47 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Take home messages48 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • To maintain look and feel, chrome andcomponents are a good start.49 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • UI porting between T&T and FT iseasier than between NT and T&T.50 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • UX offering is not just a style guide.51 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • 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/Asha Touch Competition 2012Q3:http://www.developer.nokia.com/Community/Wiki/Asha_Touch_Competition_2012Q3Wiki article to this webinar:http://www.developer.nokia.com/Community/Wiki/index.php?title=Webinar_Series_40_UI_Design52 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Exercises53 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Exercise: How could these screenslook in full touch?54 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Exercise: If Action Button 1 should beused for confirmation, how would youbuild a multi selction view?55 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Exercise: Sketch a download dialogwhich shows the remaining amount ofdata.56 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Exercise: Sketch a view- 2 categories- 3 primary actions - call - add - edit- 3 secondary actions - Share FB, TW, Reddit- Options menu- use chrome- maximize the content area57 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Exercise: How many touch elements fitthe content area?58 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Exercise: How many touch elements fitthe entire canvas?59 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber
  • Thanks ext-jan.krebber@nokia.com60 © Nokia 2012 Series_40_Full_Touch _UI_Style_Guide_part2.pptx v.01 2012-07-13 Jan Krebber