Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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:

It's cropped, not cut off. I'm just doing it to show off the navigation in context.

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...

share|improve this question
    
A few extra notes: I'm asking just about the visual appearance -- a couple folks brought up the idea of swipe navigation, which is a secondary question. Also, I'd like to keep things to a single site, which I realize sacrifices a certain amount of making things perfect for either desktop or mobile. Part of the reason for making the site responsive to begin with is because I hate this idea of having two separate sites with separate functionality and separate content just that much. –  Rachel Keslensky Nov 26 '12 at 0:34
add comment

3 Answers

up vote 1 down vote accepted

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.

share|improve this answer
1  
If the OP goes for this solution, I'd suggest putting the buttons at the bottom of the UI for maximum reachability on mobile devices. –  Jimmy Breck-McKye Nov 25 '12 at 0:10
add comment

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.

share|improve this answer
    
I remember looking into the swipe functionality for previous/next navigation for mobile / tablet use -- can I do that to navigate between pages, though? Most of the examples I saw of this functionality so far seem inconclusive. I still need to include some kind of visual navigation, though, so this is more of a nice enhancement for touchscreen users rather than a complete solution. –  Rachel Keslensky Nov 23 '12 at 19:40
    
@RachelKeslensky - you might help users discover the swiping functions by exposing edges of the previous and next pages on the far left / far right sides of the page. I would probably not try and maintain the same interface for both desktop and mobile; providing 'buttons' that are large enough to be usable on touch would probably eat up too much screen estate, and you really want to maximize that for your comics - which are, after all, the real reason your users are visiting. –  Jimmy Breck-McKye Nov 23 '12 at 20:11
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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