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:


66

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


49

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


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


30

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


28

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

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

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


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

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


13

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)


13

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


13

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


12

i thought of something like showing the first skill and let the user figure it out himself, that the others are clickable / tapable aswell (sorry I din't have much time on my hands to do this, but it may help) download bmml source – Wireframes created with Balsamiq Mockups


12

Destiny won a Platinum award for UI design. This is the method they implemented to show there was something interesting offscreen: It tracks around the screen as the camera spins, appearing on the closest edge. Just like technology likes to draw inspiration from science fiction, it makes a bit of sense for "slick UIs" to draw inspiration from video game ...


11

How about using a visual cue that users are most likely used to: an underline? Below is an example with solid underline and a dashed one.


11

“Affordance” is one of those terms that has come to be used for so many different things that I’ve recently just about given up using it in order to avoid confusion. Affordance as possible physical interactions In the original definition put forth by Donald Norman (1988) in The Design of Everyday Things: The term affordance refers to the perceived and ...


11

Movement might provide you with an option. The human eye is so attuned to it that it need only be subtle. On completion of the page load you could consider a rolling increase in image size and shadow depth on each image, across the chevron from right to left. This would draw a user attention in without having to "feel" the site. You then apply the same ...


11

It used to be that arrows were preferred as they provided a visual cue to users there was more to the menu if they clicked on / hovered over them. Over time web developers started making these menus activate on both a click and hover, in which case the arrows aren't necessary as users by default will click or tap on a menu item. If doing so then reveals a ...


11

Affordance has to exist, it is an implicit property of an object. Let me cite Norman (who is citing James J Gibson): ...the actions possible by a specific agent on a specific environment. To Gibson, affordances did not have to be perceivable or even knowable -- they simply existed That's exactly the point, signifier without affordance is a mistake (a ...


11

When the cursor enters the graph area, change its symbol to a "move cursor" : EDIT : An alternative solution is use this icon when the mouse enters the graph area : and this icon when user clicks on the graph area :


10

Dealing with usernames and passwords is a hurdle every user wants to get over as fast as possible to gain access to the thing he actually wants to use. So - in the first place - try prevent him from having to log out and in on every site. In any case you will need some sort of icon, logo, navigation bar, login-procedure etc. with total uniqueness (in your ...


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