Tag Info

Hot answers tagged

90

Interestingly the w3 Spec for placeholder allows for either behavior: User agents should present this hint to the user, after having stripped line breaks from it, when the element's value is the empty string and/or the control is not focused (e.g. by displaying it inside a blank unfocused control and hiding it otherwise). But, functionally speaking, ...


43

I would side with having the placeholder text show as long as possible without getting in the way. The way it is done in Chrome is better, in my opinion. I've found ways to get around this on all browsers, however. What I've done in the past is remove the placeholder text on focus, but also re-displayed that text by making the label--which is almost ...


13

Removing it when you start typing is better Depending on how the focus was moved to the input field, the user may not necessarily see the placeholder text before it quickly disappears. Yes you might read it before you manually click in the field but perhaps not if you happened to tab into the field from the previous input. There's also the possibility ...


11

Normally the Backspace key takes you back a page as it is a keyboard shortcut for the Back button. When an input field is focused, the backspace only works within the input field. For many keyboard users (as in prefer the keyboard and avoid switching between keyboard and mouse) it therefore is a definite drawback when a site auto focuses an input field ...


9

The following is not an inherent drawback of setting the keyboard focus, but anyway an undesired effect which was caused by a combination of a focus-setting script and the behavior of certain browsers. At least in Firefox, setting the keyboard focus can steal the focus even from the UI element belonging to the browser itself such as the address bar. ...


8

The change to preserve placeholder text on focus in the recent Firefox 15 release confused me the first time I saw it. I actually thought the field was disabled. In Firefox, the default styling (text color) of placeholder vs. disabled is very similar, and unlike Chrome, there isn't a default focus highlight, so the main indication that the field is ...


7

Sadly making the focus box clearer is not common enough. It's not just about the browser, it's also about the monitor - the setting of brightness and contrast and the quality of the monitor. The border of the input box can be indistinguishable from white on cheaper/older flat panel monitors - often found in schools. Light blues in particular are a ...


7

If you are using gamification, user engagement is one of the core ideas of gamification. If implemented properly, there should be no separate need to capture the user's attention. That being said, that goal is quite hard to achieve. Without much details on the application I would suggest you look into the following: Make sure the content is real time. The ...


7

I think the answer to whether the destructive "delete" should be the default action or not highly depends on the context in which the dialog occurs. If the dialog was the result of an action that expresses a clear destructive intent, like for example clicking "empty trash", the user probably knows what the consequences are, so it makes most sense to have the ...


6

The simple answer is to remove distractions. A few apps do this with a 'zen' or 'distraction free' mode that lets you focus on the task at hand by taking away all the menus and options. To compare, here is a normal mode in Sublime Text 2: Here is a 'distraction free' mode:


6

User scenario: User starts to fill a form of 6 fields (all filled with placeholders) The user sees the placeholders each time before filling the field and understands what needs to be filled User clicks on the field and the focus makes the placeholder disappear. Before the user might start filling the field, the user gets a message or mail and gets ...


6

There is one situation where having an application steal focus is not only possible, it's desirable - when the application involved is designed to interrupt your flow. I wrote an application to do exactly this - it's one of the most popular downloads from my website, called OOSAlarm. OOS is a reference to "occupational overuse syndrome", also known as ...


5

Having seen someone trying to highlight some placeholder text for several minutes so that she could delete it and begin typing, I would say the delete on focus would be the most user friendly for all ranges of users. I think the colour of the placeholder text makes a difference here as it was the same colour as the input text, maybe a light grey or ...


5

We checked this recently in a user test and it showed clearly that the field has to be empty once a user clicked it. If the text stays in there they thought they were not able to change this field and did not even try typing. Another thing: I remember an UX consultant from Nielsen Norman reporting that if users see an empty field they tend to write ...


5

My view is prevent applications being 'arrogant' and demanding immediate attention. A well mannered application will wait it's time whilst somehow making you aware it's there. On macs this is done by bouncing the application icon. Too many applications assume they have your full and undivided attention when, increasingly, we're bouncing beween multiple ...


