Karen Bartuch is passionate about data and uncovering hidden insights to help her clients make better business decisions. She enjoys taking an innovative yet evidence-based approach to her work.
[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.
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!
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.
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.
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.
Result: Tested well with children.
Recommendation: Avoid the use of ketchup.
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!
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.
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.
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.
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!
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.
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 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.
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.
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.
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.
The American Academy of Pediatrics came to us with a great goal. They were planning a project in conjunction with the National Center for Medical Home Implementation (NCMHI). It would be a fun, educational microsite specifically built for the pediatrics community. Excited about the possibility of creating a healthcare microsite with a twist, we came on board.
The microsite’s mission is to educate users about a concept known as a “medical home.” The term refers not to a place, but to a system of proven best-practices for providing healthcare to kids. If we do our job well, the microsite will help clinics put these practices into action. The impact on children’s lives will be phenomenal.
Creating the site was a collaborative process. We worked closely with NCMHI to determine a user experience design that everyone from government policymakers to parents to pediatricians would find to be a useful, intuitive tool. We were able to give it a look that’s playful while still giving context to the information the site delivers. From there, we built the site using responsive web development so it would function smoothly for users on any device.
The microsite recently launched and we couldn’t be happier with the results. If you’re interested in seeing the final product, check out NCMHI's responsive website.
At Sandstorm, we do a lot of website maintenance. That can mean many different types of things like development of new site components, updating old content or creating new content. With each of these different types of work there is a popular issue that can cause panic: he or she forgets to clear his or her caches after making the updates.
Nothing changed. Is the site broken?
If you’ve ever maintained a website, or maybe just updated content on one, you may have come across a situation where it looks as though your edits didn’t save. This ultimately leads into what seems like a broken website, but turns out (after consulting a developer) that you just need to “clear your cache”.
What is “cache”?
Like most people, myself included, when this first happens you are probably wondering what in the world is a “cache”. Google will tell you that it is “a collection of items of the same type stored in a hidden or inaccessible place,” but that makes me even more confused. In layman’s terms, cache is a save file that allows web pages to load faster.
When you arrive at a website, your browser takes elements of that page and saves them locally into “cache”. This way, the next time you decide to visit that specific page, your browser is going to remember how it looked the last time and, instead of downloading those pieces again, it will use what is stored in the cache to build the page. This results in a great performance boost. Unfortunately, it can, at least appear to, be a nightmare for content editors who don’t understand why their changes are not showing up on the live site.
It’s an easy issue to address
Even with this knowledge, I still come by this simple issue every so often (so don’t feel bad if you do, too). What you should remember is to clear your browser’s cache, refresh the page and see if your edits are now in place (this is particularly easy on a Drupal site). If your changes are not there after that, then you can run frantically to your local developer or IT department. Assure them that you did clear your cache, and this may actually be a real bug.
Each year we pick two team members (either ux designers or Drupal web developers), who haven’t had the chance to go to DrupalCon, and send them off to soak up the latest trends and developments within the community. This year I was lucky enough to be sent off to Austin, TX for DrupalCon 2014. Besides the wonderful food and the nice break from a cold Chicago, we were able to bring home enough valuable knowledge to influence Sandstorm’s development practices quite a bit.
One of the biggest lessons we were able to pick up was the importance of automation in web development. We have since begun implementing powerful tools such as Git, Grunt, and Bower to continuously integrate updates to the websites we have worked on. Coincidentally, these tools are essential when working with multiple developers on a single project, and this year we have expanded our development team by quite a bit.
Overall, DrupalCon has always been a great influence on the company as a whole. Not just for development, but as well with design and content strategy. The Drupal community is a very welcoming environment, as you would expect from an open source platform, which reflects our core values “learning and sharing” and is why we continue to go year after year.
I am quite proud (and excited) about our constant opportunities for employee learning and sharing here at Sandstorm. It’s even one of our core values. Having worked at other companies, learning and sharing are things that are in the “whenever we have time” category, which often translates into, well, NEVER.
In the past year, my Drupal expertise has grown exponentially thanks to Andy, Andrew, and Will. I already considered myself Drupal-savvy, but I was introduced to new ways to author complex code when the editor “fixes” things that aren’t broken. Drew recently introduced me to posting a new and different kind of content, Events, and how it’s subtly different from other kinds of content that I’ve worked on before.
In addition to Drupal web development and administrative skills, we regularly have meetings where Sandy herself shares with us company overview information, such as how we’re doing year over year (spoiler, we’re doing awesome!) as well as new business or new client wins. For other companies this sort of information would be considered “unnecessary” for everyone outside the C-suite, but at Sandstorm there is a sense of trust, openness, and responsibility. It’s helpful and instructive to know where the ship is headed, not just that I’ve been rowing as fast as a I can. Understanding the work that’s happening outside of my tasks may not be directly applicable to my day to day, but it often makes things clearer and easier to understand, especially when things change.
I’ve worked at a lot of digital marketing agencies, which gives me a unique perspective with regard to how Sandstormers approach projects. One of the biggest and most integral parts of getting any project off the ground is making sure there’s a solid marketing strategy. So for me, it’s refreshing to be part of a team that leads with a user-centered approach.
Having worked on the strategy for a technology and sales consulting firm, I’m totally sold on our methodology. By conducting in-depth user research, a thorough competitive analysis, and taking a look at industry trends, we were able to find a “white space” opportunity for our client to disrupt the market. Our brand positioning, thorough digital marketing plan, and key messaging repositioned them in sales training and SaaS.
I’m so looking forward to launching the new brand and seeing how all of the user experience research has paid off. It’s incredibly validating to see how hard work and a strong methodology reinvigorate a brand in a crowded space.
I am so proud to be part of such a talented team.
At Sandstorm, we put a lot of care into ensuring our front end website interfaces look PERFECT. We match the designs to pixel perfection from IE8 to iOS8. But we don't stop there. I wanted to take a moment to highlight some of the unsung successes in the user administration side from the past year for our Drupal web development projects.
Drupal admins can be a little overwhelming to site administrators, so we've been flexing our muscles to pare down and improve the interface for our clients. Here are three things I thought worthy of giving you a little peek under the covers!
Slimmer Admin Menus
A standard Drupal admin menu:
Our sleek pared down menu for client admins:
The Editable Fields Module
We value efficiency, and when data needs to be fixed across multiple nodes we are usually able to solve such problems with things like Views Bulk Operations. But sometimes there's no way around the need to touch every node. Sometimes a human mind has to make a decision about every one of a specific content type. Sad, but true. So when that happens, the Editable Fields module is our friend.
Here's a custom Drupal Admin view that lets our content administrators quickly and easily edit multiple nodes without navigating from page to page:
Highly Configurable Blocks
Here are some examples of the many variations of this design pattern on just one page:
And here you can see the controls used to create these variations.
Site administrators are able to edit these blocks in real-time, clicking checkboxes on the left and watch the block preview update on the right! This is a very large site, so this UX design pattern had to be flexible enough to do different jobs on hundreds of different pages.
We wanted to strike a balance between flexibility, efficiency, and consistency. This was a lot of fun, and would obviously be overkill for many situations, but when it's called for, it's very rewarding for the Drupal web developers and content admins.
One Final Tip
Sometimes it makes sense to theme Drupal's administration pages, and sometimes it just makes infinitely more business sense to use one of the default themes like Seven for the admin. One compromise we recommend is developing your own version of your favorite default theme and use that as a starting point. Don't feel like you have to brand it like the rest of the site. The Administration pages need no decoration, but it is important to use your own version so that you at least have stylesheets that you can jump in and edit where need be. This preserves the efficiency of a default theme while providing the flexibility to make customizations.
I really enjoy engineering technical solutions. When one of our clients told us that their Single Sign-On (SSO) vendor would not be ready for site launch, I jumped at the opportunity to help build an alternative method. Instead of authenticating users using the third party system with a contributed Drupal module, we would need to switch gears and authenticate against their existing in-house system. To do, so we developed a custom Drupal module that authenticated users, created their Drupal user account, and brought over the necessary user specific data fields.
This approach used a centralized authentication site that passes a token back to the requesting site, which is then verified for validity. Ultimately implementing this solution allowed the client’s multiple systems to share one login method and keep users logged in while navigating between them.
I particularly enjoyed solving the problem and ultimately coming to the client’s rescue. We’ve launched their site, which you can read about in Emily’s post, and have this added knowledge to help our clients in the future.