14

I have an interface for managing multiple email addresses associated to an account in my web application. This interface is to be used by an administrator.

The interface shows a list of email addresses and provides buttons to delete an email address, make an email address the primary address and mark email addresses as verified. The mark email addresses as verified feature essentially marks the email in the system as confirmed, so the user can start using it. Otherwise, the user would need to click a link sent to that email address to confirm it as theirs.

An email address must be confirmed before it can be made a primary address. So far, I have came up with this interface:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Problem: Because an email can only be made primary once it is verified, the "Make this primary" button would be disabled for row 3 and 5. (Make this primary and mark as verified are mutually exclusive).

Given this, should I just combine those 2 columns into 1?

mockup

download bmml source

I think this approach simplifies the interface a fair bit, which is a good thing. The down side is that it is not immediately apparent that you need to mark an email as verified before you can make it primary.

Should I stick with the first interface? Are there better ways to deal with this problem?

Improve this question
1

6 Answers 6

Reset to default
8

Your second mockup is spot-on. This system consists of 3 elements: record name (email), status switch/indicator, and an action (remove/edit). In addition the possible statuses (unverifified/verified/default) can be changed only progressively upward (i.e. no skipping or downgrading). Thus, there's absolutely no need to have a separate column for validation status or making an email primary.

Here's how GMail handles a similar setup:

enter image description here

In this situation, it made sense to separate verification status from the verification only because there's another action (edit info), which provides the space. However, it would still work if the gray label unverified is removed.

Here's the same pattern in LinkedIn:

enter image description here

It's quite obvious that it's very hard not to understand the status of the email or what's the next step. However, extreme caution is needed when working with green, yellow, and red color codes since colorblind people will have tough time discerning them (that's where different string length helps).

Improve this answer
9

I agree with WebDevelopteer, having different categories of things in the same column is not very intuitive. But you can go a different way.

This is a (very) quick idea. How about having the verification icon first, and only once it's been clicked and verified it shows you the Primary selection as a different button?

The verification button would have two states: Disabled (grey) or Enabled (same as hover). The Primary buttons would have three: Invisible, Disabled and Enabled (same as hover).

enter image description here

You can play around with the layout so it looks more consistent (column colors, borders, buttons).

Improve this answer
6
  • I think this is close to what I am looking for. However, the ticks give the feeling that they can be unticked too. In the system, once an email address has been marked as verified, there is no point having them unmarked. Do you have any solution to this?
    – F21
    Commented Jun 22, 2012 at 6:31
  • @phpdev: not if it is obvious that the ticks are not clickable, in the mockup this is already somewhat apparent as there is no surrounding border to the tick which would otherwise make it look like a checkbox.
    – Marjan Venema
    Commented Jun 22, 2012 at 6:42
  • The icons are just examples, it's the layout I was trying to show (although very basically). A border with round corners could do. I'll try to de-do the image when I get home so it's clearer.
    – Yisela
    Commented Jun 22, 2012 at 8:30
  • It seems to me that unmarking a previously verified e-mail address might be useful, though it probably shouldn't be too easy to do.
    – Keith Thompson
    Commented Jun 22, 2012 at 20:01
  • This is very similar to the "Add & change email addresses" dialog in Linkedin and the "Send email as" settings section in Gmail.
    – Danny Varod
    Commented Jun 24, 2012 at 0:16
5

I am not a big fan of greying out content since it gives the impression to users that a content cannot be edited or changed. I would recommend going with an approach where you allow users the flexiblity to select any email they want provided its already verified (refer to the mockup below). The last radio in this example is greyed out because the email is not verified, but can be removed in case the user entered a wrong email.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Edit 1: Changed mockup so only radio looks disabled

Improve this answer
6
  • 1
    +1 for use for use of radio buttons and removal of the columns paradigm.
    – Fresheyeball
    Commented Jun 22, 2012 at 20:56
  • I like the general approach, but the problem here is that you can't suggest that users perform actions on a radio button that's greyed out. Providing enabled actions on a disabled item is very confusing and it undermines the meaning of the "disabled" marking.
    – Vitaly Mijiritsky
    Commented Jun 23, 2012 at 11:11
  • This to me seems clearly the best approach but @VitalyMijiritsky did make a good point. Edited the mockup so only the radio looks disabled. It's my first edit, I hope that was proper procedure.
    – fdmsaraiva
    Commented Jun 23, 2012 at 13:10
  • How would the display change if I were to select 2nd or 3rd email as primary? How is it would be to identify the current primary email in that situation?
    – dnbrv
    Commented Jun 23, 2012 at 17:30
  • @dnbrv The label "Primary Email" would be beside whichever radio is selected
    – fdmsaraiva
    Commented Jun 23, 2012 at 18:26
0

Always err on the side of clarity and and minimize the learnability. While your second design nice, its not as intuitive. Users will be frustrated with added confusion and added cognitive burden.

As it does make sense after you understand the reasoning and function of the grouping, initially it would be a hotchpotch to users. Having "primary email", "make this primary", and "Mark as verified" all mixed together in the same column is not intuitive. And like you pointed out, "it is not immediately apparent that you need to mark an email as verified before you can make it primary."

Use your first design, and don't disable those particular buttons. Having them disabled tells the user not to click them, but they do not realize why! Instead, When the user clicks them, Inform them with a message that only verified emails can be primary.

Improve this answer
2
  • 2
    Learnability is the capacity of a system to be learned. Minimizing learnability means that a system is too complicated or too unpredictable to learn it. Not a good thing :). Minimizing the need for learning is quite a different matter :).
    – Vitaly Mijiritsky
    Commented Jun 23, 2012 at 11:13
  • Why do you say that "Mark as verified", "Make primary", and "Primary" being in one column isn't intuitive? Do you have research to support it? Is there inconsistency in this IA?
    – dnbrv
    Commented Jun 23, 2012 at 17:24
0

It could work, if you label the column "Action", as this is the next available action for this email address. They are both state-driven actions, so you are representing the state and indicating the available actions from that state.

Some work changes might make this clearer - "verified - make primary" might make it clear the process flow. I am all for shrinking the interface, and I dislike mutually exclusive information personally. I ask "what can I do now" and "what state is this in" - which are related questions. This option answers both of them in a compact format.

Improve this answer
0

Accurate email verification cannot take place without the user clicking that link sent to their inbox. Remove the verify buttons and unverified email addresses. And ensure the 'add new email' functionality is present and obvious on this page.

Improve this answer
2
  • This interface is to be used by the administrator. For example, in the event that the user was not able to verify their address and they called support, the administrator can then easily mark their email as verified without jumping through many hoops.
    – F21
    Commented Jun 22, 2012 at 3:43
  • 2
    Unless there's something i'm missing, the user is unable to verify their email because your verification manager is broken, your verification instructions are inadequate or they are unable to gain access to their inbox. I wouldn't facilitate manual verification as a substitute for any of these cases.
    – Darragh
    Commented Jun 22, 2012 at 16:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.