Blogs By Author

Answering the Eternal Question: To Hamburger Menu or Not?

Should you use a hamburger menu for your mobile navigation?

That’s a matter of ongoing debate here at Sandstorm®. It’s a debate we carry out in email chains linking to the latest articles, with subject lines like, “Hamburger menus were (bad/good).”

So I’m here to finally end the debate and offer a definitive answer on whether you should use hamburger menus by saying, “It depends.”

Because that’s the truth: Hamburger menus aren’t uniformly bad or good. It all depends on your audience, your goals, and how best to structure your information so that it serves your users and your needs.

The Myth of the Hidden Menu

In his article Why and How to Avoid Hamburger Menus, Louie Abreu lays out a thoughtful argument against the pattern of using sidebar menus. For him, the biggest issues are:

  1. Low Discoverability—the menu is out of sight and, therefore, out of mind.
  2. Reduced Efficiency—it creates navigation friction for the user.
  3. Navigation Clashing—it clutters up and overloads the navigation bar.
  4. Lack of Glanceability—information about specific items is harder to surface.

But I don’t quite buy the rest of his argument.

Since 2014, when the article was published, hamburger menus have become a common pattern for some of the most highly trafficked sites on the web, including Google and Facebook. And in countless usability studies, we’ve seen that most people don’t mind the ‘hidden’ menu on mobile devices.

The main issue we’ve seen in usability studies is some users don’t understand the three-horizontal-lines ‘hamburger’ icon. This is consistent with an A/B testing experiment conducted by Sites for Profit, which suggests that the three-horizontal-lines ‘hamburger’ icon is less effective than the ‘menu’ label. So there is definitely evidence that supports adding a menu label underneath the icon or simply using the word ‘menu’ instead of the icon.

What users really want is something that’s designed for them, whether it includes a hamburger menu or not—and I’d argue that most users don’t know that this is even a debate.

So how do you effectively use a hamburger menu without alienating users?

Considerations Before Using Hamburger Menus

1. If your navigation structure is small and simple, why not just show it?

Websites with a deep menu structure—like large enterprise software companies—can benefit from hamburger menus. But small websites, like those for a local business, have limited functionality and can display their full navigation. Or you could use one of these emerging patterns for mobile navigation.

2. Label your menu with the word menu.

Our own tests and others have shown that just adding the word ‘menu’ below the hamburger icon increases user engagement. Or ditch the icon and just use the ‘menu’ label.

3. If you have the screen width to display your menu, you should do it.

Avoid hiding your navigation on larger screens. If you don’t have to use a hamburger menu on tablet, then don’t.

4. Nesting can be a problem, if your menu structure is too deep, there’s probably something wrong with your architecture.

The hamburger/offscreen navigation pattern can get tricky if your menu structure is deep and wide. It’s probably not a good pattern to use if this is the case, but the first thing you should do is consider revising your site architecture so it’s less complex.

If you need help with your mobile navigation, Sandstorm can help. From usability testing to user experience design, we’ll help you find the solution that works best for your users.

This blog was posted by on August 31.
Michael Hartman

About the Author

Michael Hartman

As Sandstorm's Technology and Usability Director, Michael leads our developers and usability researchers in creating web sites and applications—both desktop and mobile—that embody our favorite blend: intuitive user experience and dynamic Drupal development.

Hamburgers Menus: A Matter of Taste (April Fools!)

[This is Sandstorm's 2015 April Fool's Day post. Enjoy!]

Anyone involved in mobile usability or mobile user interface design is familiar with the hamburger menu icon. 

But where did this icon come from? Why is it called a "hamburger"? Today we uncover it's interesting origins and how you can change how you use it on your sites to be more user friendly. 

Hamburgers and Navigation are Linked Historically

The connection between hamburgers and navigation has a long history. Hamburg the city from which the sandwich derives its name, was once known as one of the busiest port cities in all of Europe. Located on the Elbe, it has easy access to the North Sea and ultimately the Atlantic Ocean. As a hub for shipping commerce for centuries, Hamburg became well known for the production of accurate maps, compasses, and astrolabes.

