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) ...
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 ...
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:
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
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 ...
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 ...
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, ...
Stacks are an effective user interface method to indicate additional content behind what's currently visible.
Some examples of stacks in different applications:
Most likely closest to what you're looking for. Additional thumbnails are hidden below, but with the edges visible to indicate their presence.
Similar to ...
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 ...
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 ...
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 ...
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 ...
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.
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.
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 ...
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 ...
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 ...
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 ...
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)
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 ...
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.
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, ...
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 ...
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.
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 ...
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 ...
Came across this post today and wanted to provide a response based on some developments in the past couple of years (since 2012).
Google offers a good solution signaling its Gmail users of sortable elements by using two rows of stacked dots on hover (desktop)
You can add a scrollbar or preview chart to clearly indicate that users can zoom in/out and interact with the chart. This makes instructional text unnecessary. See the following demos.
In addition to the scrollbar or preview handles, the user can still click and drag to zoom in on an area of the chart. They can also use the context menu (right-click to ...
This is an affordance question :-)
The great thing about check boxes is everybody knows what they are, and what you need to do to interact with them.
Row select is not so well known and it certainly isn't blindingly obvious in the way that check boxes are, although the row select interaction is easily learned.
Row select can have its challenging ...
Google has added this differing in hovering feedback to make a visual distinction between navigational elements and action elements in the UI. It's really to distinguish the semantics between actions like Compose a new mail and Open email.
So that is basically the strategy behind the behaviour. The reason however, how they feel that this will improve the ...