Tag Info

Hot answers tagged

57

A couple of other options: An X that is styled differently. X is an easily-recognized symbol for both actions. I think any confusion mainly arises from the fact that you are using the same style for both, creating the expectation that both will perform the same action in your interface. If you had, for example, a red X with slightly different ...


23

To select one option of a limited number of choices, Radio Button Inputs would be the way to go.


20

If you're looking for something that symbolises the word 'remove' then why not just use the word 'remove'? It's not especially large a word. And you have plenty of space in that UI to fit it in there. Plus it removes any ambiguity as to what it means.


9

You have to be careful when using words. If you internationalize a word you may end up with an equivalent word with many more characters than your intention. If you use a graphic then you are language independent and character independent (which means spatially you are in the known) but there are still considerations based on culture and other factors. ...


7

Alan Cooper makes the point IIRC specifically in The Inmates are Running the Asylum (coincidentally also using an ATM example) that a source of poor UX is that computers do not interact i.e. "converse" like real people. e.g. You: "Withdraw $200" Computer: "Insufficient funds" You: "Check balance" Computer: "$187.34" with a human You: "Withdraw $200" ...


6

I recommend using a minus sign enclosed in a circle (-). It should alleviate your text length issue while still implying a "remove" function as well.


6

A few different ideas come to mind. 1 - make the label color match the associated line color, so even if they overlap it's clear which label belongs to which line. 2 - Put each label in a containing div, possibly giving that containing div a border the same color as its associated line, with an opaque white background ... and possibly when a user ...


4

I would suggest the same icon for both. By using the same icon, you are keeping consistency within the same operation. If the user is performing the same action, the feedback for that action should be the same. Though a progress indicator would be nice, the key is that the user is given feedback that their action has been registered, and is being ...


4

Generally, there are just two natural ways to set up a 1-out-of-many choice in HTML: a set of radio buttons, and a select element. The latter can be used with a size attribute specifying the number of options visible in the initial size, or with size defaulted to 1. For usabaility, it is best to have all options visible initially, so that the user can just ...


4

The answer is in the 10 Heuristics for User Interface Design by Norman Nielsen, which are a must read if you listen to me. Error prevention: «Even better than good error messages is a careful design which prevents a problem from occurring in the first place. Either eliminate error-prone conditions or check for them and present users with a confirmation ...


4

I have a personal rule that no single form should contain more than ~20 visible form fields because after that threshold the screen just becomes unusable. The solution to this problem will change depending on your client's actual needs. e.g. If there is a workflow where a user can create a contract (by itself first) I would have that as a simple form. ...


3

Web or Mobile? This sounds like a really useful native mobile application as I'm guessing it will be notification-centric that will alert the user when action is required. Things to consider before diving into native mobile development: Will this be OS-agnostic (i.e. will it run on iOS, Android, and possibly even Windows devices) Will it be a universal ...


3

Leave the value in there as an invalid state You should allow users to change the type and still keep what they wrote in value field. They might have clicked the wrong type, or want to copy what they had written. You need to communicate that the value is invalid though so I suggest you indicate this by making the value red: When the user leaves this ...


3

I think it depends a lot on whether this is a very common form or a rare form. If it is rare form, where the user might have little or no idea of what is valid input, I'd emphasize "explaining" a lot more. Since having the field just "beep" or "flash" on invalid entry will frustrate the user who doesn't know what they are doing anyway. If it is a common ...


3

Your second and third bullets (numeric only, maximum length) can be "preventing," because it's more or less clear from the context why the input box is not accepting the characters they are typing. Everything else is almost always "explaining." The ideal, of course, is to both prevent and explain. If your user is running up against a character limit, it's ...


3

There are no absolutes in UI design, so it's impossible to say which is better in all cases. It depends on the data being input, the importance of it being correct, the difficulty in entering the data, the size of the form, the type of user, etc. That being said, Preventing invalid input is generally the best place to start, but you need a ...


3

First, the wording leaves too much ambiguity; be clear and the point. What time did you leave home? How long do you plan to work (hours)? I know this isn't short and sweet, we need more clarity to understand what is needed. Second Input Personally I would change it to: - "Planned Work Duration" - cal, number input, "+ and - " along with word "hour" ...


3

Why does your boss need to compare the two forms? Think about what your user is doing, not what your user is saying. In other words, try to look for the deeper "story" your boss is telling you about how she wants to use the software, and try to provide that, even if it doesn't look like what she describes. Is it because the Annex is mostly identical to the ...


2

Stand on the shoulders of giants Leverage familiar patterns (google maps, yahoo maps, etc) and talk to your user. See if they are accustomed to using another mapping UI. Here is an ESRI Map Design checklist that might be helpful if not an overkill. At first look, it seems that your controls get lost in the background. You'll notice with Google that ...


2

There are two main questions here. The first is: "Is the footer important." There are some things that ought to be on every page - copyright and legal disclaimers are two. If the client has a footer in his email then that might be a segue into convincing him that the footer on the website has validity and ought to remain. Jakob Nielsen wrote: "As ...


2

This is a snap to test. I agree with + add, - remove, x close. You can use a tooltip to combine symbol and word labels. Mock up both and put it in front of about 5 users, get their feedback. Alternatively you can allow the user to set the Qty to 0. Depends on when the trip to the server takes place and when the user sees a refresh. Follow conventions/style ...


2

Is there any big difference when it comes to designing for people aged 60 + and people aged 50? Technological know-how, perhaps. For example, people who are 60+ might have never used a computer aside from simple tasks, but those who are 40-50 might have some experience with a bit more. This would depend on your user-base, of course. You should also ...


2

How about combining Total and Sum as a single field? Like this download bmml source – Wireframes created with Balsamiq Mockups The input field for the selected item gets enabled. The other option is disabled. You'll probably need to come up with a better label than "totalling method" though.


2

Instead of sticking to a 2-column layout, I would suggest going for a list based layout as shown in the mock-up below: In this layout, the Medicine name can be the title and the condition it treats can be shown as tags under the medicine name. Furthermore, if the user wishes to search all medicines for a particular condition, he can just click on the tag ...


2

Of your three options, I prefer the second because it adds an upgrade option, empowering the user to solve the search availability issue. Alternatively... Create a button for each concurrent search that your user's current account can perform and replace each one with a confidence animation when its search is running. Something like...


2

You can mimic the approach LogMeIn has taken in their various clients. As you can see in their featured screenshots, they use an icon of a computer monitor to symbolize a PC. Computers in the online state are displayed in full color while computers in the offline state are displayed in gray scale. Font Awesome has an appropriate desktop icon. You can ...


2

I generally favor radio buttons but -- as an option to experiment and test with -- you can use a slider. EXAMPLE: YES _ : : ▲ NO OPINION ▼ : : _ NO Be careful to factor in up/down and left/right prejudices/tendencies in your testing. Up tends to be "good" and down "bad". And left-right is inextricably ...


2

I would like to give you one explanation that comes from my field of activity. It has to do with the design of human-computer-interaction or better: human-automation-interaction. Very often tasks are too complicated to be fully automated. At certain points of the solution process the user has to be incorporated. Researchers found that a "mixed initiative ...


2

In your case i would split up the whole input form in a wizard-like step by step input area. When looking at your layout it appears that you already started grouping the input fields with boxes. Consider that names of countries, persons and so on could be much longer than the input fields, so give them the space they need to properly display their entered ...



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