129
Your objective is to draw your client's attention towards not doing business with PEP, therefore you could highlight just that and avoid the opposite sounding PEP: Yes/No combination. Leaving the non-PEP blank conveys the required message.
Alternate design for PEP:
Update:
You could explicitly show an indication for non-PEP as well:
Alternate designs for ...
65
Your question revolves around signifiers for a button's design (i.e. hints that communicate what an element can do/how to interact with it).
I assume your primary concern with buttons is that many of them are becoming flat, borderless areas of text or icons, which often lack many of these important signifiers that indicate clickability.
There has been a ...
51
Option 2 leaves the modified content in place and visible. It means that your users don't have to recall the data they just submitted / modified.
Inline notification (Option 2):
Does not make the user recall/remember the data.
Keeps the modified data visible, allowing the user to catch any mistakes they may have made
Keeps the state indicator ('Saved') in ...
25
Option 2 is better, as discussed by Mike M. I would actually recommend a third option, similar to Option 2. I would replace the "Submit" and "Cancel" buttons with the "Saving" message and spinner. This ensures the first thing the user sees is the "Saving" message. When a user presses the button, their eyes will linger there until something else catches their ...
21
Avoid designing in isolation without PM and Engineering as partners. You'll never have the full perspective on your own.
Ask questions early
Self study to understand your tech stack (and web foundational technologies)
Don't be afraid to say 'I don't understand'
All software design and development involves tradeoffs and constraints. Some of these are ...
20
One way is to differentiate primary vs secondary buttons. You could keep “Install” as the prominent button and “Documentation” as the secondary link. Something like this:
10
What I've found works best for my use case is to, like @Hugo-Viallon suggests, put the spinner in the save button and disable all other buttons. After completion I show a toast if the user isn't redirected.
Without the toast I had users saving multiple times just to make sure it worked, a small confirmation helped prevent that.
jsfiddle
8
There's no repetitive action here, unless it is expected that the user will install many products in one visit. Having similar buttons do the same thing to different pieces of content may look ugly (I find that very subjective), but it's very easy to understand what the buttons do.
You can get rid of repeating buttons but that forces you to divide the ...
6
I'm expanding my comment on maxaathousand's answer as requested and have added some additional insight:
The most important visual key to a button is contrast. This refers to:
The button contrasting against the background behind it
The button contrasting against surrounding elements and the whole page
The text or symbol within the button contrasting against ...
6
You are going to sacrifice consistency for repetition if you want to take this approach.
The design pattern used is a series of card components in a full page grid layout, which requires each component to be replicated. If you remove the primary and secondary action, it will require creating another section on the page to process the user actions so you ...
5
It is usually a good idea to disable the Next button until a require activity has been completed. You know your users can't complete the activity in less than 15 seconds. I will propose then to disable the next button for 15 seconds. Write on the disabled button a message like "watch instruction first".
5
This part is called a "Card".
It is used to as a compound for multiple elements that belong to one display or meaning.
Design parts are usually UI terms. UI is the User Interface while UX is the User Experience.
UI is visual, UX is theoretical meaning behind the UI.
To find out more about "Cards" feel free to check out more here:
UI-...
4
there is really no agreed general semantic term for this interface component.
Shopify regards it as a Popover menu in their Polaris Design system.
IBM regards to it as an Overflow menu in their Carbon Design system
The Ant Design system refers to it as a Popover menu.
Bootstrap refers to it as a Dropdown menu.
I personally think it's an Enhanced Popover....
4
You could have a variant of Option 2 :
The loading could be put on the "Save" button, as a spinner that'll replace its text. You also disable buttons.
This way you show that something is happening, and the spinner being on what was the "Save" button tells the user that something is happening. The other buttons being greyed out make it even more obvious ...
4
You need no invent something new, just look how the widely used apps behave. In this way you can exploit users' previous experience, so they'll find this feature is "intuitive" ;).
Google Sheets
Airtable
Some points to consider:
Use clear visual cues for users: change cursor type and show the border between rows (as on the pictures)
Increase the ...
4
There is a word in german for it (for this very specific purpose in graphic design): "Störer". Which I have seen translated to eye-catcher.
The purpose is simply disruptive marketing, interrupting your natural scanning of the content.
Personal anecdote: Marketing managers absolutely love it, because it's
hard to look away. But be aware, over-use deter ...
4
UI Mascot
...repetitive tasks often struggle with retaining users: people abandon them because they feel bored, and boredom is simply lack of stimulation. By using positive stimuli like humor, movement, unique art, elements of game, and relatable characters we can make users feel a different way — more excited, less distracted, and ultimately happier.
...
4
We were faced with this exact same problem.
Our multi-select control behaves like yours, except for one detail: when the user clicks into the field, the menu immediately displays the full list of available options.
We explored a number of design options, but agreed early on that we needed a straight-forward, easy-to-discover affordance to trigger the "...
4
Most applications/websites either have an icon (often a question mark) to indicate you can hover over it (but then the hover only works on the icon, not the label) or no special formatting at all. The answer here suggests using a dotted line as well; I vaguely remember old Windows (3.x) help files working the same way.
Stack Exchange has a lot of labels / ...
3
About Commanding in UWP apps. What commanding approach is best? office like?, UWP? or classic win32?
I'm so glad, somebody raises that question. It's Microsoft's fault that you have to write such a long question, because they created that inconsistent mess.
Everything started with Microsoft making cross platform + touch input the top priority for Windows 8 and future Windows releases. That brang us
a Windows experience that was consistent with Windows ...
3
Provide two (equal-weight) buttons: "Straps fitted OK" and "Show me how". Then you have no tempting "Next" button and new users are made aware that the video is relevant.
3
I believe when the user clicks on the button save and the second block is empty, don't need validation because it's not a priority for the user the fields empty. If he clicks on the button accidentally he can finish the task and if he needed the second block and forgot, he can edit this information later.
3
My viewpoint:
Save button on the bottom. The flow should follow natural behaviour. The user will click on the save button after filling the form and then naturally the action should be there, after form. But if you not confident about this, please add both, on the top and on the bottom.
You could create 2 stages of verification:
If any data was filled on ...
3
Maybe you could ask them for a zip code or city or something like that?
3
At its essence, It's a card that contains user profile info. Its called a User Card or User Profile Card presented in a popover and triggered by mouse hover/touch/click.
Many designers and Design Systems consider it a variation of the card component.
There is a lack of naming standards. Since there is no consensus, there are many fancy names out there. ...
3
If the text field can contain more than a very few words, then better not hide it, and better not make it unselectable either.
It's very annoying if I fill out a large text/comment field, hit submit, the saving icon is animating, animating, animating, then the connection drops or some other error occurs. If my screen wasn't hidden, I could at least select ...
3
It's referred to as a 'Master details pattern'.
The right pane can also be referred to as an inspector panel, or property sheet, although normally those are usually a narrow, scrollable stacked form.
3
The idea that you are proposing does make sense visually. However, there are certain things that we can take care in a better way are:
Main view as preview: From our understanding, the user is constructing a dashboard and setting the parameters will help them build the chart. How about not disturbing the main view with setting and all on this page? Let the ...
3
Can't we consider, if user has made no selection then he/she is intending all of them from dropdown?
Many sites filters works in a same way. Users are already trained for using filters. Using the schemes that already exist we reduce cognitive load.
If still want to make user think,
How to show "Select all" option
Try to keep 'select-all' option ...
3
The only thing that could be considered a standard really is the question mark in a circle icon, as @Glorfindel mentioned. Apart from that, it's what fits well with the rest of your content and UI design. As long as people can see that something is interactive.
Can I ask you to look into making them accessible?
https://inclusive-components.design/tooltips-...
Only top voted, non community-wiki answers of a minimum length are eligible
