General notes

1. This is very much a work in progress - portions of this are still quite incomplete
2. This is also my first design document. I’m working off of examples I’ve been shown, but expect rough edges.
3. This contact editing interface borrows heavily from the design of the Cobook app, the address book in OSX Lion and Google Contacts
4. We don’t do much in the way of field validation - we allow the user to enter information however they like it.

First run

Entering Contacts tab by clicking on “Contacts” toolbar button. A user might be using a fresh profile with no contacts, or they might have a pre-existing set of Thunderbird address books that have been silently migrated over.

First run

Entering Contacts tab by choosing to edit a contact from a message header.

Adding the first contact

When opening the Contacts tab for the first time, if no contacts exist, we default to creating a new one.

1. The “First” name field is automatically focused and fully selected when creating a new contact.
2. Until the contact is given some type of name and saved, the contact is referred to as “No name” in the contact list. The contact list can contain any number of “No names”.

Adding the first contact - basic identity fields

• Text inputs reveal themselves when a field is focused or clicked.
• The text inputs automatically expand and contract to fit their contents.
• Note that the quotes around the nickname add themselves automatically, along with the commas between Position, Department, and Company.
• Also note that none of these fields are required.

Adding the first contact - extra identity fields

1. Clicking on the ellipsis next to the top field reveals a popup menu that allows the user to enable / disable certain name fields.
2. The Prefix, Middle and Suffix fields behave the same way as the First and Last name fields.
3. If the Display name field is enabled, it takes visual precedence. It behaves the same way as the First and Last name fields.
4. If the “Contact is a company” checkbox is checked, the company name takes visual precedence.

Adding the first contact - after adding identity fields

1. Once we have a name we can latch on to, that name is displayed here in the contact list.

Adding the first contact - using the “quick add bar”

• The quick add bar makes suggestions based on what’s been typed into it, to speed up the process of adding new contact data.

Adding the first contact - adding an email address using the “quick add bar”

1. After pressing “Enter”, the email address from the “quick add bar” is added. A visual effect will draw the user’s attention to where the field was added.
2. Focus returns to the “quick add bar”, in case the user wants to add another field.

Adding the first contact - updating the email address

1. On hover, a field is given visual distinction from the rest of the list
2. Clicking on the email address reveals and selects a text input to update the email address.
3. Clicking on the “type” reveals a popup that allows the user to select a list of predefined types for the field
4. If the user chooses “Custom” as the type, the field becomes a text input that the user can use to enter an arbitrary type.

Adding the first contact - adding an email address manually

1. The user can also add an email address by clicking on “Add Email”.
2. The text input for the email address is revealed and selected. Also note that the delete icon is visible, so that the user can remove this address, and that the “Home” type has automatically been selected (since “Work” is already used).
3. When the user clicks on “Add Email”, another “Add Email” field is added just below it.

Note that if the user leaves the email address field blank and focuses elsewhere, the field is removed.

Adding the first contact - adding IM handles and phone numbers manually

Adding the first contact - adding IM handles and phone numbers manually

1. Pre-existing tags can be suggested for quick re-use. The user can type whatever they want as a tag and it will be created, but duplicates are not allowed. A contact can also not be tagged twice with the same tag (attempting to do so should trigger a visual effect to highlight the pre-existing tag).
2. Tags appear and behave differently from the other fields; they can be added and removed, but they can’t be edited. This catches the case where the user accidentally renames an entire tag (which affects any contacts under that tag), instead of just renaming the tag applied to a single contact.

Adding the first contact - adding an address manually

1. The arrangement and labels for each field default to the user’s locale (though this should be overridable). The “City”, “Provice” and “Postal Code” fields automatically expand and contract to fit their content like the identity fields.
2. The list makes itself available when the Country field is focused. The user can also enter the country name in manually (which will drill the list results down with suggestions).
3. Once a country is selected, the fields will be re-arranged and re-labeld to the appropriate format for the country. Some new fields might become available too, or default fields might become invisible (for example, the Province field would be invisible for Afghanistan). This is non-destructive, so if the user accidentally makes a filled field disappear, switching back to the previous (or blank) country will re-reveal it.

Adding the first contact - adding a website manually

Adding the first contact - adding an anniversary or birthday manually

1. The date defaults to the current day, and can be modified using a simple date spinner. If there is a more modern datepicker widget that’s preferable, we should use that instead. Perhaps a calendar widget. It’s not clear to me yet how important the value for “year” is yet.
2. Note that according to RFC 6350, a vCard can have 0 or 1 values for Anniversary, and 0 or 1 values for Birthday. This means that once an Anniversary is set, only a Birthday can be added and vice versa. If both an Anniversary and Birthday are set, no other dates can be added here.

Adding the first contact - adding a relationship manually

1. The list of contacts is populated with all of the user’s contacts. As the user enters characters into the text input, the list drills down into suggestions. The user can also choose to enter the name of a non-existant contact. If the user selects from the list of existing contacts, we can perhaps do smart inference of the relationship for the added contact as well. We’d need to research whether such magic is desirable.

Adding the first contact - adding a note manually

1. The “Done” button hides the textarea. This is also accomplished by focusing away from the text area.
2. I couldn’t find a better icon for the grippy, but this can be used to resize the textarea.
3. This needs more research to determine if such a thing is useful or desirable.

Adding the first contact - adding a custom field manually

Adding the first contact - adding a profile manually

Adding the first contact - getting profiles automatically after filling out identity fields

Adding the first contact - profile search returns when unfocused