Site Features Overload
I sometimes see features on websites that, for a few moments, make me think wow, that’s cool. Then, upon using the site for a bit, I start thinking wow, that’s pretty damn annoying. Initially I feel the site’s developer or webmaster might be onto a good thing, but then the old usability angle comes into play and changes my mind. You may have experienced the same thing. It’s perhaps just a subjective thing. After all I am just a single user with my own tastes and preferences. I mean no disrespect to anyone, and some of the things I have grown to dislike most certainly have their place in world of the web. They can be neat tricks that, if used at the right time and in the right place, can make a site really shine and come to life. Okay, I suppose you want an example. All right, here goes, here’s one: CSS pop-ups; the kind used for tool tips. They often bug me.
First of all, let’s look at the tool tip itself. You know, the title="" attribute. If the site’s content is well written and well presented, regular tool tips are seldom necessary. Let’s say, for example, you’re reading an article about a new technique called The Foo Method and in the article the author explains that this technique was developed a Mr. James Foo. In that mention the author of the article offers a link to Mr. Foo’s website. The link in this case may be offered like this: To learn more about The Foo Method, go to JFoo.com. Do you really need a tool tip on this link? Is it in any way helpful? Not really, I say. I mean you know the discussion is about The Foo Method and the link text clearly states the target of the link and why you might want to go there. So what’s the title="" attribute or tool-tip even applied for? For the sake of redundancy? To get in the way if you happen to hover over the link while reading? In my opinion it serves no real purpose.
Now, offering the attribute in enhanced form, as a CSS pop-up, increases the same unnecessary thing more significantly. If you hover over the link you get a large box restating the link, often explaining it in detail, and sometimes even offering you the URL to go along with it. But why? Developers really need to take care when employing the latest craze and really think through the effects of offering such things.
So, this is one that gets in my way in terms of site usability. What’s yours? Do you know of a well-meaning yet particularly annoying site enhancement that you run into more often than you’d like? Spawning new windows got you down? Unneeded alt attributes getting in the way (or sounding strange out of order or out of context)? Animations making you crazy? Fixed font sizes or low contrast making you strain? Please lend me your thoughts. Your responses may help well-meaning developers avoid making simple usability mistakes.
Rob O'Rourke responds:
Posted: September 4th, 2006 at 7:14 pm →
Nice article, I think I’m one of those well-meaning web developers and I’ve definitely made some usability no-nos. In fact I’m pretty sure that’s the case with all my recent projects because I’ve been teaching myself all the cutting edge stuff and invariably ending up in fadsville.moo.fx for example. Gotta love those accordion effects =]
I find that sticking to the basic functionality a site requires and modifying and building on that based on user feedback is the way forward. It’s easy to love everything you do in your own little web developing world.
Mike Cherim responds:
Posted: September 4th, 2006 at 11:46 pm →
Thanks Rob. I must say that accordion effect was big on the wow factor. I looked into it a bit and while on the surface it seems okay, it is a good example of a good idea which falls a little short on the usability end. It requires script, and there’s no problem there as the page does open up with script off, but is also flawed in that some of the content is cut off with script off while styles are on — and that gets worse if the text is enlarged. It’s great without styles so the content is fairly accessible so that’s a good thing. I did notice it really needs to have focus for keyboard users. It works just fine to the keyboard user, but without focus, the interaction is blind so the user may not know when to hit Enter to open up the sections. It could be improved if the sections would simply open up with focus applied.
I sent a link to this article to the Web Standards Group discussion list and got a little bit of feedback so far that unfortunately wasn’t posted here for my readers (many of whom aren’t members I’m sure) so I have re-posted said responses here, in part:
Also, this list (paraphrased and some links removed so as to not pick on anyone):
That’s a good list, Terrence… thanks for sharing. I agree with it all and some of it I can personally reflect upon as I’ve done it in the past. That’s all part of my personal development. I live and learn, live some more and learn some more, inching ever closer to the ideal middle ground between solid usability and feature richness.
felix miata responds:
Posted: September 5th, 2006 at 1:05 am →
Some things besides useless titletips that annoy me:
1-sites that fail the test(s) here http://juicystudio.com/services/colourcontrast.php
2-sites with this CSS rule: ‘body {font-size: 62.5%}’, which come out looking like http://mrmazda.no-ip.com/SS/mikegb1.gif (rendering P text at 28px with my normal browser default size set to 20px) with this basic user stylesheet rule ‘body {font-size: medium !important}’ to undo the damage from more typical author rules like ‘body {font-size: 76%}’, ‘body {font-size: small}’, ‘body {font-size: 12px}’, and ‘body {font-size: 10pt}’. I have no words suitable to publicly describe my opinion of Clagnut’s widely copied 62.5% body styling methodology.
3-excessive leading
4-class and ID litter that make it impossible for a generic user stylesheet to override rude author styles
5-textareas wide enough, as here, to hold only about 7 words
6-horizontal scrollbars in textareas bounded by more whitespace than the width of the textarea
Of course, being mere annoyances, most are easily dealt with by another annoyance, Firefox’s ‘view -> page style -> no style’, which can’t be made to stick, unlike Opera and Konqueror.
Don’t take the above as a personal attack, because this page is far less annoying than most web pages.
Mike Cherim responds:
Posted: September 5th, 2006 at 1:27 am →
It’s cool Felix. People should know about your feelings on the matter of font sizes and such and make an educated decision from there.
Just for the record, the 62.5% font size I have here is not something I normally do. That was the font-size specified on the Kubrick theme I built the Beast-Blog theme on. I never changed it. I normally apply a font-size to
bodyas 100.1% then usually scale it down a bit from there, to 0.9em or 0.95em. And yes, the contrast here is a bit on the weak side, especially on thesmallelement which is a pretty light green. Not that it’s an excuse, but this theme was made a while ago and my more recent works, like my SeaBeast theme for example are a lot better in these areas.Matthijs responds:
Posted: September 5th, 2006 at 3:22 am →
@felix: what’s wrong exactly with the 62% rule? Is it too small? Isn’t the 62% rule just used to start with an easy to calculate base-size of around 10px after which you can set the elements bigger (p font-size 1.2em, h2 font-size 2em, etc).
Or is it too big? (looking at the gif it seems like that)
Georg responds:
Posted: September 5th, 2006 at 4:53 am →
@Matthijs: what’s basically wrong with the 62.5% rule is that all following text is sized up from it. So, in most browsers, when the ‘minimum font size’ is set higher than 10px, or the font-size on body is altered by a User stylesheet, all successive font-sizes inherit this new base-value and become unnecessary, and sometimes ridiculously, large. The smaller the base - the larger the resulting font-size. Probably not the effect the creator wanted, and many pages/sites break under such stress. A bit more on the subject here: http://www.gunlaug.no/contents/wd_1_03_04.html
Mike, I can read your blog at 6 meters distance from my screens, so you can calculate the effect of that 62.5% base font. Suits me just fine, but not all sites out here survive as well as your blog
The one “overload” thing I dislike is the opening of new windows or tabs for links. Some go unnoticed because I’m blocking target, and some passes by because I have to request opening of script-targeted links - which I rarely do.
felix miata responds:
Posted: September 5th, 2006 at 8:16 am →
I think it’s perfectly reasonable to conclude that 28px P text is too big when the default is 20px. I have no problem calculating in 1/16 or 1/12 or 1/10 of an em, and neither should anyone else that didn’t routinely flunk decimal arithmetic.
The 62.5% body styling method just perpetuates the myth that there is any justification to size anything on any web page in px. You only know how big a px is on your own configuration.
There’s no good reason to set body to 62.5% and then follow with P at 1.2em other than just another way to impose a 43.75% size reduction from the default (12px is 56.25% the size of 16px, because size is a function of area, height times width, not just the nominal so-called CSS “size”). A 12px character typically has a 72px rectangle to work in, while a 16px character typically has a 128px. that 43.75% smaller px count for 12px means the the 16px letter form can be vastly superior in quality, and the difference escalates as screen resolution and nominal default size are increases.
With px sizing, you know how well the pieces fit together, but not what size they will be in relation to the viewing environment (except your own). When you size in em, you also know how well the pieces fit together, and you also don’t know what size they will be in relation to the viewing environment. The difference is with em you can expect that that unknown size will bear a reasonable relationship to the viewing environment, something impossible with px due to the wide variation in viewport size and screen resolution combinations. Try these 3 examples of pages built entirely without using px at a wide range of viewport, font default, and screen resolution settings, and you should see that px is easy only for web authors:
http://mrmazda.no-ip.com/indexx.html
http://mrmazda.no-ip.com/auth/Sites/dlviolin.html
http://mrmazda.no-ip.com/SS/bbcSS.html
Mike Jolley responds:
Posted: September 5th, 2006 at 8:21 am →
Lightboxes. I love them really, however what really annoys me is when they are used for stupidly large files so it either a)swamps my whole screen b)takes forever to load. Even worse when the developer makes the thumbnail resized in html….
Overuse is bad, but subtle lightboxes is always ok with me.
The other thing i hate is the old popups. Popups are uncommon you say? Try the godaddy hosting control panel, does my nut in.
Matthijs responds:
Posted: September 5th, 2006 at 8:28 am →
Thanks for the link Georg. Learned something new. Most often I use small or 79% as a base, followed by % or ems for the elements.
One overload thing for me is sites or parts of a site depending on javascript. Since I browse with the no-script extension it’s very strange to arrive on a blank, white page. Only after allowing js will I see something ..
Mike Cherim responds:
Posted: September 5th, 2006 at 9:45 am →
Though it’s getting a little off-topic of the article, the whole font-size thing is pretty interesting. The base proportional size on my Firefox browser (for “normal”) is 16px, minimum is 10px and monospace is 12px, but what I see on my screen here is what I would consider an average web font-size — similar to what would be around 11pt in print. I don’t see it as big text or anything. That said, I guess the most important thing to the web developer is to not specify on the site’s style sheet a font-size measured in pixels (px), or even worse, points (pt) and to instead use percent % or a square of the font-face (em) so as to allow all users to adjust the font to their liking using the function on their browser: Scroll wheel up and down, Ctrl++ or Ctrl+-, or View > Text Size. There is a huge difference between print and web. Many people don’t realize this. An example that puts it in perspective nicely: A business card takes up more than half the screen at 1024×768 resolution. I don’t recall the exact number in pixels, but it’s close to 600px wide. I had a problem with this with my last project, a print job, when the client saw a web-displayed mock-up of their cover they thought the text was too small. I had to explain the real cover size, if it were to be viewed on the web, would be around 3000 pixels wide.
Rich Pedley responds:
Posted: September 5th, 2006 at 5:02 pm →
As Mike is possibly aware I used to assess sites for the Guild of Accessible Web Designers (I no longer do so for many reasons). When assessing so many sites you come across too many that have sloppy coding that cause weird and wonderful errors that can easily be fixed! A missing </em> for example can really mess up a page for no reason. Makes you wonder whether any of them even view the finished article!
But perhaps the most annoying thing is tabbing through links on a page. This falls into two categories:
1. Using a tab order, but not making it logical and you end up jumping all over the place and unable to figure out where you are, or where you will end up next.
2. Tabbing through hidden drop down(fly out) menus. Because the mouse isn’t being used you can’t see the link text as the menu does not expand, and you really don’t want to have to go through each and everyone when you can’t see what they are!
2a. Not being able to use the first menu item to go to a section of these drop down(fly out) menus.
Ted Drake responds:
Posted: September 5th, 2006 at 5:12 pm →
I put my mouse over your link for “alt attributes” hoping it had a title attribute without thinking about what your post was about. I was hoping you were defining what this alt attribute link was… alas no title attribute. Perhaps it isn’t so overused afterall.
Mike Cherim responds:
Posted: September 5th, 2006 at 5:48 pm →
Good point, Ted. I just updated that link. Everything has a place.
Mike Cherim responds:
Posted: September 7th, 2006 at 5:41 pm →
Here’s a great article about the title attribute by Gez Lemon.
Andrew Ingram responds:
Posted: September 7th, 2006 at 7:02 pm →
(Haven’t read the comments)
I agree with you about being cautious when it comes to embracing new features. Quite frequently I encounter features being added to projects on the basis that they’re cool or seem like a good idea without it really being thought through. I consider myself being fairly good at taking a step back and seeing how well a feature will actually work, but I lack the ability to explain clearly why these things are bad ideas. I’ve getting a bit of reputation for being negative to the point of being offensive because I very rarely support new features being added. I can appreciate the “wow, pretty” or “wow, cool” value of things like pretty tooltips but I strive for the simple solutions so always ask “do we really need this?” or “have you really considered the negative impact of what you’re about to do?”.
It’s difficult telling people that their baby that they’ve spent so much time on actually isn’t very good, it’s even worse when you can’t think of any ways for them to keep the essence of what they’ve done whilst removing some of the negatives.
You seem to share some similar views regarding accessibility and usability as me, so it’s nice to find your blog
Mike Cherim responds:
Posted: September 7th, 2006 at 7:43 pm →
Thanks Andrew — you seem positive to me
I suppose it’s all part of the design/development process, some things are referred to as “fads” in hindsight while other innovations have staying power and become integral to our lives and live on as standards or benchmarks from which the process continues.
I do understand the feelings of these innovators, and how they may be sensitive about certain people not really showing the level of appreciation they feel their whizbang features deserve, but then I also see people like Thomas Edison and Albert Einstein who fail thousands of times yet persist in their endeavors. Some nail it if they persist as those two did, while others I suppose try and try until they die. There’s a lot to be said about the challenge and satisfaction of the process itself.
Scott Carpenter responds:
Posted: September 25th, 2006 at 10:32 pm →
Hi, Mike. First time visitor and commenter here.
Interesting. I try to create a decent-looking layout with some attention to design but without being hung up too much on what I’m supposed to do. I’m not a web developer by trade. If my site validates as transitional XHTML 1.0, I’m happy. I try to avoid usability gaffes, although I don’t worry about my CSS that much. I’m just learning how to use it and I’m not going to worry about “class and ID litter” very much right now. I’m mostly worried about making my site look the way I want it to look. (I see there are some serious design people here; I hope I don’t offend anyone with my insolence.
I do care about usability, and I know I have much to learn, but I was surprised by your negativity about the title attribute and its habit of spawning tooltips. I’ve been using it all the time on my (new) blog, mostly to try to provide extra information to readers and to search engines. I wasn’t aware it was considered a faux pas by some people. I think this is the first time I’ve seen anyone complain about it. (Although granted I don’t spend a lot of time in design forums and discussions.) I wouldn’t think it would be such a problem because you have to hold the mouse over the link for a few moments in order to experience the annoyance you feel. And if you are sitting there with the mouse hovering, is it so terrible to learn a little more about the link?
Not to make it in to an argument — if it bothers you, it bothers you. I don’t want to judge another’s peeves. I have plenty of my own. Again, I was just surprised that I was so egregiously violating some usability principle. You must realize that WordPress puts the title attribute in a lot of places. I think an example of where it can be helpful is in the link list. The tool tip can give some added info about the site being linked to. Your site does this, although I imagine that you wouldn’t object as strongly to this use, where there isn’t as much contextual information to help us out.
Mike Cherim responds:
Posted: September 25th, 2006 at 11:01 pm →
Hello Scott,
It’s not so much the default tool tip that gets in my way. Those bother me very little because they’re pretty unobtrusive, and I even find them useful at times if they’re simply not restating what the link text says. Rather it’s those big styled one that pop up in big boxes. Those are the ones that annoy me at times. One of the problems with those that makes it worse is that they are typically scripted events so they pop up on all links, whether it makes sense to offer a tool tip or not. Not sure if you’ve seen those, but those are the ones I mean. I’d show you an example, I know of a few site’s they’re used on, but I don’t want to offend anyone who may choose to use them.
You’re right about WordPress and the liberal use of them. Most of it’s fine. The ones I don’t like on this blog especially are the archive links. Look under the “Beast-Blog Archives” on the side bar: the first link text says [at this time] September 2006. So does the tool tip. In my eyes that’s really unnecessary as it does nothing in the way offering additional or useful information. Whereas some on my other sidebar links actually provide extended details that can be useful. I do need to go through that file, though, and rethink some of them. (I’ve learned so much since I made this theme.)
My current practice is to consider whether offering additional tool tip will be useful. Ideally, though, the text itself will provide the appropriate info. This is always the best way in my opinion because not all users (unless they are using a mouse) will see or benefit from tool tips, so I try to be careful to make the link text self-supporting.
Welcome, by the way