Navigation to the rescue!

TIPS FOR EFFECTIVELY ADDRESSING MULTIPLE
AUDIENCES + LOTS OF CONTENT
NAVIGATION TO
THE RESCUE!

Ashley
McQuaid
Senior Information Architect
+ UX Designer
HELLO!

THE PROBLEM
● Our sites are enormous and contain huge amounts of content
● Our sites try to be everything to everyone, even if we don’t want them to be
● We have many types of visitors, all with their own needs
● Some needs overlap, some don’t, and some are directly contradictory

AGENDA
1. YIKES
how the problem surfaces
2. 3 ELEMENTS FOR EASY WAYFINDING
your toolkit for fixing the problem
3. PUT IT IN PRACTICE
your instruction manual

YIKES
part 1 of 3: how the problem surfaces

So… what do we do about this?

3 ELEMENTS FOR
EASY WAYFINDING
part 2 of 3: your toolkit for fixing the problem

Meet your new best friends.
Predictable navigation scheme
Remove guesswork for users and make it easy for them to
find — and revisit — what matters to them

Clean, coherent architecture
Your website’s interface can only do so much for your users
if your content is not well-organized behind the scenes

Clean, coherent architecture
if your content is not well-organized behind the scenes
Thoughtful page content
Provide alternative means of wayfinding by putting
related content in context

NAVIGATION SCHEME
ARCHITECTURE
PAGE CONTENT

Let’s return to the sidebar hijack for a moment.

Users tend to see this as
the structure of your site.

Content owners often see it
as content they should edit.

Here are three great options for consistent navigation patterns.

Using a traditional tree structure, a
sidebar is basically fool-proof.
Pros
Central Wyoming College

Cons
● Can get unwieldy in length and
make the interface appear dense
● Require a little extra thought for
mobile use
● Most tempting for content
owners to edit

Pros
● Give you back page width to let
your content shine
● Mobile friendly; works on a small
screen with no fuss
Touro University Nevada

Cons
● Not common but gaining
traction; you’ll need to be
comfortable with a slight
learning curve
● Still tempting to stick extra links
in at the bottom

Considerations
Requires thoughtful design and
development to keep it usable:
works best when “sticky,” with a set
maximum height and independent
scroll when opened on short screens

Pros
● Like collapsed menus, gives you
back the full page width
● Essentially impossible to fill with
excess content
Flagler College

Cons
● Uncommon; best for audiences
who are internet savvy or
comfortable with change
● Requires thoughtful mobile
treatment
Flagler College

if your content is not well-organized behind the scenes.

Good sitemaps will
Create structure
Sitemaps define the underlying organization of your site,
its hierarchy, and where your content “lives”

Good sitemaps will
Create structure
Confirm content
They ensure that you have everything you need, while
helping you avoid duplicating or missing content

Good sitemaps will
Create structure
Confirm content
They ensure that you have everything you need, while
helping you avoid duplicating or missing content
Keep your team synced
Shared sitemaps provide a collective understanding of
your site’s overall structure and what needs to be created

Good sitemaps will not
Define your institution
Grouping content by theme, rather than by internal
structure, makes your site easier to explore

Decide who is most important
Structure is about making sure that users get what they
need, and making sure you stay organized

Decide who is most important
Structure is about making sure that users get what they
need, and making sure you stay organized
Visualize the user’s entire experience
Your sitemap is not your content itself—and content can
help users navigate, too

North Shore Community College
add short + sweet contextual headings

● Make use of headings to break up your pages and
make them faster to scan
● Label links with short + sweet titles that provide
context and relay their purpose
DO
add short +
sweet
contextual
headings

use inline links + highlight the unexpected

● Link to other places in your site if they already
contain what you need
● Take advantage of creative ways to show the breadth
of what your organization offers
DO
use inline links
+ highlight the
unexpected

provide content to orient “accidental” visitors
Flagler College

● Provide alternatives for “accidental” page visitors,
using thoughtful headings that allow users to quickly
scan for relevance
DO
provide
content to
orient
“accidental”
visitors

● Add short + sweet contextual headings
● Use inline links + highlight the unexpected
● Provide content to orient “accidental” visitors
DO

● Try to solve everything for everyone in the first
hundred pixels — prioritize the page’s main goal
DON’T

● Fall into the “fewest clicks” trap and over-stuff pages
— focus on productive clicks over fewer clicks
DON’T

● Make heavy use of accordions and tabs — these force
users to read and think more
DON’T

