Recommandé
Recommandé
Contenu connexe
Plus de Microsoft Mobile Developer
Plus de Microsoft Mobile Developer (20)
Dernier
Dernier (20)
UX checklist for Series 40 full touch apps
- 1. UX CHECKLIST FOR SERIES 40 FULL TOUCH APPS Jan Krebber Senior User Experience Consultant OCTO3 1 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 2. Overview - Check for style - Check for robust design - Check for fast and friendly design - UX offering - Take home messages - Exercises 2 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 3. CHECK FOR STYLE 3 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 4. Place UI controls where expected – even in custom layouts. 4 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 5. UI controls must behave as expected – also in custom layouts. 5 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 6. Indicate all touch down events and trigger on touch release. 6 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 7. Do not use double tap to open a menu. Use a long-press. 7 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 8. Reserve the header for the most important action. Full screen canvas with Canvas with header bar custom header 8 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 9. Keep the status bar visible to provide important information. 9 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 10. Do not hide the chrome permanently. 10 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 11. Back also means 'Cancel'. 11 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 12. No actions in category bar. 12 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 13. Place secondary view commands in Options list. 13 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 14. Long press options list is never the only way to access a command. 14 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 15. Summary: Use UI chrome according to the UI style guide. 15 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 16. CHECK FOR ROBUST DESIGN 16 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 17. Make text easy to read. 17 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 18. Use high contrast for UI components. 18 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 19. Obey the minimum touch area. 19 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 20. Use correct png sizes for your icons. Canvas, drawing area Total icon area 20 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 21. Images are good – if they are small at first. 21 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 22. CHECK FOR FRIENDLY AND FAST DESIGN 22 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 23. Indicate progress. 23 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 24. Indicate if your application is causing costs. 24 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 25. Be positive in error situations. 25 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 26. Avoid confirmation notes where possible. 26 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 27. Tell the price before the purchase begins. What’s available? What’s the cost? Buy. 27 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 28. Design efficient start screens. 28 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 29. Minimise the need to type and use popup choicegroups or pickers. 29 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 30. Prevent errors by disabling actions. 30 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 31. Allow user-set precision for location-enabled apps. 31 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 32. UX OFFERING FOR SERIES 40 32 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 33. There is a UI style guide – and more. 33 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 34. There is a UI style guide – and more. 34 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 35. There is a LWUIT UX Overview. 35 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 36. There is a LWUIT UX Overview. 36 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 37. The Nokia’s Series 40 stencils support Inkscape. 37 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 38. The Nokia’s Series 40 stencils support Inkscape. 38 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 39. Series 40 UI component demo projects showcase UI and code. LCDUI Web apps 39 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 40. Series 40 UI component demo projects showcase UI and code. 40 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 41. We offer reviews for the UI clinics. 41 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 42. Series 40 UI design • Wiki companion article for this webinar: http://www.developer.nokia.com/Community/Wiki/Series_40_UX_checklist_webin ar_-_companion_article • UX Library for Series 40 full touch: http://www.developer.nokia.com/Resources/Library/Full_Touch/ • LWUIT UX Overview: http://www.developer.nokia.com/Resources/Library/LWUIT/#!ux-overview.html • UI Component Demos project: https://projects.developer.nokia.com/s40uivisualisation • Web Apps UI visualisation project: https://projects.developer.nokia.com/webappsuivisualisation 42 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 43. Further readings and links • Mobile Design Pattern Gallery. Theresa Neil (2012). • Designing Mobile Interfaces. Steven Hoober and Eric Berkman (2011). • useit.com (Jacob Nielsen’s blog) • http://snook.ca/technical/colour_contrast/colour.html (contrast checker) 43 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 44. TAKE HOME MESSAGES 44 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 45. Use UI chrome according to the UI style guide. 45 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 46. Ensure a robust design. 46 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 47. Make your app friendly and fast. 47 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 48. EXERCISES 48 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 49. Exercise: A custom view acts as a launchpad screen. Which chrome elements do you add? 49 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 50. Exercise: How do you open the item menu and what do you place in there? 50 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 51. Exercise: How many touchable items can you fit into a full screen layout? 51 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 52. Exercise: Which icon sizes are used in Series 40 full touch? 52 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 53. Exercise: Is the contrast good enough for AAA compliant text? - Foreground: 33FFAA - Background: AAFF33 53 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 54. THANKS TO: SANNA HIUKKA ANNE KIVIMAA ANTTI KAREINEN ILARI LÄHTEENMÄKI AAPO HERRALA 54 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
- 55. THANKS ext-jan.krebber@nokia.com #krebbixux 55 © Nokia 2013 UX checklist for Series 40 full-touch apps.pptx v.2 2012-02-26 Jan Krebber
Notes de l'éditeur
- The items described in this presentation are the most important UX issues to consider when designing an application for Series 40 full touch. Many of the 'checks' are solved automatically when using ready-made components, but they remain an issue for custom views.For more information, please see:Style guide https://www.developer.nokia.com/Resources/Library/Full_Touch/#!index.htmlStyle guide webinar http://www.developer.nokia.com/Community/Wiki/Webinar_Series_40_UI_Design
- At the end we will have the QA session, but feel free to ask right away. Richard / Kevin will moderate the question; and if necessary I will answer it directly
- This example is based on a canvas. The status bar and the category bar are the only platform components.Status bar; at the top of the screen.Options; at the left of the header area “please note that this is now a custom header area; the Header bar provided by the platform does not support changing the background color.”Title; in the header area.Action button 1; at the right of the header area.Category bar; at the bottom of the screen.
- This example is based on a canvas. The status bar and category bar are the only platform components.Buttons are pressed; when the user touches a button on the screen, it “sinks” slightly, just as a physical button would. Sliders move; when the user slides the slider, it actually moves on the screen, so the user can drag it with a finger rather than just seeing it appear when they lift their finger.Flicking/dragging; when the user flicks or drags content, it follows the user's finger, moving in the same direction.The category bar extension icon opens the category extension. The category bar does not scroll left/right.The category bar only contains access to new views (categories), and no actions.
- Figure:Visual feedback of a popup ChoiceGroup item while being pressedReact to people’s actions.Touch down feedback is easily forgotten for custom UI elements.Indicate the touch down event.If the application behaves in a different way, people may perceive the application as broken. Also show the touch release this triggers the action.
- Figure:No double tap; use long press only for opening the long press menuPeople will not anticipate any other functionality related to this gesture.Even if the application introduced double-tap gesture, it would feel artificial.Series 40 full touch UI components are notusing double tap at all. but maybe in games double tap could be used.
- Put the most important function into the header bar (action button 1).The header bar is always present, and does not scroll away with the content.The Back button is located in the bottom-right corner of the screen.Examples of important functions:BuySellCallShow addressShow on mapDownload
- The status bar shows important indicators, such as signal and battery strength, as well as the current time.It contains the notification bar access.It takes only a small area of the screen space.It is always placed at the very top of the screen.Recommended in all views, except game play screens.
- Figure: Basic chrome; status bar, header bar, and back buttonStatus bar contains important information, such as battery strength, and the user needs it to access the notification bar and other information.Notification bar is not available in landscape orientation.Header contains options list icon, informative title and optionally the primary function icon.Action button 1 (right) is the primary action in the view. Action button 2 (left) is options list, providing access to secondary actions.When using the header bar (which is always recommended ):Action button 2 is always populated with the Options menu icon.In case the options menu is empty and there is no secondary action, the options list icon is shown dimmed. Place the primary action as an options item in case there is no proper icon metaphor available.Test your application in both portrait and landscape orientation, if you don't lock the orientation.More information:Base Layout https://www.developer.nokia.com/Resources/Library/Full_Touch/#!essentials/base-layout.htmlHeader bar https://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-components/header-bar.htmlBackstepping https://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-patterns/backstepping.html
- Figure: Form with 'Check mark' and 'Back'Back button implies that people want to stop their task.Abort the action.Set everything back to previous values.If the user makes changes to any values and then presses 'Back', it is recommended to show a confirmation query.Ensures the user does not loose important data or settings.Does not come automatically, must be implemented into the app.In forms, place a check mark in action button 1. This is done automatically by defining icon command: icon OK.Check mark works as the opposite function to 'back' , i.e. 'Ok' or 'Done'.No query necessary for 'accepting' a form by pressing the check mark.More information from https://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-patterns/backstepping.html
- Figures: Category bar and Category bar extensionCategories are used to provide visibility and navigation between different sub-apps, functionalities, or modes within an app. The functionality of category bar can be compared to tabs. It is not used for representing commands.The currently active category is highlighted.If there are more categories than what fits into the category bar, the categories are accessible via the category bar extension.Back is part of the Category bar, positioned at the rightmost location.More information from https://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-components/category-bar.html
- Figure: Options list for view specific commandsOptions list contains commands that apply to the entire view.The most frequently used commands should get higher priority.
- Figure:Long press options listContains item specific functions only.First time users might not realise the existence of long press gesture.Repeat the long press options list items in the next view as primary function, or as secondary functions in the view's Options list.
- Place options, action button 1 and back where they belong to.Use the correct gestures.Use the category bar as intended.Split the Options correctly to:Options menu (view related).Item menu (item related).
- Font size; use a font size that is large enough for the average user to read comfortably without straining.Typography; use fonts that are easily readable. A font that is too decorative might make using your application too laborious. The default font of the device should be your first consideration.Margins; make sure that you have proper margins, so that the text does not begin right from the edge of the screen.Touch areas; make sure that your touchable items meet or exceed the requirements of the minimum touch area (7x7 mm with 1 mm gaps).Paragraphs and titles; when you have a longer section of text on a page, consider using paragraphs or titles to help the user skim the text.Use concise language; if you plan to localise your application, consider the length of your text carefully.
- Colourcontrast; the UI elements and the background need sufficient contrast to be distinguishable from each other. This applies to buttons as well as text.Grouping elements; group similar actions with similar shapes and colours to help the user realise they have something in common.Consider colour blind users.Consider direct sunlight shining onto the screen.Black and white remains the strongest contrast.http://snook.ca/technical/colour_contrast/colour.html
- Figure: Minimum touch areas and marginsMinimum touch areas:UI element: 7mm x 7mm, i.e. 43x43 pixels.Gap between elements: 1 mm, i.e. 6 pixels.People tend to press a bit lower than the actual center of the item.People on the move operate the device with one hand and with a thumb.
- See “Icon creation” topic in the Series 40 Full Touch Design Guidelines for more information on icons: https://www.developer.nokia.com/Resources/Library/Full_Touch/#!icon-creation.html
- Colour contrast; the UI elements and the background need sufficient contrast to be distinguishable from each other. This applies to buttons as well as text.Grouping elements; group similar actions with similar shapes and colours to help the user realise they have something in common.Consider colour blind users.Consider direct sunlight shining onto the screen.Black and white remains the strongest contrast.http://snook.ca/technical/colour_contrast/colour.html
- Loading and progress indicators; use an indicator if the triggered action takes more than one second to complete.The indicator, in addition to providing visual feedback to the button press that triggers the function, tells the user that something is happening in the background.Progress indicator does not always have to be a standard gauge, but could also be something like the one in the ”my Kahvi” app.
- Figure: A query helping to control the costsInform if actions require cost sensitive connection.Give a chance to cancel the task. Alerts should not be used as "selection lists".Do not hide the status bar, show the connectivity status.You may want to offer different connectivity options:Using automatic connection.Manual updates, where the user would totally control when update is needed.
- Use human language to express the error and its possible solutions; The user will be more willing to solve the problem and to continue working with your application.Language that is too technical might scare users away.It is not the user’s fault – ever.
- Figure: An example of an alert – which might be unnecessaryIf the change can be clearly understood from something else visible, notes are not needed. Combine several queries which follow up each other into a single query.Explain all the different issues in one alert.Ask for permission from the user to execute the entire task only once.More information: Alert and pop-up list https://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-components/alerts-and-pop-up-lists.htmlConfirming changes https://www.developer.nokia.com/Resources/Library/Full_Touch/#!ui-patterns/confirming-changes.html
- Figure: Basic purchase flowClearly show what is available.Clearly state the price of each available item.
- For an efficient start to using your application, provide large and clear text buttons for the top functions.Use large text buttons instead of small and non-standard icons; this saves screen space because the Category bar is not needed.Make the centrepieces of your application available through the start screen. For example, in a game, people should be able to start a new game or continue with a previous game as quickly as possible, without having to open a menu.Special offers should never put "bumpers" in the user's way. Users are likely to change the application/vendor as soon as there is an alternative available with less bumpers on the first page.
- Try to avoid text input fields; typing with mobile devices can be difficult.Use popup choicegroups or pickers with predefined values where possible, because they speed up the interaction, thanks to the reduced amount of typing.Show the possible values, making it easier for the user to choose.Reduce errors and avoid error correction routines.Make your application more pleasant to use.
- Do not show the submit button of a form until the user has completed any mandatory fields.This helps to reduce the number of error cases; there is no need for the user to go back to complete a missed field if you prevent them from submitting the information half way through.It makes interaction faster; there is no going back and forth because of missing information.Mandatory fields; be clear when marking mandatory fields. Consider instructions on how to complete the mandatory fields.
- Applications that enable location awareness between users should enable users to set the precision of their own location:Meeting other users at a certain point requires high precision, such as 10 m.Indicating to other users that you are in town requires low precision, such as 10 km.The app should also ensure that the user is able to maintain complete privacy.
- Nokia icon toolkitStencil set for full touchLink at the end
- Nokia icon toolkitStencil set for full touchLink at the end
- The app will be discussed in a webinar with screenshots (or with anonymous sketches)So Nokia must get the permission to show the app in publicNot all apps will get a free review; only the ones that we use in the clinics
- Mobile design pattern gallery, I regret that I took the black and with version. I would nowadays take the color version even it is a bit more expensiveWhen ordering I did not know there was a color version, so tough luckDesigning mobile interfaces is a bit more general and more for designers which are e.g. web designers and who now would like to learn something about mobile designWould not be my first mobile design book I would read but definitely a book I recommend to read “early” when starting as a mobile designerAnother would be about forms in generalForms that Work: Designing Web Forms for Usability. Caroline Jarrett and Gerry Gaffney (2008)
- Place options, action button 1 and back where they belong to.Use the correct gestures.Use the category bar as intended.Split the Options correctly to:Options menu (view related).Item menu (item related).
- Use high contrasts.Use a contrast checker.Use correct minimum sizes.Use margins.Use the right icon – the squircle.Do not use too large images.
- Tell people if they have to wait.Tell people if they have to pay.However, avoid notes where possible (show inline information and try to avoid blocking the view).Make navigation easy.Allow the user to set location precision.