The following content is translated and sorted by the Copycat team, only for learning, communication, design + collaboration, copycat is enough!

The use of sliders is nothing new. As a standard UI control, sliders are widely used in design to select a value or range of values. The main reason that sliders are useful in design is that they allow users to quickly browse through a range of options, providing a smooth user experience.

Although sliders are familiar design elements to designers, it is not always easy to use them properly. In this article, I will introduce some creative design concepts about sliders, hoping to deepen your understanding of sliders.

1. Visual output

A slider is a control whose main purpose is to help the user select a specific value (or range of values). Typically, the user gets information about the value by reading the label on the slider. At the same time, connecting visual data to the slider can also create a better user experience.

Why is visual output important?

A famous foreign designer once said, “A picture is worth A thousand words”. So, can a picture really say more than a thousand words? Let’s take a look.

Let’s take a look at a scenario where a user, who can be anyone, is well suited for visual design.

Users want to buy a house, how to make a choice in the house model? Visual output.

Users want to choose a suitable background color for their website, how to intuitively choose? Visual output.

How can users easily view and make choices when they are choosing different burgers? Visual output.

Users want to give feedback on a product or website, how to express? Visual output.

In some cases, it is difficult to make the right decision if the user cannot see the output in advance. On the Tylko website, visual output allows users to visualize the appearance of various types of furniture. It’s hard to get the user to understand the actual size of the object just by reading the measurements.

2. Help users make choices

While the slider can help the user view the various options, in some cases it is also important to direct the user to the result they want. In other words, a good user interface helps and guides users.

The slider guides the user to make an informed choice. This slider design has been adopted by many websites, and Airbnb is a prime example.

Airbnb paired the price range selection slider with a histogram that showed the price distribution and the average price per night. This chart is a good guide for users to make choices within the expected price range.

Similarly, on Trulia you can see excellent examples of sliders guiding users to make choices. Trulia’s housing affordability calculator uses a color-changing slider that visually informs users of their debt income through color and shape changes to guide them toward making the right choice and avoiding risk.

3. Allow users to set specific values

Many sliders have the same problem; it’s hard to slide the slider to select an exact value. There is no doubt that a slider will never replace a regular text entry field at this point. Here’s a tip: if your design requires precise input, it’s best to use both input fields and sliders.

SGS’s housing cost calculator provides two ways to set values, using sliders or entering values in related fields. If you want to use this design in your own product, make sure everything is synchronized: when the user uses the slider to change a value, the value in the input field is updated, and similarly, if the user enters a value, the slider should be updated.

4. Solve blind spots

Sliders in mobile applications often encounter blind spots. For example, when the finger overlays some important data (such as a selected value), it is easy to create blind spots. Virgil Pana solved this problem by creating the concept of fluid sliders so that users can see the values they select when interacting with the sliders.

5. Design of slider

Sliders are easy to design, especially now that many design tools have packaged components that can be dragged and dropped. In Mockplus, for example, you can choose from three slider styles: a slider, a horizontal slider, and a vertical slider. Especially for early product prototyping, this can be a good design statement.

The above is the slider design concept shared this time, I hope to help you, have better insights welcome to leave a message.

Nick Babich

Original link: uxplanet.org/4-creative-…

Related reading:

A quick guide to common design problems in creating forms

【 Dry goods 】 Five mobile terminal form design principles and case appreciation

[For beginners] the 12 best Introductory video tutorials for Sketch

The most comprehensive design resource website for designers