Hot answers tagged

176

There is not really a "UX" reason for this—or if there is, it is a very limited one. The actual reason why dialog backgrounds are (by default) some shade of grey is because some designers thought that looked better. In many early operating systems, dialog and window backgrounds were stark white. Obviously they were white on the original Mac OS, since it had ...


35

Too much white can cause eye strain, so tints of grey reduce this. There is another ux.se topic which discusses white vs grey backgrounds: Grey versus white background for ease of use and readability/legibility


31

Why not try to hide the text area when you click the disable button instead of greying it out? I've tried this approach in a long web form interface and hiding the unused or optional fields works great. When the textarea is gone the mental model of the user should be that no information is submitted because the form is not visible. Otherwise, you can put ...


16

Because the difference between the font-color and the background-color can cause eye strain and is not optimal. Having black or dark-grey text on a lighter grey background is the easiest for the human eye to read. See this link for a more detailed answer. It tells you when to use brighter fonts with a dark background, and also when not to do this. ...


12

But lets assume we have a case where there is absolutely no opposite This point has not been covered or answered so I will focus on this one. If you don't have opposites or don't find anything suitable: just change the sentence: You are the manager of X Y is your manager I mean I think people will more often say "I'm his manager" than "he's my ...


6

Good question without a definitive answer. In short, both long page and divided page has their advantages and disadvantages. You will not make a big mistake by using either one of them. Recently I had one publication on that specific topic which was accepted at the CHI conference which is the top HCI conference. Here is a link to download the article. ...


5

I agree with Andrew about check and uncheck. However, instead of checking and un-checking the elements; use show and hide method, which means, when user checks the checkbox; show the textarea or else hide it. The behavior will directly inform the user that to enable textarea he/she has to check the checkbox first. It's called progressive disclosure.


5

If it were me, and we're only talking about images, I would start with a file size limit in the 2.5MB - 3MB range and see how well that goes. My basis for this size range is: the most popular smartphone models will take photos in the 2MB - 3.5MB range taking photos of receipts and/or certificates will result in less data than your typical family or ...


5

If its acting as a value then why not have it as a value? The placeholder text should be used to hint at the type of entry that is required. In your particular scenario I would either set the value attribute to Any instead of the placeholder attribute. Then if the user wants to change the value they can, else they leave it as Any and tap Select. Better ...


4

by importance of the action. by how destructive the action could be. by frequency of use. All of these suggest that the most-important, most-used and least destructive option be listed closest to the content. I'd suggest using a left to right on this menu as users are more often going to be editing something I'd say than removing it or cloning it to a ...


4

Keep the behavior as you describe it, but when the user un-checks the checkbox clear any text entered in the field and then disable it. EDIT : When the checkbox is checked again the cleared text will be fetched back to the text area. This will save the work of the user when the checkbox is un-checked by mistake.


4

Straight away I assumed Any wasn't a value I could leave there, however the form was insisting I enter Any value. Slightly misleading in my opinion. How about using a select, or a filtering select for these values and having Any as the default value instead? I understand there are many breeds of dogs, however - so this may not work too well either. ...


3

Why do you need the check box at all? If someone wouldn't want the contents of the text area to be submitted, why would they write something there in the first place? Unless the text area is prefilled by default, I think you could probably do without the check box. Instead, you could write the purpose of the text area in gray right into the area, perhaps ...


3

All of the 3 proposed examples in my opinion assure bad usability. I think you have two main options: Show the help text on the page when the input element is highlighted. This way the user don't need to do anything, the help text is rendered when he selects the intended input field. That makes it easy for the user to spot the help text and read it if he/...


3

Make use of the label text for the fields: download bmml source – Wireframes created with Balsamiq Mockups


3

Since this seems to be a web client, you could, if you cannot totally redesign the UI (as suggested by Adriano Repetti above), consider switching stylesheets according to the selected language. So you define a custom layout of your radio buttons which will only be used for display in french or German.


3

The iOS HCI Guidelines suggest that you should follow the Modal View in order to have the user complete a task and have complete knowledge of the task they are doing. Although the button suffices the purpose of the context, I would still recommend using the title to adhere to the guidelines. iOS users are accustomed to the layout and know the difference ...


2

How about two radio buttons with the default being "current store"? [o] Search current store (188) [ ] Search a different store [___] And when searching the current store yields no results, you could flip the radio button to the second option and display a message: No results found in current store. Would you like to try a different store? [ ] ...


2

It is possible to distinguish between uneditable text and locked fields by placing a small lock-sign symbol against the form-field. You can enable a hover and describe why you are locking that field or simply state that "this field is locked" Check my https://moqups.com/tapa8728@colorado.edu/yjB41GXd for a mockup. Based on your design, you can choose to ...


2

We're running a web application and are coming across the same question. Here are some considerations: There is a cost to storing larger files (disk space on a cloud repository or having to move to a larger physical server). That cost may be outweighed by the time spent addressing complaints by users (particularly novice or elderly users) who may have ...


2

I think the best solution is to split that long form into steps. From users perspective is easier and less scarier for them to handle a form like this. Also it’s easier for user to get lost in a long form and it’s very difficult to present error, especially when there are multiple errors. In e-commerce this “step-by-step” behaviour is well known and the ...


2

If registration 2 page is just optional information i think you should split that information into multiple pages. This is what we called progressive disclosure. This helps the user to digest the information better and it doesn't feel claustrophobic with a screen full of options. You can use a wizard style design with a few important points. Let the user ...


2

On a long form like this where there are multiple groups of questions there is a good chance something might go wrong for the user. I would focus on asking one thing per page, eg "Your contact details" followed by "How would you like to receive your parcel". Having only one thing on a page gives you more space to explain why you are asking for certain ...


2

Lots of good advice here. It probably boils down to the following: Are there lots of fields where the potential for making errors is high? If you have a long page you cannot rely on inline error validation, because your users may not visit any of the fields and may simply jump to the primary call to action. If they do this the system will need to report ...


2

Just a quick suggestion, you could possibly disable the submit button, but have the text on it change to 'Submitting...' and also disable all of the form fields, so that the user can't then submit the form using the keyboard. download bmml source – Wireframes created with Balsamiq Mockups I don't know about the feasibility of adding a loading ...


2

I would do both 1 and 2, but also present the user with a message. Having a message will guide the user's expectation and avoid unnecessary concern by the user. The message doesn't have to say much, even just that the form is submitting and will take up to 30s.


2

Someone else may give a better, more evidence-based answer but, for now, here are my thoughts: I think the best reciprocal for "Manager" is probably "Colleague". However, this approach requires examining each set of relationships on a case-by-case basis and you can bet that, once you've got it all sorted out, a major stakeholder will come along and say "Oh,...


1

This behaviour does two main jobs: first, it draws attention to your popup / dialog box and second, let's user know that the page behind it (for browsers) it's inactive in this state. And those shadows or overlays are making a pretty good job. Also the colour doesn't matter, you could use white, red, blue etc. as long the UI permits.


1

You could use keywords and delimiters to have the code automatically parse the text and format it in a small preview window. For your example: John Doe // First line is always the name @ Company Best Inc. // use @ symbol to denote company name line disc this, this and that. // the line starting with the disc keyword is the discussion info appt ...


1

It's always better if you keep the explanation right under the filed for both desktop and mobile. In case you need long explanation, you can always include a title for the helper line and link it to another page or a popup. You'll get what I really mean by checking out this example from mailchimp. I use it and find it helpful.



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