Hangouts, where’s my mute?

I mostly use Hangouts to communicate with friends and family. While at work on my laptop, I use the Chrome extension for Hangouts. The rest of the time I use the iPhone app. The user experience between these two versions is not the same though, because the navigation menu is so different.

I think the iPhone app has the superior layout and use of space.

screenshot of the Hangouts iPhone app with title at the top and a menu bar with options favorite, voice, invite, video, mute, details
Google Hangouts iPhone app

With one tap of the menu icon, you get access to most of the hangout features, the rest of which are available by tapping the “Details” icon.

Conversely, in the browser extension the same features are either missing or work differently.

screenshot of the extension menu bar with icons for video call, people, and options
Google Hangouts extension chat window

I am most annoyed that the ‘Mute’ function is missing because I use it frequently. It’s located under the ‘Options’ icon, labeled “Notifications”, and is turned on/off with a check box.

screenshot of the Hangouts extension 'Options' screen with edit name, notifications check box, history check box, archive, and leave
Google Hangouts extension ‘Options’ screen


After unchecking the “Notifications” box, you have to click ‘Save’ to return to the chat window. The total interaction requires three clicks, context switching, and a confirmation action. After turning off notifications, though, the menu bar displays an indication icon.

menu bar showing a mute icon for the chat
Hangouts extension notifications off

Clicking the ‘Mute’ icon now performs the same action as clicking the ‘Options’ icon and you have to check the “Notifications” checkbox to turn them back on.

Design Recommendations

  1. Add the ‘Mute’ icon and allow for single click to turn notifications on or off
  2. Use consistent labels—change “Notifications” to “Mute” and “Options” to “Details”
screenshot of extension menu bar design with mute icon added and options icon updated to match the app
Updated menu bar with mute icon

Favorites doesn’t seem to be supported in the extension and it never remembers my favorites in the app, so I don’t see this as missing on the desktop. Not including Voice is questionable, it could open up Google Voice, but using that on desktop is also not something I do. Video hangouts cover both.

Kudos to Half Price Books for Guest Account Creation after Checkout

I’ve studied a lot of in-depth research on e-commerce and one of the more disruptive user experiences is requiring customers to create accounts before allowing them to give you money.

Of the top 100 sites evaluated by the Baymard Institute in a 2012 study, 76% allowed guest checkout.

graph: 35% of companies grossing over $1 billion and 21% of the rest require an account to make an online purchase
Graphs: 76% don’t require an account to purchase, courtesy Baymard Institute

But only one of these companies (ranked #1 of 100) allowed a guest user to create an account after checkout. The checkout process should be linear, so asking a customer to create an account at the end of the purchasing process makes sense and is a better user experience.

It’s difficult to find examples of sites doing this since it requires making a purchase, but I did come across one finally: Half Price Books, a Texas-based used books chain.

Screenshot: page allowing a customer to create an account after checking out

Good job! Now just remove the password confirmation field 🙂

Online Emergency Department Check-in Mishap

Earlier this evening, my partner’s car was hit by a guy running a red light. He sustained a concussion and wanted to go to the hospital. Here is dashcam video of the accident.

After calling insurance to find out which hospital he could visit (turns out, not the closest one!), I looked it up online to verify the address. On that page, I saw that the emergency department offered online check-in so that you can wait at home.

screen shot of the Seton ER hospital home page with a form to locate a hospital
Screenshot: Seton ER home page

Being in a hurry since this was an emergency, I was scanning the page quickly. Only two things caught my eye:

  1. The headline that reads “Mini Emergency?” at which point,
  2. I scrolled down, saw the location I wanted, and clicked “Go”

What I did not notice was the most important information on the page—the statement about what conditions not to use online check-in for:

If you are experiencing a life-threatening emergency, go directly to the ER or dial 9‑1‑1. Signs or symptoms of an acute emergency may include…head injury or other major trauma…

Design Recommendations

  1. Move the when-not-to-use-this information to be in context with the page’s main heading
  2. Make the small, gray font with poor contrast easier to read
  3. Transform the long, boring block with a bullet list
  4. Reduce the branding that takes up valuable real estate and obfuscates important information
  5. Under the covers, fix the order of headings
screenshot of design changes to the Seton ER homepage with important information highlighted
Screenshot: Updated Seton ER homepage

In the bathroom, I saw this great example of people making their own user experiences better. The lock was installed backwards.

Photo of a bathroom door lock where the lock is reversed so someone drew locked and unlocked icons on the door
Lock on the ER bathroom door