Successfully reported this slideshow.

BrowserID review of mobile experience


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

BrowserID review of mobile experience

  1. 1. Heuristics review of mobile experience ofBrowserIDJason Grlicky and Crystal Beasley02.10.2012
  2. 2. little things matter
  3. 3. copy matters use terms free of jargon
  4. 4. every little click matters
  5. 5. Case Study from Jared Spool [checkout] login or register payment info success
  6. 6. Case Study from Jared Spool [checkout] login or register payment info success
  7. 7. How many usersdid the log-in form cost? Some rights reserved by striatic
  8. 8. 75%bailed
  9. 9. [checkout]login or register payment info success
  10. 10. [checkout]payment info success
  11. 11. [checkout]payment info success
  12. 12. Increase sales by $300,000
  13. 13. Increase sales by $300,000,000
  14. 14. Login friction is costly.
  15. 15. Our solution has to be easier than it is.
  16. 16. be easier than it is.
  17. 17. be easier than legacy login.
  18. 18. be easier than other single sign-ons.
  19. 19. Create a new accountiOS experience
  20. 20. Requesting Party
  21. 21. clicked [sign in]• Light branding of BrowserID is working well.• RP and “Sign in using” are so close to the same size, it’s hard to see which is more important. Remove "sign in using."• Show logo of RP to assure user they haven’t mis-clicked and they aren’t being phished.
  22. 22. clicked [next]• superfluous page• Page should not be scrolled down.• Footer is missing.
  23. 23. clicked [verify email]• Left-align for greater legibility.• Make 1st and 2nd lines more prominent.• Shorten and simplify the copy.
  24. 24. switch to• Get RP name to use in subject line and in body.• The linkified URLs are preventing the user from immediately finding the correct link to click.
  25. 25. click URL• Email address is too low contrast.• Remove underline from button.• Footer is strangely aligned.
  26. 26. clicked [finish]• Close keyboard so the page content can be seen.
  27. 27. closed keyboard • Remove top nav to prevent users from failing to complete the registration with the RP.• Redirect user to RP.• The ideal flow would make this page superfluous.
  28. 28. closed window• User was logged in already.• Seems to only work half of the time?
  29. 29. iOSadd second email to existing BID profile
  30. 30. clicked [sign in]• Horizontal space problems.• Text wrap is badly handled.• [This is not me] and [Use a different email] do not adequately convey their meaning and usage.
  31. 31. clicked[Use a diff email] • Users won’t know they have a profile and the language inconsistency doesn’t help them build a correct mental model of our system.
  32. 32. clicked [add]• [use another email address] is inheriting the wrong css. Look different across browsers.• Support the back button for the case of user typing the wrong email address.
  33. 33. navigated to mail
  34. 34. clicked [url]• Header padding• Remove navigation• Incomplete copy• Redirect to RP.
  35. 35. iOS tablet
  36. 36. poor use of space make css more flexible
  37. 37. Overall findings
  38. 38. General• Android and iOS rendered the pages similarly. Screenshots here are from iOS devices because it’s maddeningly difficult to do them on Android.• Enable back button.• Add spinner on submit actions to communicate system state.• Avoid technical jargon like “Communicating with server.”
  39. 39. Legibility• Body fonts +1px in size• More contrast between font and background• Make links in text look more actionable• Buttons • More contrast between primary button colors and hover states • Increase kerning of button text • Increase size of button text
  40. 40. New API needs• Name of the RP• Logo of the RP (approx 100x150px)• Event hook to log the user into the RP automatically
  41. 41. Flow• The current interaction breaks the pattern of asking for email and password, then verifying the email.• Shorten the flow.
  42. 42. [sign in] enter email [next] [verify email] confirmation open email [URL]type password [finish]close window success
  43. 43. [sign in] enter email [next] [verify email] confirmation open email [URL]type password [finish]close window success
  44. 44. [sign in] enter email [next] confirmation open email [URL]type password success
  45. 45. [sign in] enter email [next] confirmation open email [URL]type password success
  46. 46. [sign in] enter email [next]type password confirmation open email [URL] success
  47. 47. [sign in] enter email [sign in] [next] enter email [verify email] [next] confirmation type password open email vs. confirmation [URL] open emailtype password [URL] [finish] successclose window success
  48. 48. every little click matters