3

enter image description here Allowing a clear button to appear when the user begins typing characters in regular input is very welcome for the touchscreen enable app I'm building. The challenge is to "reset[ear](The clear button appear when the user begins typing characters for the next input item.)" any drop down items selection quickly, knowing that sometime, I'll have more than one drop down on a single row.

Any thoughts?

Improve this question
1

2 Answers 2

Reset to default
1

A clear button's purpose is to save the user time and effort when editing.

This makes sense when the user is editing a text field. Without it your options are to select and delete, or hit the delete key repetedly, which is without doubt annoying (especially on touch devices).

It makes less sense with a dropdown. Think about how a user will edit the dropdown in both scenarios:

  • Without a clear button: Click the down arrow and select a new item.
  • With a clear button: Click clear button to clear previous selection, click the down arrow, and select a new item.

Adding a clear button doesn't help the user perform the edit faster.

If your dropdown is allowing free text entry (i.e. type to search) then that is a different matter. In that case it needs to follow the same rules as a free text field, but only when the user has clicked / pressed the text field part of the dropdown.

  • User clicks on text part for "type to search": Clear button visible
  • User clicks on down arrow to view available options: Clear button hidden
  • User clicks on another control: Clear button hidden
Improve this answer
4
  • 2
    It would make sense if they wanted to reset to its default non selected state quickly without opening a select drop down and clicking the blank option, which isnt 100% obvious to some.
    – Brian Dillingham
    Commented May 7, 2014 at 16:24
  • It's true that the clear button is hidden until the input field is on focus. Why not hiding it until the drop down is open? Make sense to do it like that: cl.ly/image/2m1e1o0K3e2g
    – Benoit Meunier
    Commented May 7, 2014 at 16:45
  • That is how most drop downs reset, minus the visual aid within the drop down. It's an additional step for them to open the drop down to reset it, try my coded demo ux.stackexchange.com/a/56897/14120
    – Brian Dillingham
    Commented May 7, 2014 at 17:04
  • 1
    I've done a quick usability test (cl.ly/image/203G373B2225) based on your suffusion @Franchesca, I've found that people don't care too much about this clear button. Plus, they made tap on it by mistake also. You were right that it make less sens with a drop down.
    – Benoit Meunier
    Commented May 9, 2014 at 17:36
0

Coded Example:

I coded an example of an option of what you could do http://jsfiddle.net/7M5GV/4/

Explanation: You could convert the drop-down to a text display box with reset (x) button upon receiving a state change, toggling between drop-down and input field look alike. This would allow you to utilize your pre-existing methodology and design for the native text input fields, which would include the reset functionality. Upon tapping the reset button, the text display box would convert back to its original state: a drop-down to allow for a new selection.

enter image description here

Improve this answer
5
  • 1
    Oh. That's interesting. Saved a tap and easily to reset. I'll test 2 suggestions on a quick usability test this week. I'll get back to you Brian, be sure of that.
    – Benoit Meunier
    Commented May 7, 2014 at 17:25
  • Thanks, The code was done quickly so it may need to be tweaked.
    – Brian Dillingham
    Commented May 7, 2014 at 17:28
  • I've done a quick usability test (cl.ly/image/203G373B2225) but kept the drop down arrow as a visual cue for the user so he can understand that's still a drop down. The clear button is cool, but didn't add much value. Intriguing, no?
    – Benoit Meunier
    Commented May 9, 2014 at 17:38
  • Keeping the dropdown arrow may have skewed the results. The cluster of buttons may of caused the confusion, if the user wanted to cancel their selection they would of realized it was still a dropdown after tapping the X especially because it would of matched the rest of the reset elements, but you can't argue with test results =) I still think it is a pretty unique solution to a non typical inquiry.
    – Brian Dillingham
    Commented May 9, 2014 at 17:58
  • I updated the example with a circle x cancel button - jsfiddle.net/7M5GV/4
    – Brian Dillingham
    Commented May 9, 2014 at 18:11

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.