Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

In a web application I am building, I need to allow users to link multiple email addresses and addresses to their account.

The requirements are:

  • Users can add and remove email addresses and addresses linked to their account.
  • Users will need to set 1 email address and 1 address as their primary email/address.
  • Adding addresses to the application is ENTIRELY optional, but the user must have at least 1 email address linked to the account (user log in using any of the linked email addresses).
  • Adding and removing emails/addresses should be as quick as possible and having too many "pages" in the process is undesirable.
  • Progressive enhancement is to be used. While we can easily create very rich and friendly experiences with the use of Javascript, an acceptable solution also needs to be avaliable for those without javascript.

Initially, I thought this would be something quite straight-forward and to simply use an "add/remove" control:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The interface for editing addresses is exactly the same, except instead of 1 text field, we have multiple text fields and dropdowns representing a control for editing addresses.

Some apparent problems I have noticed:

Email addresses

  • Do people ever need to edit an email address? For example, in Facebook, the currently linked addresses are not displayed in text fields and are just displayed as links: enter image description here
  • In my mock up, it is easy to mistakenly click the "make this primary" and "remove buttons".
  • However, it is quite easy to mass edit and add new email addresses.

Addresses

  • As it currently stands, the user will see a page full of text fields representing current addresses, which may or may not be confusing.
  • The benefit is that users can easily modify all currently addresses and add and remove addresses all at once.
  • Amazon has a similiar interface, but their add/edit address form is on an entirely seperate page: enter image description here enter image description here
  • Unlinke Amazon, I do not need to allow users to set whether the address appears in the drop down or to link a payment method with the address.

Given these set of requirements and the pros/cons I have outlined, is there anyway to improve upon the interface to enhance the user experience? Or am I looking at the wrong approach and should be looking at a totally different way to do this?

share|improve this question

1 Answer 1

up vote 2 down vote accepted

I think the Facebook solution you presented is a better solution than your mockup for the following reasons:

  1. As you mentioned, users shouldn't ever need to edit their email address; they will have received a confirmation link to that address, and so the email cannot be reasonably edited after the fact
  2. The Facebook option makes it very easy to see which is the current primary email address, whereas your mockup doesn't make that very clear

For reference, here's how TripIt solves this same problem:

TripIt's email management interface

…and here's how LinkedIn does it:

LinkedIn's email management interface

I don't have many useful tips for physical addresses, sadly (Amazon was my first thought, as in your post).

I do have one reference implementation, this one from a service called comGateway that provides re-shipping products from the US overseas (e.g. for retailers that don't ship overseas):

comGateway's physical address management interface

They call this list your "address book" which I don't really agree with (to me, my address book is full of other people's addresses), and you'll notice they don't offer the ability to select a "primary" address; every shipment requires you to pick explicitly from the set of addresses you've provided.

share|improve this answer
    
Very helpful input :) Do you have any recommendations regarding addresses? –  F21 Jun 7 '12 at 2:17
    
@phpdev: I've updated my answer to include a reference implementation of physical addresses, but I have much less experience with those sorts of problems. –  Kit Grose Jun 7 '12 at 4:08
    
Why shouldn't e-mail addresses be edited just because a confirmation e-mail was sent? Just a matter of sending a new confirmation request and only really changing the e-mail when it has been confirmed and reverting to the old address if it isn't confirmed. The question then becomes whether it is more natural for a user to edit his/her e-mail address or to add the new one, make it primary and then delete the old one. I know which one I prefer (in case you hadn't guessed: the one that is more direct for me). –  Marjan Venema Jun 7 '12 at 6:18
    
@MarjanVenema: I don't believe these things should be decided on number of steps alone; I believe the mental model is more clearly defined (and the behaviour is more predictable/obvious) in the real-world examples at effectively zero cost. Since the task will inherently require a round-trip to the user's inbox, I think the key is making the effect of changes to the interface obvious. In the OP's original mockup, can I make changes to multiple email addresses? How do I persist a change to an email address? I believe the friction is higher when the interface is more flexible (in this case). –  Kit Grose Jun 7 '12 at 7:24
    
@KitGrose: I didn't mean to imply that it should be decided on the number of steps. I think it is far more natural for someone to edit an e-mail address than to go through an add/remove cycle. Making the background (confirmation) work as needed for the app's requirements is a developer's challenge. Also, having a single e-mail address is probably far more common than someone having multiple addresses. I'd design for the simple case and cater to the extended case through a different UI (form). –  Marjan Venema Jun 7 '12 at 7:33

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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