UX Case Study: Hipchat’s “People” list

User ExperienceOpenly Retro

In this post I take a look at improving the usability of the popular chat client, HipChat, to make it easier to find people. Currently it is difficult to locate people in the side bar if you have a lot going on.

Current Usability: Good

I can currently drag and drop names up and down in the list to set my own preferred order, but in day-to-day communications, I am chatting with a number of people; team members start chats with me out of the blue. Before long, my list of people is quite long. I have to visually scan a very long list of names, all of them different, to find someone I want to chat with, so my workaround is to click the “New Chat” button and start typing the name of someone I need to communicate with.

Persons with whom you have chatted are listed in the People sidebar.
Persons with whom you have chatted are listed in the People sidebar.

Problem: It’s time consuming and inefficient to use the People sidebar to find people when there are many of them. Manual sorting doesn’t scale.

Solution: Develop a way of sorting that can scale.

Current method of locating people:

  • Sort the People pane yourself and try to stay organized

or

  • Use the “New Chat” button to continue a chat with an existing team member (But why have a People sidebar if I’m just going to use a button to search for them?)

Better workflow:

  • Use different automatic sorting options to find people and present them in a way that I know how to easily traverse

Proposed sorting methods:

  • Alphabetically: Natural sorting order that people are used to, but the word “Alphabetically” would be rather long to have in a UI, so maybe we can abbreviate it “A – Z” and do the same for reverse alphabetical sort: “Z – A”
  • Recent: I want to find people with whom I have chatted recently, to catch up on a topic
  • Frequent: I want to find people with whom I chat frequently

Perhaps organizing these options in a drop-down menu would be a good start:

Mockup with dropdown menu

I propose putting a dropdown at the top of the People menu for sorting.
A good place for sorting might be at the top of the feature.

This is a good start. But maybe the word “Sort” is redundant; A – Z might be enough indication that there’s a way to sort People. If I take out “Sort”, I can make the dropdown slightly larger and the text won’t be as compressed. Perhaps making it less bold will help it fit in better to the surroundings:

Imply sorting with well known "A - Z" and down arrow (dropdown indicator)
Imply sorting with well known “A – Z” and down arrow (dropdown indicator)

Conclusion

Automated sorting scales well and this functionality will help improve the Hipchat user experience.

Next steps:

Move people-sorting actions to a menu in the application window menu to declutter the UI?