A message from our CEO about the future of Stack Overflow and Stack Exchange. Read now.
412

Short Answer: Quite a late answer, but I'm surprised no one here pointed this out before -- it is possible for a toggle switch to show its current state and the state to which it will change simply by having text outside the button, instead of on it. Long Answer: As dotancohen points out: The problem is that in English "on" and "off" are both adverbs ...


75

I found an article that explains this. Apparently, in Argentina, ATMs give cash before the card, resulting in a large amount of people leaving their cards behind. See http://uxmovement.com/thinking/preventing-user-errors-in-automated-teller-machines/ - unfortunately there are no references cited so I'm unsure how true this is. To me, however, it would make ...


60

Whatever you decide - please don't do what twitter does.


35

The problem is that in English "on" and "off" are both adverbs and adjectives. Therefore, find replacement words that are either verbs or adjectives to label the buttons with: Enable / Disable Enabled / Disabled Start / Stop Running / Stopped ‏ Very late edit: See this terrific switch that a coworker of mine designed, which succeeds in keeping the "on/...


33

And, I suppose, a metal chain is intrinsically linked with hyperlinks, paper envelopes are required to send e-mails, and your browser's home page is an actual house? Look past the pedantically literal and you'll see value in a metaphor that has survived, near-unchanged, for decades with no confusion and no ambiguity. Why change it now?! Next you'll be ...


32

I'm going to give some advice from a Security standpoint + UX. I wouldn't sacrifice either one for the other. Have both. There's an important question of secure practices in your question. The Best Practice from a security standpoint is to not identify which entry was invalid, and have a generic answer. Let's ask What Would Google Do and take Google's ...


30

I have a feeling this question might be moved to the Stackoverflow site but Its an interesting question. The reason behind this was because Fortran introduced the concept of using "=" as assigning values from one variable to another which led to a lot of confusion about what to use as an equality operator. To quote this wikipedia article. The use of the ...


27

Unfortunately there aren't many real references to help answer this question. UXMovement has an article which Tass references in their answer, which makes some good points about the task flow of using ATMs. In summary: Users follow the tasks in sequence, but regard the task as completed once they have achieved their goal. Subsidiary steps are easy to ...


26

A reasonable compromise would be to have the button not highlighted (have a neutral background color perhaps) when it is on the off state, and highlight it (change background color) when it is in the on state. For example, looking at this screenshot of the Spotify (web)app, do you think shuffle is on or off?


24

In this situation, I would not use a drop down until you need to. Using a drop down with one option will be annoying to some degree because people will click on it and expect more choices but not find any. Also, people will be trained to not click on that drop down because its 'useless'. You'll have to somehow retrain them to look for the new options if/...


21

This exact questioned is actually answered! This questioned is an example of a Forcing Function described in the book Design of Everyday Things by Donald A. Norman Forcing Function Defined Forcing functions are a form of physical constraint: situations in which the actions are constrained so that failure at one stage prevents the next step from ...


20

There's already 18 answers here so this might be late to the party, but it makes sense to use checkboxes in such situations. Some examples: And when selected: This is similar to the "dim / lit" approach that Facebook's "Like" uses, but is combined with a checkbox for better visibility. In any case, the key point is to use only one word (or set of words) ...


20

I'd stop just short of "don't use them." I'd suggest toggle buttons are acceptable in the case where there is a clear on and off state. This can occur, for instance, when you have a line of grayed buttons that become colored when you click them. This is the reason Play/Pause works in many cases. The play button is not so much a toggle between two states as ...


20

There is no reason you cannot relabel FAQ. Contrary to belief, most popular websites refrain from using the term altogether. For example, Twitter labels their FAQ section "help", as does both Facebook and Google. If you want to relabel FAQ, go with either help or support. Both translate worldwide and the meanings are easier to conceptualize than FAQ.


19

This might be another of those things like the floppy disk being used to represent "Save". What it represents has long since evolved away from the initial coining of the expression - there have been discussions on Meta Stack Overflow about the naming and use of FAQ on these websites - but it's what people expect to find and will go looking for if necessary. ...


