426

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


62

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


36

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


31

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


30

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?


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


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

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


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


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

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


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

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


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

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

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


11

Don't kill something that is useful The design purpose of icons is to communicate meaning rather than to portray the subject accurately. The envelope icon has been used so broadly to represent mail that it is close to (or is) a universal icon. If your goal as a UX designer is to communicate the term "mail", then the envelope icon is effective ...


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


10

I would definitely not go with 'Short News' since it implies the news story is short. Which, from what I see, is not the case. You click on the item to be redirected to the complete article. 'Top News' seems like a fairly simple to understand and generic enough term to cover this. Other alternatives include 'Trending News', 'Latest Stories', 'Featured ...


9

No. Oranges: 50 is not correct in French. In french, you have to write Oranges : 50, with a non-breaking space before the colon “:”. In traditional print, including in English, we put this non-breaking space. It is nicer.


9

On Facebook, the like button is a good example for a toggle button. On Facebook's Android app, the like is on a button and it's a grayed when off and highlighted blue when on. See screenshots below. Basically, I agree with them - emphasize the positive and don't mess with users' brains (minimum change). I'm not sure if it's a good way for color blinded. ...


9

Just to back some of the previous answers with an excerpt from one of my favorite UX books "The Design of Everyday Things", in chapter 7: 7. When all else fails, standardize. When something can't be designed without arbitrary mappings and difficulties, there is one last route: standardize. Standardize the actions, outcomes, layout, displays. Make ...


9

For the menus, the standard is to display the shortcut at the right of the command (and probably at the left for RTL locales). Example: Photoshop. For the buttons and similar elements, shortcut keys are not displayed for a good reason: there is no enough visual space for it. Don't forget that shortcuts should be configurable (especially if the default ones ...


9

Auto-suggest or term suggestion. If what you are talking is the text that appears underneath a text field when you start typing. You can also find it as autocomplete.


8

I would recommend watching the following video (from 1991!) which was seminal to the current design of the iOS toggle for instance: https://www.youtube.com/watch?v=wFWbdxicvK0 And corresponding paper: http://dl.acm.org/citation.cfm?id=143079 Here are the toggles they compared: And the results in preference:


8

In my view, horizontal scrolling as such is even less accepted today. With responsiveness on the rise (RWD & A List Apart article from 2010), pages with regular horizontal scrolling appear to have "flawed designs" that force the browser to show horizontal scrollbars. This is even less acceptable as it was 5 to 10 years ago. In addition to that, ...


8

I would probably call this a News ticker. I think it fits very nicely with the case you describe. On the left hand side you've got longer news articles and posts. The column on the right has shorter, brief news. Facebook uses the term 'Ticker' for the brief news that are displayed on the right side of the screen in the desktop version. Basically all ...


8

Top right Most users will perceive the image and related text as a whole, then process it starting at the top left then moving downwards and across if necessary. For image+text (English/left-to-right languages) combinations, the visual flow looks like this from eye-tracking studies: Here's what that flow looks like for a Facebook image+text feed: Since ...


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