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 ...
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
Based on the Layout & Technology section of the Accessibility page, the tap area continues to be, at minimum, 48x48dp, thanks to padding:
Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element. For example, an icon may appear to be 24 x 24 dp, but the padding surrounding it comprises ...
3
I think it depends on the button:
If the button is too obvious as the button to close a modal window I
don't think it's necessary.
If the button is to clarify an immediate operation it can be
useful. In fact this page has tooltips on all its buttons:
2
Use a tool like Adobe Kuler:
https://color.adobe.com/create/color-wheel/
To find tertiary and complimentary colours for your design. That way you don't have to use your header blue for your primary & secondary CTA etc.
2
Why do you want to use a single color? Use a color palette formed by a primary and a secondary/ accent color.
1
Without seeing the larger context of your UI and your use case, the advantage of a larger hit area is that the user 'click' or select the CTA from a larger hit area.
Look into Fitt's law
Fitts’ law states that the amount of time required for a person to move a pointer (e.g., mouse cursor) to a target area is a function of the distance to the target ...
1
From an accessibility point of view I’d make sure that the action button specifically has the click-action attached, since screen-reader users would mostly expect a button / link to be clickable. You can still make the entire card clickable with the mouse, though, for sighted users. But let’s say you just made everything a clickable button - screen-readers ...
1
This applies to any form or page. The button is placed on the left because all items are left aligned on the card. If they were centre aligned, the button would be in the centre as well.
The reason why a form submit button is placed at the bottom-right even though the form elements may be left-aligned is to make the button stand out that this button applies ...
1
If the website may be used in mobile, tooltips may not be a good solution since most are initiated by some kind of hover.
If the information can be conveyed after the button is clicked, perhaps a toast notification could help. This provides an immediate notification upon interaction which will likely satisfy the user, but be passive enough to ignore if so ...
1
Yes actually there is a standard for this. Unfortunately most design firms and and tools seem to be unaware of it. According to WCAG 2.0 for Non-text Contrast
Success Criterion 1.4.11 Non-text Contrast
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
User Interface Components
Visual ...
1
That NN/g article is correct, and the answer to your question is, Yes! :)
As also stated in, say, the Switch section of the Material Design Guidelines, the key behavior of a switch is that "[w]hen a user toggles a switch, its corresponding action takes effect immediately."
Every time I've discussed this aspect with fellow Ix designers, we agreed that "...
1
"UNDO": I made some changes. After double checking, my changes are wrong and I would like to revert to what is stored on the database. This button prompts the user if they are sure they want to undo their changes.
The usual meaning of undo is to revert the most recent change that was made, not to restore the last saved version. Undo is usually performed ...
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
