I spend a lot of time writing bespoke content management systems, a lot! I'm always trying to add some small, lightweight additions to make the user experience a little bit better. One means of doing this is by providing some better custom controls which give good user feedback and emulate similar offline controls.
One such control is a linear range control, catchy I know, which allows the user to select a value within a particular range with a given default value. An example of this may be selecting an ordering value for a blog post, Figure 1, ranging from say -100 to 100 with a default value of 0. Posts in our imaginary blog would be ordered by this ordering field ascending with 0 being the default value, resulting in posts being ordered automatically by date. Rather than using a plain text box to allow the user to enter the ordering value directly, subsequently giving us little or no control over the contents of the field until the form is submitted and no means to convey the nature of the field itself, we can create controls to manipulate the value ourselves.
Creating a custom control allows us to do a number of things that we just cannot do with a normal HTML form element:
- Display relevant information instead of certain values, such as showing Automatic at 0 in Figure 1
- Show when the upper and lower bounds are reached, for example at -100 and 100 as per our example
- Allow the user to reset the value to the default or previous setting
- Give some inkling into how the control should be used
onmousedown events we can manipulate the contents of our ordering field held behind the scenes. The addition of functions and some variables defining the bounds and the default value of our control then allows us to constrain the upper and lower limits, as we've seen, and to reset the field back to it's defaults. This gives us the following interaction:
- Previous/Next: update the value of the field to the previous or next value in the range
- Reset: reset the value to the pre-defined default value
- Display: allow us to display feedback or custom messages based on the value of the field we're manipulating
Code Snippit 1 contains a brief outline of how to create a mechanism for firing events when a button is held.
timeout is the time between calling button events, the
timeout_speedup modifier is used to recalculate the timeout on each event in order to increase the speed with which the event is fired. We set a lower limit,
timeout_limit, to ensure that the events aren't called too quickly to update the display and to give the user time to react once they near their desired value. A plot of time between ticks against ticks is shown in Graph 1, as you can see it quickly ramps up so
timeout is set to the lower limit, much like you would expect from a desktop application's click-and-hold button interaction.
Code Snippit 2 shows sample HTML used to create the next button with the appropriate
Code Snippit 2: Button calling the events when clicked
We use both
onmouseout to ensure that the click-and-hold behavior ceases when the user either releases the mouse button or moves the cursor off the control.
We can extend the custom control even further and give the user a less stringent method of inputting a value by allowing them to type directly into the field in the same manner as the original textbox, Figure 6.
Showing the bounds of the field is easy using the visual cues we've detailed in Figures 2 & 4. Other visual cues we can use are that of text/background colouring to show that an error occurred. We can also, using the same timeout methods used for the click-and-hold interaction, display useful messages to the user for a brief time before correcting their mistakes telling them what they did wrong and why their entries have been changed, Figure 7.
It's only an example!
Of course using such controls for an ordering field is only one example where we can extend upon HTML form elements with this simple control. This type of control mechanism could be used for any field that has a linear progression in values. Not only that, you could extend upon the functionality of this example to meet your specific requirements, by wrapping the bounds around to the start, having varying degrees of scale over numerous controls that are swapped in and out for fine or granular interaction or just have it toggle between two set values.
What's the point? There's so much we can do nowadays in terms of interaction, even on the web. Try to add a little bit of interactive zest to your HTML controls, it makes everyone's experience that little bit easier and better.
Thanks for reading,