89

The important thing is not so much which direction is right, but that you make it visually clear which direction is 'on'. This can be done by lighting up an LED, by an icon on the display, changing colors, etc. It just needs to be very clear what state the machine is and that this button will toggle the state. This is how single direction switches (buttons) ...


79

It appears to be dependent on country or region, as Wikpedia states in the article Light Switch: Up or down The direction which represents "on" also varies by country. In the USA and Canada and Mexico and the rest of North America, it is usual for the "on" position of a toggle switch to be "up", whereas in many other countries ...


69

You could suggest a shape that matches the choices below, and use a color to suggest interactivity. Then, to match that, make a hover state that matches the area above: Another slight option is to treat it like a drop area, and just have the space, but no ellipses:


65

The problem with your buttons is that they are not raised above the background, so they don't seem clickable. I highly recommend the Material Design for details on how to choose between flat buttons and raised buttons, with exhaustive do's and don'ts. http://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons


48

Save is a byproduct Save is a byproduct of early hardware- and software design. It doesn't have a common equivalent in the real world. Consider: If you take a pencil and make a mark on paper, that mark doesn't require an extra step in order to become permanent. In other words, it does not need to be saved. The paper may need to be stored somewhere so it ...


46

This is one of the first designs of a vertically-mounted electric switch: It was presumably designed this way to afford an in-built failsafe: it requires physical effort to close ("turn on") by overcoming gravity, which will otherwise open the circuit. EDIT: At least in the US, electrical codes (see National Electrical Code paragraph 404.6 - 404.7) still ...


38

You could: Remove the axis line entirely. If the diagram is not to scale, then the axis line itself is the confounding/confusing element of the UX that is causing failed perception. Use simple labels attached to sections that are set off from each other only in the sense of a list. You could put a larger space between items that are spaced farther apart, ...


36

Stacks are an effective user interface method to indicate additional content behind what's currently visible. Some examples of stacks in different applications: Thumbnail Stacks Most likely closest to what you're looking for. Additional thumbnails are hidden below, but with the edges visible to indicate their presence. SoundCloud Playlist Similar to ...


35

You should NOT rely on hover states. Even if you’re not developing a responsive website, now that we have touch devices, the days of relying on hover states to imply "interactability" are gone. I think you have 3 options here: 1. As long as you don't have other animations, subtle movement is all you need to draw attention to the UI elements—and a user will ...


29

I think @Alan George approach is correct, I'll just add two possibilities thay could help the user to get the message easily: Label + number: Because sometimes there's nothing better than being explicit download bmml source – Wireframes created with Balsamiq Mockups Showing quantity in the same place where "there are more pictures" is expressed ...


26

Affordances are what an object can do (truth). Perceived affordances are what one thinks an object can do (perception). Signifiers make affordances clearer (closing the gap between truth and perception). Signifiers often reduce number of possible interpretations and/or make intended way of using an object more explicit. A grey link on the screen might ...


24

NNG Has a great article on Making Clickable Elements Recognizable specifically for images: Ensure smaller images enlarge when clicked. Make all elements (e.g., picture, icon, text) that are associated with each other clickable. Doing so increases the target size and improves the probability of capturing an intended click. Avoid multiple calls to ...


23

Affordance is related to the object itself. Eg: A button looks clickable. Discoverability is related to the product/solution. Eg: An image-manipulation toolbar shows all features it is possible to use when you want to work with an image. A physical example: If you walk down a corridor, then the affordance of the door-handles will "tell you" how it is ...


23

There's no reason not to implement multiple solutions for best results. Anna Rouben's animation intro is a great idea. Though I wouldn't use it by itself. I would combine it with a 4-way arrow icon (used commonly for moving objects) with possibly a tooltip. For uncommon practices such as dragging input fields, I would make this as obvious as possible.


23

Start by figuring out what you want to communicate Since you are (rightly) looking for a reasoned, non-hacky way to lay this out, you can start with first principles. 1. Understand the layout pattern The layout you're trying to use is a common one....I call it the mini-map or navigator pattern although there is probably a more correct UX term for it. The ...


22

