Giving You Fitts


One of the most well-understood and salient principles underlying the ergonomics of graphical user interface design is Fitts’ Law.


Named for Paul Fitts, a psychologist at Ohio State University, Fitts’ Law is a mathematical model of fine motor control which predicts how long it takes to move from one position to another as a function of the distance to and size of the target area. Papers outlining what became known as Fitts’ Law were published in 1954 and 1964.


Fitts himself was an expert in aviation psychology, and he developed his research around more ergonomic layouts for cockpit instrumentation as a way of increasing aviation safety. You can read more about the early history and mathematics behind Fitts’ Law on Wikipedia.


Fitts’ model proved especially relevant to the early research on computer input devices performed in the late 1970s. Although Fitts’ model was originally formulated to project how quickly a human could point at a physical button, it turns out that the same set of rules governs how quickly someone can target an area on the screen with a mouse cursor.


Although there’s a great deal of subtlety to Fitts’ research, what became known as Fitts’ law is a fairly simple intuitive concept.



  1. The farther away a target is, the longer it takes to acquire it with the mouse.
  2. The smaller a target is, the longer it takes to acquire it with the mouse.

The inverse of both statements is true as well (closer and bigger targets can be more quickly acquired.)


One common mathematical formulation of this relationship is:




  • MT is the average time taken to acquire the target.
  • a and b are empirical constants determined through linear regression.
  • A is the distance from the starting point to the center of the target.
  • W is the width of the target measured along the axis of motion (how close to the target you need to get to count as acquiring it.)
  • c is a constant which is either 0, .5, or 1, depending on the specific environment.

Here’s a cool Java-based applet which lets you play around with Fitts’ Law to see how it feels in practice: http://www.tele-actor.net/fitts/


How Fitts’ Law Affects User Interface


The key takeaway for interface designers is clear: the farther away a button is from the current mouse position, the larger it needs to be to achieve the same average acquisition speed. Put another way, there are two main ways to improve mouse efficiency: put the controls closer, or make them bigger. (There are other more avant-garde ways to alter the physics of mouse travel which I won’t go into today.)


Over the years, as monitors have gotten bigger and screen resolutions have increased, Fitts’ law dictates that actual mouse efficiency has gone down.


Think about Word 1.0, which was designed for a common maximum 640×480 screen resolution. Toolbar buttons in Word 1.0 were 20×20 buttons with 16×16 icons in them.


Word 2003, on the other hand, is commonly run at resolutions as high as 1600×1200 and beyond–yet the toolbar buttons remain the same 20×20 size they were in Word 1.0. But because the screen is so much larger, most of the time your mouse cursor will be much farther away than it could have been on a 640×480 screen. Greater mouse distances mean an increased MT target acquisition time.


In other words, the same button takes much longer to click than it did fifteen years ago.


Mile-High Menus and Magic Corners


One of the most useful aspects of applying Fitts’ Law to computers is that screen size is bounded. No matter how far you move your mouse to the left, the cursor will never go farther than the left side of the screen.


In a Fitts’ Law sense, you can think of the edges of the screen as being infinitely wide.


Think about how long it would take you to move your cursor from the right side of the screen to the left edge of the screen. Now compare that to how long it would take you to move your cursor from the right side of the screen to a spot 2 pixels from the left edge.


Obviously, you would be much faster in the first case because you can literally slam your mouse to the left as fast and as hard as you want and you won’t overshoot. It’s infinitely wide.


This is the same reason that the Mac user interface has been said to have “mile-high menus.” The Mac menu bar is permanently affixed to the top of the screen regardless of what program you’re in. As a result, you only have to worry about targeting a menu horizontally. Because the top edge of the screen is essentially “infinitely” tall, you can acquire the menus very quickly.


The Windows taskbar is a mile-high the other direction: you can move your mouse to the bottom of the screen quickly and only worry about targeting horizontally. (If you resize your taskbar to be two rows high, of course, all bets are off.)


Wait, it gets even better. There are four places on the screen that are effectively both infinitely wide and infinitely tall. You guessed it: the four corners.


Regardless of how distant a corner is from your current mouse position, you can get to the corner in no time at all. Acquiring the corner requires very little fine motor control at all because the virtual target is so huge. In GUI terms, the corners are so good they’re often called “magic.”


The Start button in Windows is seemingly located in an ideal place for fast acquisition, and in recent versions of Windows that’s certainly true. Prior to Windows 2000, however, the Start button had a single “dead” pixel along the left and bottom sides of it in which clicking didn’t open the Start menu. The result: slower acquisition times and a startling number of missed clicks.



Windows 95: Missed by a pixel
Windows XP: Good to the last drop


Happily, the Windows team fixed this almost eight years ago.


Office 2007 and Fitts’ Law


We’ve tried to pay attention to Fitts’ Law throughout the redesign of the Office user interface.


First off, most controls in the Ribbon are labeled. This helps discoverability and usability considerably, but it also makes the buttons bigger and easier to target. As your screen resolution increases, the width of the Ribbon also increases, providing room for more labels and larger buttons.



Larger, labeled controls can be clicked more quickly


