Design Trend: A New Generation of Image Sliders
Website sliders are one of those design elements that we don’t love but have learned to live with. Generally, they don’t provide a lot of click value, but clients seem to love them. A new design trend that features a new style of image sliders, fixes some of the functionality (and design boredom) issue of sliders. These aren’t your old-school image scrollers (and you won’t recreate these techniques with plugins). Here’s a look at different design elements and ways of using this design trend so you can find renewed inspiration next time a slider is part of a project. Connected Slides When you think of a website slider, the image of the inter-connected image and text blocks that move from left to right across the screen probably comes to mind. Sliders often fit inside of contained boxes with buttons to advance slides (some have auto-play). The modern spin on this technique is to pull “slides” out of the container and make them more visually interesting and interactive. Clarity does just this with a slider that moves left or right and includes images and text (with some nifty animation). Each slide features a portfolio project, which users can click to access. This slider works as you would expect but it has a much more visual presence. A key component of creating optimum understanding and usability for sliders is to include visual cues for scrolling. Most sliders include either left and right arrows to signify this action or timeline dots that show which slide you are on. Both styles can work with user click to advance interactions or in an auto-play situation. What’s most important is signaling that scrolling slides are possible (and encouraged). Because so many website visitors are prone to skipping over anything other than the slide they see, these cues can help keep them interested for longer and to potentially click through to other slides. Mini Navigation Most sliders are designed to provide multiple points of information and links to different parts of the website. So, it’s almost a no-brainer that sliders can serve as a type of navigation. The example above from Miravel is an example of a neat mini navigation slider with a couple of elements on the screen that users can advance left or right or click to change the large image for a menu item using that ingredient. It turns the slider element into a simple type of navigation with an almost gamification style that makes users keep clicking once they understand how the interaction works. Hover States What if your idea of a slider isn’t a slider at all? It’s a tool that gets at the same usability – highlighting multiple elements on one screen – without all the sliding. There are probably a few ways you can do it, but one that stands out is the use of hover states by Hvass & Hannibal, above. The faux-slider uses hover states that bring up images of projects when you bring the mouse to the name of the said project. It’s not a complicated aesthetic but provides a “slider” solution without all the scrolling and sliding. It’s intuitive and easy to use and understand. Sliders are becoming more commonplace for e-commerce and shopping websites. These sliders are structured in a visually different manner than hero header versions. » Read More
Like to keep reading?
This article first appeared on designshack.net. If you'd like to keep reading, follow the white rabbit.