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