Is the following navigation design readable?

I used D3 JavaScript library to create a time-based linear post navigator for my personal blog which departs significantly from the “traditional” way of linking posts together. I wanted to gather some feedback on whether or not this design works: and, more specifically, whether or not there are visual elements that I can add which I can use to reinforce the “obviousness” of the navigation bar.

Here it is unactivated:

enter image description here

The nodes activate when you hover over them:

enter image description here

My big question is: is this design functionally obvious?
and what can be done to make it more so?

Answer

There are some pretty big problems here.

I didn’t see the navigation even when looking for one. It took me three times of looking over the page to find it. If that’s true, there’s no way I’d see it when not looking for it. This is likely because it

  1. Is in an awkward location for a navigation – most are at the top. This is more so a “other post preview” type of functionality, not really a classical navigation. I think the position is fine if that’s your purpose.
  2. It’s really small height wise – it looks almost like a weird looking border, not something to be hovered.
  3. The colors are bland – it doesn’t attract my eye at all.

There’s no indication of what hovering on them does until a user does it. As such, users have no idea whether to hover it or not. It doesn’t look like anything I’m used to so I probably won’t usually try to hover it; I may by accident.

It’s not always easy to hover over individual circles. If you posted some right near each other, they overlap. I assume if you posted two at the same time they would be exactly over each other. That’s not very usable. This is made worse the more space between posts this is. So if you didn’t post for a while then posted the scale would be with a whole bunch clumped together then one off by itself because the location is based on time.

This would be terrible on mobile. It’d be so hard to touch the right circle especially when they’re overlapping. Plus they’d be blindly be going to another post because the preview only shows on hover. That’s unacceptable!

The arrows don’t do anything (and are too small in the first place). I assume that’s for if there are more posts to the left or right? I’m not sure. But since there’s no border around the container I don’t know where it starts or ends anyway so they could be related to something else entirely.


As such, here are some improvements:

Don’t show all of your other posts. Users don’t care to see a whole list of all posts, especially in dot form that gives them no information about the posts. Instead, show them relevant ones and leave an option to show more or to see a whole list.

Make it so overlap isn’t an issue. It’s a hassle to try to prevent – just avoid it in the first place.

Show certain posts preview at all times. You could do this in many ways, but I’m imagining showing one large across the whole width of the content and perhaps a few (3 or so) under it. That way users visibly see, “Hey, there’s another picture here linking to post” instead of just some random circles.

If you really wanted to show a lot of posts, you could add another smaller row and have them replace the main preview’s slot when clicked or hovered.

Here’s what I’m imagining:

enter image description here

Attribution
Source : Link , Question Author : Aleksey Bilogur , Answer Author : Zach Saucier

Leave a Comment