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 ...


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 ...


19

If you do not mind hiding the available options at first glance, you can also use a combo instead of radio buttons that could save you some column width. download bmml source – Wireframes created with Balsamiq Mockups


19

I would suggest a triple set of radio buttons: one for 'in', one for 'out' and one for 'undecided'. Mutually exclusive toggles is likely to require lots of explanation and could leave the user confused: A pair of toggled buttons seems to offer 4 different combinations (A+/B+, A+/B-, A-/B+, A-/B-) but you are going to need to explain that there are only ...


12

Design for the micro-workflow Observations Most users will make a selection and move on, as you noted. Users are not very likely to deselect a choice, either immediately or afterwards. In and Out are the primary choices here. The undecided choice is an unbiased default. Null/default/undecided/unknown choices are often very difficult to design ...


10

It's a good idea, but it needs some implementation tweaking I think With a fixed voting console, it's easy to see how the console relates to the answer (it hangs off the top left so users know it relates to the answer) Once the panel becomes sticky while scrolling, it visually detaches from that anchor so it's important to maintain visual-semantic ...


6

First option is better, with the toggle. The reason why is because users given clear instruction on possible answers are more likely to understand and answer them (correctly) than when the instructions are obscured. In the case of the tri-switch, there are two visible options and one invisible option. Each has three states, but the latter has one option that ...


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

The natural arrangement for the relations between controls and their movements to the outcome from such action into the world in known as Natural Mapping. The above article, from Wikipedia, also using a stove top example; demonstrating poor mapping in control layout: and good mapping: Natural mapping provides users with properly organized controls for ...


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 ...


3

There appears to be two issues at hand Explicit or Implicit Tri-state? Quite unanimously for reasons given explicit Tri-state is better Compact visualisation of explicit Tri-state Three buttons, radio button group, combo box all do the job. But another UI that helps communicate connectedness of concepts clearly is also the slider - or other similar ...


3

There are many reasons why UX designers make this choice A few observations: Settings are usually "out of flow" from the main app. For example, a music app's main flow is selecting and playing music. Settings like file locations, album artwork settings, and themes are not in the main workflow of the app. Settings are visited less frequently, which means ...


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 ...


3

Having control buttons in a fixed position is something quite common on today's web experience. You see the top navigation bar fixed at the top of a lot of news paper site and e-commerce sites. More annoying for some users (who don't use an AdBlock tool), is the fact that advertisement banners, usually on the right side of the page and not inline with ...


3

I don't particularly like it. And the reason has to do with the visual separation of questions on a page. In short, the voting buttons are presently the most distinguishing feature identifying the top of a question and act as a very intuitive visual separator between questions. I found that when the voting buttons scrolled with the top of the window, I got ...


2

I feel like it would increase the likelihood of me clicking the wrong voting buttons because I'd have 2 sets of voting buttons very close together when reading near the end of a comment -- those for the current comment and those for the next comment. Also, like others, I find the motion distracting.


2

Personally I think it's a good idea although currently ther doesn't look to be much distinction between a question and an answer, which means the user could confused as to what they are seeing on the left hand side, maybe it needs better labelling or hierarchy applied? Also in the case of a long answer versus a short answer, it doesn't hang around long on ...


2

Your solution is still a radio button. It's a radio button with three options: "in", "out" and "undecided"; of which "undecided" is the default. If you clearly show "undecided" as a third option, then there is no ambiguity to the user. There is no UX reason why you can't select one radio button option and then change it later, same as selecting toggle ...


2

I have never designed with something like a television in mind, so you bring up a great question. For instance, is there any kind of standardization among TV sets for displaying pixels? Even if it expands beyond 1920x1080 in pixels, does it display websites at that resolution or do handle things at 2x (or even 3x, 4x, etc.)? I would expect that even with ...


1

To answer your question, the frequency of this action should be considered. Low frequency: Users do not remember their options when they don't use them regularly and so the options should be easily findable and understandable. Considering the screen real estate you have mentioned, and for users to easily understand their options, I would also suggest a ...


1

Between your two mentioned options, the two toggle button option will be a good method. Advantages: clear affordances doesn't distract from the main content existing examples: upvote / downvote buttons across various sites like this (stackexchange), reddit, quora etc. [ p.s. since the elements would be inside a busy grid, implementing a design with ...


1

Although some UI guides would suggest that check-boxes should only be used in cases where any combination of selections would be valid, I would suggest (and some designers seem to agree with me) that they are also appropriate in many cases where, given any combination of previous states and clicked state, it would be "obvious" what the desired next ...


1

From the minimal amount of information I would say; roughly 90% of people are right handed, therefore will likely be using the phone with their right hand. If pausing is an important/prevalent part of the game put the button in the top right to be easier to reach. If you have more important elements or if the pause button is going to block important game ...


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

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

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 ...



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