Readability: Slack vs HipChat

By now I’ve used my fair share of both Slack and HipChat (team-focused messaging services), and I couldn’t figure out why I did’t like Slack’s user interface. I think I’ve finally figured it out. I was recently looking into the best layout for positioning labels in forms - vertical, above the input, or horizontal, inline and to the left of the input. I found this UX Exchange answer and subsequently this article.

You can see how each layout has their own advantages. Then I looked at how Slack and HipChat lay out the conversation thread in their clients.

Slack goes for the author’s name above the message, whereas HipChat puts the name in a separate column to the left of the message. Ahah! I find it harder to follow conversations in Slack because they are visually broken up by the author above every message, making it much harder to scan vertically down the list. In contrast, HipChat’s conversation thread is easy for the eye to follow from one message to the next.

Slack also has a ‘compact’ layout that ditches the avatars and puts the author’s name inline with the message, but that’s no better since the message text still starts at arbitrary places along the line.

I’ve found two Stylish themes that use the column layout, (Slack IRC and Readable Slack) so it appears others agree with me too. Just a shame it can’t be used with the desktop app.

I’m hoping Slack will eventually add the ‘column’ layout to their settings, but until then HipChat wins in the UX department for me.