forms - Interface for linking multiple email addresses and addresses to an account

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:

^{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:


• 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:


• 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?

Answer

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:

…and here's how LinkedIn does it:

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):

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.