Worked on a project with this exact problem. We needed a way for the admin staff to add attribute to products. Because attributes are used for search purposes, we need to ensure if that attribute type already exists, it should be selected instead of creating a brand new one.
We ended up using something akin to your first idea.
download bmml source – ...
I came up with another way to handle this scenario which is more clear in cases with arbitrary jumps.
1. Show links below the text input to quickly convey how the bidding system works by listing valid choices which can be chosen with a single click right from the start.
2. Update valid choices as the user types or clicks The user can either type 68 or ...
I recently was playing around with a new type of pager control that only uses numbers and doesn't require any localization (next, previous, last, first, all function without any words required in the UI)
I modified it slightly to work in your case here. The idea is to be really clear to the user up front that they can't just type anything they want because ...
The first idea failed field testing and variants failed usability testing
It sounds like we had the same idea as your option 1, and we implemented it. We were looking for a way to force users to search first without users realizing that we were forcing the search to occur. A variant of our first design actually tested OK with a small sample in usability-...
LukeW has covered this in his book Web Form Design. It's not a new book, but covers most of the common web form problems.
Each has an advantage/disadvantage:
Right-aligned are a bit slower to complete but require less vertical screen space. They do, however, have flexibility issues when the labels change widths. When localizing ...
Ariel is on the right track.
Uppercase letters are generally much more distinguishable from each other. L won't get mixed up with 1 or the lower case l, as Ariel mentioned.
If you look around, you can find a mixture of upper and lowercase, but from the user perspective, typing in a mixture can be cumbersome. So to make it more user friendly, keep it in one ...
My answer shows simularities with others posted here but I want to emphasize how important the right communication is.
Reconsider the used language to make the intentions clear. For example use create company to add some weight to the action or use the word new to emphasize the difference.
download bmml source – Wireframes created with ...
Why are the textboxes without boxes?
It is an interesting principal of material design and choice.
The reason Google went without the box was because it's analogical to writing on ruled paper. Material is all about having one constant "material" for your page so boxes would be constituted a different element and a different material.
Another reason is the ...
Jumping in with an answer because I've seen a really nice example of this in the wild. Hargreaves Lansdown is a UK financial institution, and here's how they do it:
The idea of giving context to a user hadn't occurred to me before I saw this. In practice, I find it far faster and easier to input a password when I can see how far the requested characters are ...
I'd say yes, absolutely.
When presented with a larger box, the visual implication is that the text ought to be longer and well thought-out.
Take this site we're on now as an example. We're meant to type out researched, thoughtful replies that may very well be several paragraphs long. The initial box is sized to fit several paragraphs to encourage this. ...
HSBC uses a combination of a username, password, and security key.
In this implementation, you first enter your username.
Next, you are prompted to enter your password and three random characters from your security key:
download bmml source – Wireframes created with Balsamiq Mockups
The benefit of this approach is that the password does not ...
If any service can validate what the n-th character of your password is, it means that they are storing your password in an insecure format. No service should ever know what your password is, they should only be able to say whether your password authenticates or not.
So you shouldn't ever ask for the n-th character of a password, and you shouldn't ever be ...
In HTML5, the input element supports the step attribute. Example: http://jsfiddle.net/yhffroa1/
However, not all browsers support it yet. IE in particular doesn't have spinner buttons for <input type="number">, and mobile browsers don't respect step at all.
There is also the pattern attribute that applies the :valid/:invalid pseudoclasses as ...
For editing values in a text field, it depends where you edit them, and what other fields are in its context:
if the layout stays data-table-like, and the cell simply becomes editable, then I agree with @Erisu's answer, to conform to excel-like solution.
if the text field is in a form, it is better to be consistent across fields, to prevent user having to ...
You should ask for the entire password, not just because it is more secure, but because users entire passwords by muscle memory, especially passwords made up of arbitrary characters, or defined by movements across the keyboard. This makes it hard for users to recall characters in specific positions.
Several reasons come to mind:
Indication of spelling: Usually, lowercase letters and mixed-case words are used for actual, existing words. When, in text, you mention a single letter, you generally write it in uppercase (which helps distinguish the indefinite article "a" from the letter "A" - though "I" in English is still a problem here). So this tells your ...
I find the approach you present quite clear. I would simply organise the values without adding oblique lines and use some opacity to differentiate the elements.
In the image one of the fields is hovered, so it's buttons edit field and edit comment appear, which would open a simple dialog:
Normally the edit icon wouldn't be necessary as it is the only ...
This has been widely discussed, you can take a look a this NNGroup related article, I will sum it up:
Drawbacks of using no labels
Disappearing placeholder text strains users’ short-term memory.
Without labels, users cannot check their work before submitting a form.
When error messages occur, people don’t know how to fix the problem.
Looking at Excel as an example, when a cell becomes a numeric value, the numbers are right aligned. When double clicking into the cell to edit, they maintain the content right aligned.
As people are accustom to Excel, it might be sound to follow the same flow?
You need to make it the length of the expected answer, in the same way that you would for an input box. This helps to guide the user towards the expected answer.
The standard configuration for a textbox is that it is resizable. If you don't want it resized, don't use a textarea. Jakob Nielsen advises against changing how standard elements work.
That is a very broad, but interesting question. To be honest, I'd simply follow an established set of design guidelines than try to re-invent the wheel. You also appear to be overthinking this a little bit. Of course text input needs to be styled accordingly (border, shadow, size, etc.) and inactive fields have to be displayed differently (e.g. grayed out). ...
The default textarea control already handles this.
When overflow occurs in a textarea control scrollbars appear above the
resize handle. However, If you had a single line textarea these scrollbars
wouldn't be viable.
As far as UX goes you should always show at least 2-3 lines of a textarea to differentiate it from a standard input box (which doesn't allow ...
I would limit the character limit, truncate the text and use a tooltip when the user hovers over the truncated text. This technique worked most of the time, users were able to tell quickly how to access to full text. Its intuitive and space efficient.
Edit: This would work on click for mobile devices
To make sure users only select and don't enter anything, you would need to remove entry form, because it's encouraging people to enter things into it.
Alternatively, I would
set current bid as default and only let users choose from values like "$445 (+$15), $460 (+$30), etc".
set current bid as a default and give user a list of options from +$10 (or ...
forcing focus to search could have negative usability implications towards screen readers and other accessibility tools. I would suggest against it - the only caveat being if a user navigates to the page from another link which is explicitly designed to "take the user to the search page" (like an "advanced search" link - assuming you can not provide the ...
I would like to add to the above some technical reasons:
In a form that has multiple fields, the page may for whatever reason load a bit later than when the user started to interact with fields, so when the page finally loads, you force cursor on search field while the user is typing in another field, you can imagine how frustrating that is, especially in ...
I personally am a fan of what Windows has been doing lately with numeric inputs: When you enter something invalid, it shows a "tooltip" type popup that tells you of the error.
Obviously, the message for your control would be something akin to "The bid must be a multiple of 20€"
How about a design like this?
download bmml source – Wireframes created with Balsamiq Mockups
You allow the user to enter any number he wants into the "ideal bid" textbox, but automatically display in the disabled "actual bid" textbox the nearest increment (rounding down so as not to make the user pay more than he intended).