Loading...
Day 26: Mental Maps2017-11-09T09:05:05+00:00

Project Description

Project Description

MENTAL MAPS

Mental maps are how the user remembers the organization of your website. They’re a snapshot of how the navigation works, memorized. 

What it is.

When users arrive at a website, they take a quick glance at the navigation and content (we call this the 10-second test) , and make a mental map of how everything is organized on the site. This is what they use the next time they come to your website and need to find their way around it.

How it’s used.

Information architects know that if they keep their navigation simple (4-7 main sections, not too many subnavs) that it will be easier for users to instantly grasp how content is organized, and to form that mental map.

Discussion.

Part of the problem product designers grapple with is how to simplify very complex collections of data, products and navigation into an intuitive application or website.

Making something “intuitive” means making it as straightforward as possible. When it’s easier for the user to find their way around, they’ll like using the application. They’ll want to keep using it.

The problem is that users go to many websites and use many applications every day. They’re not very good at remembering how any single site works unless it’s something they use frequently. (Think about how hard it is to remember your password for a website you rarely visit.)

The mental map a user makes of your site is how they remember what to do each time they arrive on the website.

Can the user grasp the BIG PICTURE of your application?

The way a user deals with all this data bouncing around in their heads is by making a mental map of the website.

Essentially, they memorize the high-level organization of a site. Then the next time they come to that site, they remember (hopefully) that simple map and can more easily find their way around again.

Imagine making a mental map of this website.

Biases and assumptions

But mental maps can be tricky, as everyone carries around with them assumptions about how websites will work, or how different kinds of content should be organized. If your design goes against those assumptions it causes added confusion and makes it particularly hard for users to map your website.

“Mental maps are a way of combining our objective knowledge of places in addition to our subjective perceptions, or opinions…”

How we do it

One of the first things a user does when they arrive on a new site is to check out the top-level navigation for clues about what the main categories are and where they might want to go first. This quick look around helps form that mental map.

Think about the typical components of a website:

  • Home or landing page
  • Main content sections
  • Contact and About Us pages
  • If eCommerce, there’s a cart and checkout flow

With those fundamentals already in their minds, the user more easily understands your particular website. This makes it easy for them to create a mental map of your site.

Then, as they click around looking for their way to the goal, they won’t feel lost because at each step of the way they understand where they are in the map.

Objectives

  • Understand the psychological theory of mental maps
  • Learn how mental maps guide the user of your website
  • Practice seeing your own mental maps of applications and website

Tips & Tricks

  • Noticing how you make your own mental maps will reveal how other users do it too
  • Part of wayfinding is being able to make a map as you go
  • Simpler navigation makes map-making much easier

Resources

Your Assignment

Map a website.

Select a moderately complex website and see if you can map it out (without peeking at their site map). Hand sketch your mental map of how the website is organized.

  • Be sure to include everything in the site (check the footer and super header for sections, too).
  • Don’t worry about making this tidy, this is your mental map, not a formal site map
  • Think in terms of pages and sections — but do bullet list what is in each section
  • Be as detailed as possible without including any actual content. (e.g. “world news section” but don’t include content on each page.)

Deliverables

Create a pdf and share your map in the comments and/or on Dribbble and Twitter #100daysdesign.

Leave A Comment