New answers tagged gui-design
0
Consider the case of someone accepting terms and conditions. I was considering if a switch button should actually be used instead of a checkbox. The conclusive decision I had to make in the end was, does a green side of a switch(i.e on-state) represents 'YES'
It is like ON/OFF representing YES/NO
I could not convince myself with, an 'on-state' button for ...
0
there are many states of buttons, sometimes I meet with the situation that it is worth blocking a given button until certain conditions are not met (eg entering variables)
Depends on hover, You can changing this attributes:
]2
Credit for Nathan Curtis for the pictures.
2
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 ...
0
Good day, I think here should be a another process (with identical UI Design and logic, differing in a few variables getting from the api (in this case, the price and subscription period).
In step back you should ask the user (for example, radio button) which version of the subscription he wants to use.
Of course this UI wireframe is only example, when you ...
0
I think the simplest design is the best for presenting complex data, and in your case trying to combine five different stages along with the percentage completion of the stage in one status bar might not be as elegant as showing five different bar charts in a consistent manner.
I understand the need to focus on a particular stage (i.e. Delivered) because ...
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?
...
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 ...
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 ...
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:
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
0
First of all, if possible provide labels clear enough that additional info is not necessary. In some cases this is not possible, an in this cases such a info icon (i suppose they will open a tool tip) can be helpful.
The overall layout will have an impact where to place the icon. Having the info icon close to the label gives the user context.
Option 2 ...
0
I think you should check the answers here:
Is there a difference of meaning between “edit” and “modify” in this
context?
To me modify is more extensive than edit. You could do both by
changing the contents, but if you simply changed the properties then
you might be said to be modifying but not editing. / Every edit is a
modification, but not ...
0
Short answer is no, but long answer is that you need to look at the big picture.
When it comes to copy text or labels for your application, it is good to take into consideration the broader picture for a consistency of writing style.
In most design systems, the hierarchy would probably go something like this:
Tone of voice from branding guidelines
Writing ...
0
As mentioned in other answers, I agree it can depend on the context of what you want to edit or modify. There are idioms to take into account for edit, modify and also change.
Yet since we're talking about user experience here, it's also a matter of end result from the user's point of view:
Edit: the user can access something and may alter it. But they may ...
0
Before designing this screen, go to your client and ask them if there is a courtesy period. And if so, tell them they need a screen for the courtesy period. Because that should be the focus of your work. Getting clients to pay on time so the service can continue, instead of re-activating the service after disabling it. This will be financially more ...
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 ...
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 ...
0
You can make a difference between the first and second button. It seems the real search button is the second category while the first one is apply or update settings.
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
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?
0
I think this article from Nielsen Norman Group, offers complex guidelines for the back-to-top button and answer to your question:
Use a Back to Top button for pages that are longer than 4 screens. For relatively short page lengths, Back to Top links are overkill —
people can simply scroll back without excessive effort. No need to
clutter the ...
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 ...
0
Depending on what you are assessing (medical diagnoses?) and what the product is (phramaceuticals?), there may be regulations or guidelines restricting specifically what you may claim or recommend.
Some options to consider:
Focus on the user. You can use a health indicator to give an overall assessment. You can use check marks and exes to draw attention to ...
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,...
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.
0
A dialog is not needed. Instead, provide a context menu with 3 items:
Set selection begin
Set selection end
Clear selection
This presumes that the numbers are sorted.
Results:
Users will do less errors, because they don't need to enter any numbers.
And your developer will be happy, because he doesn't need to validate numbers. Small validation is needed: ...
0
Madalina, a general minimum width for buttons, as stated in the Material Design Guidelines, is important, because it ensures that all buttons are reasonably easy to click or tap even for very short labels such as OK. Think "Fitts's Law."
And while same-width buttons may look more aesthetically pleasing, I've yet to see research that shows any usability ...
0
It's a bit difficult to make solid recommendations without knowing more about how your users will capture the numbers: do they have to manually check numbers on the dongles, or are these printed on a label on the box, etc.?
Be sure that you talk to some users to understand how they currently capture those numbers, and how they confirm that they've entered ...
0
The question is not if the ability to correct an erroneous bulk add is needed, but how will it be handled when it happens.
The answer partially depends on who the end users are and how much access you will have later.
If this program is designed to be used in-house (or you are hosting it for a customer and retain full admin access), then a temporary ...
0
Thank you all for your input!
I have devised a solution that uses a system indicator (unfortunately I can't simply ask for a system capacity in %, only good or bad).
Also, I can ask for the maximum settable value of each specific parameter, so using that I built sliders that have hard gradients as backgrounds showing the acceptable limits.
A jsfiddle is ...
0
One way could be decoupling color from % change and using a separate icon indicator as below.
0
Ans to Q1: It actually depends on business case to choose between all-or-none OR partial entry. If data is not interdependent, we can choose to save whatever is correct and as user to correct remaining.
Ans to Q2: As you are saying "...user should be aware of before proceeding..." it makes sense to have use acknowledge it first before proceeding. Just to ...
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.
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 ...
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 ...
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. ...
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 ...
Top 50 recent answers are included
