60
My web app has the same workflow and we show a disabled version of the Continue button which is enabled when all the form fields have been entered. If the user clicks on the Continue button without entering all the info, a user message is shown in the pop-up, so I think B is the best solution.
Option A can be frustrating for the user because they might ...
28
It is an anti-pattern to visually disable affordances, functionally disable affordances, or hide affordances. PLEASE don’t do it. I will make a case for all three.
Disabling or hiding affordances is one of my biggest pet peeves, especially since it is a case of over-engineering the solution:
It’s always extra engineering and design effort to hide or ...
8
Show a current state of the systems capacity, and update the pane as they tweak the thresholds.
If you can show a base setting, either by a % of capacity, or a binary state, you can allow this pane to adjust as the thresholds are adjusted.
If their changes are within the bounds of the system capacity, you can surface the Save button, or cancel their ...
6
I personally prefer the visual progress bar than the percentage number info. This is an example design combining both possibilities in the same space:
6
If the tasks are mandatory, and they should only be so for features that enhance the experience, like selecting the colour of a jacket before proceeding to purchase, then my advice would be to have the button visible, but disabled.
This combined with good use of tagging fields as optional, and messaging, should allow your users to complete the steps without ...
5
Frame challenge: most of the time, multi-step "wizard" workflow that won't let you continue to (or even see) what it's going to ask you next until you finish what it's asking you for right now is user-hostile and is a dark pattern. To the user, it feels like they're being asked to give information before they know whether doing so is going to be beneficial ...
4
Empathy is your friend here, and empathy in UX is critical. The ability to put yourself in the customers shoes should be intrinsic to anyone wanted to practise UX.
With that in mind, think how you would feel if you suddenly lost access to a service on which you, perhaps, rely heavily. Especially if the reason for non-payment is due to personal ...
3
Some options to consider:
Include some explanatory text. What are packet size, latency, and retransmissions? Why would someone want to use higher or lower values for each?
Make the rule explicit. As it is, I don't see why 60ms latency with 6 retransmissions is good, but 10 retransmissions is bad. Include the formula if you have to. Something like "capacity ...
2
I think the only possible solution to this question is to sit down with your group of designers (if you have one) and make a brainstorming.
There are several things involved, what can help is a relative order. According to what's explained in the question, there are five different "states":
And three possible combinations:
Finding a solution for 1, 2, 3, X,...
2
Having multiple search buttons is confusing, my suggestion would be to have the search button always be at the bottom of the view and have the filter items scroll.
Example: The yelp iOS app search filter screen
2
I find the percentage very confusing. It is the percentage of the pieces processed in each delivery state. It might not be clear to the user what these percentages actually mean (well, I don't know your user and there actual needs).
A progress bar always shows a percentage of something. Which means, that the users will have this information in a visual way ...
2
When you have too much content and little space, you should categorize your content and make a separate page for each content category. Besides, you need knowledge of an information architect. you can start card sorting or alternative options and categorize your content based on users minds.
1
Native controls usually provide a better user experience (more familiar to the user, better platform specific feature support, etc.), but as you noted that varies across platforms.
A few things to keep in mind are:
How and where will this program be used?
If the program is going to be used in a work environment (like order picking in a warehouse) where ...
1
Definitely, don't go with two search buttons. Very confusing for the user. Which search should I press will be what they think? Use a single search button and make it fixed to the bottom of the screen. Also "Looking for" as a placeholder and title are confusing... Looking for what, jobs, pay rise, part-time work? If this is job titles the placeholder should ...
1
I would suggest having one save button at the end of all filter options. It would avoid unnecessary confusion for a user. Also, it demands extra space which makes the list much longer. If the lists are more than 2 scrolls, consider grouping few of them & make it expandable. Users feel a bit uncomfortable to scroll more than 3 times. Unless it's ...
1
You describe a way of thinking about accessibility that is quite common.
Lets assume it is for a contact form and ask those questions:
Does the hover state need to be accessible or the whole button?
Does the button need to be accessible or the way the form is send?
Does the form need to be accessible or just the fact that people are able to contact you?
...
1
Let's take the example of a table row that is highlighted on mouse hover.
As mentioned by Sooraj MV, WCAG enforces a contrast ratio of 4.5:1 minimum for AA level of accessibility.
OK but you can argue that the color contrast is good when not hovering / focusing the element.
The problem is that some people with low vision will use a screen magnifier, and ...
1
First off, hopefully your hover state is also indicated with keyboard focus too. (Just use :hover and :focus in the same style definition).
Whether the button has focus or hovered or not, the text on the button must have a sufficient contrast with its background color. If it didn't, then the text might disappear when it receives focus/hover and then you ...
1
Yes off-course. WCAG 2.0 version 1.4.3 has not mentioned anything specific regarding color change for button text on hover/focus states. It is safe to assume that the button text on hover/focus states should maintain a contrast ratio of 4.5:1 or more to pass AA conformance level of WCAG 2.0. more info can be found here: https://webaim.org/articles/contrast/
...
1
I would go with option 1, as it's located close to the item (label) for which it gives informations about
1
I'd like to suggest Option 1.and also you can show information without clicking the icon. Also, each and every field do not need information icon in my opinion. such as Genter, Birthday. Try to put an information icon where the user will get confused.
And these are my suggestions
1
I think it’s a bit confusing. People may think, “Are the search buttons only for those particular filter sections?” Not that it matters.
What if you broke out the true search pieces: location and looking for, and use the search icon, then have your filter section in a new “card” or area and use an “Apply” button?
1
Apologies if i'm missing something but why do you even need to convey anything bad for business to the user? If the user is in good health and does not need your business' services - then i would change the message to something like;
"Thanks for your interest, but it seems you're fighting fit right now! Would you like us to contact you in a [x} months for ...
1
A couple of suggestions as to how I would handle a scenario like this - top version changes to indicate an error and the user selects it to show, good for compact work interfaces, the bottom takes you larger version and provides feedback where it is ok or not, thus not expanding nor having empty space.
1
I recently worked on a similar multi-step wizard that helped medical practitioners find the right medical licences to apply for.
TL/DR: we went with deactivated button option.
Since we followed a progressive step-by-step approach where the response to each question guided the subsequent questions, the 'Continue' CTA needed to be after each response. ...
1
Where is option D? Show the button in enabled state and also show instructions that make clear that the form must be completed before you can continue. This way you let something to discover. The user could (and should) have read the instructions, but if he doesn’t, he can still click the button and get some feedback what to do next.
I advice not to shout ...
1
I think the second approach is the way to go. The user then already knows where he can continue and that there are more steps coming.
the third approach can work aswell, I would need to see some mockups for this. It can be really elegant, but the danger of confusing the user is there. I think the second one is save, reliable and user friendly.
Only top voted, non community-wiki answers of a minimum length are eligible
