Today, we are launching a new design for Rapportive! We put a huge amount of effort into this design, because we deeply believe in great user experience, and we know that our users really appreciate it too.
Here it is (make sure to watch it fullscreen):
We'd like to open the kimono and share our journey with you.
The Problem: Long Sidebars
Our previous design, in use since launch, has served us well. It was subtle, effective, and blended in with Gmail. But it was also beginning to show limitations:
- If you were using a netbook or a portable laptop, the Rapportive sidebar would often be too tall to fit on screen. We hooked into the Gmail scrollbar, but you would have to scroll to the end of the conversation to see the end of the Rapportive sidebar: on a very long conversation, you had to scroll a very long way. This was really annoying.
- In the past months we’ve added much to the sidebar: phone numbers, Facebook status updates, LinkedIn invitations, and Raplets for a variety of different purposes. This has pushed the previous design to its limits: some profiles would become unmanageably tall.
- Different people love different parts of the sidebar: some find recent tweets most useful; others swear by our CRM raplets; others leave lots of notes about their contacts. It would suck if the part you most love scrolls offscreen because the other parts take all the space.
These three points have a common theme: we do not handle long sidebars well.
How long can a sidebar get? Well, here's my sidebar, with the CrunchBase and the MailChimp Raplets:
As we add more to Rapportive, this problem would only get worse. We decided to completely rethink our design.
Our Design Principles
We wrote down five principles to guide us during the redesign:
- Rapportive should enable you to serendipitously learn about your contacts: information should be visible at a glance, and should not require much clicking or scrolling.
- Rapportive should remain subtle and unobtrusive: it should be there when you want it, and out of the way when you don't. It should not grab your attention, nor use more space than necessary.
- Rapportive should look great on screens both large and small; it should also look great when we have lots of data, and when we don't have much data.
- Rapportive should avoid configuration dialogs: the interface should do the right thing.
- Rapportive should be clear, beautiful, and enjoyable to interact with :)
These principles enabled us to reason effectively about our options.
To warm up, we put the big problem to one side, and instead started with graphical tweaking. Here are some sexy buttons:
Next up: how do we handle long sidebars?
How Do We Handle Long Sidebars?
The Sidebar Scrollbar
Our first thought: we could simply give the Rapportive sidebar its own scrollbar. In order to see the end of a long sidebar, you would not have to scroll the conversation; you would just scroll the sidebar. But this approach is pretty bad: large parts of long sidebars would still be hidden offscreen, making it no easier for you to serendipitously learn about your contacts.
The Tabbed Sidebar
We quickly ruled out a tabbed interface. Tabs work well in browsers, where each tab is independent. But contacts aren't like that. To see why, imagine that we made each sidebar section into a tab. We would then have multiple tabs per person. However, these tabs are not independent: they are about the same person! You can't see the contents of a tab without clicking it, and you can't see the contents of two tabs at the same time. As a result, tabs require laborious clicking and actually make it harder for you to serendipitously learn about your contacts. A tabbed interface would often feel clunky and frustrating.
An accordion interface seemed like a more promising direction. Here is an example from Outlook:
When you click a section it expands to show additional information; when a section expands, another one collapses to make room. In the screenshot above, I could click "Contacts" to see my contacts, and the "Mail" section would collapse to make room.
As described so far, accordions have the same properties as tabs: you can't see a section until you click it, and you can't see the contents of two sections at the same time. But what if multiple sections could be expanded at the same time? And what if the accordion would intelligently use available space?
The “Adaptive” Accordion
We started experimenting with an “adaptive” accordion. Here are three early design concepts:
These designs were not pretty, but as we tested them on various screen sizes, an algorithm began to emerge. We decided that we needed an accordion with the following improvements:
- It should be possible for several sections to be expanded at the same time.
- The sidebar should fit on the screen without scrolling. When you expand a section, the sidebar may need to collapse other sections to make room.
- The sidebar should intelligently choose which sections to collapse. For example, if you haven’t clicked a section recently, you probably find it less useful than a section you just clicked. The sidebar should prefer to collapse least recently used sections.
- Collapsed sections should be useful. For example, the collapsed Twitter section could show the contact's username and a button to follow, whereas the expanded version could also show their recent tweets.
- The sidebar shouldn't show empty sections. For example, if the contact doesn’t have a Twitter account, the sidebar shouldn’t show the Twitter section.
- The sidebar should clip very long sections and give them a scrollbar. Very long sections are rare but do happen; for example, consider a Facebook status with many comments.
- If you resize your window, the sidebar should expand or collapse sections to accommodate.
It turns out that this finely tuned accordion plays exactly the song that we want it to. However, there are still hard questions. How exactly should expandable sections behave? The devil, of course, is in the details.
In our original design, when you click a Twitter username, we show recent tweets in a new browser tab. In an accordion design, when you click a collapsed Twitter section, you expect it to expand and show recent tweets inside Rapportive. Should we ask users to learn a new behaviour, or should we add a button to expand a section?
This was our first attempt. The arrows convey that you can expand a section, and also act as the button to expand it. But there's a problem: not all sections have arrows, since not all sections are expandable. As a result, the “connect” and “add friend” buttons would not always align. The arrows also look cluttered and complicated.
Surely we could do better! For example, we could only show the arrows when you hover over a section. We could even use the arrows to convey where the section will expand to:
Now we’re really moving away from established user interface patterns. Would you notice the arrows? Would you understand what they mean? Would you try to click them? The arrows convey lots of information: they tell you that the section can be expanded, and once expanded, how tall it will be and where it will be placed. These arrows also present a much bigger click target than the previous arrows, which is good. But they still don't look like a button. (They go grey when you hover over them, but it's not obvious.)
Fortunately, inspiration struck again. If we’re using arrows to preview the expanded section, well… why don’t we use the expanded section to preview itself? We can just show the expanded section on hover!
We call the preview of an expanded section a "genie", in honour of the famous Mac OS window effect. The design seems obvious in retrospect, but it took a surprisingly long time to find and understand it.
Although the version above isn’t yet pretty, it addresses the challenges we discussed earlier:
- Rapportive remains minimalistic and uncluttered. We only show you more when you hover your mouse over the sidebar.
- If you’re on a large screen, or looking at short sidebar, sections expand to fill the space. You can see everything at a glance, and there is no need to click anything.
- If you’re on a small screen, or looking at a long sidebar, lesser-used sections collapse. In most cases, everything fits on screen without need for scrolling.
Furthermore, if there are adjacent collapsed sections in the sidebar, you can skim them with your mouse. As your mouse moves from one section to the next, the genie for the previous section disappears and the genie for the next appears. This is great for getting a quick overview before you reply to an email.
The design so far is good, but isn't yet perfect: how do you actually expand a section?
In the screenshot above, we used a button with an arrow pointing right. If you clicked it, the genie would slide into the sidebar, and the other sections would move out of the way to make room. The animation was good, but the button itself was ugly. After some thought, we realised that we could remove the button and convey the same thing with a right-pointing mouse cursor (cursor:e-resize, for fellow CSS buffs — yes, this isn't the standard way to use this cursor, but we like it!). Now you can click anywhere on the genie and it will happily slide into the sidebar.
We hope you’ll agree that it is gorgeous. We have added almost no new user interface, but the end result is very effective. It fits neatly on both big and small screens, with both short and long sidebars. It is clear, easy to use, and even fun to play with. Give it a try for yourself, and please let us know what you think!
Usability without design is dreary.
Design without usability is pretentious.
Design and usability… together, they are delightful :D
Not yet using Rapportive? Get it free at rapportive.com.