The Follow-Up

Posted by in Posts

I’ve gotten a lot of great responses on my posts about carousels and hamburgers. Many of you have become experts at spotting these design patterns in the wild, and have pointed out some excellent examples. But I want to make sure that the subtleties of these messages are not getting lost, so to clarify a few points based on the feedback I’ve heard:

Image of Stanford's responsive homepage using the hamburger icon plus the word MENU.

Hamburgers: The hamburger icon in itself is not evil. The biggest problem with it is hiding a complex site’s full navigation underneath the icon without considering better ways to accomplish that navigation for small screens. If the site’s navigation and information architecture are done well, using the hamburger (along with the word MENU as an extra affordance for now) is a valid option. I’ve seen it used this way on several sites, and I think seeing the icon alongside the word for a while will help to train those of our users who don’t yet understand the icon. Avoiding the hamburger is not a rule set in stone—we should take every chance to test our users’ understanding of it as they start to see it in more places. Soon it will reach a tipping point and will be just as ubiquitous and universally understood as the house icon for home.

Screenshot of Energy.gov's image slideshow pattern.

Carousels: I suggested the large hero image as an alternative to carousels, but I know that didn’t seem like enough of a solution. I have seen carousels that are done well; remember—the biggest issues with them are that people don’t click through them and that auto-advancing presents a usability issue. Therefore, if you make a carousel controlled by the user (it stays on the first image unless the user changes it vs. rotating automatically) and don’t hide important information within it, the carousel (or image rotator or slideshow or whatever) can be a great tool. One very good example of this is on Energy.gov, where there is an option to make a hero image into a slideshow for an article. The images each have captions and the user can see thumbnails of each image and can select any to view larger. The images do not contain crucial site information or navigation, so if the user never clicks any of the alternate images, there’s no harm done.

Now that we all understand the issues we may face when using carousels or the hamburger icon, we can take steps to avoid or mitigate those issues. And as I’ve encouraged in both posts, test, test, test!