• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Deep dive into Nokia Asha UI design: Designing apps
 

Deep dive into Nokia Asha UI design: Designing apps

on

  • 2,079 views

This webinar takes a deep dive into the Nokia Asha UI with UX expert Jan Krebber of OCT03 as the second part of an intensive Nokia Asha boot camp. This webinar will be particularly useful for ...

This webinar takes a deep dive into the Nokia Asha UI with UX expert Jan Krebber of OCT03 as the second part of an intensive Nokia Asha boot camp. This webinar will be particularly useful for professionals at small software companies that don’t have dedicated UI staff. At the same time, it may give seasoned UI designers new insights, too, since it will tackle design problems from a developer’s point of view.

While not essential, it’s suggested that you review the Deep dive into Nokia Asha UI design: Fundamentals webinar before reviewing this session: 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 webinar schedule here: http://www.developer.nokia.com/webinars

Statistics

Views

Total Views
2,079
Views on SlideShare
2,079
Embed Views
0

Actions

Likes
3
Downloads
149
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

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…
Post Comment
Edit your comment

    Deep dive into Nokia Asha UI design: Designing apps Deep dive into Nokia Asha UI design: Designing apps Presentation Transcript

    • Improve your Nokia Asha UIapplication designJan KrebberSenior User Experience ConsultantOCTO3
    • Overview2 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber•  People debugging your design with usability tests•  About usability tests•  Test preparation•  People debugging your design with usability tests•  Test session•  Test outcome•  Take home messages•  Live debugging•  Take home messages•  Live debugging
    • The imageThe imageExercise: Debug your design. But why?3 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageStart with usability and it will save youtime – easily a 100 times.4 © Nokia 2012 UX Basics.pptx v. 0.1 2012-10-05 firstname lastnameEffort to change ausabillity problemProject time
    • The imageThe image5 © Nokia 2012 UX Basics.pptx v. 0.1 2012-10-05 firstname lastnameWith good UX, your architecture ismore stable and your code is cleaner .
    • You debugging your design with theUX checklist
    • You debugging your design
    • The imageThe imageBack stepping is done via the hardwarekey - and only via the hardware key.8 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imagePlace basic view elements whereexpected.9 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageNo focus - use direct touch paradigmonly.10 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageIndicate touch down event and triggeron touch release.11 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageView related actions go to Options.Item related actions go to item menu.12 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageDo not use double tap to open a menu.Use a long-press gesture.13 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageDo not combine tabs and actions incategory bar.14 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageExercise:What is wrong with the view?15 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageExercise:What is wrong with the view?16 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • You debugging your design
    • The imageThe imageMake touch areas large enough andobey the minimum touch area.18 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageUse correct icon sizes and optimiseyour icon for Nokia Asha.19 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageBe aware of theSwipe; use flickcarefully.20 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageDo not use radio button and check boxicons in selection lists.21 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageMake text large enough for reading – even without magnifyingglass.22 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe image23 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan KrebberMake text large enough for reading –even without magnifying glass.
    • The imageThe imageUse high contrast for UI components.24 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageUse high contrast for UI components.25 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageUse high contrast for UI components.26 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebberhttp://snook.ca/technical/colour_contrast/colour.html
    • The imageThe imageMake text easy to understand.27 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageUse consistent labels, expressions andcommands.28 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageClean the Options menu if yourapplication does not require text input.29 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageExercise:Are these colors WCAG 2 compliant?#00FF00 and #FF00FF?30 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebberhttp://snook.ca/technical/colour_contrast/colour.html
    • The imageThe imageExercise:Are these colors WCAG 2 compliant?#00FF00 and #FF00FF?31 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebberhttp://snook.ca/technical/colour_contrast/colour.html
    • You debugging your design
    • The imageThe imageMinimize typing and use popupChoiceGroups and pickers if possible.33 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageUse a short application name to avoidits truncation by the phone.34 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageIndicate progress.35 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageIndicate if the application is causingcosts.36 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageBe positive in error situations.37 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageAvoid confirmation dialogs wherepossible.38 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageAllow user-set precision for locationenabled apps.39 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageExercise:Would you change any component?40 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageExercise:Would you change any component?41 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • You debugging your design
    • The imageThe imageCan’t see the woods for the trees.43 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageDraw a UX map to see the woods.44 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageStep back, look at the UX map andsimplify the structure.45 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan KrebberProposed structureCurrent structure
    • The imageThe imageCheck if you can merge views.46 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan KrebberProposed structureCurrent structure
    • The imageThe imageExercise: Take out your credit card.47 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageExercise: Take out your credit card.And pen and paper.48 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageExercise: And create a paper prototypeof your app’s splash screen.49 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • People debugging your design withusability tests
    • Before we start
    • The imageThe imageEven your mom will give you moreinsights than nobody.52 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageBe ready to dump the most preciousthing you have – your code.53 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageLearn to step back and observe.54 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageEverything else is simple – it is!55 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • People debugging your design
    • The imageThe imageUsability is an analysis how to reach agoal.57 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageOld-school usability studies are usuallynot suitable for small software houses.58 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageYou want to improve – not prove.59 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe image2-3 participants are enough if you testmultiple times.60 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageAs a test facilitator you must have aneutral attitude and be eager to learn.61 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • People debugging your design
    • The imageThe imageWrite down all the tasks and createstories from them.63 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageInvite from the target audience if youcan – but do not get stuck with it.64 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageDo not use previous participants in thesame project again.65 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageRun a pilot study.66 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • People debugging your design
    • The imageThe imageTest for 1 hour.68 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber10 min: Welcome, introduction, sign agreement and warm-up30 min: Tasks10 min: Open issues, wrapping up and good-bye10 min: Take additional notes and prepare the next session
    • The imageThe imageThe participant talks – not you.69 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageAsk for open issues after the tasks aredone.70 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageReward your participants.71 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • People debugging your design
    • The imageThe imageThe biggest issue is the most urgent.73 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe image74 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageTest your tweak – a very simple hallwaytest might do the trick here.75 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageExercise: Watch the video. What wentwrong? How do you fix it?76 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe image77 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe image78 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • Take home messages
    • The imageThe imageInspect your app with the UX checklist.80 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe image81 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan KrebberTest early. Test often.Fail fast. Fail cheap.
    • The imageThe image2-3 participants are enough if you testmultiple times.82 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 Jan Krebber
    • The imageThe imageLiterature and links83 © Nokia 2013 UX checklist for Nokia Asha UI.pptx v.1 2013-05-29 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
    • Thanks.ext-jan.krebber@nokia.com#krebbixux