Hot answers tagged

71

I'd go with a color that'll always retain stark contrast. I'd also avoid venturing too far outside of the styles that that users are generally familiar with. Because you're working in an atypical style, if you deviate and use unfamiliar elements you may risk confusing a percentage of your users. Here's what i think i'd recommend.


63

I would go with something in the shade of the background, but have a more red text in the alert. You can add a border in the shade of the text to make it stand out as an error more, as well.


43

A bright yellow background with black text would work well. Fits the colour scheme of a warning sign.


41

Short Answer Ask for the name after asking for the credit card number, adopting either idea 2 or 3. Long Answer I recently did some admittedly basic research into this question. The reason for this research was that I had noticed the incidence of online credit card forms not requiring the "name on card" field seemed to be on the increase. This pattern ...


22

The standard color for error messages is red, see this question : One important point to understand is that using conventional colors for errors is important because they make the errors more noticeable. User being annoyed by the color of error message is lot less of a problem than user not being able to complete the form because they didn't ...


18

You might try adding a white border, then play with the background color. The one color that communicates 'something is wrong' louder than red is the color of death, black.


17

That's an accessibility nightmare! Try reversing your error message styles: Red text on a white background.


13

Option 3 is the obvious choice. Both other options involve including an input that is not required for the majority of interactions. (Assuming most cards meet the definition "not Amex") Including unnecessary inputs breaks (the updated and revised version of) Steve Krug's first law of usability: Don't make users think or act unnecessarily It ...


12

There're three cases that you have to be able to identify: yes / no / not-specified (i.e., user did not interact with this element). But if you pre-select yes or no then you won't be able to distinguish it from the not-specified case as you pointed. I'd suggest to use radio buttons or a drop-down (as both options are mutually exclusive) without ...


11

Moonmeth shows some valid points about expectancy why you should ask for the name after the number Rule of least surprise: I would not hide the name-field completely and only show it when the number matches, instead I would always show the name field at second position. But when you enter a complete Number which is not american express, I would disable the ...


9

Building off of several other answers: Never only rely on color. Adding an icon or text or texture not only helps colorblind people, but also makes things a bit easier for regular-seeing people. Using a dark grey or black bar gives a strong contrast with the background. It's also color neutral so you can put other kinds/colors of notifications in those ...


5

Option B Empowers the User, Option A makes work for them Summing up the positives and negatives: Option A offers either the positive experience of seeing a correctly auto-filled form, or the negative experience of seeing something that is incorrect and having to undo it to redo it correctly. Option B offers either the neutral experience of simply filling ...


4

Yes. It is a pain and iOS is doing it wrong. You should never impose your rules on user. They won't like you and this is the fact that most Android user hate iOS. Sites should definitely allow case sensitive usernames, but you should never assume that all users will have their first character capital. Edit: Here's a good workaround to avoid that - it's ...


4

I would use tabs. UI guidelines for using tabs stipulate that they present different views of the same information. so put the type and model search on the first tab, and the search by name search on the second tab. (Side note: Have a look at the Auto Trader website and the way they implement searches for different types of cars - I found it very easy and ...


4

In this use case it appears to be the users job to consider every case. Then visibility is a reminder and a positive. Accordions / tab panels would mean extra clicks and potentially hide reminders I'm going to assume that that UI is well presented visually. Font size, spacing, etc. Also assume that keyboard control is optimal. Then few things can do A ...


4

TLDR: No, it won't hurt user experience. The situation that a person needs to reset the entire form, is actually quite rare. The situation in which a person accidentally presses reset, when looking for a confirmation button instead, happens pretty often though. When this happens, users get annoyed. It can even lead to them not finishing your form, because ...


3

For the first question : How do you make it obvious to the user that a text area is blank in the series of text areas ? I would do something like this, a faded tool tip/label inside the text area that is on display by default for an 'empty' state. This is popular in forms. As you type, key in, that messages goes away. When made empty again, its displayed. ...


3

Provide context No matter what you do, it's no good idea to leave empty elements just like that, trusting that users will understand the affordance. Even if they do (and any test will show you form elements are rarely understood by default by 100% of people), you will create another set of questions for the user: why are these elements empty? Did they ...


3

It's not capitalizing form fields but automatically running sentence case. If you break text with a '.' or start a piece of text in a new field it will automatically capitalize the next letter as it guesses that you've ended one sentence and started the next. In cases where you don't leave a space after the '.' it assumes you're typing a web address and ...


3

The question actually provided a lot of the alternate options available, but for clarity I thought it would be good to summarize some of the answers provided: Find a complementary colour to use that will stand out - there are plenty of tools for this, and you can also consult the branding guidelines as a secondary check; this could be for the UI, the font ...


3

I agree with the comments above! Generally, users are least bothered about this field; they will pick any random option. As Michael tells the story, he was working for a business that was having a big sale one Saturday. Prior to the sale they did a lot of advertising in the local market and wanted to determine which marketing project paid off. To do that ...


3

For your case would like to recommend you for the connection results, errors, warnings and all of these stuff inside a hidden message then appear like this: For the inputs try to put validation for username (minlength, maxlength, etc..) and password (minlength, maxlength, encrypted). Connect button make it little bit active like either of these two images: ...


2

It depends on where this solution will be used. In western culture Green and Red has implied meaning which is very different to Chinese culture. http://translation-blog.multilizer.com/color-localization-infographics/ As others have commented, you should not rely on colour alone to convey meaning, i.e. couple the colour with an icon and the copy should ...


2

You can combine options 2 and 3, to link the scroll position and which tab appears selected. As in the Change active tab depending on scroll position answer. Or you can use Miller columns as in Finder on Mac.


2

Here is my suggestion. I hope you would like it. And here I gave 2 option i.e. 'paging' to show fix number of comments or 'load more' button to show all the comment at a time.


2

I think the only situation where a Reset button might help the user is when you've pre-populated a form with a set of default values (possibly copied from another form based on some assumptions). In all other cases it adds an additional choice that is most likely to be unnecessary and unintentional, with unfortunate results. An alternative interface you ...


2

If the field is required, it should not be auto-filled, because Fields with stuff in them are less noticeable. Eyetracking studies show that users’ eyes are drawn to empty fields. At the minimum, users will spend more time locating a non-empty field — a nuisance. At the worst, they will overlook the field completely—a potential ...


2

I've never seen a card form that doesn't have a name field. Usually the name field goes first, and to me that is logical because one naturally thinks of something's name before one thinks of its attributes (e.g. "name, date of birth, address" for a person, "name, model number" for a product, "name, description, date" for a programme listing in a TV guide).


2

Users forget passwords - this is a given. Some are forgetful, some are careless and some just don't care. You need to deal with this anyway - whatever length you choose for a remember-me session, some users will have forgotten. You can't optimize the length of your remember-me session to maximize the number of users who remember their password - that will ...


2

Referring to the comments on your questions, I disagree with your assessment (that putting messages below fields is bad for usability), and think that @timster is on the money. Put the error message below the inputs, or use encapsulated flags This is arguably more conventional than putting them above. This question What is best practice for designing form ...



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