Guiding by Design: Online

Posted March 19, 2014, under Gee Whillickers!

When it comes to guiding people using design elements alone, you pretty much can’t beat the Internet. After all, it was the capability to link to external files that was the genesis of our dearly beloved repository of all human knowledge.

Coupled with pictures of animals so it doesn’t feel like work.

Thus, navigation is one of the absolute most important aspects of any website.


What the F

eye-tracking

In earlier Lunch Meats we’ve mentioned “eye trail,” which has been known of since before Gutenberg built the first printing press. But in the modern, “scientific method” age, no assumption must go untested. So the folks over at usability.gov used eye-tracking technology to prove the ancient wisdom.

They found that readers of web pages tend to scan the page in a sort of F shape, as shown by the picture at right. Users start by going across the top, then down, then left again. That’s one reason you so rarely see navigation anywhere but across the top or down the left.

Probably not what the eye-tracking looked like. Maybe.


Changing Course

As tablets and smartphones become the predominant portals to the Internet, menus down the left are falling out of fashion. Tablets and smartphone screens have very limited “real estate,” and every effort is taken to make the most of it.

Sometimes this is misguided or confusing. Reducing all the navigation buttons to icons might work for Facebook, with its relatively simple requirements, but that’s not going to work for everyone.

This is called “Mystery Meat” navigation. Not recommended.

Gesture-based interfaces offer other challenges, as well. Designers and developers can no longer count on hover effects and, while drop down menus can work in a gestural environment, they are not the elegant solution they once were. Such effects were created with desktop interfaces in mind and, given the proliferation of touch devices, it’s only a matter of time before the keyboard and mouse setup goes extinct.

Relax, little guy. You’re probably fine.

Button size is another consideration. Fingers come in all shapes and sizes and, if your buttons are too small or too close together, user experience can suffer.

Designers and developers everywhere now have to reassess their approach to every website they build, and make decisions about how the site will work across multiple devices. To add to the fun, Google doesn’t like dedicated mobile sites.


The Guiding Principle

Next time you’re online, pay attention to how you get around. Look for different things the designers put in to help you get where you need to go – on a good site, navigating should be almost instinctive. Examples of good practices include:

  • On very complicated sites, breadcrumbs (as defined here) are used to help the user keep track of where they’re at.
  • Concise but clear navigation buttons. Rather than “What We Do,” consider a specific entry, like “Cat Vacuuming.”
  • Not relying on the browser’s “back” and “forward” buttons. Navigation should be on every page, in the same place, so people can easily get around.

The Internet has always been a bit Wild West and, while groups exist who are working hard to establish standards, there’s going to be a lot of cowboys doing things their way. Which is fine as far as it goes – so long as the guiding principle is good user experience.


Rigney Graphics is a Pasadena graphic arts company that can help you create an impact with design and marketing solutions for print and web.