Tag Info

Hot answers tagged

79

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


66

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 such as the UK, ...


51

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


39

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

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


36

RedBox had a problem a few years ago with people installing credit card skimming equipment on their machines. The equipment was often attached to the existing credit card reader. It was big and bulky, but a lot of people wouldn't realize that it wasn't the right hardware. I thought these barriers were put in place to prevent the skimmers. The Washington ...


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


34

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


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


27

I always assumed it came directly from the asterisk's standard use denoting footnotes in text. i.e. fields would be marked with an asterisk with a note somewhere explicitly stating the meaning. Eventually it becomes widespread and users assume it means 'required' without referencing the footnote. Much in the same way we are taught that red labels mean ...


25

I've used a little "grippable" texture on stuff to show that it's draggable. Here's Gmail's texture:


23

I saw a presentation by Sean Kane from Netflix a few years ago, in which he described how the DVD queue works. You should study it if you can (if you have an account or know someone who does). A couple of points to note: He said the default move cursor didn't test very well, so they switched to a grab cursor, as suggested by GoodEnough. The drag-and-drop ...


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


20

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


19

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.


19

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


18

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


17

The whole of the following linked article is interesting, but the following section is pertinent and I think worth including in the context of this question, even though not providing actual patterns. From Scott Berkun's The myth of discoverability (2003) How do you actually make something discoverable? As a designer, you have a handful of ...


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

It's hard to answer the question without seeing more of the design scheme, but I'll give you the guideline anyway. Your question is about a problem of affordance. Affordance is a visual cue that implies action. For example: a thin slot in a soda machine indicates the place in which the user should insert their coin, and the pull lever in a car's door ...


16

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


16

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


15

Besides the obvious... An indication that what is on screen is not the complete content. For example: Text stops mid sentence A border box shows no bottom but has the left and right edges stopping at the bottom. Even more emphasized if they have drop shadows. Text or lists that cut off the bottom half of a line. Pictures cut in half Long text which has a ...


15

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


15

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.


14

There is a standard icon of three horizontal lines one on top of the other that implies items can be dragged and dropped. It implies "friction" or "handle" and is a bit similar to the diagonal lines in the bottom right corner of windows or text boxes that allows resizing them.


14

I usually keep my editable fields white and non-editable fields grey (or monochromatic colors if not white fields, light-color: editable and dark-color: non-editable).


14

A really interesting question, we had a chat about it and decided it was probably one of four things: 1) Cost - if you're making a million lift buttons every year, maybe there's something about the manufacture that makes it cheaper to cut and grind several concave buttons than any other shape, assuming they're cut in bulk from single aluminium rods. 2) A ...


14

Instead of a slider, how about a roller, only this time oriented horizontally? You can also get rid of the + and - buttons and you've got both fine and coarse control of the three values, little clutter, and a visual interface that would be obvious how to operate. Also, as @JOG notes, "the user in some cases will not be able to see the value in the ...



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