In a sense, the Ribbon tries to keep MT from Fitts’ Law relatively constant by compensating for the greater average travel distance required at higher resolutions by displaying larger controls.


The Mini Toolbar was designed with Fitts’ Law in mind as well. Whenever you select text or right-click selected text, a small toolbar appears directly next to the mouse cursor (you’ve seen the movie, right?) As you move closer to it, it fades in; as you move away, it fades out.



Mini Toolbar: Close to the cursor


The controls on the Mini Toolbar are small, but because they’re located directly next to your cursor, they’re easy to target. In this case, you want to have small buttons because it means you can have as many as possible located as close as possible to the cursor.


We did look at other more radical designs (such as positioning the Mini Toolbar directly on the cursor, or a radial design) but we were also trading off with being able to see the text you’ve just selected and how easy it is to scan the controls on the toolbar. The design we went with provided the best overall balance of efficiency and utility.


The Ribbon is designed to increase W; the Mini Toolbar is designed to reduce A. Both of these affordances help to reduce MT, the time it takes to click a button.


Quick Access a Mile High


The operating system really has the best opportunity to take advantage of the edges and corners of the screen. When Office windows are floating around on the desktop, we’re sort of confined to the window we’re in.


But there’s good news: according to the Customer Experience Improvement Program data, a startling number of Office windows run maximized. Even at high resolutions like 1280×1024 and 1600×1200, Office windows are maximized most of the time. And at 1024×768 and below, we’re maximized almost all the time.


Why is this good news? Because when we’re maximized, we suddenly get edges of the screen to play with. The right edge of the screen is used for the scroll bar, which we are careful to make sure extends all the way to the edge of the screen so that it’s a “mile wide.” The left edge of the screen is used differently in each program.


Historically, the top edge of the screen is used for the title bar. Having a title bar is probably necessary, but it’s a huge waste of easily-targeted space, especially when your windows is maximized (meaning that you’re not dragging it around to move it anyway!)


So, we wanted to take advantage of the title bar space to help make certain controls faster to target; this is why the Quick Access Toolbar is located in the title bar by default.


We designed the customizable Quick Access Toolbar to contain features people use frequently and regardless of the Ribbon tab they’re on. By default, it contains Save, Undo, and Redo, but you can add any control in the Ribbon to your QAT by right-clicking it and choosing “Add to Quick Access Toolbar.”


Because the Quick Access Toolbar is in the title bar, the buttons are effectively infinitely tall. You can target and click each of the buttons very quickly; they’re a “mile high.” Finally, you can reclaim this valuable screen edge to put features you want to access ultra-efficiently.



Quick Access that’s a mile high…


(Note: In Beta 2, there’s a bug which keeps these controls from extending to the top of the screen; it’s fixed in the upcoming Beta 2 Technical Refresh.)


And We Didn’t Leave Out the Magic Eitherโ€ฆ


I mentioned before how special the corners of the screen are because they’re effectively infinitely tall and wide.


The bottom-left and bottom-right corners are taken up by the Windows taskbar, so those can’t be used by Office. The upper-right corner is used for the window close button in each app, so it’s kind of off-limits as well.


The upper-left corner, though, in most programs is used for a system menu which is mostly intended to be used via the keyboard: not a good use of the most premium real-estate on the screen.


In Office 2007, we decided to take advantage of that corner by using it for the Office button.


 
Magic Corner: Office Button in the upper-left corner

Although the button itself is round, the hit target for it actually extends on a maximized window all the way to the upper-left edge of the screen.


As a result, accessing the Office menu to Save, Open, Print, Send (or to access one of your Recent Documents) is ultra-efficient. Fitts’ Law was actually one of the driving forces behind the Office Button design.


Summary


Speed of target acquisition is but one of the many characteristics of a graphical user interface, but it’s an important one. In Office’s redesign, we’ve tried to take advantage of Fitts’ Law in several key ways: the control layout and scaling of the Ribbon, the Mini Toolbar and other “by the cursor” contextual UI, and the usage of the edges and corners of the screen for the Quick Access Toolbar and Office Button.

