Navigation for a Web Comic - Icons, or Thumbnails?

Question

The typical webcomic navigation is usually:

First | Previous | Next | Last 

Which is about how my comic's current navigation looks, give or take some wingding icons for good measure:

There's plenty to be said for not fixing what isn't broken, but that's about the only good thing I can really say about the current navigation approach -- at minimum, I want to make it easier for mobile users to "hit the target".

I'm also debating what images to use:

• emphasized icons (easier to understand, easier to program)
• thumbnails (more likely to encourage "impulse" clicks) -- the obvious issue with thumbnails is that the "First" thumbnail will never change for obvious reasons.
• Combining the two (a thumbnail masked with a large icon) is a possibility, but I think it's too much information and it'll look messy / confusing to do it that way.

Because the comic in question is an ongoing story, I want to stick with this overall navigation system, as opposed to just showing a carousel of random comic pages -- I'm open to the idea of including a "random" link in the center, though...

Answer 1

Web and mobile users have quite different constraints when navigating, so assuming you are trying to design a single system for both to use (leaving aside the question of whether that is the best approach) you need to come up with a compromised solution.

One way of doing this that I would try to start with, would be to keep the first | previous | next | last but make them easily tappable for mobile users. By easily tappable I mean put them on a button that is sufficiently large enough (typically at least 40 px high) so that a mobile user feels comfortable tapping it. This will be a small compromise for web users but a large improvement for mobile.

Of course, you should then test it and see if it's the best option for you.

Answer 2

The most important action for a user reading a particular comic is the ability to move through the pages / editions. As such, I would use a left / right swipe on the body of the panel to move back and forth - much like an eBook app. This will give you a large target size and doesn't force your users to change their grasp on the device as they read. I would expose the ability to move to the first / last issue in a toolbar - perhaps one that only appears when the user has recently touched the device, so it stays out of the way when reading and provides maximum estate for your content.

This is how ebook apps like Kindle for iOS and a few other comic apps do it, and they've a very similar usecase to your own.

Answer 3

I don't think you can come up easily with a comic website that is usable for both desktop and mobile.

The mobile users would want to see the strip on all the screen, and would probably tap it to reveal the controls hovering above and/or below (see the picture galleries in the smart phones). Adding the flicking behavior would be a great mechanism for sifting backward and forward, like Jimmy suggested.

The desktop users, on the other hand, would not even try to flick or tap the picture in order to reveal any controls. So I can't imagine a website responsive enough to be able to switch the controls in such a radical manner.

If you would insist on a single site for both platforms, then your current solution seems to be fine, as the links you have right now seem to fit into the width of a mobile screen. It would be a shame to waste any pixel there on thumbnails.

If you would opt for two sites, then the thumbnails idea sounds great for the desktop version. You could probably place the thumbnails behind the current strip, with only some margins peeking into view, so they give some taste of their content without taking too much space or attention. If this sounds interesting, but couldn't quite imagine what I mean, tell me, and I'll sketch it for you.