New answers tagged

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


0

I think one of the toughest things to parse here is the typography. All that extra tracking plus all-caps is making this look like a jumble of individual characters, instead of recognizable words.


1

Another **possible fix ** could be just swap the position of the form in the second case (where few addresses are already there). And make the entire address chunk/div clickable with different prominent states (hover, selected). Also you can change the visual style of showing it as possible options(in this case the position of the radio button). In the ...


1

The design as you show it assumes people want to add multiple shipping addresses and then choose one for the current order. I think this is not the typical use case. Adding a new shipping address is needed only if it is not yet in the list of existing addresses: Either this is the first shipment, or the current order should go somewhere else. Having this ...


1

You can ask the user to name the address by something at the end of the check out. So that for the next purchase, s/he can directly select the address from a drop down. In case of new address a specific and prominent button will be present with "Add New" label.


0

It might be enough to let the people set their own positions and later pick the colleagues they work with. Having that set, the machine could actually figure out the hierarchy (if any) or other types of relationship. E.g. Bob says ‘I’m the owner of the corner grocery’. Jane: ‘I buy cabbage at the corner’. You don’t need them to declare ‘I am the seller for ...


0

yes indeed Note 1: Elements that use explicitly associated labels are: input type="text" input type="checkbox" input type="radio" input type="file" input type="password" textarea select Note 2: The label element is not used for the following because labels for these elements are provided via the value attribute (for Submit and Reset ...


0

Have you considered just not having any text for relations at all and use symbols or other graphic indications of the relationship? For example, a popular way of showing relationships is an organogram: You could do this in multiple ways: let users drag themselves to the right spot, enter their names in the right spot, click on the right icon,...


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


0

I'd think twice before force-fitting this kind of hierarchical relationship in an attempt to describe all possible organizational charts, work relationships and cultures. It introduces an enforced tree relationship where actually the culture may be quite flat. The relationships may be dynamic as people move between teams and take on different roles. It ...


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


0

Getting some hard data on how people interact with placeholders As there doesn't seem to be any good data on how people interact with placeholders, I decided to get some myself. I created a little solution that looks a like like this jsFiddle and sought out some victims, er "volunteers" to try it out. The test The test users were presented with a ...


0

One thing not mentioned so far is that any non-white background color makes it very easy to highlight textboxes and some other interactive UI elements (checkboxes, comboboxes, dropboxes, etc), by using white.


1

Honestly, I don't like any of these. Repeating the username would be an unnecessary action for the user, especially if this is applied to an optional field. We don't really want to occupy the space of two input fields for a secondary/optional feature. The usage of checkboxes can be easily avoided too, by simplifying the mechanism. I would propose the ...


0

Placeholder Accessibility Having read the article you referenced, Placeholders in Form Fields Are Harmful, while placeholders may not be actively harmful, they're at least not as useful as you think. And if it's not helpful, why do it? From an accessiblity (and an "avoiding litigation") standpoint, placeholders are often omitted by screen readers: W3.org ...


1

My suggestion would be to design two types of forms either of which would be shown depending on which country is selected United states - Show an United states address form (I suggested the United states as one option since you said most of your users are from there) Any other country - Show an international form To determine the form to be shown , the ...


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

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


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


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


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


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.


0

Consider if you really need to style your text input box, which will disrupt and conceal subtile states - like focus. If you are conservative with the use of colors in your form/page, then a red error-label will be enough to bring the users attention to that something is wrong.


0

Here is the article on smash magazine, you will get better idea. Checkout the below link https://www.smashingmagazine.com/2009/07/web-form-validation-best-practices-and-tutorials/


0

I don't know specific research about how to visualize active input field element in an error state. The academic literature about web form filling is not that much according to my knowledge. Specific cases like this are not researched much. However, when there are more than 4 input forms I suggest highlighting the active field by coloring its background. ...


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.


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


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


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


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


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


0

Both are valid and address different application scenarios. What happens in case you've just mistakenly picked a wrong tag/item? How do you delete it?: In #1: 1. You type in and pick a wrong item 2. You grab the mouse and point to the wrong item 3. Click on the [X] to delete the tag (input blurs) 4. Click on the input to focus it and enter another item In #...


0

Use the first form. In my opinion, users are accustomed to the first type of this insert tag operation. Therefore, you are in align with the consistency usability heuristic. If the second form is more complicated for implementation, then it would probably be more susceptible to bugs. So make your life easier and stick with option 1. Imagine how the second ...


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


0

I def. recommend this option for the desktop version but not for mobile. Look at the attached image, the window gets really tiny whenever you attempt to input text into the field.


0

No. Adding an asterisk to every field or almost every field on the form will do nothing but add clutter to the form. If all of your fields are required simply make a note up front saying so. Be careful though, if you have a couple of optional fields in how you mark them. I would suggest putting '(optional)' either at the end of the field or as a ...


1

You're overthinking this problem. It's one thing if you're forced to decide between a 5MB or 5GB limit, it's another when it's between 10MB or 20MB. The truth is, storing static files is extremely cheap nowadays. If it's costing you a lot of money, you're likely doing it wrong. Don't get me wrong, this is a question I've asked myself numerous times, only ...


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.


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.


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


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.


3

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


0

Simply do not mark it as a required field, then upon submission, indicate that the user could have entered a text. If there is no content, provide a few simple suggestions to be filled in automatically, this choice should be a required field.


1

I would try to have the text area with the default message along with a "use default message" check box along with the label (of the text field) which if unchecked, would remove the default message and allows the user to feed in his message. Also allow the user to edit without the clicking on the checkbox too along with the state of the checkbox maintained ...


0

If I were you, I wouldn't insert a template text inside the text input from the beginning, but rather I would give the user the possibility to choose from a quick message option or just type the message he wants (the same way linkedin does). To better understand what I mean, here is how linkedin made it: Quick message reply. They use a template message as ...


0

First I would say look at the the data. What's the average file size uploaded? What are the outliers? Were the outliers attempts to upload legitimate files? Were users getting frustrated frequently with not being to upload legitimate files? What are the upload limits of your competitors? If you are worried about the size of the files you can talk to your ...


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



Top 50 recent answers are included