4

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?

1
  • 1
    A timeline should really be a time line to make it clear. Putting a horizontal line behind the circles, with little vertical stumps at each end and the start and end months/years beneath them would make it so much more obvious that it's a timeline. Maybe also adding the month and year beneath each post circle would help even more.
    – Dom
    Feb 28 '16 at 18:20
3

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

3
  • Ok---you win some, you lose some. Taking what you said into consideration, along with my own desire to not have to deal with (and write the code for) post categorization and linking, I've put together a system that randomly serves pages using a box design like (2) (3) (4) in your wireframe. Take a look. It sometimes serves the page you're already on (writing a checker is technically pretty easy but bleh) but other than that, it should work well. Thoughts? Feb 28 '16 at 7:00
  • @ResMar I took a look at your link in Firefox and it didn't show the new box design at all, so I closed Firefox and reopened it to the same link, and it didn't show it that time either. I had no problems viewing it in Chrome, but the last navigation image to the right keeps getting cropped halfway "off the screen". If there was something like an arrow, I could use it to move the last image to the left so I could see all of it. Firefox and Chrome are up-to-date to the latest versions.
    – karel
    Feb 28 '16 at 10:24
  • @ResMar That is a lot more usable! For us to critique something like that, you should ask a new question as this question has been answered Feb 28 '16 at 13:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.