I have the following set of controls.
Scenario 1:
If you select one of the first 3 radio buttons and click enter, focus will jump to the Passport Number text box. If the user selects "Other", the "Other, Please Specify" textbox is enabled and, for convenience, screen focus (the cursor is moved) to that textbox.
Scenario 2:
The "specify Other" text box is hidden until the user clicks on the Other Radio button. Upon doing so, the textbox is made visible and the cursor is placed in this textbox.
Which scenario do you feel is a better approach? Perhaps you have another variation? Please state your reasoning.
I would also appreciate it if you could make a generalized statement as to when hiding is better than disabling or vice versa, but I am also interested in this particular example.
Thanks.
Afetrthought: Perhaps, in the 2nd example, the "Please Specify" text would only appear after the user has selected the 'Other' radio button.
I find that changing the UI by hiding/showing controls can be quite jarring and confusing to the user. Go with option 1 and enable the textbox when the appropriate radio button is checked.
My initial impression is that number 1 is neater.
it allows for a clear design of the GUI (there wouldnt be inexplicable empty spaces in the input screen)
it makes the colon after the `(Please Specify)" request meaningful.
The only time I advocate hiding UI elements is when it improves the UI. If it's just 'different' rather than 'measurably better', don't do it.
Users may be put off by the fact that the "other" option seems to require that you specify something, yet the UI gives no clue that you can do that.
I would consider number 2... Hiding the text box will make it easier for the majority of people to run their eye down the page (each horizontal line creates a barrier for the eye). When someone selects 'other' a text box could fade in with the words 'please specify' in the box. The form will seem to respond to the users input.
Related
I'm working on redesigning a web interface to provide the same functionality it has currently but with easier use via good UX design. Currently, here is what the design looks like:
I'm less worried about the tofu look and feel, that can come later, I want to nail the UX functionality first. The idea here in this tab is the user can select the items via a checkbox and perform the actions in the "I Want To" drop down (which opens different modal dialogs depending on the action). The 3 dot ellipsis on the right of the items in the list allow the user to perform the same actions via another drop down control, with the idea that they use the top drop down to perform the actions on multiple items, the ellipsis three dot menu for one item.
The obnoxious part of this control is that the list could contain hundreds of items, and the check box takes too much precision to check quickly. The user would select which items they would like to perform the actions on sequentially, then have to scroll up to the top of the page to select the action. This could be 5 seconds of scrolling, which I find obnoxious. I want to develop a good UX pattern to provide the same functionality in less clicks, scrolling, and frustration.
My inital idea was to provide a floating action button. The user could then * somehow * (I haven't thought of an idea yet, at minimum at least a bigger check box) select multiple items then pick what they want to do via the floating action button which is always within the bounds of the screen instead of the horrible scroll back to the top (I don't think a "scroll to top" button is a good solution for this either).
So I need some recommendations on a UX pattern or some general suggestions on how to make this process less frustrating for users. I'm a fan of material design right now, but I'm open to any suggestions, material design guides don't seem to have any paradigms for something like this.
I think the UX steps are in a good track: first select them, then set the action.
Instead of it being only a checkbox to click, the whole top part of each line could be clickable to select the item. This would make it much easier for the user, and less frustrating not being able to hit the checkbox.
Fixing the header on top would be usefull for adding a "Select/Unselect all" option and having the actions always available. Adding a searchbox to filter could be as well a good option if you are thinking of long lists. Combining the search box and the "Select all" option should help the user in their tasks.
If that is the most important action to be done in that screen, making the "What to do" button stand out a bit more would be a good idea to differenciate the primary from the secondary options for the user to do.
I see two simple things you can do to make this more usable with very little effort.
Remove the checkbox and make the entire row tappable, highlighting those selected. Each row would essentially become the checkbox's label, and the checkbox itself would be hidden from view.
Fix the header to the top of the browser window when the user scrolls down.
I'm trying to have a feature to allow users choose two different methods of cost calculation: either they can enter a yearly cost breakdown on a datasheet (2010: $10,000, 2011: $12,000, etc) or they can enter a flat yearly cost multiplied by the number of years they select.
If I were developing another kind of web application, I'd have radio buttons to select two different options. One option would display the datasheet, and the other option would display two text fields to enter values into. However, I understand that you can't have radio buttons in Access 2010 web databases. Also, is it possible to make elements appear and disappear based on a combo box selection?
If not, perhaps I could have two different combo box options: "enter yearly cost breakdown"
or "enter flat yearly cost," which open the correct respective forms as pop-ups.
So, 1) can I have Ajax-like appearing and disappearing elements as triggered by a combo box (or ideally, radio buttons), and 2) if not, can anyone think of another clever way of doing it?
Sure, you get a nice effect by using a tab control. You can place controls and even a sub form on that tab control.
So, you build a screen like this:
Then, simple set the visible property of the second tab = No. This will hide the tab (don't change this until you built the page since it will hide it! (use property sheet to hide/un-hide during development).
Now, add some code to the after update event of the list box. Like this:
In the above, I have named the tabs PYear and PFlat.
The result is this (this is a animated gif I inserted):
Of course, you really probably could just dump the whole "list box" selection, and use a screen like this with the tabs (tabs are good UI, and users tend to grasp them quick):
So, you can hide a "set" of controls, and it really far less work and hassle then writing a bunch of JaveScript anyway. As noted, the "set" of controls you drop into each of the tabs can be sub forms, and also that of continues forms. So, the "hiding" as a set does work well in this case. I did have some format issues and found that I had to "start out" with the 2nd tab dispaled first (the first one being hidden). As noted, the listbox selecting is nice, but one could likly just go with using tabs in the first place.
In the programming of a table-based application module (i.e. the user mostly enters tabular data in an already laid-out table), how would you reject user input for a given cell?
The scenario is: the user edits the cell, enters something (text, picture, ...) and you want them to notice when they finish editing (hitting enter, for example) that their entry is not valid for your given "format" (in the wider meaning: it can be that they entered a string instead of a number, that their entry is too long, too short, they include a picture while it's not acceptable, ...).
I can see two different things happening:
You can rather easily fit their entry into your format, and you do so, but you want them to notice it so they can change if your guess is not good enough (example: they entered "15.47" in a field that needs to be an integer, so your program makes it "15")
You cannot guess what to do with their entry, and want to inform them that it's not valid.
My question specifically is: what visual display can you offer to inform the user that his input is invalid? Is it preferable to refuse to leave the editing mode, or not?
The two things I can imagine are:
using colors (red background if invalid, yellow background for my case 1 above)
when you reject an input, do something like Apple does for password entry of user accounts: you make the cell "shaking" (i.e. oscillating left and right) for one second, and keep the focus/editing in their so they don't loose what they've typed.
Let's hear your suggestions.
PS: This question is, at least in my thought process, somehow a continuation and a specialization of my previous question on getting users to read error messages.
PPS: Made this community wiki, was that the right thing to do on this kind of question or not?
Be careful using autocorrection such as forcing user input to fit your format. See:
Is it acceptable to normalize text box content when it loses focus?.
It’s generally better to prevent invalid entries in the first place than to autocorrect them later. For example, if only integers are allowed, then you ignore any keying of the decimal point (along with all letters and most special characters). In some environments, you may want to provide a quiet audible signal that input is ignored (e.g., a dull thud).
As for when you need to alert the user to an error, how about a callout? Draw a bright line from the control or point in question (field, status annunciator, button, menu, location of a drag and drop) to the margin of the window and put a brief message (two or three words, like "Unrecognized date") in a balloon. Placing the message on the margin should keep it from occluding anything of interest in a crowded table.
The sudden appearance of the call-out should be sufficient to catch user attention, so it's okay to let the user move on to other cells in case they want to fix the error later. For efficiency, you may want to hold the user in the error-related field when the error originally occurs (since often the user wants to correct it right away), but then allow the next tab or mouse click to navigate the user away.
On mouseover or when focus is on the control associated with the error, the line is highlighted (to distinguish it from other callout lines that may be present) and the balloon expands to a full error message, providing more details on how to fix the problem (up to two sentences). Allow the user to drag and drop the balloon to a new location in case this occludes something of interest.
Include a Help button in the expanded balloon for further details. You can also include a button to fix the error (e.g., Retry, Reconnect, or set to default value).
The balloon disappears automatically when the error is fixed. Undo reverts whatever caused the error (e.g., reverts the field to its original value), which should clear the error.
If the user scrolls away from the place associated with the error, the balloon shrinks to an icon that remains in view so that the user is less likely to forget about it. Maybe an exclamation point in a triangle is a good icon. Place the icon beside or in the scrollbar track to indicate its relative location in the table, so the user can quickly scroll to find it later. Mouseover expands the icon to its full message. Perhaps clicking the icon can scroll to the right place in the table and put focus in the relevant control.
Balloons could also shrink to icons if they start visually interfering with each other. You may even want to include a control in a balloon to allow the user to force it to assume an icon.
For consistency, use for all errors, not just those associated with fields in tables.
The last time I did such a form (on a web page) I put a red box around the offending input.
I thought it was really neat... until a user asked me "Why's there a red box around this cell?"
What'd be nice is also displaying why the input's incorrect: "This field accepts only numbers", say.
You could display an icon in the cell, or a tooltip. The tooltip could open automatically or when mouse pointer hovers over the icon. It could disappear automatically when user edits another cell or when some timeout expires.
You can go with arrow tooltips like Adobe Flex's error tooltips. It focuses the attention to the error and supplies a brief description.
I have a table column where each row has one of three states, and the purpose of the row is to offer manipulation AND display of this property with three states.
My current development view is to have three tightly packed radio buttons with labels at the head of the columns (and every 50 rows or so) and onClick they send an AJAX request and thar she blows.
This is fugly.
Is there a standard idiom for a control like this? I'm currently mocking up something similar to the iPhone on/off toggle, but with a "middle" state.
Any input would be welcome.
EDIT
A bit more clarification: I have a tool for confirming events. Each event is either "proposed", "cancelled", or "confirmed". They all default to "proposed" until someone explicitly confirms or cancels them. This is a thin front-end for a SQL table.
I've seen this handled with image buttons that remain "depressed" when you click while popping the other two out. They act like radio buttons except that the label and the state are merged. If your names are too lengthy to fit in a button, you can abbreviate them and provide a key. I'd also give each one a distinct color. For implementation just pop the value in a hidden form field on click.
These are called "Toggle Buttons" in some other UI's:
http://java.sun.com/products/jlf/ed2/book/HIG.Controls2.html
http://msdn.microsoft.com/en-us/library/dd940509%28VS.85%29.aspx
http://developer.gnome.org/projects/gup/hig/2.0/controls-toggle-buttons.html
The standard mechanization for things like this in military avionics, where screen space is always at a premium,and so are buttons, is a "rotary". Each time you click it, it steps to the next value in sequence, wrapping around.
As an example, a device with a cryogenic cooler might have three states: OFF, WARM, and COOL. Initially, the device is OFF: no power applied. Click it, and it switches to WARM, meaning power is applied, but no cooling. Click it again, and it starts the cooler. (Since cooling in this kind of thing is usually supplied by a gas bottle with a strictly limited capacity, you don't want to cool the device until you are getting ready to party.) Click it again, and it shuts the device OFF.
You could also do this with buttons or hyperlinks. In a big table, hyperlinks will probably look best.
In the Proposed state, your cell could look something like this (with underlined links, but the editor won't let me):
Proposed Confirm Cancel
In the Confirmed state:
Confirmed Undo
In the Cancelled state:
Cancelled Undo
This will take two clicks to get from Confirmed to Cancelled and vice versa, but I assume that this operation is rarer than switching between Proposed and one of the other two.
Perhaps display arrows on either side to change the state:
(Cancelled) <| Proposed |> (Confirmed)
These may or may not 'wrap' depending on how well that suits the values and how important it is to saving a click when transitioning from value 1 to value 3 (or vice-versa).
As an alternative to you radio buttons, you could consider a drop-down list with three options. The disadvantage is, of course, that two clicks are needed to change the value.
Maybe use a slider with three states? (It really depends on the exact situation!)
Consider a fixed-position slider with three positions, such as offered by jQueryUI: http://jqueryui.com/demos/slider/#steps
I am reminded of the permissions button in SQL - it has multiple states; green check, red x, no setting, and clicking on them cycles through the three states. Its ok but annoying if you want to change a bunch to the state reached second, and if you click too many times you have to go through it all again. Left click - cycle forward; right click - cycle backward might work but certainly has no basis in UI expectations.
Idiomatically, I would say a Stop Light (red/yellow/green). They could behave like radio buttons; darker toned for 'off' and lighter tones for 'on', and since the color gives a cue you can move the description to a mouseover label. Of course, it isn't RG Colorblind kosher, so depending on your application that may be a deal breaker. (also, it may be confusing on Mac where the minimize/close etc buttons are the same color scheme).
Why not use three boxes that look like the "Questions", "Tags", "Users", ... boxes on this page (could be implemented as links, buttons or whatever)?
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I'm currently working on some setting screens, most of which contain a 2 column form with a preference question on the left, and a form element on the right.
The questions are things like:
Can add/edit other users?
Can delete clients?
Obviously this setting is a binary setting and most UI "experts" would insist that a checkbox is the appropriate form element to use.
However, when I mocked up the form with the checkboxes it looked unfriendly and it seemed hard to relate the state of the checkbox back to the question.
I changed the form to use two radio buttons instead:
Yes o No
Personally I find this easier to process, as the options are actually answers to the question posed on the left.
In terms of clicking it makes no difference to the user, it's a single click each time to change the setting.
What do you think of this use of radio buttons? Is this better or worse than a checkbox and why?
For something like "Can do X" I would use a checkbox rather than a radio set as Can Do/Can't Do relates well to the On-Off nature of a checkbox. Most users understand a tick maps to Yes and no tick maps to No.
However, a radio set can make sense for some binary options where the options aren't clear or how they might relate to on/off isn't obvious. For example, you could have "Binary File?" follow by a checkbox, but I think in this case it would be clearer to have "File Format" followed by "Binary" and "Text" options.
We had an experience with customer base of older age group, they understand "Yes"/"No" radio buttons better then checkboxes. And we were forced to remove checkboxes and put radio buttons everywhere. Its better for non IT savvy people.
I've been looking into this recently in order to design a PHP form class. As you note, the standard answer is that a checkbox should be used and I've even seen some people advocate that where radios are used, a default should be given.
I couldn't possibly disagree more. Consider when a user is a confronted with a text input, say for entering their username. If they submit the form without filling in this field, and the field is needed, we know that the empty string generated is bad input. Perhaps the user missed the field or didn't realise it was necessary. We fire an error and ask them to input the missing data.
Now considering the same scenario but with a checkbox. If the user misses the checkbox then we have no idea whether their input was intended or unintended. The same is true for radios with a default.
Consequently, I strongly suggest that a form should not contain defaults at all. If a piece of information is important enough to take from a user then it is important enough to get correct. Providing a default whether through a checkbox or a set of radios with one checked, sacrifices a large amount of accuracy for small amount of usability. Therefore, I think using Yes/No radios are vastly superior to checkboxes.
The only place a checkbox is valid, in my opinion, is where you have a small collection of options of which a user may select more than one. If the collection is large, however, then a select (without a blank default option) should be used instead.
My feeling is that a checkbox should be used where the answer can only be Yes or No - nothing else, e.g. Do you want to register?
Radio buttons where there are other options. e.g. Do you want a newsletter in oPlain text oHTML - with NO defaults
The other consideration is to use radio buttons where you want the user to make a conscious decision. As one of the other answers says, if its important enough to ask, then its probably important enough to get accurate.
The only time I use a checkbox is if the answer is either Yes or No AND if the checkbox ticked will enable other fields that the user needs to fill in AND its optional / not essential information to complete the process, e.g. Do you want to authorise someone else to access your account [ ]. This would then enable fields like Name, address, etc. The one thing I ask is 'If a user left this as the default option (usually NO), does it make a material difference and can it be easily changes afterwards'
I think radiobuttons would clutter the GUI if the answers always are yes/no.
Radiobuttons could also make using the keyboard to set the options a little bit harder.
I agree that checkboxes have more of an implicit "true"/"false" meaning, another point is that for radio buttons you can force the user to make an active choice by having neither option selected. Therefore, for important fields it may be a better idea to use radio buttons so that the user does not accidentally miss it.
It depends on the context and target audience: you're aiming to minimise the thought processes required to answer it.
If it's a questionnaire, for instance, you'll probably want to ask in full sentences. An options screen would be targetted to scan-reading (so allow/deny instead of yes/no), while a toolbar (something frequently set/unset) will use a toggle. In any case, I'd err on the side of consistency.
For permissions, it's normal to use a heading of Permissions, with a checkbox for Edit users. You could even highlight the permission if it's enabled. This helps keyboard users by only requiring one press of tab instead of two. Just make sure that the click area for the checkbox is large enough.
In either case, a two column form is not recommended because it puts the target too far from the description. It also encourages questions like "Allow full control or only some (yes/no)". How about using rows that change from green to red, and show a tick/cross? That can be done in a web-friendly way.
From a ux perspective I'd say check box represents true/false ie; Quest is Do you Want XXX tick for yes in common parlance) but for a choice I'd prefer radio (e.g. A or B). There are other metaphors such as pushed in/popped out button.
Have you tried using only CheckBoxes labeled like "Can add/edit other users" without the question to the left?
I find radio buttons really difficult to support or document.
You can tell people to tick the tickbox, and it sort of makes sense to them.
But "radio button" makes little sense, and "blob the option that most applies" is just a nonsense thing to say.
In my case, because we need explicit answers, an explicit yes or no, I use checkboxes for both a yes and no:
Yes [ ] No [ ]
The benefit is that the form is valid on paper as well (sometimes fax/signatures are required). I guess you can also style the radio buttons as checkboxes!