New answers tagged

1

One design standard to keep in mind is that applications should communicate with the user in the language that the user understands, not in the language used directly by CRUD operations. In this example, store ID 188 means nothing to a user, but the system knows exactly what that means. I would suggest a prompt similar to what @PixelSnader explained, except ...


1

You can sidestep the issue in this case by leaving the number blank, and adding text to the right or under it saying 'if left blank we will search store 188'.


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


0

If the user selects a choice then make the selected button with a selectable style but also change the style of the other button to indicate that it is not selected. The target is to make the user select one or the other. Look at the design below: Yes No If you want to emphasize that this is an important choice allow the user to deselect the selected ...


1

In an answer to a recent question I suggested gradual engagement. Same answer applies here. Each request to the user for info should ask only for the info that's necessary at the time, and makes clear why it's necessary. That is, registering for a site might only ask for an email address and password. Ask for the user's mailing address only when they're ...


1

Company wants to sell something and customer want to buy something, but the real factor is none of the users don't like to fill webforms especially the long ones. So you must careful when you are presenting a long form in front of a user. Few factors which will help you to build conversion forms. 3 Principles : 1. Make the from short and sweet, 2. Provide ...


0

The usual method (at least on the Internet, so I'll assume your "product" is a web page) is to divide the form into smaller sections. If the user is trying to buy something, make a first page asking for the payment info, then a second asking for the delivery adress, etc. Try to keep the user informed on the number of steps required though (even if there's ...


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


0

From the user perspective, your company doesn't need to have any employee. If it's a technical problem you need something like a fake name/filler for your backend but never to display to your user. screen 1: create company screen 2: add employee to company This could be I select a company and a create a new user, or I import an existing user from my list ...


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


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.


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


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


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


62

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.


0

Are the messages related to specific fields on each page? If you do not want to show some sort of dialog to the user before moving onto the next step, then maybe show some quick notifications/toasts related to the item/action the user just finished interacting with. For example:


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.


-1

You could also try a light red background for the alert:


43

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


17

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


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


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


1

I question the need for your double row of tabs here. The user gains no additional utility from this layout, especially if they wish to compare data and information across sections of your program. Let's say that your user is looking at data in the Report Details page of your Work Orders section, and wishes to compare information there to information ...


0

There are 2 key aspects to showing a user informational messages. Context. The message has to be along side the item(s) it is related to or the user is not going to understand what it is and how it relates. Process flow. The message needs to be either before or after the related item(s) and it does matter which (see below for "rules") If your message is ...


1

The beauty of a single search field is that it works like Google... You just type in all the keywords you care about and Google takes care of the rest for you. However the devil is in the details. In order to make one field work, your backend search needs to search for each keyword (delimited by white space) across all columns of data (I'm assuming a SQL ...


1

Pros: A single box is, well, simpler. It also eats far less space on your UI, and only seeing one box to search in is far less daunting. Imagine opening Google and finding instead of the search bar, individual fields for Page Title, Description, Site, Date, etc. Yikes. Cons: Ambiguity of search. If I want to search for Alan Smith, chances are a single ...


0

Below is the solution of your problem. If you find any doubt then comment.I will explain you. You can apply same approach as "Add Salesperson" to add multiple phone number of the company.


1

What you are describing is essentially different facets of the same products. Search best practice suggests you use find as you type search ( single input). There is actually a number of patterns within this category with varying levels of difficulty in terms of implementation.The example below uses an auto-complete approach. "Designing Search: As-You-Type ...


0

You could rather use a single text field for equipment name that intelligently drops a suggestion box in case the user inputs a specific equipment type and/or model name/number. Let's say your equipment model numbers start with XT, then as the user starts typing "XT" in the textbox, suggestions would start dropping down. Otherwise, the search box would ...


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


0

As said by anthonyryan1, it is required for American Express. So either you ask for/require this information only for American Express (which would mean you would either have to ask the user for the card type or start by letting them input the card number and then asking for the rest, or you disable the field if you see it's not required once a Non-Amex card ...


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


0

Yes, if the pre-filled data is user-editable If the user can still edit the pre-filled fields, they need to know that the current data is valid and also if any changes they make, are. Make sure all pre-filled data is indeed valid. You don't want to pre-fill data that somehow fails your validation. Test this. No, if the pre-filled data is not user-editable ...


1

What's the most likely scenario? Do admins commonly add several articles? - - create and add another Do the articles have formatting they have to review? - - create and review Otherwise send them back to where they come from. In some cases you need them to edit what they just created, like add some data, then i send them to the edit page. You ...


1

From the the limited information I have I can only provide limited advice. I am leaning towards mockup A because it requires less clicks and allows the user to remain on one screen rather than be focused into another modal window. I would recommend having an auotsave feature regardless so that if the agent has an interruption he can go back and continue his ...


0

If your website or software cannot handle regions, I would go: Green for approval Red for error Why? Because the traffic light, whether region you are in the world are pretty much universal and understood. They all follow the same code. To clarify the messaging and avoid misunderstand with color (also for our colorblind friends), I would add an icon ...


0

My vote is "Idea 2", for the reason provided (match the card). Namely, I wanted to point out why I am not choosing idea 3 (hide form, for simplicity)? It sounds like the popular option when you do such a slick job of presenting it. However, I've one concern with that approach. You should not hide the field. What if I am waiting for my spouse* to deliver ...


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


0

This started as a comment: Empirically, my card has the number on top. It's also the most significant source of both information and possible errors. I type my name fairly often, and am intimately familiar with it. The expiration dates are less common, sure, but at least I have a 1 in 12 chance of getting it right even by accident. The CVV is 3-4 digits, ...


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


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


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


0

While you're correct that Visa and MasterCard do not validate this information, that's not true of all credit card providers. American Express actually does validate the "Name" field if you collect it as a merchant and by not collecting it you're more likely to have legitimate payments declined with this card.


0

Taking bits and pieces from other's answers, as well as getting some additional feedback from the users (who said they would be okay with a single textbox at the end of each section), here are two more mockups: Using button groups Using a radio table (view in Codepen)


0

Really, it has nothing to do with whether it's required or not. The nature of a select box is that something is always selected, whether that be a placeholder (which is still just an option like any other) or one of the actual available options. Given that, the only acceptable time to exclude a placeholder is when there is a valid default option for the ...


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


1

Optimize navigation Make sure users could logically tab through each control and make selections without the mouse. I think it could also help if each dropdown supports type ahead to pick faster Consider Templates? Allow users to save the object description as a named template. Next time user could just pick the template and all of the fields could be ...


0

For the case where data is the same between the objects I'd recommend that instead of going through each single object individually you enable users to first select multiple objects and then catalogue all of them in one go. If the data varies slightly between the objects you could remember selections from the previous go, and possibly put all the options in ...


1

A good idea for this problem is defaults. There are two ways you can do this, observe common patterns in the selections and provide them as a set options, the selection of one of which would autofill all of the options in the six drop-downs. Or, you can let users save their defaults, meaning they could configure common option sets and re-use. It would ...


0

If each of the drop-downs only holds ~15 items, then using your suggestion of having each drop-down menu appear one after the other (after each choice) might be along the right lines. One way to speed up the process could be to generate each option of the lists into groups of small, clickable elements. The benefit is that you're instantly taking out 1 ...



Top 50 recent answers are included