Hot answers tagged

110

Number fields should not always be right-aligned It often makes sense to right-align numbers when they are being compared to other number fields (e.g. in financial statements). This can help comparability and scannability. However, sometimes number fields are unrelated or are mixed with text fields in a form, so left-alignment may promote better visual ...


65

Ironically, I could not get by myself what bgeigr meant, but almighty Google helped me out: So this captcha is quite easy for computers to guess, yet may be hard for humans. And bear in mind that Google is using an error model for common typos (letters replaced by those adjacent on the keyboard etc.) If you program your computer to only consider ...


64

Why would this be indecipherable to a computer? Since each word has the correct letters, but they are scrambled, it would seem very easy for me for a computer to crack the correct order of the letters by comparing it to known words. Which defeats the whole point of having this extra barrier. Secondly, how would this affect folks with dyslexia or other ...


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.


35

tl;dr A good captcha would need (ideally) to offer the best possible protection (difficult to get for a computer) and ease of use (easy to get for a human). But captchas aren't good at this and "typoCaptchas" doesn't seem to improve them. Questions can be rearrenged quite easily and then if the question is easy enough for people is probably easy enough for ...


35

This is not effective for keeping out a targeted attack by someone who uses a word list, such as /usr/share/dict/words, to solve your anagrams. A task like "unscramble the words in standard input, assuming the first and last letters are correct, given a word list file for the language" is probably so straightforward that it'd make a good puzzle for our Code ...


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 ...


29

Indicating the caps lock is on is a design pattern used for passwords. When the passwords are hidden and every character is only represented by a dot, users might not know they're typing capitals where they shouldn't. It's easy to overlook the fact your caps lock is on. For example, I'm used to typing with ten fingers. While typing my elbows are set quite ...


28

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 ...


24

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 ...


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 ...


19

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. ...


18

I couldn't believe that I could Macaulay uesdnatnrd what I was radioing: the phenomenal power of the human mind. According to a research team at Cambridge Nerviness, it doesn’t matter in what order the letters in a word are, the only iprmoatnt thing is that the first and slat letter be in the right pilau. The rest can be a tootle mess and you can still ...


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

Generally, align the left of the field, not the text content: There are several reasons for this: Better alignment. For boxed input elements (i.e. with outlines, borders or shadows), the vertical | edges of the box tend to attract the eye as it scans down the left column so the form will be perceived as more organized if that vertical line is ...


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 ...


9

No. I do not thing this is a good alternative to captchas. There are several goals that I think need to be achieved in order to be considered as an alternative. As Seamless As Possible When designing a captcha or a captcha alternative, it's very easy to lose sight of this goal. You have to keep in mind that we're purposely blocking users from doing what ...


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

Would Typocaptcha result in a better or worse user experience when compared to CAPTCHA? It doesn't really matter. CAPTCHAs are a hurdle for humans. Which is the intent...they are meant to be a hurdle...hopefully one a human can jump but not a computer. But regardless, hurdles are a bad user experience so if there's a way to do it without the hurdle, ...


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

This would be incredibly easy for a computer to determine. The thing is to not go head-to-head with a computer on its own turf. A hacker can go through millions of permutations per second. Any form of l337 speak or other variation would be decoded in a heartbeat. Literally. (If that). EDIT: A program will check to see if the word is in a dictionary. If not ...


7

I see two issues off the top of my head with right aligning text in an input type ="number" When the number selector is not visible it looks quite strange with the number awkwardly floating a bit off from the right. When there is a number already filled in, and you want to add more digits to it, you have to click in the small margin between the last ...


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

In any population, there will always be some outliers who don't do things the way most of the population does. Someone, surely, will fail to capitalize their name. What's the drawback, if users don't capitalize their own name? Do these names get used in a context where it might reflect poorly on the company? Do the names get used in legal documents or on ...


6

As with a lot of UX questions, the answer is 'it depends'. Numbers are right aligned because it makes them easier to compare. In an input field however, you may be entering numbers where it makes sense to compare, or you may not. Because you can't say with confidence, it makes more sense to left-align numbers by default than to right align.


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 ...



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