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.

I'm working on a responsive wireframe and the desktop version has a feature area rotator.

On the desktop site, it just has arrows and I worry that that will make navigating the rotator difficult on mobile. Is there a better alternative for how to handle such a content area when it is displayed on a smaller mobile screen?

share|improve this question
    
Hi Brian. I've slightly edited your question because just asking for examples isn't really constructive to a Q&A site because there's no such thing as a correct answer to such a question. However if you're looking for advice on how to display such items (I assume you refer to a carousel) on mobile sizes then that's a more suitable question to ask here. –  JonW Sep 18 '12 at 16:06
    
Sounds good to me. Also thanks, couldn't think of the term "carousel" for some reason. –  Bryan Robinson Sep 18 '12 at 16:09
add comment

2 Answers

You could replace the arrows with a simple swipe control, implemented via JS. You could hint that more pages are available by providing 'peeks' of the two extra pages outside the viewport (so it appears the far edges of the previous and next images are just within sight).

The big advantage of the swipe control is that it gives the user a large touch area to interact with; arrows won't give you that unless you make the next / prev buttons particularly large.

share|improve this answer
    
Oooh. I like that idea... not sure my devs will like it, but we're just starting to do responsive, so maybe they'll jump at the opportunity to do some gesture work :D –  Bryan Robinson Sep 18 '12 at 16:21
1  
There are already javascript libraries with swipe control on a slider, swipejs for instance. –  ghoppe Sep 18 '12 at 23:56
add comment

We recently implemented a responsive slider. We chose to have this work in an autoplay mode, which may or may not be best for you particular context.

In case more navigation is needed, arrows under the slider were used as additional navigation on this element.

For us this made sense because: - Our slides tend to have 4-5 words max, which allows us to calculate time per slide. - We have no more than 4 slides at a time. - This element is only on 2 site pages. - The benefit of swipe did not outweigh the additional code required.

We are currently testing location and size of the arrows for a more touch friendly interface. If I were implementing this from scratch, I would make the arrows much larger and move them further away from the slide in a mobile view then my attached image.

Hopefully some of the reason behind why we chose what we did can help you figure out what could work best in your situation.

you can see it in action here: beautylish.com

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.