Comments (123)

  1. steveg says:

    Don’t forget that mouse technology has improved significantly — a modern laser mouse is much better than a ball mouse. It’s easier to hit a small target with a modern mouse.

    Possibly the way windows manages mouse acceleration has changed since those halcyon 640×480 days — maybe it makes small targets easier to hit.

    Another possible factor to consider is user experience — I hope i’m more accurate with the mouse than i was 20 years ago.

  2. Etan Bukiet says:

    I think that one of the more efficient windows setups involves sticking the taskbar on the right edge of the screen.  This is because typical monitors are "wider" than they are tall.  When I am viewing a word document, I already have enough width, but i can always user more height.  Additionally, you can fit more "task-bar-buttons" (ie: programs) on the taskbar when it is on the right, and still see some of the text/program description (not just the icon).

    This phenomenon of wider screens will only get worse with widescreen monitors.  I suspect this is the reason for the "side-bar" in [the upcoming] Windows Vista.

    In this kind of setup, it’s really convenient to have the close button in the upper left hand corner (ie: double click the program icon) as it is easily reachable.  Additionally, in this case, the lower left hand corner becomes useable.

    I don’t know what the research is, but I suspect that the majority of users actually leave the taskbar at the bottom of the screen and just deal with it.  However, i find that by moving it around, you can get an even better efficiency.

  3. GregM says:

    "The bottom-left and bottom-right corners are taken up by the Windows taskbar"

    …unless you’ve moved your taskbar to a different edge of the screen, such as the left edge of the screen, making it cover the top-left corner.

  4. MattW says:

    As for running Office maximised all the time – I run virtually everything maximised in Windows, but in Linux I generally avoid maximised windows as much as possible, likewise on Mac OS. Why? Windows just seems to lend itself to maximised windows for some reason, possibly due to the way the focus model works (I never use click to focus when I can avoid it). I’m not sure why.

    Although I have noticed myself using fewer maximised windows under Vista beta 2 – but this might be because when you maximise, for some reason the Aero Glass effect in the titlebar deactives and it goes a horrible yucky grey.

  5. Andy Hawkins says:

    So why in the post Beta 2 builds of Vista does the task bar no longer respond when the mouse is at the very bottom of the screen?!

    The new Start ‘button’ works, but not any minimised application buttons. You need to be +1 pixel up / in for the button to respond.

  6. Dan McCarty says:

    Jensen: Excellent write up on UI and Fitts!

    I’m not trying to rain on the thread, but I don’t mind being the kind curmudgeon who jumps in to remind everyone that the distance between your fingers and the keyboard is 0.

    Like an abacus user vs. a calculator whiz, by the time you’ve moved your hand over to the mouse, the guy on the keyboard has already entered in the shortcut to complete the task.

    The "improved " UI in today’s apps (not just Office) sure looks pretty, but for pure ease of use the old, keyboard-only apps were an order of magnitude faster.

    That being said, I know that there are some tasks where the mouse is the most effecient tool, most people don’t care to memorize shortcuts, and lots of people, like my Mom, just prefer pointing and clicking.  I’m glad to see the level of support for keyboard users in Office12.  Visual shortcut indicators and chording are great!

  7. Andy Hawkins says:

    I should clarify that the Vista change does mean you can get the Taskbar right click menu up by right clicking at any point along the bar. Previously you would’ve got the right-click window management menu for the minimsed app under the pointer.

    But for me at least, this breaks the rule you describe. Natural behaviour is surely to flick the mouse down to the minimsed app button and left click to restore? The flicking motion will more often than not put you on the edge of the screen.

  8. Andy Thompson says:

    Dan McCarty’s point about the keyboard being faster than the mouse is often assumed, but seldom proved.

    Research indicates it may be faster, but only if you do not count thinking time. If you know the keyboard shortcut you need, sure, it’s faster. For everything beyond the top few % of commands, it’ll take longer for you to remember it (hrm, was it Ctrl-Shift-F9 or Ctrl-Alt-F9 to Add Word to Dictionary?) than to find it with the mouse. The more novice the user, the fewer keyboard commands they have memorized.

    Which is why modern GUIs offer both. For the commands you use constantly, you learn the keyboard. I don’t think we disagree here: as Dan says, many mom type users never learn a single shortcut. What’s surprsing if you actually do research is just *how infrequently* the keyboard wins.

    Hey, I use ViM every day on Windows. For some things it rocks, for anything I don’t have memorized…

    Some interesting links – though opinion, not studies:

    http://cm.bell-labs.com/wiki/plan9/Mouse_vs._keyboard/index.html

  9. Durl says:

    Jensen,

    This is one of the most facinating articles I’ve read in ages.

    Thank you!

  10. Wictor Wilen says:

    The incredible Jensen Harris gives you all the details on how to use Fitt’s Law to improve the user

  11. Ben R. says:

    Jensen, this is fascinating. I have two questions:

    1) Why are there NO visual cues that the Office button and QAT are clickable all way to the edge(s) of the screen? Do you worry that users will never discover the "infinite edges" and "magic corner" because they’re carefully aiming for the actual visible regions of the buttons each time?

    2) Why did the Vista team decide to move the window Close box AWAY from the magic corner? In Windows 2000 and XP, you can slam your mouse up into the corner and click the Close box on a maximized window. But Vista screenshots and the Windows Media Player beta do not allow you to do that. Why?

  12. Francis says:

    Three points:

    1. Fitts law does not take the cognitive effects of interface design into account. The Office button is a case in point. From its bullseye-like design, it is not clear that it is a mile high and wide. As a result, many users will decelerate while mouse tracking and attempt to click in the center of the button. To some extent, this defeats the reasons for positioning the Office button in the NW corner. This also applies to the QAT.

    2. The Start button was only corrected in XP’s new theme. In Classic mode, at least on my system, there are multiple dead pixels below and to the left of the Start button.

    3. On multiple monitor systems, each monitor generally only has two places on the screen that are infinitely tall and wide. Hitting the Close button on a maximized window on the left screen can be challenging (lest the mouse slide onto the next monitor.)

  13. James Risto says:

    Wow! Excellent information. I literally believe my family will be more productive with the ribbon!

  14. Mark Sowul says:

    One thing to remember is that with more and more people having dual-monitor setups, the right edge of a maximized window ceases to be "free" anymore; a side effect of this is that it is more difficult to click the close button than to double-click the upper-left corner’s system menu.  You had mentioned this "archaic" Windows 3.1 behavior a while back.

  15. Stooovie says:

    Thanks Jensen for your exhaustive writeups! I can only wonder how you can write articles this long and so near between while still doing your excellent work. I am a writer, but it would take me at least 2 days to write something as long and informative as this.

  16. Elmar says:

    Excellent post, glad to see you’re making good use of Fitt’s law,

    from this perspective the QAT and Minibars make even more sense.

    I agree with Ben, though: Why make the buttons *look* like they don’t go to the edge/corner? I’m pretty sure I wouldn’t have thought of moving the cursor right to the edge without reading this post.

    And I’m still wondering how Windows 95 could get the Start button so horribly wrong, Fitt’s law-wise. Do you have any information about the reasoning behind that?

  17. jensenh says:

    RE: The Office Button looking like it extends to the corner:

    You actually do get hover feedback that shows the button is lit all the way to the corner…

    People are not very precise with the mouse, so many people will actually click in the corner (above and to the left of the Office Button) regardless of where the physical button is drawn.

    In other words: the button is already big, which makes it easy to target.  Because it’s in the corner, any missed clicks will occur to the left or top of it–all clicks which will succeed because the hit target extends to the corner.

    So the target acquisition time ends very fast and with virtually no missed clicks.

  18. Mike Dunn says:

    Ben R.> You can slam your mouse to the corner and click the [X] button. Just like the Office logo button, the clickable area is larger than the graphic. (I’ve only used beta 2, but I think that this wasn’t the case in previous builds, and MS changed it after getting negative feedback.)

  19. Stephen McLaren says:

    Of course the infinite height only works when you haven’t put the Quick launch bar at the top on Auto Hide and Always On Top. Like me ๐Ÿ™‚

    It certainly speeds up my computer usage as the other things at the magic corners I use keyboard shortcuts to access….

    It looks like I might have to change my behaviour with Office 12 with the infinitely tall QAT and the Office Button

  20. Ben R. says:

    Jensen, I didn’t realize there was hover feedback indicating that the Office button extended all the way to the corner–that’s great. Of course, I probably *unconsciously* registered it while using Beta 2. I wonder how many small touches like that are in the UI–things I don’t consciously notice but are affecting my behavior as a user nonetheless.

  21. PSBS says:

    … So how does the left-side close support that you wrote about work if the Office button extends all the way to pixel 0,0? Is it an option that is off by default?

  22. FWIW, there seem to be dead pixels at the corner of the Taskbar in Windows 2000 as well; if I click in the lower left corner of the Taskbar, the Start menu doesn’t open.

    WRT keyboard shortcuts vs. mouse, I think both have their place. When I’m typing, I use a lot of keyboard shortcuts because I have both hands on the keyboard already. Once I start editing and formatting, I’ve got the mouse in my right hand (to select text), and so it’s easier to use the mouse for buttons and menus.

  23. AN says:

    PSBS: Screenshots on the Microsoft Excel 2007 blog show the Excel icon before the Home tab (see http://blogs.msdn.com/excel/archive/2006/08/14/699841.aspx).  This may be the left-side close support you want, but Jensen hasn’t confirmed this.

  24. snprbob86 says:

    Please fix this in Outlook 2007. In Beta 2, none of the collapsed UI elements go all the way to the edge of the screen.

    Also, I think that the quick access toolbar should be visually designed to appear as if the button is clickable all the way to the edge.

    I’d like to propose a Windows feature as well:

    Could there be a 1 pixel (or adjustable?) tall invisible wall at the corners of monitors for multi-monitor setups? This way you can slam the mouse to the edge of the top or bottom of the screen and then slide it along horizontally to hit the corner. I could make a proof of concept of this…

  25. C. Moya says:

    One of the most interesting articles Jensen has posted in a good long while.

    I hope Jensen reads some of the comments here though… you guys bring up some very good caveats (multimonitor, taskbar on left- which BTW I also think is the best location- or top, etc).

  26. I think that the quick access should come by default with the icons that you put in the figure: http://officeblogs.net/UI/FittsQAT.png . It is way more faster do use this comands, that I and many others use all the time.

  27. Calrion says:

    For what it’s worth, I’m using XP Pro (x64 actually) in classic mode, and my Start button is definately clickable all the way to the edge.

    I’m sure I’ve given feedback already, but I’d like to reiterate–especially after the dual-screen comments–my request that double-clicking the Office button close the application; even if this is a non-default option.

    On reading this article this morning, I realised that really, I use a mouse gesture to close windows: slam it all the way to top-right, and click; most of the time I’m not even looking at what I’m doing! So please, please make sure the close buttons in Vista go right to the edge.

  28. TristanK says:

    Fitts is quite the topic du month!

    Jeff it here too (not Office 2007 focused, though):

    http://www.codinghorror.com/blog/archives/000642.html

  29. Nick says:

    So why are "all bets off" if you resize your task bar to be two rows high? Sloppy design. Why not move the Start button down to the bottom row then?

    Also, if the taskbar is at the bottom of the screen, the taskbar buttons have a row of dead pixels underneath. There is also a column of dead pixes in between the buttons. Sloppy again. Is this behaviour any different in Vista?

  30. PSBS says:

    Nick: The start button issue is fixed in Vista – the button itself is centered vertically and clicks are accepted in the bottom-left corner.  The taskbar button issue was fixed in XP in a somewhat weird way by automatically moving the mouse pointer a few pixels up when that "dead space" is clicked.

  31. Jeremy says:

    Just to add to the earlier comment, it would be nice in the final release if more buttons were in the QAT by default.  The more things people have to change the less people will do it.

  32. jensenh says:

    Carlion:

    We have added the capability to close the program by double-clicking the Office Button.

    See

    http://blogs.msdn.com/jensenh/archive/2006/06/06/618830.aspx

    and

    http://blogs.msdn.com/jensenh/archive/2006/06/08/621757.aspx

  33. jensenh says:

    Nick:

    I don’t know why Windows does what it does when you extend the taskbar to two rows.

    Sounds like a good question for the Windows team. ๐Ÿ™‚

  34. WildHeart says:

    Alas, I am one of those poor souls who does not have a 1600×1200 monitor and who doesn’t run anything maximised ever. If it was for me the Maximise button might as well not exist. It’s sad to see that Office 2007 (which I like a lot otherwise) it’s trying to do its best to make my life more difficult instead of easier… By the way: try and "Mark as Unread" an opened e-mail in Outlook 2007: in Outlook 2003 it was as easy as "Alt-E>U" (Edit>mark as &Unread). In Outlook 2007 there’s no keyboard shortcut. I hope your wrists are better than mine.

  35. [ICR] says:

    WildHeart – There not trying to make your life more difficult, there making everyone else’s easier. You’re an unfortnate casualty.

  36. David Moles says:

    <i>Prior to Windows 2000, however, the Start button had a single "dead" pixel along the left and bottom sides of it in which clicking didn’t open the Start menu. The result: slower acquisition times and a startling number of missed clicks. Happily, the Windows team fixed this almost eight years ago.</i>

    …and in those eight years I never actually knew that, till you blogged it. Actually, as I started reading this post, I was like, "Jeez, an MS developer has a lot of guts posting about Fitts’ Law". ๐Ÿ™‚ But thanks!

  37. Jon Peltier says:

    Fitts’ Law. Now I know the name for the reason I like floating commandbars, context menus, and tearaway menus. 2/3 of these are no longer available in Office 2007.

    FWIW, I’ve always hated the taskbar across the bottom, and having it always visible. I like mine along the left edge of the window (where the buttons are stacked vertically, allowing over a dozen to appear with enough text to know what each is), without Always On Top selected. I’m also still getting used to the lack of a wall between monitor screens to trap the mouse.

  38. Matthew Adams says:

    On the Beta 2 builds, while the Office button is infinitely high, the quick launch buttons are not – there is a one pixel gap between the top of the maxmimized windows and the button itself (on Windows XP at least, I haven’t tried this on my Vista boxes).

    Has this been fixed for later builds as per your article?

  39. Jeff says:

    WildHeart: Highlight email > Shift-F10 > U&nread.

    Outlook 2007 is a big improvement except:

    – links in all email messages don’t work (they aren’t clickable)

    – links in contacts aren’t clickable, for example,

    <Outlook: Contacts/~Jensen>

  40. Charles Hancock says:

    If you have any influence, please enable me to get rid of that pesky Ribbon – so utterly unnessessary – a bit like the man with the paper clip.  Please give me back some space.

    The Quick Access Toobar is all we need – right size and right place.  Love it.

    All the best

  41. [ICR] says:

    Charles Hancock – Double click on the tabs to minimise it.

    Also:

    http://blogs.msdn.com/jensenh/archive/2006/07/20/672345.aspx to see what else is in store to make working with minimised tabs alot better.

    http://blogs.msdn.com/jensenh/archive/2006/04/17/577485.aspx  to see how it actualy isn’t that big compared to alot of things, and you still have alot of space to work with, it just doesn’t look like it. (Yes, you might have a customisable workspace with a bigger work area, which is where minimising the ribbon comes in)

  42. Francis says:

    The Windows team may have fixed the Start button issue in Windows XP, but the Office team BROKE it in 2003.

    If you display the Language Bar in the taskbar, a couple of extra rows of pixels are added below the Start button. If you "slam" the mouse to the Start button corner and click, the Start button (in XP Classic) will NOT display.

    To recreate the problem:

    1. Start with an unlocked taskbar without the language bar

    2. Right-click on the taskbar and choose Toolbars->Language bar

    3. Right-click on the taskbar and choose Lock the Taskbar

    The Start menu will now shift upwards and not be a mile high. (Windows XP SP2, Office 2003 SP2)

  43. Francis says:

    Oops, the last instances of "button" and "menu" in my entry above should be exchanged.

  44. josh says:

    Remember that Windows can handle more than 2 monitors, so you may well have NO infinite corners, or indeed edges, on a maximized window.  I actually stagger my monitors specifically so that I still have a magic upper right corner on each one.

  45. Julian Gall says:

    I am an experienced computer user and I know the theory about the edges and corners of the screen being easier to get to. However, with the Start button and task bar buttons, I aim for the button itself and not the edge or corner of the screen. It would be interesting to know what proportion of users follow the theoretical model and hit the edges. The problem with the bottom adge and corners is that the mouse cursor disappears, which is inevitable, but not good visual feedback.

    Also, I think the familiarity and practise aspect is not recognised enough. Theory might say that a violinist can get to some notes easier than others but I don’t suppose this has much effect in reality.

  46. square ball says:

    "In Beta 2, there’s a bug which keeps these controls from extending to the top of the screen; it’s fixed in the upcoming Beta 2 Technical Refresh"

    Can you please give us some more details about this TR?

    [I know the answer would be ‘No’, but it’s still worth trying ๐Ÿ™‚ ]

  47. Nice reading… There are so many levels of usability I would like to learn more about and I learned some more today. Thank you.

    One place in the Office (Word) where I think Fitts was not taken into consideration is the office buttons "Word Options" and "Exit Word"… Since the first time I saw them they have always been misplaced to me. Two buttons that does not follow the rest of the design and are slammed to the button right of the menu while the are buttons all along the left hand side.

    Well making doubleclick on the office button close word help a bit, but what I would do if I was the designer was to remove the two buttons and place the along with the left buttons (same style). That way the office button menus bottom border did not need to be that big (making it a wierd menu to look at since it look like a mine taskbar)… Would also give room for one or two more "recent documents"

  48. Zhang Ming says:

    Jensen ,

    why not provide an option between the traditional UI and the 2007 UI in the "option"?

    Isn’t it a good idea?

  49. silverback says:

    Thank you for the insight into Fitts law – and how it applies to the interface design decisions made in Office development.

    My continuing frustration with Office however, has nothing to do with the proximity of buttons, but rather with the fact that some features in Office are no longer available EXCEPT through buttons.

    My focus (especially in Word, but also in Excel) is on the document and since the vertical space on my monitor has always been less than actual size of the documents I prepare, my preference is to have as few pixels as possible taken up with menu buttons.

    Since we have cascading menus, I would strongly suggest that even if the selection requires a sub-sub-sub menu, there should be NO features which REQUIRE that a button pallette be present to access.

  50. caio says:

    re: you can add any control in the Ribbon to your QAT by right-clicking it and choosing "Add to Quick Access Toolbar."

    I haven’t used the betas, and it’s likely that something like this is already implemented, but:

    I hope you also support ctrl+drag to add a button to the QAT. (or just drag, but accidental drags of the windows taskbar should have taught us something)

    Sure the context menu provides good discoverability as the option is spelled right there, and I’m not sure how much windows users are used to dragging things around, but it seems pretty intuitive to me. An advantage of dragging is that you can choose the position of the button right away.

  51. Stakka says:

    About keyboard shortcuts, since remembering them seems to be the key problem, the same shortcuts should be used in all programs.

    On the Mac, I rarely ever close a window by clicking on the close button, cmd-w works in every application in almost every window. That is why I do not really care where the close button is.

    In Windows, I have been told ctrl-F4 closes open windows. But since I am never sure whether this closes e.g. a window with a Word document or the Word application, I rarely use it.

    My point here is that consistency is a very important thing in UI design.

  52. Dave Newton says:

    Heavens, if the Office button target extends to the top left of the screen then make the bloody BUTTON that big too.

    If there’s no visual clue that the target area is bigger than the button then it’s stupid and people will try to hit the button. Because it’s all they can see.

    *sigh*

  53. Nikita says:

    there is no clue that those buttons in the toolbar are "mile high", how will the user know?  Why Why?

  54. Bob Microsoft says:

    > Happily, the Windows team fixed this almost eight years ago.

    Excuse me?  The year is now 2006 and you are claiming it was fixed in 1998?

    The dead pixel in the corner was only fixed in the default theme in Windows XP.  

    Are you saying this theme existed in some other form 8 years ago?  How can you with a straight face claim something is fixed years before it is released to the public or fixed in the default theme?  

    Also "defeat from the jaws of victory" since you go to all that trouble to provide mile high buttons but you completely undermine the affordance by making it look distinctly unlike the target area of those buttons is any bigger than their icons.  

  55. JanL says:

    Jensen,

    What hover feedback? I can only see the round button lit but not all the way to the edge. Even if it were so, I wouldn’t have figured  that I could click all the way to the edge because the button itself does not extend there (I would think to click on the button itself, not on the ‘lit’ portion).

    Also, the QAT has some dead pixels on my PC.No use for me to do the slam all the way to the edge.

  56. JanL says:

    Affordance should have same visual area as the target area.

    How would a user guess that he can call the buttonโ€™s command by clicking outside of it? And how are regular users to understand that this behavior applies only to edge buttons?

  57. Ilya Birman says:

    > Windows 95: Missed by a pixel

    > Windows XP: Good to the last drop

    Not really. I use a Classic interface theme (which is Windows 95 + "gradients in title bar" aka Windows 98). So Start button and application buttons are not mile high, they are just the same. And I don’t want to switch to childish XP theme just to have that. Well, I don’t care because I use Win button and Alt+Tab instead of mouse. But anyway… The problem is still there ๐Ÿ™‚

  58. Brad says:

    Every time I read an article about Office 2007, I am amazed at how well the Office team has done with their upcoming release. I spend most of my time developing for Linux and/or Mac so my Windows use is limited.  In fact, I try to avoid it these days. Software like this, however, inspires a little more confidence in Microsoft.  Good job, guys. Maybe I’ll download the beta.

  59. psbs says:

    Ilya Birman: The problem is there on the Classic theme only if the Language Bar or WMP Mini Mode is in the taskbar.  In all other cases, the buttons are clickable all the way to the edge, even if they do not appear to be (like the Office Button).

  60. Sebastien Caisse says:

    THANK YOU for fixing the mile-high quick toolbar bug. I’m looking forward to the next beta (or final version) for this quite a fair bit… It’s a bti sad I can’t get into the habit of using it already though…

  61. Terrific post, thank you.

    One thing with the beta (which I would have fed back but for the other thing – the MS web experience is positively Byzantine) – as MS developers we have a COM add in which adds a button bar to Word 2003 and a simple macro which is on a template toolbar. In 2007 you can access this if you click on the "Add In" tab – but you can’t seem to add either macros or COM add in buttons to the Quick Access Toolbar. If this stays, all our users will have an extra click to close a document (the add-ins are document management "Save and Close" functions). Is this my fault, a bug or a design decision to relegate third party add-ins to a separate tab?

    Thanks

  62. Patrick Schmid says:

    Paul,

    it’s a design decision that affects add-ins not written for 2007. In other words, add-ins that use the CommandBar UI model instead of RibbonX. CommandBar buttons cannot be added to the QAT, while RibbonX buttons can.

    The reason is that Microsoft couldn’t get the CommandBar case working reliably enough.

  63. Gaëtan Voyer-Perrault says:

    As the first poster mentioned, I stick my taskbar on the left side of the screen.  I’ve been doing this for years and those whom I’ve introduced this to have picked up the habit.

    As a dev, I often have a dozen windows open and I’m constantly seeing other devs with a 2-high taskbar on the bottom of the screen.  When they open a Word doc they have too much horizontal space relative to their vertical space.  Their taskbar reduces the number or text lines they can view, while in my case the taskbar has little influence on the Word window.

    The reality is that we edit vertically-oriented paper on a horizontally-oriented screen and for some reason, everybody gives us vertically-oriented command and menu buttons.  We already don’t have enough vertical space.

    Don’t get me wrong, ribbons are wonderful, they’re truly next-generation, I’m showing them off to my Dev friends.  But putting Ribbons on the top and toolbars on the bottom means that I have less and less vertical real-estate which is what I use for programming, writing, reading web pages, etc.  Pretty much everything but spreadsheets.

    I’m sure you’ve heard it before, but I’d like to throw in my two cents.

  64. Dan Harlan says:

    Excellent blog Jensen, Thanks.

    A few points that I hope you’ve considered, many of which have been emntioned by others.

    The Start bar in places other than the bottom… I put mine on the right side.  Driven by the vertical arguement in a primary application I use (Pro/Engineer).  Once I did that, I use it even on non-cad workstations because of the vertical word doc discussion.  If the double-click to close on the windows (?) icon in the upper left would alleviate some of the magic corner problem for me since my Start icon is in the magic upper right and not the application close.

    Also, I never maximize windows, never ever.  This means that I can’t use the mile high edges on most applications.  A possible help to this, as well as for users of multiple monitors might be something like a ‘sticky edge’.  Either window or monitor edges become extra sticky.  This behavior could be either a delay in the mouse as the edge is approached or let the mouse hang near the edge until for an extra 10 pixels (user adjustable value?) and then skip back to where it should/would be in case the user is actually intending to change windows or monitors.  In Fitts’ terms, this would add width behavior w/o out taking up any screen space.  Or necessitating me to use maximized windows.

    On consistancy, YES PLEASE ๐Ÿ™‚  Very important.  All designers should know that.  Just please take the time to re-interate the importance to all of the MS design teams.  Remember, just because a solution is best for a single instance or application, doesn’t mean it should be adapted because of overall ayatem or solution impacts that may be more important.

    On the ‘how do I know the button is mile high’ discussion.  IMO, not a major concern.  If these buttons are enlarged or bordered so it becomes more apparent their infinate edge functions, then the interface is threatened to become less visually appealing.  There are a thousand features of a good interface that may not be readily apparent to a user.  And many of them should stay that way.  If everything is bluntly and boldly visual, then the UI becomes cluttered.  Once a user learns these features, they no longer will want to be shown or bothered with the visual indications of them.

    Maybe a ‘learning mode’?

    Finally, on the earlier mention about functionality only being accessible through buttons…. Have to strongly agree that all functionality must be accessible through menus.  Regardless of how buried a function is, it must be accessible by menus or means that are not configuration (i.e. which icons are shown) specific.

    Thanks ๐Ÿ™‚

  65. LeMel says:

    Regarding the magic corners – for designers using a stylus, the corner is not infinite – it is no different from any other pixel…one dot. You can pass right by and miss it.

    And if you disregard physical bevels as constraints, the same is true for Tablet PCs.

    The infinite corner is created by the presence of a mouse (or any input other device that can send a click while not pointing).

  66. input.expert says:

    Personalized Toolbar

    Jensen

    New and Exciting user-friendly Advanced HCI and Interface Technology is coming that sits on top of all applications that is fully customizable by the user.

    The fully customizable โ€œpersonal toolbarโ€ that is always one top like your on.screen  keyboard is user customizable by dragging n dropping most used, preferred icons, and macros into it.  The toolbar can have a find/search box in it that is also a command line.  You just point, click, and type what you want or you can click an icon. Simple, easy, user-friendly, quick.

    Key shortcuts, key bindings, or key chording are time wasting, inefficient, and old school for quick and efficient task completion.   Finger contortions and finger gymnastics are a thing of the past.

    With a new keyboard that is coming, the user can point and click, or point, click, type, and scroll simultaneously with their fingers always on the home row.  The thirty year old time wasting, inefficient, and annoying stand alone keyboard and stand alone mouse paradigm will be replaced by advanced input and pointing HCI technology that has eliminated the repetitive hand movement from keyboard to mouse.

    I use this technology everyday and am using it to write this.   It is Awesome.  Imagine: point, click, type, and scroll with your fingers always on the home row, no more mouse.  Total control of the computer screen.

    I like the ms blogs a lot.  They validate my views on efficiency, usability, and user productivity; and are a good guide to better HCI and Interface design.

    โ€œkeep simple simple, make complex simpleโ€

    input.expert

  67. Patrick Schmid says:

    input.expert: how about links to that program and the keyboard?

  68. arvind vinjimoore says:

    Being a consistent user of excel 5hrs/day on average, I would consider myself a power user and I imagine there are many others who are in a similar situation.  My memorisation of keyboard strokes to access and operate menu commands and dialog boxes quickly is one of the things I love about the menu UI system and in fact using Excel everyday.

    Having used the beta version a little, it is good to see that keyboard shortcuts are still available.  The ribbon device, however, is quite a learning curve.  I have been frustrated in not being able to see the functions of office products in heirarchical menus.  I hope it isn’t too late, but is it possible to offer heirarchical menus as an option?- For some of us, our minds think in a way that we find this system easier.

    Finally: are there other users who sympathise with my views?  I’m writing this post because I’m genuinely worried about not seeing heirarchical menus anymore.

  69. pradeepn says:

    Good article. I think it is also a good idea to control the size of the most frequently used item. The more you use, the bigger it gets(until a max size of course). Just a wild thought.

  70. Crystal says:

    Have some concerns with doc management .

    File Button- Not intuitive.  Make a section under Home. I want to be able to find my files.

    Home Menu – The Home menu should have area at the beginning of the toolbar that allows the user to create a new, open, save, and print  documents.  You can reduce the size of the style are to add this section.  As a business owner, I am not interested in styling documents if I cannot see the basic options of finding my documents.  I should not have to add the button to the quick access menu.  Bad move.

    Insert Menu – I deal with law firms, I can tell you now that shapes is not a good starting point for this menu.  Maybe, Tables, Header and Footer, Symbols, illustrations, Links and Text.  Place shapes under illustrations.

    Page Layout- Arrange should be a part of Illustrations instead of page layout.

  71. Max Palmer says:

    A few thoughts inspired by others …

    With regards to fancy input mechanisms and keyboards, the now sadly defunct Touchstream is excellent and allows gestures to be used so you don’t need to be at the correct location on the screen. You can type and mouse on the same surface too, saving transitions between the keyboard and mouse, a signifcant timewaster, and second source of physical movement.

    Another interesting improvement would be the ability to provide tactile feedback the the user via the input device – so as you move over buttons, the surface properties might change, which you could feel. Still, people’s reluctance to pay for something slightly more sophisticated than the keyboard and (much less so) the mouse means that input device leaps need to be significantly better to be adopted. Oh well, I’ll kep using my Touchstream for as long as I can and hope in the meantime. Input.expert, what device were you talking about?

  72. Marco Russo says:

    Il titolo può apparire strano e incuriosire, e in effetti lo scopo è proprio questo. Meno di un mese

  73. I finally got a second monitor recently and set it up as an extended desktop. While Iโ€™m very happy with

  74. Today, 37signals discussed how adding some padding to navigation links improves the user experience. The end result is a feeling of comfort. Itโ€™s just really easy to click the links. It feels like the links are working with you instead of against you

  75. 11์›”20์ผ์€ Windows์˜ ์ƒ์ผ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” Windows ์˜ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค์— ๋Œ€ํ•œ ์—ฌ๋Ÿฌ๋ถ„์˜ ๊ด€์‹ฌ์— ํž˜์ž…์–ด, ๊ณผ๊ฑฐ๋ฅผ ๋˜๋Œ์•„ ๋ณด๊ณ  Windows 7 ๊นŒ์ง€์˜ ๊ธธ์„

Skip to main content