18

The simplest questions often have complex answers. If you’re making a game, it sounds like you may be making a custom interface, so you probably need some general principles to guide your control design. Whether to trigger an action on mouse down or mouse up depends on the control and the action and how the user will interact with it. This is probably why ...


18

The idea behind masking is that someone may be watching your screen (from behind you). (Couldn't find an existing answer with this, even though I am sure I saw it here once, the is the closet I found is Ben Brocka's answer here.) You could let the users elect to unmask or use the same trick used in mobile phones (temporarily unmasking the last character). (...


18

It's the same as the floppy disk icon: if there was a natural successor, you would already know what it was. If you don't, it means that no natural successor has emerged. And if one hasn't, frankly, who cares?


15

The only time you should use a dropdown where there is only one available option is: to stay consistent with pages that have many options for the same selection. For example: You are shopping for a new pair of shoes and are currently looking at a style that has sizes 5-14 available. These sizes are displayed in a dropdown. You click on a different style ...


15

A poke around Google suggests that most guides on usage of the symbol agree with your intuition. This article emphasizes that you should use a non-breaking space to avoid the symbol and the copyright holder being on two different lines or pages. Their reasoning is as follows: Must you put a space af­ter the copy­right sym­bol? No, but se­man­ti­cal­ly, ...


14

You will need to be consistent with the platform for the simple reason that certain app stores like that of Microsoft will not even allow your app to be published if it doesn't follow the Metro UI guidelines. That said, another reason for making it platform-consistent is that people expect apps to behave in a certain way in certain platforms and have ...


14

I think it's a good idea to have only one password field but I think it should be masked by default, with an option to unmask. There are some users that feel this is not as safe, maybe even just because they're not used to see their password in clear text. The solution should address the concern of these users, too. download bmml source – Wireframes ...


14

Well its a human behavior that we never forget to take the money :). When we step into an ATM our primary task is to take the cash. So we are always in a mindset where we are trying to understand how much do I want to take out and what denomination will I get. In this phase we are all thinking about the CASH. The Card is just a medium to authenticate the ...


14

This is the most compact and intuitive way to present an indefinite progress. The key word is indefinite. source I can hardly imagine an indefinite linear solution. For example, a common progress bar in indeterminate mode looks a bit unclear: source BTW, circle is a very useful shape (just want to make your day better :) Round-robin - The term ...


12

I have been using Toggle Button to "Add" and "Remove" elements to a collection using simple Toggle Button (one with state visible at a time) which had following states. ADD (if button wasn't clicked ever) REMOVE (if the button was previously clicked and an item was now part of the collection) BUT this always pinched me as for a novice user (age 50+), it ...


12

I suggest using microformats instead of "tel:" in your markup, and let the browser handle it. Power users can install a plugin or user script if their browser does not natively turn phone numbers to links to re-format the microdata or show new items in the context menu to handle that data (E.g.: "import into address book," "call directly" and so on).


12

There is no widely accepted convention to show optional fields. So as you described, you can mark the fields as optional instead using labels (as noted on the right): Another way could be to shade the section with a subtle gray color to distinguish them as optional, while also including the text. I'd refrain from using a question mark, as that generally ...


11

I would say the way you have it set up is the expected and natural experience. Users likely will not be thinking about which axis the object is rotating around, instead which direction the object itself will be rotating/flipping. Take Flipboard, for example. Swiping left or right technically flips the cover around the vertical axis, but the user sees the ...


11

Ideally, we'd always be able to give the user an estimate of the amount of time remaining. Visually, this is usually done through the infamous progress bar. However, certain activities such as waiting for a stream to buffer are difficult to estimate completion for. Most, if not all, progress bars have some sort of "indefinite" state available to programmers ...


10

I don't think this has been mentioned by anybody, but one instance when you must NOT implement the Auto-Save functionality is when you're working with files opened from a USB memory stick. Although not widely known, but USB drives have a very limited amount of read-write cycles, sometimes as low as 3000-5000 (see Wikipedia: USB flash drive)). If your ...


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