March 24, 2010
If you've ever wrangled a user interface, you've probably heard of Fitts' Law. It's pretty simple -- the larger an item is, and the closer it is to your cursor, the easier it is to click on. Kevin Hale put together a great visual summary of Fitts' Law, so rather than over-explain it, I'll refer you there.
The short version of Fitts' law, to save you all that tedious reading, is this:
- Put commonly accessed UI elements on the edges of the screen. Because the cursor automatically stops at the edges, they will be easier to click on.
- Make clickable areas as large as you can. Larger targets are easier to click on.
I know, it's very simple, almost too simple, but humor me by following along with some thought exercises. Imagine yourself trying to click on ...
- a 1 x 1 target at a random location
- a 5 x 5 target at a random location
- a 50 x 50 target at a random location
- a 5 x 5 target in the corner of your screen
- a 1 x 100 target at the bottom of your screen
Fitts' Law is mostly common sense, and enjoys enough currency with UI designers that they're likely to know about it even if they don't follow it as religiously as they should. Unfortunately, I've found that designers are much less likely to consider the opposite of Fitts' Law, which is arguably just as important.
If we should make UI elements we want users to click on large, and ideally place them at corners or edges for maximum clickability -- what should we do with UI elements we don't want users to click on? Like, say, the "delete all my work" button?
Alan Cooper, in About Face 3, calls this the ejector seat lever.
In the cockpit of every jet fighter is a brightly painted lever that, when pulled, fires a small rocket engine underneath the pilot's seat, blowing the pilot, still in his seat,
out of the aircraft to parachute safely to earth. Ejector seat levers can only be used
once, and their consequences are significant and irreversible.
Applications must have ejector seat levers so that users canâ€”occasionallyâ€”move
persistent objects in the interface, or dramatically (sometimes irreversibly) alter the function or behavior of the application. The one thing that must never happen is accidental deployment of the ejector seat.
The interface design must assure that a user can never inadvertently fire the ejector seat when all he wants to do is make some minor adjustment to the program.
I can think of a half-dozen applications I regularly use where the ejector seat button is inexplicably placed right next to the cabin lights button. Let's take a look at our old friend GMail, for example:
I can tell what you're thinking. Did he click Send or Save Now? Well, to tell you the truth, in all the excitement of composing that angry email, I kind of lost track myself. Good thing we can easily undo a sent mail! Oh wait, we totally can't. Consider my seat, or at least that particular rash email, ejected.
It's even worse when I'm archiving emails.
While there were at least 10 pixels between the buttons in the previous example, here there are all of ... three. Every few days I accidentally click Report Spam when I really meant to click Archive. Now, to Google's credit, they do offer a simple, obvious undo path for these accidental clicks. But I can't help wondering why it is, exactly, that these two buttons with such radically different functionality just have to be right next to each other.
Undo is powerful stuff, but wouldn't it be better still if I wasn't pulling the darn ejector seat lever all the time? Wouldn't it make more sense to put that risky ejector seat lever in a different location, and make it smaller? Consider the WordPress post editor.
Here, the common Update operation is large and obviously a button -- it's easy to see and easy to click on. The less common Move to Trash operation is smaller, presented as a vanilla hyperlink, and placed well away from Update.
The next time you're constructing a user interface, you should absolutely follow Fitts' law. It just makes sense. But don't forget to follow the opposite of Fitts' law, too -- uncommon or dangerous UI items should be difficult to click on!
Posted by Jeff Atwood
For any "dangerous" button, wherever it is placed, what about an extended click:
Keep it pressed for a little while, say 300ms, before release or move away from it before the mouseup?
can you tell us...
For any "dangerous" button I suggest an extended click:
Keep the button pressed for a little while, say 300 ms, before the mouseup or move away from it before releasing the mouse button.
My favourite application of the inverse Fitts' Law is Debian's apt-get: if you're about to do something potentially stupid like uninstall your kernel, it requires you to confirm by typing the phrase "Yes, do as I say!"
Hoping this will evoke a new dawn for the much maligned 1 pixel animated delete button.
There is a book with plenty of examples and information on UI and usability that i can recommend to you:
Don't make me think, a common sense approach to web usability By Steve Krug.
You can read a sample chapter Here
Administration was done via a client application rather than a web interface. Normally, you'd right-click on a site's icon in a list view and choose "Connect to...", then do what work you need to do, then right-click on the site icon and choose "Disconnect from site".
The only problem was that, in a misguided attempt at logical arrangement, the context menu was ordered alphabetically. That meant "Delete site" was located just before "Disconnect from site".
Fortunately, there was an "are you sure?" confirmation dialog that came up first.
Unfortunately, they used almost-identical confirmation dialogs for both "delete" and "disconnect"...
Yes, indeed, I did once kill a production website.
@Jespetersen: Two possibilities:
1) It's a guide dog. It looks like a labrador, and the heavy dog collar looks like one associated with a harness.
2) "Dog is my co-pilot".
I feel that pressing the wrong button isn't the issue, but irreversibility is. I wish rm was reversible: instead I have to fire up a GUI and delete it using point and click.
OMG! That's why the Quit dialog in Mac editing programs looks like:
Don't Save Cancel Save
OMG! That's why the Quit menu in all Mac editing programs looks like:
Don't Save...............[long space]................Cancel...Save
I wish there was the ability to have to hold down a shortcut (certain key or mouse button) to move a mouse from monitor to monitor. Then the natural screen edges would remain.
If you are an experienced programmer, or a regular user of Google Docs, the [TAB] keystroke is very near in mind for indenting lists etc.
However, a [TAB] keystroke followed by a [RETURN] keystroke could be _fatal_ since it sends the email without any prompt.
I use for COPY and for PASTE. Works for me in all Windows apps, and most things in UBUNTU.
A large insurance company implemented a LIGHTS OUT Datacenter in the 1980's. All staff worked outside the room. Tapes were robotic. Printers were outside. They really ran it with the lights completely out.
An authorized person opened the door, entered and flicked the switch next to the door to turn on the lights. What was actually flicked was the EMERGENCY POWER OFF for the data center. Two water cooled mainframes, coolant distribution units, A/C units, all the minis, all disks, communications controllers, modems.....
Coming back up took a few hours.
At least the HALON manual immediate dump switch hadn't been flicked.
What if we created a mud fence around the Eject button? That is, what if the area surrounding the button (say a 10px radius) caused the user's cursor to move at 50-70% it's regular speed. So to mouse over the eject button would require a little bit more force than mousing over more desirable actions. It'd work a little like the protective cap on real jet eject buttons, but w/o the distracting visual drama.www.brandonbrown.org
So I just spent a few minutes looking for it without success, but I feel *sure* Jakob Nielsen wrote an Alertbox article about how modern machines have no excuse for "are you sure" prompts when we have all the makings needed for unlimited "undo" of any action. The gist was that if you pop up a confirmation dialog when the user tries to e.g. delete a file, all you train them to do is mentally map the "delete" action to "hit the delete key, then the enter key", buying yourself nothing. It's a bit like Jeff's own post here.
I would contend that the Anti-Fitt's Law is a lot less important than universal Undo. The Gmail thing should leave Labs and be a default-on option for everybody. If I hit Send accidentally, give me 5-10 seconds to say "Undo". If I "delete all" in my word processor, give me robust Undo. If I hit the ejector seat, a pleasant voice should tell me I will eject in 5 seconds unless I hit the NO WAIT ONLY KIDDING button.
Everyone have their own experience in this. Though I love mac, I'm not sure why the "3 idiots" ( close, min & max) buttons are placed on the left side. As a right handed person, all I have to do is, move the cursor across the screen diagonally to do window operation.
-My Mind Leaks
my personal favourite is in windows, if you right click on the "hard drive" icon, the option next to "copy" is "format"
It has been there for every version of windows i can remember, seriously how many people format their harddrives so often that this has to be a top level option.
surely it would make sense to hide it away somewhere, even my 2 year old could click on that when they are playing with the mouse
Then you can see more good movies about hotels at this link.
Bu sitede birçok filmi hd izleyebilirsiniz.
hd film izle
"or require the Fn key on some laptops."
On a smart laptop, the BIOS lets you negate this behavior. I have a Dell Inspiron, and one of the first things I did was change that behavior.
In soviet Russia, Sukhoi Su-30 flies you, dog.
Posting a comment to try to close David Kra's <b> tag, which is really bothering me. It might not work.