EXPLORING NAVIGATION ON HIGHER ED WEBSITES

Holy crap this navigation is complicated.. I can't sleep, I can't eat, all I think about is navigation.

Senior UX Designer // Lullabot

@shadow4611

jen@lullabot.com

JEN WITKOWSKI

Deep and Complex Hierarchy

Physical and/or organizational relationship to how things are structured

How you treat navigation is important for the audience AND the content management team.

Road Block: Setting Expectations

Create and test rulesets for navigational behavior

Know your constraints & document what questions need to be answered.

Evaluate the pages, content and navigational hierarchy.

Explore and TEST different approaches.

Sometimes it’s okay to give your user more information if needed. 

 

What we learned through testing

Exposing subcategories in primary and secondary navigation only works if there isn’t too much cognitive overload.

 

What we learned through testing

Secondary navigation can be confusing if you don’t give users a way back

What we learned through testing

Audience Based VS Category Based Navigation

Would I find the course catalog under current students or prospective students?

- High school Senior // Prospective Student​

Audience Based Navigation

Overlapping Content

Audience Based Navigation

Majors / Minors

Prospective Students

Current Students

Use audience based navigation only if you have a unique audience segment that has enough content tailored specifically for them.

Audience Based Navigation

Faculty & Staff

Military

Donors

Alumni

Employment

Categories need to be clear to the user

ACADEMICS

PROGRAMS

DEPARTMENTS

MAJORS

SCHOOLS

EDUCATION

STUDENT SUCCESS

LIFE AT SO & SO COLLEGE

STUDENT LIFE

STUDENT EXPERIENCE

Category Based Navigation

There is no one solution fits all!

5a + 2c + x = Primary Navigation

Admissions
About Us
Academics
Athletics
Advancement

Community
Contact

Make it easy to navigate to and from sub sites

Road block: Sub sites

Use visual cues to help users navigate

Road block: Where am I?

Breadcrumbs

Breadcrumbs work well when

Used on a site with logical grouping or hierarchy

When they don't take up a ton of screen real estate..especially on mobile.

Follow the common pattern/placement of breadcrumbs

Users don't read. 

Make page/section/department titles prominent

Users need a quick way to reorient themselves.

Provide the main school logo and links to the home page on the site

Help lead the user through their journey

Road Block: Providing useful content

Design for the user path

Current Students: Have a goal, move fast to achieve that goal, miss information. Tend to bookmark. Address of the school? What's my professors email address? Where is the financial aid office?

Prospective Students: Spend more time exploring site, looking for information to make a decision. Do they offer my program? How much does it cost? How do I apply? What's the campus like?

Parents: Spend more time exploring site, looking for validation that it's the right school for their child. Can we afford it? How far away is it? Is it the right school for my child?

Quicklinks

Usability Testing

Road Block: Conflict and the Unknown

Tree Testing

Wireframes / Paper Prototypes

We can do it!

Questions

http://slides.com/shadow4611/deck-68

jen@lullabot.com

Exploring Navigational Hierarchy On Higher Ed Website

By shadow4611

Exploring Navigational Hierarchy On Higher Ed Website

  • 1,090