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.
Initially, I thought this would be something quite straight-forward and to simply use an "add/remove" control:
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:
- 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.
- 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?