Highrise Edit Contacts

Exploring the Highrise Edit Contacts screen

By Jason Zimdars, designer at 37signals

This screen is used to make changes to the contact information for people and companies in your Highrise contact list. In the previous article (our exploration of the Basecamp Account Screen) we explored a variety of broad concepts then narrowed and refined to a solution. Here the process was a little bit different. The initial concept came together pretty quickly but we explored lots of small, subtle improvements in order to apply that concept in the best way.

The original screen

The previous version of the edit contacts screen had several areas that we thought could be better. The primary problem was simply that this view was pretty busy. There were lots of fields — many of them empty. New contacts can be added automatically to your Highrise account using dropboxes so it is common for contacts to only have a name and email address associated with them. The edit contacts screen is then used to add additional contact methods and information. So the first time you see this screen it is usually empty. All those empty text fields make it look like there is a lot of work to do. Plus, the visual noise was also pretty high with lots of inputs, pull-down selections, and the red delete buttons. Another issue was with the fields, themselves. With every text field stretched to the full width of the space, they didn't feel like they were sized right for the content.

  • Original edit contacts

Blank Slates

The overall direction for this exploration was discovered pretty early in the process. The idea was to reduce the clutter and the feeling of an empty form by hiding as much as possible. We had the idea to use a sort of mini blank slate for each contact method. A blank slate is content that you show to the user when they haven't entered anything yet. It is great for explaining (and showing) what the feature can be used for or what typically goes there. So for each contact method, we created a blank slate that showed instead of the inputs until the user clicked to make a change, then the full input UI was revealed. One thing that we really wanted to improve on this screen was the occurrence of empty inputs and other UI clutter. The blank slates helped clean up the look of this form and more importantly, made it feel more less empty.

When a user is completing a form, empty fields feel like failure. Like they didn't know the answer. But this isn't a test, it's a contact card. Perhaps this contact doesn't use instant messaging or doesn't have a mobile number. The lack of those pieces doesn't have to make the completion of the form feel like a failure. So this contact, doesn't have a Twitter account? No problem, we won't show you an empty field for it. But you can always add it later if you need to.

Another issue with exposing all the fields at once: The field outlines and shapes make it a bit harder to see, at a glance, which fields are filled in and which aren't. Our new design solves that problem. If there's no field exposed then there's no content.

The blank slates also gave us the opportunity to add a little more copy about what the field is for when needed. For example, "Add an instant message account" helps users who may not be familiar with the abbreviated label, "IM".

In the end, we decided simple was best, but here are some directions we looked at for the blank slate.

  • Blank slate 1
  • Blank slate 2
  • Blank slate 3

Using video to communicate interaction

Because this exploration was mostly about entering data, it was important to see how it moved, and how it felt. As we iterate through design ideas we post lots of screenshots to Basecamp and Campfire to get feedback and spark conversations about the current direction. Screenshots are great for establishing look and feel or settling on a layout. They aren't so great for demonstrating ideas about interaction, flow, and motion.

Take, for example, this idea we were working on with the first and last name fields when editing a contact. It made sense to have each part of the name in a generous text field so that long names will fit. What we didn't like is that it made the contact's name hard to read. When the name was shorter than the text field, the last name seemed too far away, too disconnected.

  • Original name fields

In many of the early comps, this was solved by displaying the name as simply text. The editable fields only would reveal themselves when the name was clicked, presumably to make a change. While this approach looked great, it failed the test of discoverability — there were no clues that this name could be edited or how you might initiate the mode. With no visual cues many users might never notice that they could change the name at all. This solution also failed to show formatting problems with the data, for instance, when the full name was mistakenly crammed into just the first or last name field.

  • Name as text

Eventually, we explored the idea of dynamically sizing the fields. The now visible fields would shrink down to fit the name, making it read much more naturally. However, when you click the field to make a change, the field would expand to a larger size that would make it more comfortable to work inside. The text field then snaps back to size after the change. Empty fields had a clear blank slate that showed the missing data. This was a difficult concept to explain with words, so we used video. A quick video capture of the interaction posted to Basecamp made it easy for all of us to see and evaluate this direction.

Flow

Another thing we shared with video screen captures was the general flow. One thing we didn't want to lose with any changes to the edit contacts functionality was speed. Despite any visual enhancements, it still needed to be fast to add or change a contact's information. This meant preserving the ability to use the keyboard (especially the tab key) to move between fields. The blank slates meant that we'd need some Javascript judo to pull that off, but here is an early test mocked-up with HTML, CSS, and Javascript.

Add a contact

As we began wrapping up with project, we looked at other places in Highrise where this design should be moved either for the sake of consistency or improvement. Naturally, we carried many of the layout and design ideas over to the "Add a new person" screen. And in fact, the new blank slate look allowed us to remove the crufty "Add contact information link". This was created for a lot of the same reasons that drove us to improve the edit contact form. The link hid the contact method fields to simplify the process of adding a contact, letting the user focus on the bare minimum of fields to get a contact into the system. Moving to the blank slate here gave us consistency with the edit form and made it more clear that contact methods could be added right here, without making the form much more complex. Here's what the final screens look like:

  • Add contact
  • Edit contact

See it live

These improvements have recently been added to Highrise so you can login to your account and try them today. We think they will make adding and modifying contacts more clear, faster, and more fun. We'll be looking for more opportunities to share our design process in the coming weeks. Stay tuned.