Nearly two months after we first saw the in-progress Hangouts 4.0 update, we were starting to worry it would never make its official appearance on the Play Store. But recently our collective wish was granted and Hangouts got a big update. Google says this is Hangouts' update to material design, but what exactly does that mean for the app? There's more here than just a new FAB, so let's take a closer look at some of the notable design changes in Hangouts 4.0.
The journey to material
Despite what the change log may suggest, Hangouts didn't suddenly arrive at "material" with the 4.0 update. It's been a long journey for the app, from the #holoyolo days of the sliding conversation panel (an element I greatly miss, by the way) to the days of a (nearly) consistent green palette and floating action button. Hangouts evolved to adopt the new navigation drawer toggle, new iconography, a navigation drawer that's way closer to standard than it was previously (though it's still not perfect), and refined avatars and typography before reaching where it is today. Take a trip down memory lane below, from version 2.0 to 4.0.
The progression above spanned about one year and nine months. So it's fair to say things haven't been changing at a breakneck pace for Hangouts, but the design has undoubtedly been changing.
The floating action button (FAB) in Hangouts 4.0 - as many users suggested it should - killed the separate "contacts" tab we used to have (though if you have Dialer installed that will spawn an extra tab anyway). And Hangouts is a place where the FAB actually makes sense - the primary action of the main screen is managing conversations, so there are options for frequent contacts and for starting new group, SMS, or video conversations too.
One odd thing about the FAB in Hangouts 4.0 is that it doesn't react to scrolling by scooting out of the way. It just sits in the corner, blocking one or two words (or the date) of the last message in the list. In this writer's opinion those one or two words are not a big sacrifice, but getting out of the way is probably the ideal behavior. The smaller buttons that comprise the speed dial aren't exactly standard, but overall I'd call this FAB an improvement over the old navigation model.
As you may recall, there were more FABs in earlier versions of Hangouts 4.0. The FAB that appears when starting a new group conversation still exists, but the FAB for sending a message is gone. Or at least it's different. Rather than being the full 56dp, it's more the size of a normal button (a la Messenger), but retains its elevation when a message is ready to send.
One area where Hangouts has made great strides in 4.0 is alerting users to ongoing settings, like which account they're sending from or when notifications have been turned off for a conversation. A snackbar on the main screen briefly reminds users which account they're logged into (rather than keeping an avatar and account name in the toolbar) and inside a conversation a snackbar-like message descends from under the toolbar to convey the same info, with a similar (but actionable) message alerting users when notifications are turned off.
Of course the snackbars popping in from both ends of the screen can get old after a while, but it's easy to see why, for instance, the "Signed in as..." snackbar pops up every time you enter the app. Users with multiple accounts (or Apps users who also have personal accounts) need to be sure which account they're logged into before striking up a new conversation. For users with single accounts, however, the snackbar wouldn't seem to provide a lot of value.
A big part of practicing good design, in my opinion, is knowing when not to include things, or when to reel in some design decisions and restrain things like color and typography. The final 4.0 release unwinds several of the colorful changes we saw in leaks - the FAB is no longer a minty bright green, the FAB inside conversations (as mentioned before) has shrunk and lives in the message bar, the unnecessary emoji button in the compose bar is gone, and outgoing messages are now gray rather than green. The new, gentler reminders about notifications also show more restraint than their bright red predecessors, opting for minimal text and a not-so-dire color scheme.
old vs new
Bringing things together
Another theme of this update is unifying some interface elements that felt scattered and non-standard in previous iterations. Specifically, Hangouts 4.0 does a lot to clean up toolbars. Besides revising the main screen's toolbar to simply say "Hangouts," toolbar titles have been bumped up to Roboto Medium (a standard in other apps), and iconography has been revised to white so it matches the text.
If I had to guess, I would say that the dark icons of old were probably intentional. After all, #FFFFFF on a field of #0F9D58 has a contrast ratio of 3.5:1 while #000000 on the same color has a healthy ratio of 6:1. In all fairness though, the icons in the previous version of hangouts weren't pure black - they were translucent. So whether contrast was the real motivation is still just an educated guess.
The purpose of this post isn't to look at what Hangouts could be, but rather what it is now from a design perspective. So with that in mind, without diving into the list of possible features it'd be nice to have, there are a few elements of the existing design that are just a little odd.
First up is the color palette. In the paragraphs above I noted that Hangouts' palette is much more reserved now, sticking primarily to the dark green color we see on FABs, toolbars, etc. with blue-grey colors backing it up. But there are still a few places where the old minty green color peeks through. Things like text selection handles are still this pungent hue, even though other elements that are typically colored by the app's accent color (like checkboxes) are dark green.
Next, mismatched camera icons. The new compose bar is nice. It holds common actions for adding content to your messages, and keeps those actions to just four icons (unlike certain other messaging apps). Of course these icons leave off things users have asked for like video attachments, etc. But here we are. Anyway, the camera icon in the compose bar is a member of Google's latest and greatest collection of "material" icons, but when attaching a photo the placeholder icon is as holo as ever.
Those aren't the only interface quirks hanging around, though. Particularly notable is the fact that highlighted messages on the main screen still get coated in good old #33B5E5, and that the spinner to switch between SMS and Hangouts within a conversation is woefully misaligned.
those icons could use some adjustment too while we're at it
This is one absent feature I will discuss in this post, because there's a certain other platform on which Hangouts 4.0 has it. On iOS, Hangouts has a perfectly acceptable tablet layout, opting for the split-pane paradigm where your conversation list is on one side and the conversation itself appears on the other. This is fine. Personally I think the layout only saves a marginal amount of time, but the time savings is real, and I think it would be worth while for Hangouts to look excellent on Android tablets too. Sadly this is not the case. What's more, though, is that Hangouts had a tablet layout before.
Why the tablet experience on Hangouts continues to lack is anyone's guess. It's possible that so many other things have been prioritized either in design or development for Hangouts that the tablet layout just hasn't entered the equation yet. Without being a fly on the wall at Google, it's impossible to say for sure. Whatever the case, here's to hoping Hangouts gets its own tablet layout some day.
Overall this update is about refinement. Is Hangouts all the way there yet? Definitely not. But is this update a step in the right direction, from a design perspective? I think so, and we've covered several of the reasons why here.
Progress may not be as fast as us die-hard users would like it to be, but a lot of the changes in Hangouts 4.0 clearly have plenty of thought behind them, and it's refreshing to see them finally come to light.