BrowserID review of mobile experience

Heuristics review of mobile experience ofBrowserIDJason Grlicky and Crystal Beasley02.10.2012

little things matter

copy matters use terms free of jargon

every little click matters

Case Study from Jared Spool [checkout] login or register payment info success

How many usersdid the log-in form cost? Some rights reserved by striatic

75%bailed

[checkout]login or register payment info success

[checkout]payment info success

Increase sales by $300,000

Increase sales by $300,000,000

Login friction is costly.

Our solution has to be easier than it is.

be easier than it is.

be easier than legacy login.

be easier than other single sign-ons.

Create a new accountiOS experience

Requesting Party

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.

clicked [next]• superﬂuous page• Page should not be scrolled down.• Footer is missing.

clicked [verify email]• Left-align for greater legibility.• Make 1st and 2nd lines more prominent.• Shorten and simplify the copy.

switch to Mail.app• Get RP name to use in subject line and in body.• The linkiﬁed URLs are preventing the user from immediately ﬁnding the correct link to click.

click URL• Email address is too low contrast.• Remove underline from button.• Footer is strangely aligned.

clicked [ﬁnish]• Close keyboard so the page content can be seen.

closed keyboard • Remove top nav to prevent users from failing to complete the registration with the RP.• Redirect user to RP.• The ideal ﬂow would make this page superﬂuous.

closed window• User was logged in already.• Seems to only work half of the time?

iOSadd second email to existing BID proﬁle

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.

clicked[Use a diff email] • Users won’t know they have a proﬁle and the language inconsistency doesn’t help them build a correct mental model of our system.

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.

navigated to mail

clicked [url]• Header padding• Remove navigation• Incomplete copy• Redirect to RP.

iOS tablet

poor use of space make css more ﬂexible

Overall ﬁndings

General• Android and iOS rendered the pages similarly. Screenshots here are from iOS devices because it’s maddeningly difﬁcult to do them on Android.• Enable back button.• Add spinner on submit actions to communicate system state.• Avoid technical jargon like “Communicating with server.”

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

New API needs• Name of the RP• Logo of the RP (approx 100x150px)• Event hook to log the user into the RP automatically

Flow• The current interaction breaks the pattern of asking for email and password, then verifying the email.• Shorten the ﬂow.

[sign in] enter email [next] [verify email] conﬁrmation open email [URL]type password [ﬁnish]close window success

[sign in] enter email [next] conﬁrmation open email [URL]type password success

[sign in] enter email [next]type password conﬁrmation open email [URL] success

[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

every little click matters

BrowserID review of mobile experience

by Crystal Beasley

Accessibility

Categories

Upload Details

Usage Rights

Statistics