Hot answers tagged

109

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


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


64

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


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


30

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


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


27

@Mayo has, I think, the answer with the clearest affordance. But, if the discount field is going to be used frequently, an approach that has been proven to work with many professional and productivity application is the polymorphic input box. Applications like Microsoft Word, PowerPoint, Photoshop, AutoCAD, Illustrator, and others use these boxes ...


27

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


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


18

You could use a toggle switch ABSOLUTE | PERCENTAGE and have the user select which one he wants to use. For example: (don't mind the $ sign I did it quickly) and let the user select between the two options. This format works very well in use cases that I deal with. Buyers and bidders have to make numerous (100+) decisions in a day. It's easy to select ...


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


15

The term used for these format-constrained inputs is masked inputs or mask input. Here is a demo which includes a broad range of masks (date, time, phone number, etc). If you Google 'masked input' you will find plenty more examples. http://igorescobar.github.io/jQuery-Mask-Plugin/ And a screenshot for posterity in case the link dies in the future. It ...


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

If you are showing all fields at once, grouping them in a way to show relationships is important. Don't forget to disable items that are not relevant given the current selection, and be sure that your input fields have units (i.e., "years"). download bmml source – Wireframes created with Balsamiq Mockups You can compact the form a bit, if it is ...


9

How you choose to mark fields as required input is not a part of material design. You've already noticed that some applications choose to use the validation error "This field is required" after the fact while others choose to do it another way. Regardless of how you choose to indicate required fields be sure to give some sort of immediate feedback to the ...


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

Material design is silent on required fields. However, the Material Design documentation shows this interaction example for a required field: Additional suggestions: I am not a fan of the asterisk because it doesn't communicate 'required' clearly and can cause anxiety or frustration with users, especially if no tooltip or legend is provided. Material ...


7

Twitter FTW I've always thought Twitter has the best solution to this. It allows you to hammer out whatever you like, then edit it down to something that fits. It's extremely clear to the user.


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

Allow direct editing of the columns headings. Allow direct editing as much as possible. Make the initial table creation as quick and easy as possible but understand this initial creation will likely be modified many times. So to create a table requires 2 numbers, number of rows and number of columns. Then show the table and let the user work on a "live" ...


6

I recommend Gustav's option #2. You can give both, allow both to be editable, and have the counterpart update to reflect the change, either as they type, or upon the input field losing focus. This would also take care of the need to round. I could type 20% for the discount, and then tab to the absolute input field and round to the nearest dollar. In cases ...


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



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