Thus, the best way to get from one port to the next was, in effect, to use “Hamburger Navigation.” In fact, it is believed that the beloved sandwich came to the U.S. as the Hamburg steak served to passengers on the Hamburg-America Line steamships.

Its "Iconic" Origin

The history of the hamburger menu icon is quite unclear. While conducting our research, we encountered the earliest depiction of three parallel lines being clicked. Below you will be this example from Egyptian hieroglyphics. We are unsure whether actually touching these would have triggered a secret passage or simply were used as a guide for readers, i.e. “you are going in the right direction.”

At the time of hieroglyphics, hamburgers didn’t exist (nor did Hamburg the city). How did these Egyptian and German roots “stack up” to be the icon we know today?

One hypothesis is that while most Egyptian tombs were being excavated in the early 20th century, the popularity of the hamburger as a sandwich was rising. The more likely hypothesis is that that three horizontal parallel lines looks like a hamburger, albeit a minimalist one. (Taken literally, it looks much more like a grilled cheese or a filet-o-fish.) Or so we thought.

Finding the hamburger menu online

We did some Internet excavation of our own using the Wayback Machine. We reviewed a number of websites related to fast food burger joints. Here we encountered a revelation, the first McDonald’s website and what did we find? A hamburger menu.

While this icon directed users to the restaurant menu to order food, it’s clear that this is the first, and most literal use of this now beloved means of getting from page to page on a website. This visual cue being paired with with the historical aspect of “Hamburger Navigation,” is quite possibly the result of a happy accident.

Even today, Five Guys Burgers and Fries uses a hamburger icon for all iterations of their responsive websites.

How can we make these icons more appealing to users?

You may also be aware of some of the research related to the position of the hamburger menu and whether or not including a label with the word ‘menu’ above or below the icon increases users understanding of the icon (it does).

While we’ve adopted the practice of including labels with icons to improve user understanding and reduce the cognitive load, we’ve been experimenting with a variety of designs for the hamburger menu icon. In particular we wanted to answer the question, can a more realistic hamburger icon affect the site’s user experience? If so, what factors contribute to a better experience? Below are some of the icons we tested along with their results.


Hamburger

Result: Users experienced minimal usability issues but felt the overall site experience was missing something.
Recommendation: Consider toppings to improve visual appeal. Remember, users navigate with their eyes!

Cheeseburger

Result: Very few usability issues uncovered. 85% of users tested found this to be the most satisfying version.
Recommendation: Your go-to icon for most audiences. Consider adding a fried egg and bacon to enhance the experience.

Double Cheeseburger

Result: Users anticipated a longer menu due to the additional layers. Some users felt tired after navigating. 
Recommendation: A/B test to determine the appetite for site pages from your users.

Triple Cheeseburger

Result: Inconclusive, very few users were able to complete all tasks in the study. Caused confusion among international audiences.
Recommendation: Less is more. May be useful when you need to increase the size of your user base.

Hot Dog

Result: Tested well with children.
Recommendation: Avoid the use of ketchup.

Chicken Sandwich

Result: Great usability but the experience came across as dry.
Recommendation: Consider toast as possibility instead of a kaiser roll or spice it up with some hot sauce!

Veggie Burger

Result: No usability issues uncovered but users were generally dissatisfied with the experience.
Recommendation: Not suitable for the main menu. Save this for the side navigation on the desktop version.

Conclusion

The more delicious the user perceives the hamburger to be, the better the user experience. Get to know your users, preferences vary depending on the use case.


Sources:

Hieroglyphics - https://4815162342execute.wordpress.com/lost-themes/hieroglyphs/
Grilled Cheese: http://monosnap.com/file/omYgQ6PlveSIeEXUPezbKMEZdLc21e

If you haven’t realized yet, this post is a complete joke. Happy April Fool’s. Here’s the real history of the hamburger icon.

This blog was posted by on April 1.
Michael Hartman

About the Author

Michael Hartman

As Sandstorm's Technology and Usability Director, Michael leads our developers and usability researchers in creating web sites and applications—both desktop and mobile—that embody our favorite blend: intuitive user experience and dynamic Drupal development.

