Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I have a few input fields in my form with some default values (numbers). Please note, they are not just placeholders, i.e. they can be used as is, if they are not changed.

I was wondering if I should have a mechanism to clear the fields when a user clicks on the box to change them. I think it would look cool. But if I leave them as they are, it might just be more useful for the user in case he wants to alter only a few digits or copy the figure.

share|improve this question
1  
think also about what happens after the user has edited, gone away, then clicks again on that field ... –  ColinSharpe May 8 at 8:35
    
Thank you for the comment. For that I change the default value to the previous valid value. So if default value was 10, user filled in some junk, then it will get reset to 10. But if user made it 11 and then filled some junk, then value resets to 11. –  John May 8 at 8:43
    
Yes, it's called placeholder. I believe it's new to HTML5. –  trysis May 9 at 1:13
    
As someone who has had to deal with a form like that more often than I want to, I shall repeat the words I spoke to the man sitting opposite me at work, who designed that form: "Oh God, why would you do that?!" –  Niet the Dark Absol May 10 at 21:10
add comment

6 Answers 6

up vote 36 down vote accepted

You could have the input value selected when the user clicks on the input.
This way the user can just press backspace or start typing to change the value or copy the value instantly.

share|improve this answer
    
I think this makes sense. I will do that. Thank you for your help.. –  John May 8 at 8:41
1  
We have an internal a web app that does this and it's an annoying POLA violation. The standard way to accomplish this is to double or triple-click the field, and automatic highlighting interferes with that. (The web browser address bar seems to be an exception to this – there the standard is to highlight all text when selecting.) –  ntoskrnl May 8 at 19:07
8  
@ntoskrnl: please don't use abbreviations that are not universally known. I can guess what POLA stands for, but when you Google it, most results are very far removed from the UX world. –  Marjan Venema May 9 at 10:20
2  
@ntoskrnl Sorry, I would love to know what "POLA" stands for. Any hints? –  Uwe Keim May 10 at 13:26
1  
@UweKeim Sorry for not posting a link earlier (the five-minute grace period for editing ran out before I managed to edit my comment, and I didn't want to post another one just for that). It stands for the principle of least astonishment. I prefer Wikipedia to Google for acronyms by the way – this particular one is the first on the disambiguation page for "pola". –  ntoskrnl May 10 at 14:09
show 3 more comments

Don't do that, there are different approaches to filling out values, and for some it would be disruptive. For example if the user just wants to change the last digit...

A good, non-disruptive alternative would be a small "clear input" button.

A clear input button

share|improve this answer
10  
That's one beautiful text field. –  Ayesh K May 9 at 7:06
add comment

Pre-filling input elements with valid default values is a great idea. However, deleting those values when you click on the element is an extremely poor UX choice.

You are making the assumption that the only reason someone 'clicks' on an input element is to change the value. That's not so.

Entering a field via the keyboard triggers the same events as using a pointing device. Users who use the keyboard to navigate your form will enter all the fields in the form in sequence, therefore you would be presenting them with defaults and then yanking them away as they go through your form. Try to imagine what the user experience would be like.

Visually impaired users (running tools like JAWS) always use the keyboard to navigate the form. Also, some devices might not have a pointing device at all. They would never be able to take your defaults.

(I am optimistically assuming that the implementation is smart enough to track when the value is a default and delete it, and when the value is a user-entered value and leave it alone, then the idea is merely poor UX. If the code doesn't track the difference, it becomes nothing short of sabotage. Users who choose to use the keyboard (or have no choice but) would be virtually prevented from using your site.)

Even if you restrict yourself to using the mouse, as you yourself noted, there are other reasons to click on a form element other than to change the value, such as to copy it and paste it elsewhere.

There might be a limited case where this kind of interaction might be appropriate. For example, There might arguably be a situation where a specific field has sensitive information where you want to make sure the user re-enters the value every time, or something like that. It would have to be some extreme circumstance. Not on a general basis.

share|improve this answer
add comment

I totally agree with @Paul, but using jquery we can design such a way that we don't require to press the backspace (I personally hate that!).

So the idea is

  • Use a Placeholder as a value (placeholder="500")
  • If user doesn't focus on input, use placeholder as input value
  • If user focuses on input but inputs nothing use placeholder as input value
  • If user focuses and inputs a value use that value

Here is the Demo

share|improve this answer
1  
I don't follow: you don't have to press backspace to delete a selection — just start typing, or paste, and the selected text is replaced. –  deltab May 9 at 2:57
3  
Using a placeholder doesn't seem like a good idea for a default value: it can make the input look disabled/read-only, since it shows a plausible value in grey, and when the input's focused it's not possible to edit the apparent value (to make it 50, for instance) nor select it. Also the default value isn't stored in the value property so script is needed to make use of the placeholder. It'd be more consistent just to put the default value into the value attribute and let the browser handle it as normal. –  deltab May 9 at 3:11
    
value color can be changed, it is grey because I have applied a color to it by adding a class '.placeholder', so it can be changed to other colors. Also, if you consider @Mr. Beast Solution, it will also require some scripts and code behind. –  Gaurav May 9 at 5:29
    
@Gaurav: yes but it (the field, not the effect) will still work if you disable javascript. –  Arlaud Pierre May 9 at 12:47
    
No. That's a valid point! I agree. –  Gaurav May 9 at 12:58
add comment

Look at a web browser address bar. General behavior is that it comes prefilled with your default page address. Click anywhere in it to select the whole thing -- typing will replace everything. Or, you can click again to add to the end of the existing text or somewhere in the middle.

If you know that whatever is currently in the field is invalid input, it would be acceptable to erase it all on the first click (e.g., "Enter your age in years"). If it's potentially valid, but might be modified, I would leave the current text (either select the whole thing, or move to the end or to the position in the text).

share|improve this answer
    
"Click anywhere in it to select the whole thing -- typing will replace everything." -- Not on, at least, Firefox 29 on Ubuntu. –  That Brazilian Guy May 9 at 16:22
add comment

I would advice against automatically selecting the text in an input field, unless you have a very specific use case where users expect this behaviour. As user ntoskrnl notes, it is uncommon and unexpected behaviour; there are standard ways of selecting all text in a field most users tend to be familiar with, such as triple clicking or the OS's select all shortcut (e.g. Ctrl-A).

I have encountered the behaviour you suggest in the wild occasionally, and it tends to hinder my filling out of the form it is used on. Consider this scenario:

  1. I fill out a form, starting at the top, and enter some data in field 1, say bicyclr
  2. I tab to field 2, and enter some value
  3. I notice the typo in field 1, and Shift-Tab back to it
  4. Instinctively I hit backspace and enter e, to fix the typo, but instead of removing only the r at the end I clear out the whole field and end up with just e instead of bicycle

A bit contrived perhaps, but not too uncommon.

Another argument against automatically selecting all text is that on most GNU/Linux desktop environments, selecting text automatically places that text on a sort of clipboard (distinct from the common Ctrl-C/Ctrl-V clipboard), where the middle mouse button pastes its content. This is a very useful feature once you get used to it, because you can use it to quickly copy and paste text from one field to another using only the mouse. Automatically selecting text will overwrite the content of that clipboard.

Mr. Beast's suggestion is quite nice and unobtrusive, you could consider that. One thing I would avoid at all costs though; an on-line banking website for a certain Dutch bank used to have this ‘clever’ trick where hitting backspace actually cleared the whole field. The developer tried to help the user, but ended up creating a frustrating experience instead.

With text fields I wouldn't deviate from convention unless you have a solid use case.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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