Improving the Mobile Application User Experience (UX)
- 1. Improving Mobile Applica2on User Experience Philip Lew © XBOSo@, Inc. 2014 All Rights Reserved 1
- 2. Meet Your Instructor • Phil Lew – Telecommunications network engineer – Team Lead, Data warehousing product development – Software product manager, BI product – COO, large IT services company – CEO, XBOSoft, software qa and testing services • Relevant specialties/Research – Software quality process improvement – Software usability evaluation – Software quality in use / UX design 2 © XBOSo@, Inc. 2014 All Rights Reserved
- 3. Agenda • What is usability and UX and why important? • Usability and UX Design and Testing Concepts – Web – Mobile • Some Exercises mixed in for testing and evaluating applications • Q&A © XBOSo@, Inc. 2014 All Rights Reserved 3
- 4. Workshop/Session Spirit • Interac2ve • I won’t read the slides… • Slides for you as a take-‐away • Ask ques2ons… OR I will !!! 4 © XBOSo@, Inc. 2014 All Rights Reserved
- 5. © XBOSo@, Inc. 2014 All Rights Reserved 5
- 6. Usability-UX and Its Importance © XBOSo@, Inc. 2014 All Rights Reserved 6
- 7. Mobile User Expectations • Business models have changed – Instead of paying upfront and ‘owning’ the software – Pay as you go, pay by subscription • Cloud and mobile convergence • Behavior and expectations have changed 61% of Verizon users now have smartphones © XBOSo@, Inc. 2014 All Rights Reserved 7
- 8. What Users Do With Their Mobile 8 http://marketingland.com/smartphone-activities-study-email-web-facebook-37954 © XBOSo@, Inc. 2014 All Rights Reserved
- 9. Mobile Tasks 9 Importance of User Context For Mobile Apps From: A Diary Study of Mobile Information Needs, Sohn, Li, Griswold, Hollan © XBOSo@, Inc. 2014 All Rights Reserved
- 10. Context of the User 10 From: A Diary Study of Mobile Information Needs, Sohn, Li, Griswold, Hollan © XBOSo@, Inc. 2014 All Rights Reserved
- 11. Mobile Usability Challenges • Limited attention – people often multi-tasking • User needs triggered by context – Application needs to provide what they want at the “right” time and in a form appropriate to the current context. • Require access to personal data, obtained either through web-based services or their personal devices. • Require sensitivity to the task at hand, context, and requirements for personal and public data 11 © XBOSo@, Inc. 2014 All Rights Reserved
- 12. Mobile Task Considerations • Small screen and slow interaction – slow download speed and/or small keypads • What functionalities of your full app need to be transferred to mobile? – More items >> less attention for each of them • Task workflow on mobile should require just 1- 2 clicks – Each click is an opportunity for a dropped connection or slow downloading user experience. 12 © XBOSo@, Inc. 2014 All Rights Reserved
- 13. Tasks Suited For Mobile • Tasks that have a deadline – Buying a gift at the last minute – Paying bills during vacations – checking bank balances before writing a check • Tasks that involve rapidly changing information – Traffic, flight information, movie schedules, directions • Tasks that require privacy – Small screens ideal for private activities – Check personal email or doing non-work related tasks – Social networking 13 © XBOSo@, Inc. 2014 All Rights Reserved
- 14. Tasks Not Suited For Mobile • Involve a large amount of complexity and/or very time consuming – Research – Large amounts of reading – Comparison of many options – Advanced transactions 14 What is your mobile app task and is it suited for mobile? © XBOSo@, Inc. 2014 All Rights Reserved
- 15. Basic Usability Concepts User Experience Usability Effect Usability Design 15 © XBOSo@, Inc. 2014 All Rights Reserved
- 16. Design-Test and Evaluate Design Test and Evaluate Release Test and Evaluate 16 • What will the mobileapp do? • Is it a conversion of exis2ng app? • What func2ons will a user really access? © XBOSo@, Inc. 2014 All Rights Reserved
- 17. Usability - Design Perspective • Understandability • Learn-ability • Operability • Attractiveness • Navigation • Responsiveness-performance 17 What else can you think of? © XBOSo@, Inc. 2014 All Rights Reserved If the user cannot figure it out in 30 seconds, they are gone.
- 18. Source: ISO 25010 Usability-Effect 18 Degree to which specified users can achieve specified goals with effectiveness, efficiency and satisfaction in a specified context of use. © XBOSo@, Inc. 2014 All Rights Reserved
- 19. Usability-Effect “Context” and “Specified” • User role • Objective • Task • Environment • Domain • … 19 specified users specified goals specified context of use What else can you think of? Who are your users? What are their goals? © XBOSo@, Inc. 2014 All Rights Reserved
- 20. Design and Test For the Task Prioritize tasks - Some tasks more important than others. – Majority of app’s value is provided by a small number of tasks. Examples • Highly specific – You want to sell 20 shares of stock for a security you know you own. • Directed, but less specific. – Find the stocks in my account/portfolio. • Open-ended, but restricted to a predetermined site or app. – See where the market is today 20 If you are not involved in the design…. ASK © XBOSo@, Inc. 2014 All Rights Reserved
- 21. Exercise 1. Work in groups of 2-‐3 2. Examine one of your applica2ons – Or a common applica2on 3. Determine the objec2ve of the applica2on 4. Develop a list of 5 tasks 5. Priori2ze the tasks © XBOSo@, Inc. 2014 All Rights Reserved 21
- 22. Source: ISO 25010 Usability-Effect User Experience • Satisfaction – The degree to which users are satisfied in a specified context of use. Satisfaction is further subdivided into sub- characteristics: • Likability (cognitive satisfaction) • Pleasure (emotional satisfaction) • Comfort (physical satisfaction) • Trust 22 Including many other factors experienced over time and other channels © XBOSo@, Inc. 2014 All Rights Reserved
- 23. Apps and Trust-‐-‐UX © XBOSo@, Inc. 2014 All Rights Reserved 23 What other methods can create trust or distrust?
- 24. Mobile Usability • What we have learned so far: • What is usability/UX • Design considerations • What’s next • Special considerations for mobile devices • Integration • Evaluation and testing criteria 24 © XBOSo@, Inc. 2014 All Rights Reserved
- 25. Mobile Usability Review • Just having app/website is not enough • What matters for users – Time to load the website – User interface – Accessibility of various functions available – What is a key function? • Usability design needs to change, otherwise usability effect and UX will suffer 25 How many of you have an m.companyname .com site? © XBOSo@, Inc. 2014 All Rights Reserved
- 26. Mobile Usability Different Platforms Need Different Design • Horizontal swiping now universal – Include a visible cue when people can swipe – Avoid swipe ambiguity: don't use the same swipe gesture to mean different things on different areas of the same screen or within same app. – Use the same meanings for mobile phones and tablets – Mobile-device (iPad) users typically expect to horizontally swipe while desktop websites avoid horizontal scrolling • Mobile sites should perform better than full sites when used on a mobile device. • Mobile apps should integrate with the desktop version 26
- 27. Web-‐Mobile Integra2on • Poor integra2on • BUT Straighcorward about it 27
- 28. Mobile Usability Design Evaluation and Testing Criteria User Experience Usability Effect Usability Design © XBOSo@, Inc. 2014 All Rights Reserved 28
- 29. Evaluation and Testing Criteria • Typing/Input • Entry Widgets (Drop downs, links, and lists) • Sort and Filter • Menus and Forms • Registration • Navigation • Search implementation • Errors • Visibility 29 © XBOSo@, Inc. 2014 All Rights Reserved
- 30. TYPING What kinds of evalua2on criteria would be important here? © XBOSo@, Inc. 2014 All Rights Reserved 30
- 31. Typing • Typing can be quite difficult for mobile users – Reduced keypad – Big fingers for big people – Lessened dexterity (older users – MORE AND MORE) • Save as much of the users’ typing work as possible • Reduce the cost of typing 31 © XBOSo@, Inc. 2014 All Rights Reserved
- 32. Typing-Use Personalization and History to Provide Defaults • Defaults can be based on what the user has typed or submitted in the past (e.g., zipcodes, names, addresses) – Don’t use 0 as the default for a telephone number or zip code. – Remember the last value last typed for their zip code and use for subsequent entries. • Allow Easy Deletion for Defaults 32 © XBOSo@, Inc. 2014 All Rights Reserved
- 33. Compute/Fill In Values • Compute and fill in for the user if possible and appropriate – i.e. detect location for location aware apps – Zip code à compute other information automatically – Adding postage costs to the total costs • Users often expect location information determined automatically. 33 © XBOSo@, Inc. 2014 All Rights Reserved
- 34. Typing-Input • Characteris2cs or criteria would we evaluate/test for UX – Typing mistake tolerant – Defaults provided – Dele2on of defaults – Computed values – What others to add? © XBOSo@, Inc. 2014 All Rights Reserved 34
- 35. WIDGET ENTRY Dropdowns, bueons, boxes, links, lists, etc… © XBOSo@, Inc. 2014 All Rights Reserved 35
- 36. Dropdown Boxes, Buttons, and Links • Build in tolerance for error – Leave space around widgets that need to be clicked (buttons, arrows for dropdown boxes, links, scrollbars) • Be consistent in using space around links and widgets 36 Un-frequent functions © XBOSo@, Inc. 2014 All Rights Reserved
- 37. Lists and Scrolling • All the items on a list should go on the same page: – if the items are text-only, and – if they are sorted in an order that matches the needs of the task. • Users are willing to scroll down a list if they know how far along they are and how much more work they have to do. – Sorted alphabetically 37 © XBOSo@, Inc. 2014 All Rights Reserved
- 38. Carousels • Use simple controls for going back and forward. – Manual carousel allows the user to control the carousel if decides to use it. 38 © XBOSo@, Inc. 2014 All Rights Reserved
- 39. Sorting and Filtering • Many ways to sort the same list, depending on the user and the task • For different sort criteria, provide the option to sort that list according to all criteria 39 © XBOSo@, Inc. 2014 All Rights Reserved
- 40. Exercise • Exercise: Find out if a flight from Munich to London is on time for today. Try 2 diff airlines. – Don’t have the number of the flight or the exact time – Look through the list of arrivals at London Heathrow Airport • Exercise: Do a search on Wine Spectator to see what search criteria you can use. Think of the searches your users will do? © XBOSo@, Inc. 2014 All Rights Reserved 40
- 41. FORMS AND REGISTRATION/LOGIN Lots of input! How do we handle this? © XBOSo@, Inc. 2014 All Rights Reserved 41
- 42. Forms-Textboxes • Textboxes in a form should be long enough so they fit on the screen and accommodate user input. 42 LONG Input © XBOSo@, Inc. 2014 All Rights Reserved
- 43. Form Field Descriptions • Small screen – easy to lose context and become disoriented so descriptions are important. • Description critical in a form, where many fields have to be filled in. • OR use the technique shown here. 43 © XBOSo@, Inc. 2014 All Rights Reserved
- 44. Login/User Registration • Passwords and usernames are hard • Do not ask people to register on a mobile device – Sign in is different than registration • Skipping registration should be the default option, but less features • Registration incurs an extra time/click cost on mobile devices 44 © XBOSo@, Inc. 2014 All Rights Reserved
- 45. User Registra2on – Cont. • Offer the option of proceeding without registration or sign in • What would you give users access to without and ID? © XBOSo@, Inc. 2014 All Rights Reserved 45
- 46. SEARCH Similar to sort and filter but liele different-‐let’s see © XBOSo@, Inc. 2014 All Rights Reserved 46
- 47. Implementing Search Functions • Search takes space and grabs user’s attention, distracting from other tasks • Think clearly about your users’ task at hand – Browsing tasks – Searching tasks – Execution oriented 47 © XBOSo@, Inc. 2014 All Rights Reserved
- 48. Search Boxes • Length of the search box >= average search string. Use largest possible size that will fit on the screen. – Preserve search strings between searches. – Use auto-completion and suggestions. – Give history-based defaults. • Do not use several search boxes with different functions on the same page. – one for stocks by company symbol – one for stocks by company name – one for search within their articles 48 © XBOSo@, Inc. 2014 All Rights Reserved
- 49. Search – No Results • If the search returns no results, offer alternatives – No search results often due to typo in query – Inform user of search failure – Offer results to alternative searches • Search by company name (“Autodesk”) in the search-by- symbol box à 0 search results. • Zero search results should have triggered a search by name 49 © XBOSo@, Inc. 2014 All Rights Reserved
- 50. Search Implementation Sub-‐a9ribute Where to apply EvaluaDon: 2 – all, 1 – parDal, 0 -‐ none Search box length appropriateness Auto-‐comple2on appropriateness Error handling No Results handling 50 © XBOSo@, Inc. 2014 All Rights Reserved
- 51. NAVIGATION Where do you want to go today? © XBOSo@, Inc. 2014 All Rights Reserved 51
- 52. Navigation • Users have different goals in mind and use apps in different context • Must easily find their way. • Navigation on desktop apps is standardized (by MSFT defacto) • Navigation should be the same on mobile. • Due to the small screens, adaptations required 52 But it’s NOT © XBOSo@, Inc. 2014 All Rights Reserved
- 53. Required Clicks • Minimize the clicks that the user needs to go through in order to input information on your site. • Compress steps together on a single screen if appropriate rather than separate screens. 53 © XBOSo@, Inc. 2014 All Rights Reserved
- 54. Exercise • Break into small teams of 2-‐3 people • Complete the task of returning a phone call – Start from home screen • What criteria would you use to rate naviga2on? • Tell me what results you got with 2-‐3 different phones/OS © XBOSo@, Inc. 2014 All Rights Reserved 54
- 55. ERRORS Keep It Simple Stupid © XBOSo@, Inc. 2014 All Rights Reserved 55
- 56. Errors - Prevention • Prevention is the first thing we want to do! – Context sensitive help – What other ways can we prevent errors? 56 Nice long search bar
- 57. Make Error Messages Simple • Error messages need to be seen and presented simply • Tell the user where the error happened (browser, website, application, etc.), what does not work, and what the user needs to do. • Explain where the error is coming from. 57 © XBOSo@, Inc. 2014 All Rights Reserved
- 58. Errors-Status Let the user know what’s going on! Error or not (Embark – Metro – Washington DC) 58 © XBOSo@, Inc. 2014 All Rights Reserved
- 59. Error Handling • Form input error loca2on no2fica2on • Error explana2on and status • Error preven2on • Other What other Error Handling characteris2cs would you use for YOUR app to evaluate/test it? © XBOSo@, Inc. 2014 All Rights Reserved 59
- 60. DISPLAY AND VISIBILITY Monkey See Monkey Do © XBOSo@, Inc. 2014 All Rights Reserved 60
- 61. Visibility Images, Animation, Videos, Text • Include images only if they add meaningful content – Not for decora2on: How does the image contribute to the content, task or message? – Benefit versus cost -‐ they take space on the page and download slowly for online app. – Do thumbnails really add value or just look cool? 61 © XBOSo@, Inc. 2014 All Rights Reserved
- 62. Image Sizes • Do not use image sizes that are bigger than the screen à entire image should be viewable with no scrolling. – Details are important but only after the user has interest level in the picture. 62 Bart © XBOSo@, Inc. 2014 All Rights Reserved
- 63. Horizontal Scroll 63 What does this tell you? DC Metro © XBOSo@, Inc. 2014 All Rights Reserved
- 64. Displaying Content People rarely read all the text • For information apps, new content should be given priority. • Summarize content: When users click on the summary/headline, they are taken to more detail that does not repeat information in the summary. • Concise, direct language • Format, use of bullets • Think about context! 64 © XBOSo@, Inc. 2014 All Rights Reserved
- 65. Special Mobile Application Domain Considerations (Context) • Location – Aware • Shopping and Ecommerce • Banking and Finance 65 © XBOSo@, Inc. 2014 All Rights Reserved
- 66. Maps and Location-Aware Applications • Location aware applications are becoming more prevalent on mobile applications. • Whenever you have location information in your app, link it to a map and include a way of getting directions. • Cutting and pasting is inconvenient or impossible. • Don’t just give users an address without a way to find it on a map 66 © XBOSo@, Inc. 2014 All Rights Reserved
- 67. Location Aware Apps 67 • Give users a choice! • Create TRUST Embark – Metro Washington DC © XBOSo@, Inc. 2014 All Rights Reserved
- 68. Ecommerce Apps • With products, use image thumbnails that are big enough so that the user can recognize what it is – Use an image size that fits the screen. • Provide option to email a product to a friend. • Provide option to save that product and return to it later. • Provide option to save the product in a wish list. • Allow users to save the items that they like, so that they could go back to them on a larger screen (integrate with desktop app) and inspect them more closely. 68 © XBOSo@, Inc. 2014 All Rights Reserved
- 69. Ecommerce Apps Always Provide Critical Information: • Locations and opening hours (if applicable) - checking location information, business hours, and order status are most frequent types of mobile based ecommerce activities • Shipping costs - Make sure easily accessible and noticeable. • Phone number-Make the phone number easily findable so users feel comfortable they can call if there is a problem with their order • Order status 69 © XBOSo@, Inc. 2014 All Rights Reserved
- 70. Banking Apps • Mobile banking and financial transactions growing • Provide clear understanding of mobile app security • Users hesitant to make transactions that involve any significant amount of transaction – Enable confirmation by emailing a message to themselves. – Confirmation are hard to write down when you are ‘mobile’. – Give users comfort they will have later access to that confirmation number. 70 © XBOSo@, Inc. 2014 All Rights Reserved
- 71. Let’s Step Through a Few Examples Usability and UX For Mobile (time permitting) 71 © XBOSo@, Inc. 2014 All Rights Reserved
- 72. LA • What is wrong here? 72 © XBOSo@, Inc. 2014 All Rights Reserved
- 73. LA MS • Consistent green • Obviously want you to click and add to the bag 73 © XBOSo@, Inc. 2014 All Rights Reserved
- 74. LA Mobile App • Big buttons • Good for big fingers • Semi-meaningful icons on the bottom – Note contextual location 74 © XBOSo@, Inc. 2014 All Rights Reserved
- 75. Buy or Share? • No placement of importance or priority 75 This is one place where general Usability principles apply! Maybe on purpose? © XBOSo@, Inc. 2014 All Rights Reserved
- 76. Select Size • Good navigation • Good size buttons • No priority 76 © XBOSo@, Inc. 2014 All Rights Reserved
- 77. In my Basket • What should I do now? • Buy or share? • Indication of where we are in the process 77 © XBOSo@, Inc. 2014 All Rights Reserved
- 78. Shopping Basket • Empty or Checkout? 78 © XBOSo@, Inc. 2014 All Rights Reserved What would you recommend they do here?
- 79. Bloomberg • Simple Info App • Simple colors • Meaningful Icons • Big enough to see AND click on with big fonts • Summary going to detail 79 © XBOSo@, Inc. 2014 All Rights Reserved
- 80. Fidelity • Easy to use scroll – Thumb Friendly • Simple colors • Very limited task based functionality 80 © XBOSo@, Inc. 2014 All Rights Reserved
- 81. Fidelity • Size and Importance • Easy to see what they want you to do • Consistent icons on bottom – Simple – Not everything 81 © XBOSo@, Inc. 2014 All Rights Reserved
- 82. Yelp • Easy on the eyes • Semi-meaningful icons 82 Based on what we just learned, what attributes would this app score well on? © XBOSo@, Inc. 2014 All Rights Reserved
- 83. Yelp • Consistent • Finger friendly • Consistent location of icons on bottom 83 Similar to Fidelity What does this mean? © XBOSo@, Inc. 2014 All Rights Reserved
- 84. Making Assumptions • Sense the platform and switch to a ‘mobile site’ to provide mobile users with more efficient web experience. • Don’t make too many assumptions regarding the users’ expectations. • For full United.com site, we need to scroll to the bottom to find the link. 84
- 85. Give a Choice to Avoid Making the Wrong Assumption • Managing user expectations of how the application should behave needs to be thought out carefully. • Context of the user and their expectations is key. • LinkedIn appears to be one step ahead and gives you a choice when accessing their site; an optimized mobile experience via an mobile-app, or just their ordinary website. 85
- 86. Web-Mobile Integration • Overall integration of web-apps needs to be thought out carefully with mobile scenarios in mind. • Friend wanted to show me a product at www.costco.com. • He sent me a link from his iPhone. I was at my desktop, and opened the link and got the mobile version. 86
- 87. What Is Designed, We Test Understanding Design Leads to Better Understanding, Evaluation, and Testing OR SOMETIMES WE MUST DETERMINE THE TEST CRITERIA © XBOSo@, Inc. 2014 All Rights Reserved 87
- 88. Determine the Needs at Hand • What need is the mobile application attempting to mobilize? • How can the workflow be designed more efficiently to accomplish the task? • How can the specific features and characteristics of a mobile device improve and complement the experience in contrast to the normal web-based application or other mobile platforms? 88
- 89. Determine the Needs at Hand • Implement top scenarios users want and optimizing efficiency for those scenarios ONLY. – Filling an order was a scenario optimized just for mobile. – Only 4 data items to fill in, 2 being scroll buttons, biggest button indicates precisely the task purpose. 89
- 90. Mobile Usability Design Summary Points • Quick - Can you read the text without zooming or scrolling? • Simple Navigation-Task Oriented • Thumb Friendly • Visibility-Colors • Easy to Convert/Complete the task • Contextual • Integrate-Seamless with webapp • You must limit the number of features to those that matter the most for the mobile users 90 Design for the small screen. Don’t make users struggle to click tiny areas that are much smaller than their fingers. © XBOSo@, Inc. 2014 All Rights Reserved
- 91. Conclusion-Usability and UX • Paramount for today’s applications with users’ short attention spans. • UX is heavily influenced by expectations. • Designs should be as simple as possible for the user. – Make navigation easy on a small screen, thumb friendly, and as intuitive as possible. – Avoid swipe ambiguity • If the user cannot figure it out in 30 seconds, they are gone. 91 © XBOSo@, Inc. 2014 All Rights Reserved
- 92. Conclusion (last one!!) Don’t Mobilize Everything • Mobile-app versus your web-app - differentiate and discern access from each platform. • Determine the features you really need and optimize screens for certain workflows rather than trying to do it all. • Think about the tasks!! • Better to have an half of an application that kicks _____ rather than a half ____ application. © XBOSo@, Inc. 2014 All Rights Reserved 92
- 93. Ques2ons and Answers Please fill out an evaluation form and drop it in the collection basket located at the back of the room. www.xbosoft.com @xbosoft 408-350-0508 Philip Lew @philiplew [email protected] 93 Some resources: http://www.xbosoft.com/knowledge_center/ www.facebook.com/xbosoft © XBOSo@, Inc. 2014 All Rights Reserved