Certain form field UI designs seem to guide users towards a trickier interaction while obfuscating the fact a field can still be interacted with in a normal way.

A subtle example of what I mean is the HTML5 number field which renders with click-able incrementers, but which also functions as a normal text box.

A more brash example would be this site: http://lite.launchlist.net/ - where the yes/no sliders are actually check-boxes that can just be clicked, though they look like they need sliding.

How much impact do designs like this have on the users ability to fill a form in, is this something that I should be concerned about when dealing with form building?

  • The default appearance of form field elements is greatly (if not entirely) influenced by the OS. The more foreign you make the element look, the more learning the user has to do to understand how they're able to interact with it.
    – cimmanon
    Sep 16, 2013 at 15:02
  • I know they render differently on mobile where the keyboard can reflect the input type in the case of the number field (a good thing) but in my second example a purposeful decision has been made by the designers / front end devs
    – Toni Leigh
    Sep 16, 2013 at 15:27
  • The HTML5 number field offers alternate ways to do the same thing, thus accommodating user preference. This can have efficiencies that outweigh any extra complexity.
    – uxzapper
    Sep 22, 2013 at 1:10
  • My problem isn't the extra way to do things but the obviousness of the easiest way to do something, ie clicking 100 times to get the value 100 because you didn't realise you could type it in !
    – Toni Leigh
    Sep 24, 2013 at 6:40

2 Answers 2


Usefulness of a form has greater influence than usability of a form.

Key questions are "do I need a form over here? If yes, what kind of form should I have?"

Usability of a form has greater influence than desirability of a form. Key questions are "What do I want from this form?"

Visual cues are related to usability and desirability of a form. Technically, having a switch slider (here 2 scale switch) is same logic with checkbox. Actually, It is a good example of extended-skeuomorphic version of a check-box.

However switch sliders can be also implement on 5 scale likert like (str. disagree - disagree - neutral - agree and disagree level).

Now let's keep both example in your mind and try to compare them.

Are you going to use slider kind of interface or another one if you need a 5 scale likert form? I think that Radio bottons are a better option in this case, right?

In short, Sliders can have different meanings in different situations which may make the things complicated for some users. Go with the flow if people want to see a switch slider, use it. Monkeys love bananas and we, humans like the MAYA (most advanced and yet acceptable).

Aesthetic part of any design solution will have a clear impact on design itself. Here you can read an article about general aesthetic rules. http://www.dagstuhl.de/Materials/Files/08/08292/08292.HekkertPaul.Paper.pdf

Good luck with your design.


You should definitely account for these things when designing a form.

You have stated yourself:

a trickier interaction while obfuscating the fact a field can still be interacted with in a normal way

If such is indeed the case, then there's a strong bad UX case to argue.

To answer your question directly, if usability is the prime concern (like the speed users take to fill a form) than you should pick the most appropriate pattern for each task. But sometimes other variables are accounted for in UX design, which may reduce (in some cases immediate) usability.

Form Follows Function

A leading design concept is "Form Follows Function". That is that the form is second to function, and that the function of designs should not be compromised by the form.

What may collide with this is the aesthetic-usability bias - more aesthetic designs appear more usable. This has been proven in empirical tests, although the research is still ongoing.

The key is to account to both principles when designing UX - prioritise function, and apply aesthetic design so long it does not reduce functionality.

On Switches

The switches on launchlist are an example of function follows form. To begin with, the component used is a switch (you toggle between options, rather than slide between them).

Switches are preferred over checkboxes when the choice is not clear-cut yes/no true/false. For instance, a choice such as high/medium will call for a switch.

One pain point in switches is that users often find it hard to determine which position means what. Lauchlist introduced colours to signify this (no colour for no, with colour for yes), but this brings about an accessibility issue with colour-blind people. So there's also a v indicator for the yes option. You could argue that this is a lot of design noise compared to the established checkbox pattern.

Another pain point, as you have mentioned, is that some users drag the handle (like on a switch) rather than just clicking. It is also unclear whether I click anywhere or just on the option I want. So there are various issues with this type solution.

Implemented properly, switches should have the options outside the switch area, with both options visible; but this again increases noise compared to a yes/no checkbox.

A Good Design is about the Best Compromise, not the Right Design

Sometimes well designed products incorporate these non-optimal patterns (pinterest is another example). The design committee may have chosen to prioritised form over functionality, and these sort of tradeoffs can sometimes be justified. There are examples of much worst design tradeoffs - like Google's decision in Gmail to only reveal the full set of tools on hover (noise/clarity tradeoff).

Usability may also be traded of with flexibility - you design more flexible products, but not without paying the reduced-usability price. Or as minimalism is associated with expensive brands, many of these brands compromise functionality in favour of minimalistic design.

This is just to say that design guidelines are guidelines, and not set in stone. So these type of decisions are slightly more complex than simple right/wrong answers.

  • How do we know if the confusion behind checkboxes is because of the checkbox element itself or because of poor labeling? If I'm looking at ordering a pizza online and there's a list of checkboxes (defaulted to off) for each topping offered, I have a hard time imagining a user would be confused as to how they're supposed to get the pizza they want.
    – cimmanon
    Sep 16, 2013 at 15:47
  • I'm not sure I understand the question - I haven't mentioned any confusion related to checkboxes; I'm referring in my answer to switches, like those on launchlist.
    – Izhaki
    Sep 16, 2013 at 15:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.