Hot answers tagged

44

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


43

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


29

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


24

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


23

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


21

My answer shows simularities with others posted here but I want to emphasize how important the right communication is. For example: 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 ...


17

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


11

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


9

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


9

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


8

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


8

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


7

You could just have one input field that handles city, state, or post code as is pretty common with these things.


7

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


6

What you are describing is a Combobox and has been in use for as long as I can think about GUIs. The concept has gained new momentum in the web with the further development of dynamic elements and web apps – most notably google's search box with it's suggestions-as-you-type. Chrome's "Omnibar" is, basically, the same thing: It's a text field you can type in ...


6

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.


5

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


5

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


5

Not commenting on the usability of this design pattern. The New Relic sign-up form uses this pattern. Example: Country drop-down/search field.


5

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?


4

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


4

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


4

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


4

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€"


4

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


4

The problem with scrolling is that scrolling to the bottom of the list box can be inconvenient, and takes the user's attention from the text box where the item to add is located. Basically, the content to add is above the list, but the command to add is below the list. To resolve this, use the first method you described, but have the "Add" button beside ...


3

I don't have something I would consider to be a "valid" answer, but I'd like to blame the letter L - in lowercase form, it could be an I, an L, or the number 1. edited to add: On the UX side - my mind wants to make this a more valid answer, so I'm going to add that the real underlying intent (potential) could be that codes are a serious pain as it is. To ...


3

While your form (the long one) is simple to understand and straightforward to use, it has a couple of problems: The amount of questions and the length of the form feel overwhelming. Have you measured how long it takes an actual user to fill out the form completely? The textboxes are large, and suggest by design that you expect long elaborate answers. The ...


3

The user should not be forced to enter a postcode. There are valid cases for wanting to find a nearby store but not knowing the postcode. For example: I'll be honest and admit that I can never recall the postcode for my office, even though I've been working there for 3 years. If I have to give my office postcode, I have to look at my business card. ...


3

For sure affect UX starting with a very simple reason: Optimizing space without usability drawbacks The size of the screen is limited , so when you give some space to a section you take it from another. If you set a 2 lines input, you may lose unnecessarily 1 line of space for the history for example. If you set a fixed 1 line input when users write 2 ...



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