Tag Info

Hot answers tagged

76

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


59

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


35

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


26

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


26

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


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.


18

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


16

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


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

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


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


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


13

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


12

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


12

My understanding is that originally affordances meant the interactions that are physically possible owing to the form of an object. When we say a doorknob two inches in diameter affords single-hand grasping we simply mean it possible to grasp it. If it were two feet in diameter, it would not afford one-hand grasping. From our experiences, we humans learn to ...


12

One idea is to align the functionality you want discovered with existing user behaviour. (I only have one example in mind, so can't in good honesty call this a "pattern" just yet.) The example of this method is noticing that users tend to reflexively attempt to scroll for more in twitter or rss iphone/ipad apps, especially if the twitter/rss stream tends to ...


11

As a general usability principle, you want to provide openness and flexibility, allowing users to do whatever they want whenever they want. This argues for providing multiple entry points rather than forcing users to follow only a single possible path which they may not know or may have forgotten or may not be consistent with their way of thinking. The ...


11

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


10

The best examples I've seen use touch gesture hand icons, similar to these: http://graffletopia.com/stencils/587 At times of application rest, where the app isn't being used -- the home screen can be devoted to a simple touch icon moving on the screen and appearing to click/flash on a button that is selected, but no further action is taken, until the user ...


10

If a user has some external task they need to perform with an application (e.g. buy tickets, place an order) then I don't see any way to make the UI - and process - too easy. Optimum situation could utilize a personal butler and have the user to do nothing. However, if part of the appeal of the app/game is directly related to operating the app or to the ...


10

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


10

You're not showing the whole context so we can't see how the icon you show fits in to the context of the page. However, it will help if you make the 'thing' a self contained actionable item - most usually in the form of a button (whatever style suits your theme) and also add a call to action (eg show calendar) or a label (Calendar). For more information ...


10

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


10

Yes, this will improve efficiency. For desktop users, it will mean that users who are not yet in position to use the keyboard will be able to proceed without delay (which reduces your GOMS or KLM score). For touch users, it means that the user does not have to rely on the often rather fiddly native text paste controls. That being said, I am unsure about ...


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