Hot answers tagged

87

I have a personal hatred towards websites which clear content from the Search bar after I hit Search. Here's why: It is completely unnecessary to clear the content out. There are multiple chances that the user might want to add something to that query. For example, if I search for American Psycho and I find that it's a movie with amazing ratings and I ...


60

If you clear the box, you're taking away control from the user. While you may seem like you're doing them a favor, you're robbing them of context for what they just typed in. When you type things into a command prompt, the previous command you typed is still there. Although you state that it's a long ID that the user probably just pasted in have you ...


47

I have always known this as Auto Tab or (Auto tab input fields). As a matter of fact a search for Auto Tab gives me different ways of implementation of this element, including: jQuery Autotab Demo Cut & Paste Auto tab (form field) script Auto Tab HTML Input Fields And even Microsoft dev calls it that way.


31

This article by NNGroup actually covers this exact topic. http://www.nngroup.com/articles/form-design-placeholders/ To summarize: WORST: Using a placeholder that says "Password" with no additional label is the worst way to go about it, there are many reasons presented in the article as to why but primarily Disappearing placeholder text strains ...


31

From my experience, the answer is... It depends! I work for a recipe site and we launched a new site last year which had a whole redesign. We used to have a smaller search box and users interacted with it completely differently to a larger one. Looking at the data that was captured on peoples searching terms, the big change was that when they had a smaller ...


25

When you grey out a control, you are communicating "something is currently disabled, but may become available if you do something else on the page". The only down-side of this approach is the disabled controls will occupy space on the page, so if those disabled controls are rarely used and/or there are many of them, it could be adding unnecessary visual ...


20

To supplement Matt's answer… Are there other controls on the screen? Research shows users have more confidence in a product—they believe the product is more accurate—when its visual elements are nicely aligned. If there are multiple controls, or text boxes, sizing each one to fit its anticipated content (below, left) would be a poor choice. Look at the ...


20

Input Mask This would be an example of an input mask implementation An input mask refers to a string expression, defined by a developer, that governs what a user is allowed to enter in as input in a text box Some frequent uses of input masks include entry of telephone numbers, ZIP or postal codes, times and dates. https://en.wikipedia.org/wiki/...


19

Asterisks (*): Pro: it doesn't take up much space Con: it doesn't mean anything "Required": Con: it takes up more space Pro: it tells you exactly what it reads as meaning The "norm" was never a red asterisks. While many early web pages used an asterisks, it wasn't necessarily red and always required a key someone near the top of the form telling you ...


14

I've known it as auto-tab, but avoid using these if you can! They have bad UX -- if the user makes a mistake in the last character of an input, they can't just hit delete (the expected functionality for 99.9% of other inputs). They'll have to use the mouse or shift+tab to go back to the other inputs. It also ruins the ability to copy/paste. Somebody just ...


14

Why have a separate text box for each field if the user can only input a value once? Just have a single text box to hold the value of whatever option they select: download bmml source – Wireframes created with Balsamiq Mockups The label of the box can change based on which option they select. You can either hide this field until they've ...


12

You have a few mixed concepts here. Fitts' law basically means that the wider the field is, the easier it is to hit, so option 3 would be the winner in that regard. You're rightly trying to design the field length to reflect the expected entry so option 1 would win in that case. You say you “assume that the amount people will put in is under 1 billion Euro”....


9

Short answer: do not select any radio button. Leave them all unselected. However: This is a misuse of radio button control where (by convention) there always should be one (and only one) selected item. Unselecting all items is not noisy (IMO) and recall same pattern used in other controls (for example combo boxes) where no selection means multiple ...


8

Showing disabled input fields can be useful because it indicates to the user that there are additional options or that the information can be edited in different circumstances. If there is a benefit in your particular application for the user to know that this information is editable in a certain scenario (the correct role), then you could show them as ...


7

