Do you think of Fitt's Law when you design?
Are you aware of Fitt's Law?
Thursday, March 24, 2005 by Thomas Thomassen | Discussion: Software Development
If you are making a skin, widget, gadget, shell, application or website then you are making a Graphical User Interface. When you make a GUI, do you think only of the appearance? Do you think of the usability?
I have found many very nice skins, widgets, shells, you name it, -but I haven't found all of the, good. One reoccuring example is scrollbars that can barely be seen. I have to guess where it is. Another is skins that doesn't hide the windowframes outside the screen area when maximized. Or for instance a 1 pixel border to grab hold of when I try to resize the windows.
I find it very sorry when I can't use a skin that has been put so much effort into and look so stunning because it turns out to slow me down when I work. Not my computer, but my self.
That is why I highly recommend everyone to familiarize your self with Fitt's Law. It's some very useful information on GUI design and user intaraction. I am not saying that everyone should follow this to the dot, just read it and think about it. It is very likely it'll give your creating the little extra to make it truly great.
Some of the things Fitt's Law describes is the five magic pixels that are quickest to access. Why you should ensure that your tools docked to the side of the screen is to the absolute and not one, two or whatever pixels from the edge. And much more on how to make your design quicker and less painful to use.
The best article I have found so far that explains Fitt's Law is at askTog. http://www.asktog.com/columns/022DesignedToGiveFitts.html There is also a newer article about Interaction Design which is very interesting. http://www.asktog.com/basics/firstPrinciples.html
One of the things within Fitt's Law which I never have seen in a application is the circular menues. I see that it's something that might not be the easiest to do well, but I do feel that DesktopX has a good potential here to make something good. The QuadMenu in 3D Studio Max is on the track where it has it popup menu divided into four subsections set in a 2x2 matrix centered at the cursor, making the menu items quicker to access. But there should be no problem making truly circular menues in DesktopX.
There any many good resources on the internet that contains some really good information from people who has researched alot into GUI Design. Please post them here at WC as you come across them as it will benefit everyone in the end.
I have found many very nice skins, widgets, shells, you name it, -but I haven't found all of the, good. One reoccuring example is scrollbars that can barely be seen. I have to guess where it is. Another is skins that doesn't hide the windowframes outside the screen area when maximized. Or for instance a 1 pixel border to grab hold of when I try to resize the windows.
I find it very sorry when I can't use a skin that has been put so much effort into and look so stunning because it turns out to slow me down when I work. Not my computer, but my self.
That is why I highly recommend everyone to familiarize your self with Fitt's Law. It's some very useful information on GUI design and user intaraction. I am not saying that everyone should follow this to the dot, just read it and think about it. It is very likely it'll give your creating the little extra to make it truly great.
Some of the things Fitt's Law describes is the five magic pixels that are quickest to access. Why you should ensure that your tools docked to the side of the screen is to the absolute and not one, two or whatever pixels from the edge. And much more on how to make your design quicker and less painful to use.
The best article I have found so far that explains Fitt's Law is at askTog. http://www.asktog.com/columns/022DesignedToGiveFitts.html There is also a newer article about Interaction Design which is very interesting. http://www.asktog.com/basics/firstPrinciples.html
One of the things within Fitt's Law which I never have seen in a application is the circular menues. I see that it's something that might not be the easiest to do well, but I do feel that DesktopX has a good potential here to make something good. The QuadMenu in 3D Studio Max is on the track where it has it popup menu divided into four subsections set in a 2x2 matrix centered at the cursor, making the menu items quicker to access. But there should be no problem making truly circular menues in DesktopX.
There any many good resources on the internet that contains some really good information from people who has researched alot into GUI Design. Please post them here at WC as you come across them as it will benefit everyone in the end.
mrbiotech
Reply #2 Thursday, March 24, 2005 11:31 PM
Reply #2 Thursday, March 24, 2005 11:31 PM
In all honesty I've seen few few DesktopX themes that seem to fit Fitt's design parameters. Here are a few of the major blunders seen over the years (this also applies to LiteStep and Talisman themes):
Common theme oversights...
1) Taskbar or other buttons are separated from the screen edge: By removing clickable features even one pixel from the screen edge it decreases its accessibility because that last pixel on the edge is where your mouse stops naturally when you slam it against the edge.
2) Auto-hide area consumes an entire edge of the screen: According to Fitt's Laws, the five easiest pixels to access on your monitor are the corner ones (where your mouse will naturaly end up if swung with some velocity in nearly any direction) or the pixel immediately under your mouse cursor. Many themes will set up a hot-spot area of 1px-by-screen-edge-width/length that hides/shows a taskbar or other theme element. This causes accidental activation of the hidden object to occur with enhanced probability, and can easily be remedied by using the corner method.
3) "Box" themes (floating bar/box themes): These are inherently flawed because the floating bar/box moves the activation areas (tasks, menu buttons, etc) away from the screen edge, thereby creating a harder target.
4) Teeny-tiny buttons: They might slightly better on your computer's memory, but they're a pain in the butt to hit with the mouse.
5) Taskbars/other buttons that use purely iconic representation: Although they might look great and conserve space, they actually produce a small target to hit with the mouse. Fitt's lectures remark that a taskbar that displays the text next to a graphic representation (icon) are easier to recognize, because of the text, but most importantly are wider, and thus easier to hit.
Using your corners...
Apple's Expose feature in OSX 10.3+ is a great implementation of the corner mouse activation areas, allowing the user to configure what the corners do, but also giving an excellent representation of what programs are open and what's on 'em. I've also attempted to demonstrate the concept of configurable corner-hotspots in LiteStep themes like Nondisjunction http://mrbiotech.wincustomize.com/viewskin.aspx?skinid=266&libid=6&comments=1&SID=5337&UID=417533 , Singularity http://mrbiotech.wincustomize.com/viewskin.aspx?skinid=237&libid=6&comments=1&SID=5337&UID=417533 , and PhenotypeII http://mrbiotech.wincustomize.com/viewskin.aspx?skinid=244&libid=6&comments=1&SID=5337&UID=417533 , giving the user the option of choosing what they want a corner mouse-over area to do.
The Circular Popup
Creating a circular popup is actually a very complicated problem. Maya, 3DStudioMax, and Firefox (through a plugin) have managed to pull these off. The Firefox pie menu isn't truly dynamic, the graphics being a complete rasterized image, rather than a spontaneously generated and positioned series of items. ObjectDock Plus's Swing-out menus are about the closest I've ever seen to this feature being completely implemented. It would be foundational if their RightClick product could eventually do something like this (HINT, HINT).
Again, I've attempted to mess around with the concept in an unreleased LiteStep theme seen here: http://www.skinyourscreen.com/server/download.php?view.46 although it's far from complete.
It's an interesting question you pose. It would be great if designers thought of Mr. Fitt more frequently.
Common theme oversights...
1) Taskbar or other buttons are separated from the screen edge: By removing clickable features even one pixel from the screen edge it decreases its accessibility because that last pixel on the edge is where your mouse stops naturally when you slam it against the edge.
2) Auto-hide area consumes an entire edge of the screen: According to Fitt's Laws, the five easiest pixels to access on your monitor are the corner ones (where your mouse will naturaly end up if swung with some velocity in nearly any direction) or the pixel immediately under your mouse cursor. Many themes will set up a hot-spot area of 1px-by-screen-edge-width/length that hides/shows a taskbar or other theme element. This causes accidental activation of the hidden object to occur with enhanced probability, and can easily be remedied by using the corner method.
3) "Box" themes (floating bar/box themes): These are inherently flawed because the floating bar/box moves the activation areas (tasks, menu buttons, etc) away from the screen edge, thereby creating a harder target.
4) Teeny-tiny buttons: They might slightly better on your computer's memory, but they're a pain in the butt to hit with the mouse.
5) Taskbars/other buttons that use purely iconic representation: Although they might look great and conserve space, they actually produce a small target to hit with the mouse. Fitt's lectures remark that a taskbar that displays the text next to a graphic representation (icon) are easier to recognize, because of the text, but most importantly are wider, and thus easier to hit.
Using your corners...
Apple's Expose feature in OSX 10.3+ is a great implementation of the corner mouse activation areas, allowing the user to configure what the corners do, but also giving an excellent representation of what programs are open and what's on 'em. I've also attempted to demonstrate the concept of configurable corner-hotspots in LiteStep themes like Nondisjunction http://mrbiotech.wincustomize.com/viewskin.aspx?skinid=266&libid=6&comments=1&SID=5337&UID=417533 , Singularity http://mrbiotech.wincustomize.com/viewskin.aspx?skinid=237&libid=6&comments=1&SID=5337&UID=417533 , and PhenotypeII http://mrbiotech.wincustomize.com/viewskin.aspx?skinid=244&libid=6&comments=1&SID=5337&UID=417533 , giving the user the option of choosing what they want a corner mouse-over area to do.
The Circular Popup
Creating a circular popup is actually a very complicated problem. Maya, 3DStudioMax, and Firefox (through a plugin) have managed to pull these off. The Firefox pie menu isn't truly dynamic, the graphics being a complete rasterized image, rather than a spontaneously generated and positioned series of items. ObjectDock Plus's Swing-out menus are about the closest I've ever seen to this feature being completely implemented. It would be foundational if their RightClick product could eventually do something like this (HINT, HINT).
Again, I've attempted to mess around with the concept in an unreleased LiteStep theme seen here: http://www.skinyourscreen.com/server/download.php?view.46 although it's far from complete.
It's an interesting question you pose. It would be great if designers thought of Mr. Fitt more frequently.
Jafo
Reply #3 Thursday, March 24, 2005 11:42 PM
Reply #3 Thursday, March 24, 2005 11:42 PM
'Fitt's Law' goes right out the window when I'm making skins.
If he wants to have a 'fit' [pun] over their functionality well jolly good for him.
I don't make it/them for him, anyway....I make 'em for me....
KeithMacDonald
Reply #4 Friday, March 25, 2005 12:20 AM
Reply #4 Friday, March 25, 2005 12:20 AM
i dont even get it.... can i skin without it? (i hope so... ive never even heard about it b4, neways)
Hus
Reply #5 Friday, March 25, 2005 12:29 AM
Reply #5 Friday, March 25, 2005 12:29 AM
You will find very few WB skins actually follow Fitt's Law about how the top-right pixel should close a window. Check 20 random hugely popular WB skins, and see how many of them have that feature. I'm betting not many...sometimes it's ok to give up slight usability for better aesthetics... 
I do agree with the rest of those though...good to know...
I do agree with the rest of those though...good to know...
mrbiotech
Reply #6 Friday, March 25, 2005 3:02 PM
Reply #6 Friday, March 25, 2005 3:02 PM
Fitt's also got some interesting studies on multi-monitor setups- I guess he was contracted by Apple for a bit, although you wouldn't guess by the way he rips on their OS (the Dock, especially).
Still, his laws are applicable, despite the fact they can be a challenge to employ.
Jafo, ALL your LiteStep themes are employing the most important of Fitt's law's
: "The easiest pixel for a user to access is the one immediately under your cursor." It's why Stardock's development in RightClick is so exciting- it's an incredibly efficient means of system navigation that's been exploited almost exclusively by alternate shells.
Still, his laws are applicable, despite the fact they can be a challenge to employ.
Jafo, ALL your LiteStep themes are employing the most important of Fitt's law's
: "The easiest pixel for a user to access is the one immediately under your cursor." It's why Stardock's development in RightClick is so exciting- it's an incredibly efficient means of system navigation that's been exploited almost exclusively by alternate shells.
XX
Reply #7 Friday, March 25, 2005 10:21 PM
Reply #7 Friday, March 25, 2005 10:21 PM
I have a WB design that follows Fitt's law but the project has stalled.
essjae
Reply #8 Sunday, March 27, 2005 3:57 PM
Reply #8 Sunday, March 27, 2005 3:57 PM
I agree, I've found a lot of cool skins, but they all seem to be lacking some part of usability, white fonts on light gray tabs, black fonts on dark blue backgrounds, excessive use of shadows that blur text, as well as the above mentioned issues.
When I first got Windowblinds, I was awed, but as I started searching for a good skin, they all had some fatal flaw that made them hard to use, I really like LaST, but in Office 2003 apps, the tabs on the windows show up with white text and a very light gray so you can't read the tab without mouse-over.
I know its easy to say, since I haven't created my own skin (yet), but it would be nice to find a skin where usability is on par with the WinXP or OS X standards.
When I first got Windowblinds, I was awed, but as I started searching for a good skin, they all had some fatal flaw that made them hard to use, I really like LaST, but in Office 2003 apps, the tabs on the windows show up with white text and a very light gray so you can't read the tab without mouse-over.
I know its easy to say, since I haven't created my own skin (yet), but it would be nice to find a skin where usability is on par with the WinXP or OS X standards.
thomassen
Reply #9 Monday, March 28, 2005 6:39 AM
Reply #9 Monday, March 28, 2005 6:39 AM
Even though you don't create you own skins, doesn't mean you can't tell if a design is flawed or not. Even though it's easy to say and hard to do, I don't think it's any reason to settle for less. Not that I think any designer do. WB skins for instance is becomming increasingly more complicated to make, as more features are added. No wonder that there might be some glithes. Fortunatly, people will give feedback to the author, that's what I like about this site.
juni
Reply #10 Tuesday, March 29, 2005 5:25 AM
Reply #10 Tuesday, March 29, 2005 5:25 AM
I tried circular menus for a P900 skin I made:
http://www.epocware.com/screenshots/ericsson900_programs/day2005_7.gif
http://www.epocware.com/screenshots/ericsson900_programs/day2005_7.gif
NightTrainthedark
Reply #11 Tuesday, March 29, 2005 6:33 AM
Yes but that function goes right out the door when running multiple monitors.
Authors do not have the ability to change all text color settings on your system. XP and thousands of other programs call for their own text colors and all an author can do is try to make as much as possible readable. Darker skins are very tricky and will almost never follow Fitt's laws.
I think you will find that most skins are made to change the look and FEEL of the default XP theme. It's all about being different. Following rules is not very different.
Reply #11 Tuesday, March 29, 2005 6:33 AM
| You will find very few WB skins actually follow Fitt's Law about how the top-right pixel should close a window. |
Yes but that function goes right out the door when running multiple monitors.
| I agree, I've found a lot of cool skins, but they all seem to be lacking some part of usability, white fonts on light gray tabs, black fonts on dark blue backgrounds, excessive use of shadows that blur text, as well as the above mentioned issues. |
Authors do not have the ability to change all text color settings on your system. XP and thousands of other programs call for their own text colors and all an author can do is try to make as much as possible readable. Darker skins are very tricky and will almost never follow Fitt's laws.
I think you will find that most skins are made to change the look and FEEL of the default XP theme. It's all about being different. Following rules is not very different.
thomassen
Reply #12 Tuesday, March 29, 2005 10:36 AM
Reply #12 Tuesday, March 29, 2005 10:36 AM
The most issues I've had is the windows border not beeing hidden. Making sure that goes all the way off screen in maximised mode doesn't really restrict your design.
Then it's the titlebar buttons. Even though the actuall visible button doesn't reach all the way to the top, the creator of the WB skins can easily make a transparent border to increase the clickable area and catch clicks that where one or two pixels off.
Nothing much, doesn't limit your creativity, just enhances the user experience. Most likely without your users even knowing it.
Then it's the titlebar buttons. Even though the actuall visible button doesn't reach all the way to the top, the creator of the WB skins can easily make a transparent border to increase the clickable area and catch clicks that where one or two pixels off.
Nothing much, doesn't limit your creativity, just enhances the user experience. Most likely without your users even knowing it.
thomassen
Reply #13 Saturday, April 2, 2005 1:09 PM
Reply #13 Saturday, April 2, 2005 1:09 PM
This extention to Firefox looks interesting related to Fitts Law. https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&version=1.0&os=Windows&numpg=10&id=29 I haven't tried it yet because I'm not on my own computer.
Cavan1
Reply #14 Saturday, April 2, 2005 7:59 PM
Open in SkinStudio set screen edge for window frames yourself to whatever you want, I personally like to see window
frames when window maximized.
Again use SkinStudio to move buttons where you want them.
I do not think all the skinners who upload here will conform to Fitts law just to please you.
Reply #14 Saturday, April 2, 2005 7:59 PM
| The most issues I've had is the windows border not beeing hidden |
Open in SkinStudio set screen edge for window frames yourself to whatever you want, I personally like to see window
frames when window maximized.
| Then it's the titlebar buttons |
Again use SkinStudio to move buttons where you want them.
I do not think all the skinners who upload here will conform to Fitts law just to please you.
thomassen
Reply #15 Sunday, April 3, 2005 6:13 AM
Oh no, I never meant for people to please me. I just wanted to inform people that there where resources out there from people who have spent quite alot of time researching GUI and interactive design. I was pointing out how easy it is to make something easier to use in the long run. If they wan't to use that info is all up to them.
Reply #15 Sunday, April 3, 2005 6:13 AM
| I do not think all the skinners who upload here will conform to Fitts law just to please you. |
Oh no, I never meant for people to please me. I just wanted to inform people that there where resources out there from people who have spent quite alot of time researching GUI and interactive design. I was pointing out how easy it is to make something easier to use in the long run. If they wan't to use that info is all up to them.
Please login to comment and/or vote for this skin.
Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:
- Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
- Access to a great community, with a massive database of many, many areas of interest.
- Access to contests & subscription offers like exclusive emails.
- It's simple, and FREE!
Reply #1 Thursday, March 24, 2005 10:20 PM