Consider a modal dialog where a user can select an item from a list.
Option 1: Instantly close the modal upon selecting an item from the list.
Option 2: Have a selected state for the selected item and provide OK / Cancel buttons to confirm the selection before closing the modal.
Which of the two options is preferred from an accessibility standpoint? (considering keyboard navigation support, etc). Note that the selection is non-destructive and the user could easily re-open the modal and change the selection.
Option 2 is your best option here is some guidance related to this and the WCAG guideline
Basically do not change context, update lists etc. automatically on any type of input, you should always give the user a chance to confirm their actions.
Now the question is do you really need a modal if all the user is doing is selecting an item from a list?
Surely it would be a better UX to just have a list you can choose from (this depends on what you are doing, just thought I would point it out as you didn't give an example).
You also need to consider the fact that your modal list should present number of options, currently selected options etc. etc. Yet again these are just guesses and something to consider, it could be irrelevant.
Related
Which is a better User Experience / Design decision for opening a table row (in a business website)? To place an "Open" button like this:
Or, to allow the row to be opened by clicking anywhere on it?
Your question assumes that people understand that there is more information to be gained by "expanding" these rows in this table. As this is designed right now, there are zero hints for a user that they are capable of viewing more information inside the same view that they are using.
Option 1: Open button
Let's assume (dangerously) that people are knowledgable that they can use this table to view more info about a line item in this table. The button itself is separated from the content it is referring to, breaking Fitt's Law. Also, the label is "open", which most users would interpret as taking them to another page, or opening a new context. "View More" or "Expand" would be a better label.
Option 2: Click anywhere
This is slightly better than the button, as it clearly relates the action to the content. However, it still doesn't solve the problem of exposing the functionality to the user.
I would recommend a combination of both of these approaches, making sure you are solving for Fitt's Law as well as exposing a label that will tell the users what functionality is present in these table rows, and how to access them.
I'm looking for a Qt/QML multiselect control that have a remove button.
I want to add a filter builder and I didn't find a good example or control for this purpose.
I can design token by myself. I'm just curious if someone already did that and can share it.
Multi filter selector
Thanks
A simple radio button for each option can do the job. If you do not include all these radio buttons under an exclusive group, a second click on these buttons deselects the option.
A click on the radio button includes selected option in the search results and second selection removes the option from the results.
An extra button which deselects all the radio buttons can also be added.
I don't intend to insult or disrespect you, but i think with radio buttons the task takes less time than posting this question.
In MVC-3/Razor, I need to create a page which will have five set of controls. Each set will have a drop-down and a text box. User will select an option from drop-down and then provide some feedback on text box.
When the view is shown very first time, I only have to enable controls in first set. Whereas all controls in 4 other sets should be disabled. Once user perform action in first set of controls (select optino from drop-down and enter in text box), the second set should become enable now, whereas other set of controls should still be disbaled. The data shown in this second drop-down is dependent upon what user has selected in first drop-down. Once user complete action in this second set, the data in third drop-down will depend upon whatever user selected in first and second drop-down etc.
I am a web-form aspx developer and not sure what will be the best way of designing this in MVC-razor world (because there is not view state etc).
Step 1)
What needs to be clarified is what will cause the other “sets” to be enabled?
Is it after the user has selected an item in the dropdown
OR
Is it after they have entered some text in the textbox?
What also needs to be clarified is if you have a dropdown AND a textbox are they both enabled at the same time or is the textbox only enabled after you’ve selected an item in the dropdown?
Once you’ve got that figured out, move on to the next step.
Step 2)
Do the users need to visually see the 4 sets from the beginning (disabling the 3 other sets) or can you simply show the other sets (on the fly) once the previous one has been successfully filled?
Depending on the answers, this may vary your approach.
As for me, the way I’d do it is simply have/show one set that loads at the beginning.
Once the user has selected an item from the dropdown, I would make an AJAX call passing along the selected item and get back a list of values for the second dropdown.
Then, using jQuery, I would duplicate the row (or div) of the first set all while changing the values in the second dropdown box.
Repeat process for when an item is selected in the second dropdown.
But wait! There’s more!!!
Let’s assume you’ve reached the third set. What if the user decides to change the value in the first dropdown? What are your requirements if that happens? Should you remove all other sets and start back at square one? I guess so…
Since we are not aware of the full set of specs for your tasks, we can only assume stuff and this may (or not) be the best path to take.
Duplicating a row (or a div) using jQuery is quite fun and performance wise, it’s nice.
Keep in mind, you will have to give a different ID to your controls (dropdown + textbox) so when you submit the form, you could use the FormCollection to get those dynamically generated controls.
I have a simple question.
I have a lot of menuitems and buttons in my application. I try to remember to add ... in the caption to indicate that a modal dialog is followed.
But should I also add those dots for a non modal dialog. I try to search in Google but cannot find any clear answer. I use Win32 and Delphi.
Regards
The ... implies that some further input is required to complete the action of the menu item.
So, "Save" means that the menu item will cause the document to save, whereas "Save..." implies that the user will need to enter the name, or choose a file format or something before the file will be saved.
Typically the further input is entered in a popup modal dialog, but (a) not every modal dialog is a prompt for further information, and (b) hypothetically some other input mechanism could be used.
The '...' implies that the user will be given the opportunity to back-out of the operation.
This was in a user interface guideline book I read back in 1995, I can't seem to find a definitive confirmation online anymore.
I'd say that this depends strongly on your personal taste. I add ... whenever any new window is opened, be it modal or non-modal, to indicate to the user that he has to expect some other window to appear.
My guess is that there should be some Microsoft UI Guidelines document about that, but neither have I ever looked for something like that nor do I know of one.
When a user clicks once on an item in a Grid or a ListBox, that item is usually selected, hence most UI frameworks have a onSelected event or the like for that.
However, how can we generally call the next step when a user "finally" selects an item by e.g. double clicking an entry? You know when some popup might appear in the context of the selected item and the user can do further stuff.
Strangely enough, I think I have never seen a word for that in any UI framework.
onPicked, onAccepted, onChosen, onFinallySelected, onResult? All kinda awkward or too special. Any other ideas?
I haven't found anything wrong with SelectionChangeCommitted
The wxWidgets framework uses the term activated to describe what you're talking about. So, the method could be called onActivated.