I would generally always opt for the simplest solution. In this case, one single field for the user to type into.
With split fields, such as the 4-box one you propose it adds in an extra cognitive load to the user.
"Do I need to manually jump to each field?"
"Will the system do it for me?"
"What if I hit tab myself but the form automatically jumped - will ...
This answer and this answer cover some of the points nicely but for some reason nobody is discussing auto-fill support.
Don't use 4 separate fields.
First, it's annoying, a lot of those reasons are covered in the other answers.
Also, a CC number isn't four 4-digit numbers, it's a single long number. Some credit cards don't even have groups of four, in ...
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 ...
MD guidelines aren't rules
The Google Design team wanted to provide a good selection of colors for app devs who can't think in color. It's a solid palette (the whole UI framework is great), but it doesn't have everything for every scenario. Don't be afraid to part with them.
Working off of your blue background, I quickly landed on an "alerting" color that ...
Actually, there could be a way to make this a tad bit less heavy.
In your situation, you're repeating words which are not absolutely necessary. Try something like this in addition to adding more breathing space + visual design to make it easier on the eye. The problem with the wireframing tool, we aren't able to choose different colors to make options ...
I have a personal hatred towards websites which clear content from the Search bar after I hit Search.
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 want ...
Add a checkbox labelled 'Limit number of queries'.
And only make the input field active if this checkbox is checked.
Alternatively if you must use the infinity icon, keep it simple and place it to the right of the '+' button, in the same style.
This would also adhere to the perception of hierarchy.
i.e. the left button decreases the value, and the right ...
The user is entering a number. That some values are invalid for technical reasons does not change the nature of the user interaction. I would go with an option that is the most natural to enter a number
Perhaps keep a regular number field, but when the user finishes their input, nudge the number to the closest valid option with a minor message to go with it?...
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 anagrams, ...
As someone who happens to use virtual credit cards, I'm strongly in favour of a single field. Every time I want to pay, there is a new card number generated for me by the banking app, and it's very tedious to have to copy-paste four times instead of one. I'm assuming here that your form won't fill the 4 fields if I paste 16 digits in the first one. Will it?
People read from left to right and from top to bottom. Chat applications normally place texts from top to bottom. The newest chats placed at the bottom. Placing the input at the bottom, therefore, is logical.
With this answer I didn't mean ALL people. For example, Arabic is read from right to left. But considering this websites' audience and the OPs ...
placeholder="Enter your next post here!">
<textarea name="postText" rows="3"
to put the input at the
it would make sense
from bottom to top,
read a chat window
In a world where we
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 ...
I think a horizontal slider with:
Graduations (tick marks) showing the possible values
A handle with a triangle end pointing to those tick marks
Snapping to the closest possible value when you drop the handle
A feedback of the actual value
Of course, the ability to manipulate with the keyboard
Optionally, the ability to use arrows or +/- to move to the next/...
I would progressively reveal details to a user as they need them. Consider what would your smart defaults would be? Are there assumptions that you can make that would get most users most of the way there? A couple you could consider:
Sunday and Saturday are typically off days for US workers. Is this true for you? If so, then let's go ahead and default them ...
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 ...
Speak like your customers
It's helpful to be more conversational — especially with older customers who tend to miss implied meaning in an interface. They aren't typically put off by a little extra text for the sake of clarity. This does not always hold true with younger markets.
Get into your customer's state of mind ...
"Reorder" means "place ...
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.
I would suggest a miniature progress wheel at the end of the input that only displays once a search is going on. I've seen this behavior before (I believe on user name boxes) and I believe that progress wheels are so clear that everyone will understand that something is going on.
Once a user types, hide it briefly (or grey out to reduce flicker) and then ...
In a previous project we went for something just like you thought of, just a bit more visually clean:
Why it's good:
Law of proximity (you clearly see the connection of form field & checkbox)
Clear visual feedback (change happens upon checking the box, grayed out form field is clearly disabled now)
Now I don't know if this is enough to increase the ...
The secret sauce of product design 🦄
You mentioned that the score and rank are determined independently. This sounds to me like a classic example of the feature no one asked for but everyone wanted.
The test designer must have a system in their mind for how score and rank relate — obtuse though it may seem. Dig deeper and see if there isn't a ...
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.
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 ...
This article by NNGroup actually covers this exact topic.
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 ...
The correct terminology is Greyout.
It indicates less importance, relevance or priority or a change of status such as something being disabled or inaccessible.
Definition by Oxford Dictionary:
Partial or incipient blackout experienced by a person subjected to strong accelerative forces, especially during flying; (more generally) momentary diminution of ...
In theory the correct answer is no upper limit for name lengths. Allow the user to enter whatever their name is using whatever characters are available to them so that you will never run into a circumstance where someone is prevented from entering their valid real name.
In practice that is not possible to implement.
There have to be limitations.
You'll often find that users will just fill in all fields on a form regardless of whether they're required or not. People don't really read instructions and don't want to risk encountering an issue if they haven't filled in any fields, so they'll often just fill in them all regardless. (This has been somewhat supported by testing by the Baymard Institute - ...
As a Stack Overflow / Stack Exchange employee, my guess is that this was a Google Forms doc put together for the specific purpose of gathering addresses this one time. We do this internally a lot to gather information. Using a product like Google Forms allows anyone to get something done without having to involve developers or designers.
I imagine the ...