The 3 state checkbox has always been confusing. Think of it as a UI anti-pattern. Much clearer is 3 radio buttons labelled with plain language. download bmml source – Wireframes created with Balsamiq Mockups Another way is to use three radio buttons (true/false/null) - but it's look like overkill for simple parameter. I disagree. It's a ...


7

Keep the labels above. Users have an easier time scanning forms when labels and their fields are at a constant start position. Positioning to the right means you'll either have fields jumping all over or you'll waste a lot of column space on the majority of labels. If your examples are representative of the actual length, consider whether you might be ...


6

Efficiency Increasing efficiency (the time it takes to perform a task) is one of the key aims of UX. This becomes particularly important in areas of the system that are subject to repeated usage (and yours is a classic case). Winning the lottery once is better than not winning at all What you suggest is already done by some systems that were designed by ...


6

Just use a standard text field. Entering a postcode is not as hard as it may seem. You can use regex for whitespace separation and auto numeric and character switching. i.e. force the mobile keypad to switch between numbers and characters when postcode is typed since you know what pattern it could be. Auto-suggestion would be the best option here. Canadian ...


6

For controls used rarely, explicit is better than implicit If this widget were being used 100x a day, the answer might be an expert interface where the user can enter values like 10h8m, 1d23h5m etc. But, this is not your use case. You have stated that this widget will be used very rarely. In this case, it's much more important to make the interface ...


6

"Repeat this event until" and then have a date selector. edit: date.


6

Sometimes consistency for the sake of consistency is a bad thing. Consistency is a UX principal only in the sense it helps the user understand info on the screen. In this example, it's leading to clutter as oppose to assisting the user. A placeholder should act as a prompt to help users provide the correct info/format into the field. By its nature, a ...


6

Primary factors 1. Average length of expected search terms The visible character capacity of the input will influence behavior. In my tests, users will instinctively limit their entry to the available length. This is true even though the input will support typing beyond the field boundary. I've tested slight variations in width where a known norm was ...


6

I can see both sides of those designs and I don't think that either is "wrong" but I would always recommend keeping things simple for the user. In this instance, that would mean having the boxes visible but greyed out. This accomplishes two things: The user is aware from the beginning that they will need to prove additional text. Were the box hidden, ...


5

MS Outlook could be of use in this situation:


5

Aside from the aesthetic and usability improvements, one of the reason (if not most important) for the change is accessibility issues. The screen reader, doesn’t read (hardly) any typographical symbols in its default configuration. Symbols like asterisks and plus symbols are essentially useless to handicapped or low vision users. Designers usually have to ...


5

When the icons exactly (or as near possible) confer the ideas and concepts of a form's box, they are greatly beneficial to rapidity of viewer comprehension. Good/Great icons provide another more subjective quality, that of endearment and apparent consideration (demonstrated empathy) of and to the time/rate of the user's digestion and ease of familiarity ...


5

The best? Only testing will tell. Going to both your examples, the second one is way better from an user point of view. See both dropdowns: one has a list of TLD and nothing else. The other, a list of TLD PLUS the price. And in the domain business, this is a huge difference since the newer TLD use to be way more expensive than the classic original TLD. ...


4

Trying to apply blanket "best practices" to this question may have you going down a rabbit hole of half baked answers. Before your questions can be answered, requirements around the specific use case must be gathered. For example: How do you best indicate to users that different units are supported? How do you show which units are supported? Showing ...


4

I think its a hard question to form one answer to. Pure theoretically, I'd suggest not to rely on the user to know these abbreviatons like h,d,s,... or at least try to lower some cognitive load by explaining the use cleary (as Don Norman likes to call it, put the knowledge in the world instead of in the head). From the moment you introduce a syntax (like +/...


4

1. Pre-filling a text input increases cognitive load The function of a text input is to get text from a user. We need to tell a user what kind of text we are expecting and this can be done using labels, placeholders, inline hints, etc. A label directly above the text input is the best way to communicate what a user should input. As you have already noted,...



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