THIS FILE WAS POSTED UNDER: 
this file was posted under: 
Chicago Web Development Firm Attends Drupal MidCamp

Sandstorm is proud to once again be involved in Drupal MidCamp. MidCamp (also known as the Midwest Drupal Camp) is an annual event held in Chicago that brings together people who use, develop, design, and support Drupal. This year’s MidCamp will be March 19-22, 2015 at the UIC Student Center East.

Sandstorm is a bronze sponsor this year, and we’ve got web developers, strategists, and web designers attending. Last year, I had the pleasure of speaking about user research techniques, which was a blast. This year I'm looking forward to mingling with regional Drupal developers and attending sessions on Drupal 8, "headless" Drupal, and automated testing.We're also on the look out for another solid Front End Developer here at Sandstorm. If that's you, get in touch.

You don't have to be a developer to get something out of MidCamp. There are plenty of promising sessions for people new to Drupal and project managers working with the CMS. We hope to see you there, and have some fun!

This blog was posted by on March 13, 2015.
Michael Hartman

About the Author

Michael Hartman

As Sandstorm's Technology and Usability Director, Michael leads our developers and usability researchers in creating web sites and applications—both desktop and mobile—that embody our favorite blend: intuitive user experience and dynamic Drupal development.

Why do you need a website maintenance plan for your Drupal website?

Congratulations on launching your new Drupal website. You can now rest assured that you never have to think about it again. It will automatically generate revenue and keep itself running for decades to come. Pat yourself on the back and have a drink. Your website is complete.

Well... this might not be entirely true.

In reality your website is never really finished. Just like with a car or home, things degrade over time. Your website is no different and you need to have a website maintenance plan.

What is website maintenance?

It is the process of keeping your website up to date and running smoothly. It involves applying security patches, monitoring web server performance, and maintaining your code base. This is on top of maintaining your content, products and/or users. You gotta do that, too. Major reasons to have a maintenance plan include security, performance, backups, and other considerations.

Security

Hackers are always looking for ways to compromise websites through new techniques or insecure code. It’s critical your website remains as secure as possible. This often involves applying security patches or software upgrades both at the code and server levels. One advantage to open source software like Drupal, is the community of developers finding security holes and contributing patches.

This is also a double edged sword. Once hackers identify a security hole, they can exploit it by targeting unmaintained sites. You are running a huge risk if you’re running a Drupal site and not keeping up with Drupal core and module security upgrades.

Performance

Performance affects the amount of time it takes for your website to load for a user on their device. This includes time to complete transactions like adding a product to a cart or submitting a form. Good website performance is good usability. Users will abandon a poorly performing website never to return. It’s also good for search engine optimization (SEO).

We include performance testing and tweaking as part of the launch process. Yet, performance can degrade over time as code, content, or the server environment changes. Perhaps your site’s traffic has increased and now requires more resources to meet user needs. Wouldn’t that be great? It is great if you’re monitoring your traffic, server performance, and page load times so you can ramp up to meet the demand.

Backups

Another component of a good website maintenance strategy is a solid backup and restore plan. Most web hosts keep some level of back ups and will either restore your site as part of your hosting package or for a fee.

While this provides a safety net, they usually only keep a short window of backups. You may need to restore your site to an earlier point than your host has kept. Or you may need to restore to a point since your host’s last backup. A defined backup strategy allows you to quickly bring your site back online whatever the case may be.

Other considerations

Broken Links
Each website page links to internal pages and external websites. These links can change over time as content expires and changes or as sites get redesigned. Keeping an eye on broken links and updating or adding redirects when urls change should be part of your maintenance plan. Broken links are detrimental to your SEO.

Web forms
It’s a good practice to test and confirm that each of your web forms are working as expected, this may include contact us, event registration, and newsletter signup forms. Hopefully you’re seeing regular submissions, but it’s possible another update affected these forms. We like to confirm everything is still working after applying other updates to a site.

Development and staging environments
When implementing development updates, you should avoid deploying new code and patches to your live website. It’s important to have a separate deveopment environment for developing and testing new features and security updates. You use a staging environment to review and confirm these updates before releasing them on your live website.

