Typical Appearance

Sliders across many different platforms each have a minimum(left or bottom) value and a maximum value(right or top). Usually, sliders can be horizontal, vertical, and radial. The main slider that we will be emphasizing on will be the horizontal slider. Graphically, the users are exposed with a bar, slider knob, and occasionally with tick marks. A slider is composed of a track and a thumb. The track is a bar (which can optionally show various styles of tick marks) representing the range of values that can be input. The thumb is a selector, which the user can position by either tapping the track or by scrubbing back and forth on it.

However, different platforms may have different designs to their sliders to follow their human interface guidelines. Underneath, a depiction of four sliders are shown: Mac OS X, Windows 8, and iOS 7 & iOS 8, and Windows 10.

Typical Behavior

The behavior of the slider is very basic. The user is given a choice to either slide left(min) or right(max). By doing so, the user can choose the proper setting they are looking for. The slider will not activate until the user clicks on the knob and then drags it to their desired setting. Most sliders across different platforms carry the same behavior. We will see how Mac OS X and Windows 10 specifically stands through out the study.

Events

State Diagrams

Components in Action

Variants

There are variants of sliders which perform similar tasks that users might consider. For sliders, users can adjust the value by choosing a specific preference from a slider and dragging the slider knob to it. We can achieve the same goal with drop down menus. With drop down menus the user is exposed with links. The user then can scroll through the links to choose the preferred link. Aside from the drop down menus, the spinner is probably the closest component to a slider. The spinner component allows you to hold the up and down keys to increase or decrease a value. The GIF provided underneath depicts how the spinner component works.

Most of Windows 10's slider are horizontal as you can see in the photo under Typical Appearance section on the very top and in the picutre below(left). However, Windows 10 does have vertical sliders for its volume mixer window(right). This helps the users to compare the volume of multiple differnt apps and adjust volume relative to each other.

Priority Metrics

All five of the usability metrics are equally important. One of the main and the highest priority metrics for this component is Learnability, users who are presented with sliders should not have a difficulty understanding how a slider should work. A great example of sliders that use the Learnability metric would be changing the volume on a video/music streaming interface. Users know that moving the slider horizontally or vertically will change the volume. In the same sense, Memorability should not be a problem because the sliders are mostly designed similarily which makes it easier for the users to know, or have it memorized, how it works in prior.

The usability metric that comes second would be Efficiency. Users should not expect any type of delays while using the slider. Sliders are designed in a way so that the user should not have any type of difficulty using it. Similarly, there should be very little Errors, if any, using the slider since it's a fairly simple concept to move the thumb back and forth or up and down.

Lastly, the lowest priority metric is Satisfaction for the slider. The slider is not a component that satisfies the user in a specific way. If sliders were to be used in a video game where the user would have to use a slider to win, then Satisfaction would have been either the first or second priority metric, but since it is usually a setting to adjust the volume or brightness it shouldn't be important to account for whether or not it is fun or satisfying.

Key Characteristics

Aurora Bedford in her article Slider Design: Rules of Thumb gives a great explanation on what makes a good component.

"Sliders work best when the specific value does not matter to the user, but an approximate value is good enough. Thus, Kayak may get away with using sliders for duration and arrival and departure hours, as most users will be fine with a departure time that is, say, midday, and won’t care to specify the exact moment of the departure. But whenever the exact value matters, sliders are not okay. For instance, if you had to enter quantities such as age or current weight or height within a form, a slider would not be appropriate." by Aurora Bedford

Simplicity

The only key characteristic that I think that makes a slider a good component would be simplicity. The typical appearance along with typical behavior should be as simple as possible. The OS X Human Interface Guidelines really hit on what makes a good/simple slider.

• Ensure that the slider moves as users expect.
• In general, use a directional thumb in a linear slider with tick marks.
• In general, use a round thumb in a linear slider without tick marks.
• In general, label at least the starting and ending values in a linear slider with tick marks.
• Display tick marks when it helps users understand their choices.

We can see the emphasis on simplicity by comparing older versions of sliders to the newer ones. The older ones tend to have a text descripition to indicate which side is lower and higher in terms of adjusting the value and tick lines to improve or help users with preciseness. Unlike these, the newer slider designs use simple images or icons to imply which side (either left or right or top to bottom) is less or greater.

Platform-Specific Instances

The evolution of graphical user interface for Mac OS X still continues. We see how specifically the component slider has changed through out many different versions of Mac OS X. By comparing Mac OS X Leopard and Mac OS X El Capitan, we can easily tell the differences between the two. As stated above in "Key Characteristics" the OS X Human Interface Guidelines show the latest guidelines of what type of sliders are expected in the latest version of Mac OS X. Underneath we see both Mac OS X Leopard(Left) and Mac OS X El Capitan sliders.(Right)

Studying the pictures, we see the differences between the two Mac OS X platforms. The change in appearance would be the slider knobs. In Leopard, the knobs look realistic which makes the user think he/she is sliding a knob horizontally just like he/she does in real life. However, the El Capitan knob is flat and simple looking. The second change in appearance would be the bar design and color. Leopard following the skeuomorphic design made its slider bars resemble real-world objects by making it darker and adding shadows to it. On the contrary, we have El Capitan's slider bar with one distinct color. Behaviorally, the sliders have not changed between these two platforms and there is no unique difference between the platforms. The only difference would be the typical appearance.

The older version of windows sliders(left) looks like it is modeled off of actual volume controlers used for sound production. It is more detailed and precise than the recent version. This lets the user to specify and customize the sound in great detail. For the newer one such as windows 7 sliders, you can only open up the volume mixer if you click on the mixer button. This means that there was lower demand in specifying volumes for differnt apps and how the company decided to simplify the sliders for volume control.

Credits & References

Slider Design: Rules of Thumb from Nielsen Norman Group
OS X Human Interface Guidelines: Slider
Microsoft Windows Dev Center: Slider
SuperUser: Windows 7 Volume Mixer