Making a case for Home Details navigation restructure

HOW OUR NAVIGATION CURRENTLY WORKS

We have 9 navigation headings.

  • The navigation bar can only show
    2 to 4 headings at one time.

  • The longer headings (e.g. Local Legal Protections) take up almost half of the nav bar.

  • To see the rest of the headings, the user must move back and forth between the left and right chevrons.

 

The user cannot see all 9 headings at once.
Overview . Facts and features . Home value . Price and tax history . Monthly cost . Nearby schools . Similar homes . Neighborhood . Local Legal Protections

Can some of this content be consolidated?

 
 

All that moving around is frustrating

Moving back and forth between the chevrons is tiresome. When all you want to do is get to the good stuff, it’s a headache to try to recall the header that just flashed before you a second ago.

I suspect once the user realizes they can access everything on the page by scrolling up and down, they abandon the nav bar altogether. I’m curious to see heat maps!

4-WAY MOVEMENT INTERRUPTS THE FLOW

The nav heads move side to side, while the page content (and photos) scroll up and down. Switching between the two movements interrupts the buyer’s groove.

Even if the user has abandoned the nav, the headings still move back and forth while the user moves up and down through the content. Motion happening in a place and time that you’re not expecting is a distraction. What do eye-tracking results reveal?

JUST A HUNCH BASED ON MY REALTOR DAYS

The headings do not seem to correlate with the buyer’s needs.

UX BEST PRACTICES

Nine things to choose from is not great UX. Half that is ideal.

 

On the path to elegant navigation

RESTRUCTURE CONTENT INTO 5 SECTIONS

Divide content based on the user's needs, as determined by research and testing.

Within sections establish a clear hierarchy of content. Currently our heads and subheads are the same font, weight, color. The heads are slightly larger, but not enough to make a difference.

USE SMALL BUT MIGHTY WORDS

Name headings with short words that have proven meaning to buyers.

If the total characters of nav headings came in under 70, the headings would fit into the current design, obviating the need for chevrons.

 

With short but sweet headings and reorganized content, the nav fits within the 440 pix width—without invoking the carousel function.

 

STRENGTHEN CALLS TO ACTION

Strengthen CTAs by explaining why the user would want to take this action. What are they going to get out of it?

Present CTAs in a cohesive way, and in an order that makes sense to the buyer.

Gather data from heatmaps and conversion rates to determine which CTAs perform strongest.


Site designed from blank pages with Squarespace.
Artwork created with Illustrator, InDesign & Photoshop.
Screens designed with Figma.