The value of maintenance

The cost of website maintenance outweighs the cost of fixing problems caused by a lack of maintenance. A website maintenance plan is an added level of insurance against security and server-related issues that can cause grief and lost revenue. At the end of the day, a well-maintained site is another component of a great user experience.

Need help with Drupal website maintenance? Get in touch.

This blog was posted by on February 20.
Michael Hartman

About the Author

Michael Hartman

As Sandstorm's Technology and Usability Director, Michael leads our developers and usability researchers in creating web sites and applications—both desktop and mobile—that embody our favorite blend: intuitive user experience and dynamic Drupal development.

http://www.sandstormdesign.com/blog/working-hand-in-handEnsuring User Experiences from Coast-to-Coast Are Not “Taxing “

I love doing usability testing. I always learn something new and there is usually at least one surprise. For the past 3 years we’ve partnered with Fast Enterprise, who among other things, provide tax processing software to state and local governments. Our work with them involves visiting state capitols across the country conducting 1 to 2 day usability studies. These studies are often followed by a working session with our client’s development team to review our findings and recommend solutions.

While tax software may not sound super exciting, our client is engaged and passionate about making the user experience of their software better, and we get to collaborate with them in doing so. Over the years we’ve seen our recommendations make their way into our client’s core product, which actually is super exciting.

Another bonus, we get to travel to exotic places like Bismarck, North Dakota and Montpelier, Vermont.

This blog was posted by on December 7.
Michael Hartman

About the Author

Michael Hartman

As Sandstorm's Technology and Usability Director, Michael leads our developers and usability researchers in creating web sites and applications—both desktop and mobile—that embody our favorite blend: intuitive user experience and dynamic Drupal development.

THIS FILE WAS POSTED UNDER: 
this file was posted under: 
User goals come first in user experience

I recently conducted a usability study for a Fortune 50 company. It was for an internal portal for managing employee health benefits and programs. This included testing both the desktop and mobile experiences. Results of the study showed users were frustrated by irrelevant content or that they missed content important to them because it was buried in the experience.

Stakeholder goals came first

The project stakeholders built the portal around their needs and the users needs were secondary. Throughout the portal, surveys, promotions for internal programs were brought to the front instead of presenting the key health benefit information users wanted. Users found this particularly frustrating on their mobile devices, where they wanted to quickly access specific information on-the-go.

User goals should be priority

If the users had access to the information they wanted first, they would more likely take the time to read the promotions or surveys. Since it was in the way beforehand, users found it annoying. At best it was ignored.

A soapbox I often stand on when speaking with clients goes like this:

  • You have business or organizational goals
  • Your users have goals
  • Sometimes these are the same, sometimes they are not
  • Meeting your users goals first greatly increases your chances of meeting your business goals

Everyone wins when the user succeeds

Often, there are business goals your users don’t care about at all. If you prioritize your users’ goals, you’ll have the opportunity later to meet those business goals that aren’t important to your users. If you make it difficult for your users to meet their goals, it’s unlikely they’ll stick around to help you meet yours.

Each user has a goal in mind specific to their need and situation. By successfully meeting this need, they will return to your site, app, and even brick and mortar store again.

This blog was posted by on January 2.
Michael Hartman

About the Author

Michael Hartman

As Sandstorm's Technology and Usability Director, Michael leads our developers and usability researchers in creating web sites and applications—both desktop and mobile—that embody our favorite blend: intuitive user experience and dynamic Drupal development.

Can we stop saying "click here"?

You’re going to click here. Of course you’re going to click here. How could you not? The link says “Click here”!!

  • Click here to register
  • Click here for a list of services
  • Click here to learn more
  • Click here to go find that thing that should be right here where we’ve placed the words click here

The web is all about clicking. Users know what a link is and how to click on it (or press it if they are on a touch device). I think it’s safe to abandon this tired phrase and just get to the point. Why not just say:

  • Register
  • Our services
  • Learn more
  • [put that thing that should be right here]

I think this would make the world a better place or at least a place with better online user experiences.

This blog was posted by on November 6, 2013.
Michael Hartman

About the Author

Michael Hartman

