Tag Info

Hot answers tagged

35

Checkboxes are often used instead... For these kinds of togglable, mutually exclusive options. For example: But if you prefer buttons... A check mark inside the buttons provides a better toggle affordance, and is also more color-blind friendly: Radio buttons can also be used here for the exclusive buttons, but they (a) require an additional 3rd ...


24

Why not merge the done and next buttons? This layout still allows a user to continue without being finished with the page, but requires less clicks.


20

I would join button 1 and button 2. Then you can have the one that is selected be a different shade than the other (for example, 'yes' is selected in the example below. When 'no' is selected it will become blue and 'yes' will become white). This will show that those two are mutually exclusive. Then for buttons 3 & 4, I would use the same 'on' and ...


15

Ideally from a pure UX perspective there shouldn't be such a checkbox at all. It is an unnecessary extra click. Users should be able to just click next and it is naturally assumed they are done. However, I assume that this is a box that exists for some sort of compliance reason? Its one of those "Yes I have read everything here and fully agree with it thus ...


14

No, it would seem not, as W3C states 1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA) Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1; Incidental: Text or images of text that are part of an ...


9

If a significant majority of users click Next after selecting Done you could design primarily for that workflow. Github does this with a combined button for commenting on a software bug with/without marking the bug as fixed: Without knowing your requirements, just marking a page could still be possible using Archive and next, followed by Previous or ...


8

For business software, design for workflow first, beauty second Design observations: Users tend to process text pages using the F-pattern, where the eye tends to use the left margin to anchor the visual flow down the page. Your workflow is, roughly: Read text Hit Done Hit Next Occasionally, the user may hit Previous instead. Also occasionally, the ...


7

This answer is based on these two comments from the original poster... They can see it in a menu to the left where they also can navigate between the pages. It is definately there to help the user remember what he has finished/hasn't finished. It could be an assignment of sorts. Navigating to another step does not mean you have finished the ...


5

For what I see, you actually have 3 buttons (= actions). Button 1 Tri state button/toggle: Button 1 reacts to itself and Button 2 Button 2 reacts to itself and Button 1 Button 2 Boolean button/toggle: Button 3 reacts to itself (YES/NO, ON/OFF) Button 3 Boolean button/toggle: Button 4 reacts to itself (YES/NO, ON/OFF) Basically, you have 3 actions, ...


4

A cyclical button may be your best choice. I have doubts about segmented controls since they traditionally match the mental model of radio buttons: one choice must always be selected. You could add a "None" option, but that could increase the clutter and confusion on the toolbar. A three-way toggle may fit your use case better. It isn't a very common ...


4

well, roundness of buttons comes from the Contour Bias concept: Contour Bias is a well-studied theory that shows that humans prefer rounded objects and choices over angled ones. The more angled, the more that human brains reacted with activity in the brain associated with fear and flight. in theory, your 50% rounded button should work better, and ...


3

If you're worried about Android's standards (which right now is Material Design), then you're using cards in a wrong way. This is why you're facing these issues. Here's from Material Design page: When to use Use a card layout when displaying content that: As a collection, comprises multiple data types (for example, the card collection ...


3

Print icons go in the top right of your screen. In eye tracking terms, this is a strong fallow area, and makes a good place for secondary actions like printing. This is a scenario where there is a strong conventional design pattern, and you probably shouldn't mess around with it. If printing is the primary action i.e. users most often get to the end of ...


2

First, I'd consider being more explicit than yes/no, try to semantically enhance your buttons and maybe even add an uncertainty element ("don't know" or the likes) Second, see, how you mentioned "yes", then "no"? Well, IN YOUR CASE this is how it should work, you're using natural language applied to your layout, so people are used to read yes / no rather ...


2

Those are some crappy buttons There are several things wrong with the blue dots: It overloads the icon confusingly. This Neilsen article explains why icons should be used carefully. The angled up and down arrows are reasonably (but not ubiquitously) familiar. But the blue dots are not familiar and adding them to the button damages the familiarity of the ...


2

The trouble with B is that, while it looks neater, constantly moving buttons around breaks the consistency of the system. Consistency Two things one must remember about consistency: Consistency has different dimensions. Maintaining consistency in one dimension will pretty much always break it in another. In your example, option B breaks spatial ...


2

I would use Ask to host and Grant video host or shorter Grant host


1

You don't necessarily have to go with a button but as a user, I'd definitely like a click target that's bigger than a single number. You could make the whole cell clickable. If you want buttons you could make your header "Sessions/Calls" and then use a single cell and make a button group with sessions on one side and calls on the other. The "right" answer ...


1

Icons have to be used with care. As the name implies, they need to be iconic, i.e., have some meaning to the user. There are very few buttons that have good icons; examples are Close or Save (even though nobody below the age of thirty has probably handled the floppy disk used in the conventional icon - I wonder when this will change to a cloud icon :-). This ...


1

When I look at similar websites, they just show what is relevant. The "buttons" are placed in context and not as a button toolbar, which leads to less bonding of the location.


1

Noting that the checkmark is an important but merely visual element, I can suggest that it only appears when the Done trigger button is clicked. Extending a strong theory... I wanted to show you this classy, simple UI solution (Kindle and tablet inspired.) Clicking on the ghost checkmark toggles the solid checkmark! In either case the state of ...


1

You stress the importance of not having the search button at the top, but what if the bar and results still appeared from top-down upon pressing the button? Something like so:


1

It's OK to use a popup here Assuming you need positive user affirmation of the legal disclaimer (ie it's important to you that the user directly clicks to affirm the legal content), a modal pop-up is not only fine but it has several benefits: The pop-up channels user focus onto the legal content (assuming you are masking or otherwise de-emphasizing the ...


1

Is there a best practice for laying out buttons with different functionality? Let's get back to this in just a little. First, let's look at (emphasis added): I have four buttons on my interface that all look the same but don't all act the same. So you've asked a question about layout, but at the core the real issue you're trying to address is ...


1

You should try creating a grouped button control. Something like this: When a user looks at the grouped buttons he/she may not immediately understand which one is on and which one is off, so you should add some color (active = green). If you think that this is not enough and if your design permits add some depth in order to eliminate any doubt when it ...


1

Iterate Iteration is the name of the game especially in today's agile world. I like this word because it is neutral and less judgmental than Unapprove, Deny, or Reject. From a UX standpoint it is more important that your users know what clicking the button will do before they click it. Inline help text is a great way to reassure the user.


1

It depends on your page design. The best position would be the point where user provides the last mandatory detail. That is the area where the print or call to action button must be placed. And hence it depends on the design or depth of the page. If its above the fold, you can provide immediately after the last input that is suppose to be filled by ...


1

Your question is logical. As per my opinion you have already solved this problem (I mean, you already have the better solution). The reason is if any user is a frequent purchaser then from the complete list he will just add it to cart. So placing add to cart on the list of perfumes is perfectly fine. If I am a new user, I would prefer reading some ...


1

Your observations and thinking is correct. Showing same icon as well as showing different icons might be confusing. What I think in this case is : You can use a hamburger icon at the top (if it is possible and you have some other options to display) and you can include both the type of settings in there. You can use icon with caption like Application ...


1

I think your real problem is not the icons but the fact that you have two different places with settings. Integrate the advanced settings in the application wide settings. Give it it's own tab or page if needed and make it always accessible (as long as the analysis section is accessible for the user). Consider creating a menu for different kind of settings ...



Only top voted, non community-wiki answers of a minimum length are eligible