UX for Slideshows


UX experts (Jakob Nielsen, Brad Frost) recommend a static, information-rich “hero image” over a slider. So if I’m going to present a slideshow anyway, I need the plugin to support these features:

* Slideshows (aka carousels) work best if they are mostly of images. Give the essence of each feature you wish to present.

* Keep the captions short or skip them – people don’t have time to read as the slides go by

* Make sure they don’t go too fast (transtion, duration)
– Auto-forwarding leads people through the information, but don’t make them read more than 3 words per second.  Fast auto-forward is good during slideshow development.

* Make sure the navigation is clear/obvious:
– Prev/Next arrows are better than dots that are too tiny
– Show where the visitor is within the “progression” – nav dots do this
– Make sure the nav dots are large enough, and widely spaced enough, to easily click on for small devices
– Does touch/swipe work?
– Make sure other nav is available for non-touch devices

* Pause the rotation on hover

* I like “fade” as the transition

* No more than five slides
– Most visitors will see only the first couple of slides before moving on

* Make sure auto-advance off is an option

* Consider where the caption goes within the image: that part of the image should have a smooth, solid, blurred effect that lets text stand out when placed over it. Also the color should allow the text color to contract. If the caption has a fixed location on each slide, do adjust all images accordingly.