● Make heavy use of accordions and tabs — these force
users to read and think more
● Create link list pages of “Resources,” “Other Links,”
and similar — these are hard to scan, and look bad to
search engines
DON’T

Let’s apply this great
stuff to your website.

PUTTING IT IN
PRACTICE
part 3 of 3: your instruction manual

Meet Touro University Nevada
CASE STUDY

Discovery IA/UX Content Strategy Design DevelopmentContent Planning

SET PRIORITIES
EVALUATE
REORGANIZE
THE QUICK FIX

Let’s get your priorities in order.

Which audiences need to visit your site?
What similarities do they share? What differences? Which
is the primary audience?

What do your audiences want to know?

What do your audiences want to know?
What do you want them to know?
and do they know it already?

EXTERNAL
Prospective DO + medical students
Prospective education students
Community members + patients
Donors + business leaders
Medical community
INTERNAL
Current students
Faculty
Staff
Alumni
Audiences
CASE STUDY

Aspirations
● Create a sense of place (why do I want to study in Vegas anyway?)
● Communicate TUN’s personality, offerings, and emotional intelligence
● Highlight community participation and service-oriented education
● Attract larger donors interested in ongoing partnerships
CASE STUDY

Comb through your site — the whole thing if you can, or just a few
pages at a time. Skim the content and pay attention to navigation.
What do you notice?

● How does your navigation scheme behave?
● Is the scheme consistent? If not, where does it break?
● Are any sections particularly troublesome?
● Do you see anything you already saw elsewhere?
● Do you see things you could split apart or archive?
● How are sections of your site grouped and labeled?
● Who does your site appear to serve first?
Handy
Questions

Look for a tool that lets you:
● Quickly add items (mind map tools > drawing tools)
● Attach notes to pages
● Control version history
● Easily share your work with others
Take Good
Notes

Let’s do this.
1. Hide your notes
2. Pick your top 3-5 key priorities and rough out your main categories
3. Pull your notes back out and outline everything else

Let’s do this.
1. Hide your notes

Let’s do this.
1. Hide your notes
2. Pick your top 3-5 key priorities and rough out your main categories

● Consolidated program content
● Consolidated admissions content
● A strong sense of place bolstered with content about life in the area
● Community service content that speaks simultaneously to prospectives,
patients, community members, and donors
● Internal content that’s out of the way but easily searched
CASE STUDY
Key Priorities

Think thematically
● Users will be able to get around more easily, using terminology and
associations familiar to them
● Your site will be more flexible and will grow more easily over time
● You will avoid drastic reorganization when offices are restructured or new
services are added

Create single sources of truth
● Users don’t expect to visit only one department at a time, so you don’t need
one section to be all things to all people
● If information is available in one place on your site, it should not be repeated
elsewhere
● This improves search results for individual users and ensures they are more
likely to be directed to the most relevant place

Remember that this is an iterative process.
Keep your work flexible. Edit as you discover new things.

Internal content
● As you work, collect and set aside pages of interest only to INTERNAL
audiences, regardless of topic
● Towards the end, decide which internal pages make sense to put back in
your main structure, and which might need their own category
● Remember that a learning curve is more acceptable to internal
audiences than it is to external audiences

Reintroduce audiences *
● Avoid using audiences as an organizational method for offices (or the site at
large), because this often leads to duplication
● Audience landing pages can act as valuable “traffic cops” — use them to
provide overviews for common concerns and links for popular content
* within reason

● Administration section contains internal offices
● Other main categories link here when necessary
● Audience-specific pages link to a combination of
administrative content and external content
● These links are styled differently from the rest of the
main menu on the live site; this sets them aside and
reduces the visual priority for first-time visitors
CASE STUDY

Some improvements are better than none!

Each of these ideas can make an immediate difference,
and get you in better shape for a bigger project later.
● Go one theme at a time (reorganize financial content, then academic, etc)

● Find low-hanging fruit like Resources + FAQ pages to split up or refresh

● Find amenable departments and reorganize on an office-by-office basis

● Find amenable departments and reorganize on an office-by-office basis
● Create curated marketing landing pages for key topics to give users
recognizable places to browse from and revisit

Hang out with your new
best friends.
● Navigation schemes
● Architecture
● Page content
You’ll do great things
together.
● Set priorities
● Evaluate
● Reorganize

Navigation to the rescue!

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to Navigation to the rescue!

Similar to Navigation to the rescue! (20)

Recently uploaded

Recently uploaded (20)

Navigation to the rescue!