As Sandstorm's Technology and Usability Director, Michael leads our developers and usability researchers in creating web sites and applications—both desktop and mobile—that embody our favorite blend: intuitive user experience and dynamic Drupal development.

Mobiletanious responsive development on multiple devices and screen sizes.

I’d like to go on the record and claim the next catch phrase in UX and user experience design....Mobiletaneous!

Mobiletaneous is the art and discipline of building experiences for multiple screen sizes simultaneously, as opposed to starting from the mobile or desktop version. This a slight spin on the recent design trend “Mobile First” which was popularized by design guru Luke W. (Luke Wroblewski).

This is not to take anything away from the “Mobile First” philosophy. I’ve read “Mobile First”, practiced the mobile first methodology and extolled its virtues. There is no denying the expansive growth in mobile use, and the shift from desktop to mobile is indisputable. Any organization not focusing on their mobile experience is missing the boat.

Mobile First

However, as we’ve been designing and building for varying screen sizes, we’ve found it most useful to consider all screen sizes simultaneously. This applies to both the user interface design and front end development phases. It is particularly helpful when breakpoints for mobile, tablet and desktop screens are needed.

Mobiletaneous

This approach ensures designs for all screen sizes are getting the attention and consideration needed, rather than prioritizing one over the other. Because at the end of the day, the most important screen size to design for is the one your user is using.

We’ve learned this is a more efficient way to develop responsive designs. It’s no surprise it requires more time (and budget) to design and build responsive experiences, but we’ve found the mobiletaneous approach to be the most efficient.

So our interpretation of the “mobile first” philosophy is slightly different. We believe your mobile experience is crucial. So is your tablet and desktop experience. That’s why we’re on the leading edge of the mobiletaneous movement.

This blog was posted by on May 23, 2013.
Michael Hartman

About the Author

Michael Hartman

As Sandstorm's Technology and Usability Director, Michael leads our developers and usability researchers in creating web sites and applications—both desktop and mobile—that embody our favorite blend: intuitive user experience and dynamic Drupal development.

Finger as a navigating device on a tablet.

There's a distinct usability difference between navigating a web site on a desktop with a mouse and on a tablet or mobile device with your finger. A mouse is accurate to the pixel. Fingers are far less precise. They’re particularly less precise if you have big fat caveman fingers like mine.

This came to mind this morning as I inadvertently accepted a LinkedIn request on my iPad that I intended to ignore. It’s true, I don't willy nilly accept every LinkedIn request I get... but that's another rant. The options were just too close together and like I said, I've got caveman hands.

Physical Space, Not Pixels

This is just one example of why you need to consider real world physical space when designing for tablet and mobile. Bigger pointing devices, like fingers, need bigger targets. Between Apple, Microsoft, Nokia and MIT’s Touch Lab the recommended guidelines for touch targets are between 8 and 14mm with a minimum of 2mm of spacing between actions (source: Mobile First by Luke Wroblewski).

Recommended tablet design guidelines for usability.

 

 

Guidelines, Not Rules

LinkedIn followed the guidelines for some of their targets. However, guidelines are meant to lead you in the right direction, not force you into a rigid structure. How often the target is used and its position on the screen should also be considered for optimal usability. Context and common sense should lead your design if you want it to facilitate human behavior.

The touch targets below are the worst offenders. The options arrow (B) is far too small and placed too close to the accept button (A), making it too easy to accidentally accept a request when all you wanted to do was view the options. Accidentally tapping on a nav item is frustrating. Accidentally tapping on the wrong action item causes you to blog about it.

Tablet usability example of poor touch target spacing.

 

Thumbs, Not Cursors

Here's a good rule of thumb (pun intended) when designing targets for mobile. Just ask yourself, “Could I hit it with my thumb?”

 

This blog was posted by on April 1, 2013.
Michael Hartman

About the Author

Michael Hartman

As Sandstorm's Technology and Usability Director, Michael leads our developers and usability researchers in creating web sites and applications—both desktop and mobile—that embody our favorite blend: intuitive user experience and dynamic Drupal development.

THIS FILE WAS POSTED UNDER: 
this file was posted under: