Blog

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: HPB.com page allowing a customer to create an account after checking out

Good job! Now just remove the password confirmation field 🙂

Twitter Adds Alt Text Authoring for Some Users

I posted recently about how sharing images through services like Twitter are often inaccessible to users with visual impairments because they lack meaningful alt text. In its March 28 release (version 6.50 for iOS), Twitter now provides some mobile users the option of including alt text. (No word on when the feature will be available for website users.)

To enable the ability to add alt text to your posted pictures from within the iOS Twitter app:

  1. Go to your profile page
  2. Tap the settings (gear) icon
  3. Choose the “Accessibility” option
  4. Turn on the “Compose image description” option
  5. Save your settings

The first time you insert an image into a tweet, you will be prompted to “Describe this image for the visually impaired”.

Twitter image prompt to describe this image for the visually impaired
Screenshot of the image upload prompt

Tap the “Add description” button to provide a meaningful explanation of the contents of the image.

screenshot of the field to type in the image description for a watermelon pinata
Screenshot typing the image description

Looking at the source code via the website, we can see the image contains the description within the alt attribute.

<img style="width: 100%; top: -72px;" data-aria-label-part="" src="https://pbs.twimg.com/media/Ceu_z_PW4AEchnB.jpg" alt="Watermelon piñata broken open">

For more information on this feature, check out the Twitter Support article Making images accessible for people on Twitter.