5

Two things are possible: Do not force the application to gain focus. Show the message and keep waiting till user switches to the application. Implement blinking notifications. This is OS dependent. May or may not be feasible in other OS but in Windows operating system, there is system tray (systray in short). Application can be coded in such a way that if ...


4

Reading GP89 answer having seen users try to highlight or even delete placeholder text does seem to strongly suggest removing placeholder on focus and not on start typing be better. Also as placeholder SHOULD be used as a minor help anyway I personally don't mind really. Problem seems to be though people are using it as a replacement for labels which ...


4

Which approach is better for users and why? The better approach is the default approach. The user has chosen a browser and is used to how that browser does what it does. Don't mess with the defaults.


4

I would say that if you're going to autofocus, you should also do some kind of clear visual 'notification' that the focus has moved there - change color, fade in a box, flash in an arrow, whatever. This way, the user isn't surprised when the cursor isn't where they expect it; rather, you show them where it should be, and they find it there.


4

To "do it right" you should use the new HTML5 form field attribute "autofocus" (which will work in all browsers supporting HTML5) and use a JS-based shim to progressively add backwards compatibility support to older browsers. Here's a jQuery snippet that will do the basic job perfectly, and a working demo. You could alter this if you wanted to attempt to ...


4

No, there aren't any valid reasons for an app stealing focus I can think of. If you ask me, the OS should be ultimately responsible for this by not allowing it (people coding apps in a misguided or malicious way will always exist).


2

Putting the focus into a text field when the page loads prevents the up/down arrows for scrolling the page, meaning that users have to click on the page to get it to scroll. However, if the page doesn't scroll, or has only one action that requires the text box, it can be very useful. My online banking site has several text boxes for entering specific ...


2

haha oh sounds like a fun client. Its not common practice to change a common practice, meaning the focus element is a standardized effect and function. You cannot change the focus element itself through HTML or CSS but you can apply CSS on focus. input:focus { background-color: red;} You can read more about it HERE So, again, its not common practice to ...


2

Autofocus is used on the LinkedIn Sign-in page, and this is what it looks like: I think it's quite clear, and wouldn't go to any special lengths beyond that. Maybe color the background, but that's sometimes used as a required field indication. Btw, I disagree with @Coldnorth - there's no real danger of "the user being surprised when the cursor isn't ...


2

If you only had one category I'd suggest using a call to action, such as saying "click here to add". However, having four of these won't look very good, so I would use dummy items instead, indicating that the region is meant to hold items, the kind of items you expect, and providing a way to edit the first item. Something like this:


2

As others have already mentioned, I must include the obligatory first answer of: avoid multi-level tabs if at all possible. They are extremely visually complex and are known to have problems. Just think about how if you have a selected tab in the middle of three rows, it either won't be connected to the content, or it will cause the other tab items to shift ...


2

Most of the answers here deal with forms with multiple inputs. There are certainly some scenarios (using an input for a search field) where there will only be one input on the page. In this eventuality I find it would be better to remove the placeholder on focus. The user knows what was just in there, and leaving it in place can confuse them.


2

The best approach is to avoid using placeholder text at all. There's plenty of evidence that many, many users won't understand that it is a placeholder (see the answer above for an example) and will become confused. It's a bad pattern and is completely unnecessary.


1

Auto-focus makes sense as its the primary action to be performed, but its not a requisite. An alternative to auto-focus, is to use other keyboard shortcuts, such as Tab to, first Tab auto-focus on the search box second Tab focus on first content box (hot) Enter to follow hyperlink third Tab focus on second content box (functions) Enter to follow ...


1

I could consider some placeholders like so: When any of the place holder is clicked, a textbox/autocompelte box becomes visible: My recommendation is that even if the list already contains 1 item, you keep the place holder so that the user can know here to click to add further items to the list. This way, you have provided affordance so that people know ...



Only top voted, non community-wiki answers of a minimum length are eligible