One of the more fundamental psychological fears that
most humans share is the fear of being lost.
Getting lost on a freeway,
or inside an airport,
or inside the woods is not the idea of fun for most people.
We probably all have a story of getting lost as
children and the terror that inflicted on us,
not to mention on our parents.
When we are designing websites,
we should make sure that people don't get lost in them because if
they do get lost or even if they are just a little confused of where they are,
it will trigger a pretty potent negative reaction,
and the usability of our site suffers.
So, what are some tools and techniques for us
web designers to answer the user's question, "Where am I?"
and prevent them from feeling lost?
In this video, I will talk about the following: site identification, page titles,
"You are Here" indicators,
breadcrumbs, links back to the homepage, and consistency.
As an example, we'll use one of the wireframes from the last video.
It's a fairly simple page about the employees of a company.
It's a secondary page located in the About section.
Now, by site identification,
I mean that the user should be able to tell at all times simply what site they are on,
and one of the best ways to communicate this is to have
the site's logo or the site's title in the header on every page.
The convention is to have it in the upper left corner,
and I would recommend that location as a starting point for your design investigations.
We'll use the three example websites we looked at in the last video again.
Here, you can see that there aren't any surprises.
The logos of the organizations are placed safe and securely in the upper left corner.
Sometimes, no surprises is a good thing.
It grounds the user's experience when they know where they are at all times.
Another important wayfinding element is the page title.
Let the user know what page they're on.
Here, in this wireframe,
we can see the page title, "Our Team",
is presented clearly, enlarged type towards the top of the page.
The MAK Center website does a good job of prominently displaying the title of a page,
as you can see here on the Visit page.
The Marciano Art Foundation and Pasadena Conservatory websites
often use a different mechanism to let the user know what page they're on.
More on that in a seconds; but here,
on an upcoming events page,
the title of the page stands out clearly.
This blog post here also displays the title very prominently.
When you're looking at a map in a shopping center, let's say,
one of the most useful things is to know your current location in relation to this map.
You're looking for the "You are here" symbol.
Websites can really benefit from such indicators as well.
In your navigation, you should highlight the link of
this section that the visitor is currently on.
In this wireframe, you can see that we are currently in
the About section since that link in the primary navigation is highlighted.
Furthermore, you also see that we are on the Our Team page in
the secondary menu since that link is also differently formatted from the rest.
Let me quickly emphasize an important points.
You might argue that a user will have click the About link just a few moments before,
so how could they already have forgotten what section they are in?
Well, let's assume two other scenarios.
One, they did a Google search and landed on
the About page as the first page they ever visited on your site.
It's helpful for them to see right away where they landed.
Scenario number two; they went to your site,
clicked on About and were distracted by an incoming email or chat,
then after half an hour,
they got back to their browser and have naturally forgotten where they were.
Again, nice to help them out by highlighting the place they're at.
Here are ways that our example sites deal with
this: by having a background color behind the active link,
or by lowering the opacity of all links except for the active link,
or by having the active link move down slightly to make it different from the rest.
I can only imagine that the word breadcrumbs was
inspired by the original Grimm's Fairy Tale of Hansel and Gretel.
In the story, when the siblings were left alone in the woods,
they tried to find their way home by looking for
the breadcrumbs they had strewn along their path earlier.
That didn't work out so well for them,
damn those birds who ate the bread,
but breadcrumbs for websites are a super helpful tool for your users.
They indicate the path that the user has
traveled along the information architecture of your site,
or if a user landed on this page some other way,
breadcrumbs communicate how this page fits in with the content hierarchy.
In this example, the breadcrumb situates the Our Team page as part of the About section,
which in turn can be accessed from the homepage,
and a user can click on any of the links in the trail to get back to a prior page.
So far, we've only looked at sites that had a secondary level,
maybe a tertiary level,
but you can probably imagine content structures that go a lot deeper.
The deeper your content structure,
the more helpful breadcrumbs become.
It's a good idea to give your users an easy way to get back to the homepage.
Now, it's a convention that the logo of the site will link back Home,
and on many sites,
that's the only link back to the homepage.
If you want to be more explicit about how to get back to the homepage,
you could add that as a link to the primary navigation.
But as I said, most sites get away without doing this,
plus if you have breadcrumbs,
you already have another way pointing back home.
Finally, one overarching strategy of helping your users to orient themselves is
to be consistent: Have your logo on every page of your site in the same location,
have your page title look consistent,
use a consistent way of indicating which link is currently active,
don't move or unexpectedly change your primary navigation from page to page.
Have breadcrumbs on every page and allow users to
link back Home by clicking your logo on every page.
I'll leave you with a little fun excursion to a website that showcases
the exact opposite of all the things we just discussed: the Situs events bridal.
It's kind of a piece of art actually.
A crazy wonderland of late 90s inspired web design,
but no clear navigational hierarchy or no hierarchy whatsoever.
A user can all but feel lost here.
Now, I'm not saying that this isn't intriguing or interesting,
it does bring a smile to my face but more in a "This is so bad,
it's really good" sort of way.
As a piece of user experience,
let's say, you're actually trying to buy a wedding gown,
it's an utter failure and can make us appreciate a well-designed usable websites.
