CSS compliance with Fitts' Law

[D856C]

Most people constructing websites don't fully appreciate when you're doing page layout, you're doing it for humans. Sure, in some vague sense designers understand the users are 'out there,' but not the implications for code. CSS is often the primary tool for interface design, which means the rules for human-computer interaction design apply.

Unfortunately, few CSS-based developers know Fitts' or Tessler's or Hicks law, how the variety of interaction design principles interrelate and modify each other, or really anything about interaction design.

Fitts’ Law: The larger the target object, the faster it can be acquired.

Fitts’ Law and Text Links gives some practical CSS implications for Fitts.

Link presentation and Fitts' Law starts to get into the real implications for navigation.

This mezzoblue redesign with Fitts' law in mind is a very nice explanation of the human-computer interaction design thinking which should go into CSS based layout design.

Without the grounding in interaction design methodology, the web designer's default of "if it looks cool -- do it" does not produce the best result for users. There are a variety of interaction design principles, some which modify others. Understanding interaction design priciples -- along with the implications for coding -- can make you a better CSS designer.

[PR Design]

Really basic stuff, but it can go fairly advanced with equations etc, as seen here.

[D856C]

I kept that out because too many people are going to look at the software applicable stuff. Most people aren't doing full browser or kiosk applications.

It's only basic if you're already applying it. But it does go into one thing of importance I touched on: Fitts' isn't the only law. People want to take this and stretch it to absurdist extremes, mistaking a discussion of Fitts as the alpha and omega of all interaction design.

Again, a few web designers have encountered Fitts, parrot it on rare occasion ....then go off and do whatever they were doing before. For even the people who have heard the term, it's for idle cocktail party chat or to be tossed off in the presence of clients when trying to inflate the billable.

Okay, I'll bite. Here's the exception that makes the rule, where you can (reasonably) take Fitts to an extreme: Slideshows. Just because a web designer can parrot the one line doesn't make them interaction designers. Memorization and Trivial Pursuit: Web Developer Edition is basic. Application isn't.

[rossable]

D856C, i understand the point you are making and agree with you on the overall, however, fitt's law is only a piece of the puzzle.

good color choice, sufficiently weighted content, and balanced page layout also contribute just as much to usability as proportions and formula do.

it's best to keep this in context as a tool to be used along with others for the best result rather than a guiding philosophy or cure-all usability method.
i personally find mezzoblue hard to navigate and their layout causes confusion as to what is the more important information. not due to the use of fitt's law but typography choices and coloration of key sections.
i've seen similar abuse with the golden ratio when implemented in design forcibly.
good design uses tricks, methods, intuition, and random color.
great design is balance.

[D856C]

Yep. That's the gist of the "alpha - omega" reference.

[rossable]

ah.

good then.

[LeadMagnet]

Very interesting read. I had never heard of Fitt's law before, it makes perfect sense though.