22. 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.
24. clicked [verify email]
• Left-align for greater legibility.
• Make 1st and 2nd lines more
prominent.
• Shorten and simplify the copy.
25. switch to Mail.app
• 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.
26. click URL
• Email address is too low
contrast.
• Remove underline from button.
• Footer is strangely aligned.
28. 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.
29. closed window
• User was logged in already.
• Seems to only work half of the
time?
31. 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.
32. 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.
33. 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.
39. 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.”
40. 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
41. New API needs
• Name of the RP
• Logo of the RP (approx 100x150px)
• Event hook to log the user into the RP automatically
42. Flow
• The current interaction breaks the pattern of asking for email and password,
then verifying the email.
• Shorten the flow.
43. [sign in]
enter email
[next]
[verify email]
confirmation
open email
[URL]
type password
[finish]
close window
success
44. [sign in]
enter email
[next]
[verify email]
confirmation
open email
[URL]
type password
[finish]
close window
success
45. [sign in]
enter email
[next]
confirmation
open email
[URL]
type password
success
46. [sign in]
enter email
[next]
confirmation
open email
[URL]
type password
success
47. [sign in]
enter email
[next]
type password
confirmation
open email
[URL]
success
48. [sign in]
enter email
[sign in]
[next]
enter email
[verify email]
[next]
confirmation
type password
open email vs.
confirmation
[URL]
open email
type password
[URL]
[finish]
success
close window
success
