439

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


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?


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


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


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

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


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

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:


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

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


7

Labelled buttons (toggle buttons) are often confusing or even ambiguous, as you point out. Instead, show the status and the action, like this: Online   Go offline So we have a non-clickable label clearly indicating the current status, and a clickable button to carry out an action to change the status. If you click the "Go offline" button, then the ...


7

I've built a lot of webapps and when this issue comes up I face one or more of the following issues: It takes more time to build. Sometimes you need to build a "Draft" model in addition to the normal model. It can be hard to make autosave discoverable; it's not super helpful to autosave for a user and have them just wonder how to save their changes. When do ...


6

You aren't going to teach them a new language because you don't want to learn theirs. I think it's really important that the designers at least understand the points that are controlled in CSS. You don't have to annotate in valid CSS but the terms you use need to be clearly related for the UI developers. Why invent a new vocabulary? Here's an example of ...


6

The term directory is hardly ever used anymore and both Windows and OSX use the term folder. Although they can be used interchangeably since they mean the same thing to a user, they technically are not the same. See also: https://superuser.com/questions/169457/directory-vs-folder Both are a metaphor. While on a filesystem level the term directory (a listing ...


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