I agree with ted.strauss's answer, there are existing grip-indicators. A more suitable type would be a quare-pattern, that resembles a grippy surface like a floor mat. I think it does a better job in transporting the "grab here" message than a three-bar icon and it can also be expanded to a larger area. Also the three-bar icon is now more commonly used as an ...


22

I have graduated as a Petroleum Engineer, so perhaps I can help you here. This is a domain specific problem and the right solution depends on the kind of equipment you're using in the oil well. Let me give you a few examples here. It's slightly technical but I'll try my best to explain it clearly: Example 1: Casing Installation You do well casing before ...


21

Several ideas: You've said that fading edge is not available. I assume that if it was available, you would have used it. Why not implement a fading edge by yourself? This shouldn't be too hard to implement, just draw a gradient mask in a layer over your content. If you extend the default scrollable container class (ScrollView), you can add this ...


21

One isn't better than the other. They are simply different. There is a lot of evidence that your eye will pick out objects styled to look like they are 3D faster than perfectly flat objects. In addition seeing an object that looks sort of 3D will give it some level of affordance that wouldn't be there otherwise. The problems that the Windows Metro ...


21

If you want to drag a sign perhaps you can add another sort of indication that the object moves, i.e. However I do think it might feel unnatural to the user to drag a sign around. Clicking on object and make the sign move on to the new object would be a more natural behaviour for the user. Users always assume that the objects are the ones that are ...


20

Some of the standard cues: Hover state: Make the calendar icon transform when the user hovers it, maybe having the calendar show a grid representing a month on hover. Contextual text: Write Show month or similar as a link adjacent to the calendar. Mimic button: Add borders to the icon which makes it appear as a button.


18

They're definitely different principles. Affordance aids discovery, but discovery isn't about the visual look and feel at all; it's not even about expressing what a single control does. Say you have a delete button, it's red clearly 3D, depresses when you press it, just begs to be touched, and has a big trash can icon on it with the word "DELETE" written ...


18

I suggest combining these: chevrons on right (more natural, especially on touch, but no offense if you leave it on left) - of course, the whole bar should be clickable to expand/contract - not just the chevron indent for the lower level background color (lighter for lower levels) shadow (to show that lower level is behind/below the higher one) optionally: ...


17

Dragging and dropping is quite hard to communicate. You can provide a 'grabbing hand' or 'four way arrow' cursor on hover (but this only works if you can get users to hover in the first place, and besides, my experience from user tests is that cursors don't make much impact anyway) Give draggable items a hover state, or make them 'come off' the page by ...


17

The problem is it's not flat enough Are they icons or buttons? This is a common problem with flat design (see other answers) but one possible solution I haven't seen here yet is to remove information until the only viable option is to click. Think tiles. ...And at this point it should also become obvious that </> never was a suitable icon.


17

If you want to avoid the simple and obvious solutions: place signs above the cubicles reminding people to be quiet encourage cubicle dwellers to discourage loud behavior through constant reminders ("Shh!" or "Please keep it down") I suspect the only cultural design cues you could rely on are reverence (church, monastery) or respect (library, courtroom, ...


16

Sadly I don't have research material but some real world examples which uses the top/bottom direction. I have found an interesting post and a manual about switches in cockpits of airplanes. Boeing manual F16 switches


16

For issues like this I find it best to look at how other interfaces handle it. That way part of the user training has already been done — you don't need to reinvent the wheel. In this instance the first thing that came to mind is Pegman for Google Maps Streetview. Google handle this issue by placing the draggable indicator in a separate toolbar 'off ...


14

Print full-size images of people at work similar to what sometimes happens with empty shop hoardings. This would be effective because it's a visual reminder that people are behind the blank cubicle walls whilst preserving the privacy of those working and preventing them from being further distracted (if you had see-through cubicle walls). Some alterations ...


14

Broken axes are only useful if they are intended to be used sparingly. If, as you say, the axis is broken everywhere, it makes more sense to use a table instead describing the relevant points. +-------+-----------+------+ | Depth | Structure | Icon | +-------+-----------+------+ | 0 | Oil Rig | A | | 6100 | Foo Pipe | F | | 6200 | Bar Pipe ...


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