UI mock-up - Account Setup Rev.2

Mark Rousell mark.rousell at signal100.com
Thu May 2 19:03:58 UTC 2019

On 02/05/2019 07:40, alex wrote:
> Hello folks,
> Here's an updated version of the account setup workflow.
> https://presentator.ura.design/en/XP9IsbuQ?v=0&s=1&m=preview

I like these.

I definitely approve of the "Close and Set Up later" link option. :-)

I'd definitely suggest that a "Configure manually" option (or perhaps
"Switch to Manual Configuration" option) be available throughout the
setup process to allow a user to switch to manual setup at any stage
(including from the very beginning of mail configuration). That said, I
don't think it needs to be a button; it could simply be non-button
link-style text (similar to the "Close and Set Up later" link in the
sample images).

> *First Screen*
> We could potentially release the version with a smaller and less
> prominent "Get a New Email Address" first, to later than replace it
> with a more prominent button once we have those potential providers
> partnerships.


> A tabbed system will be used to show the user the proper info and
> fields of what they selected, and a "Other" option which will open
> less common actions. This might seems like a bit of a stretch, but I'd
> like to pursue the idea of having a unified "Account Creation Dialog",
> no matter if the user needs to create an email, add a calendar, an RSS
> feed, etc. The location and experience should be consistent to prevent
> unnecessary learning curves or visual inconsistencies between sections.

I think this is a good idea.

> Using the new notification system and color scheme will make the
> messages feel more prominent and readable. We should also make those
> messages selectable, so the user can copy the errors for a web search.

Very good idea.

> *Manual Configuration*
> This is tricky since there are many fields and it's really easy to
> overwhelm the user.
> Splitting the "Incoming" and "Outgoing" fields in 2 tabs will help us
> to visually streamline what the user needs to input, and also will
> prevent the dialog to grow too much.
> With this UI, we can keep the maximum height of the modal around
> 600px, which can fit on a 768px height laptop screen, and will help us
> prevent annoying scrollbars.

I think you are right to be concerned about not overwhelming the user
but putting incoming and outgoing settings on separate tabs seems like
it could confuse some non-advanced users: They'll forget to go to the
hidden tab. For this reason, if the incoming and outgoing settings are
to be on separate tabs then I suggest that the user be prompted or
forced to go to both tabs before being able to click Continue or Connect.

Also, of course, connecting immediately is not necessarily what users
want. As others have pointed out, many users may need to carry out other
configuration before making their first server connection. This means
that "Connect" might not be the right ending for this wizard. Instead, a
"Finish" or "Continue" button might make more sense, taking users to a
final dialog that allows them to "Connect Now" or "Continue without
connecting immediately" (or similar wording).

In saying all this I am acutely aware of not adding too much complexity
but, by the same token, good UX design (and this does look good!) tends
to reveal necessary complexity to the user only as and when it is needed.

I'd also suggest that the text in the yellow error warning panel be less
scary than the current "Thunderbird failed to find the settings for your
email account". Instead, something like "Thunderbird was unable to
automatically find the settings for your email account. Please configure
the settings manually below". Yes, it's longer and wordier but I think
is less scary (no mention of failure) and is more informative.

> A potential "Get Help" button could be positioned if the manual
> configuration is necessary, or if an error message is particularly
> technical. For example, if the user gets a firewall warning, or an SSL
> warning, we could set that button to open a specific page in our
> website where we list common errors and how to fix them.


Mark Rousell

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/tb-planning/attachments/20190502/c94b0868/attachment.html>

More information about the tb-planning mailing list