*
programming and human factors
by Jeff Atwood
*
Every few years, Jakob Nielsen takes websites to task with a Top Ten Web Design Mistakes article. Although things have clearly improved since the original 1996 list, I'm particularly concerned that in the competitive frenzy to get all JavaScripted up for Web 2.0, we may be defeating the very simplicity that made the web so popular. Nielsen shares this concern:
This year's list of top problems clearly proves the need to get back to Web design basics. There's much talk about new fancy "Web 2.0" features on the Internet industry's mailing lists and websites, as well as at conferences. But users don't care about technology and don't especially want new features. They just want quality improvements in the basics:
- text they can read;
- content that answers their questions;
- navigation and search that help them find what they want;
- short and simple forms (streamlined registration, checkout, and other workflow); and
- no bugs, typos, or corrupted data; no linkrot; no outdated content.
Anytime you feel tempted to add a new feature or advanced technology to your site, first consider whether you would get a higher ROI by spending the resources on polishing the quality of what you already have. Most companies, e-commerce sites, government agencies, and non-profit organizations would contribute more to their website's business goals with better headlines than with any new technology (aside from a better search engine, of course).
Of course, Web 2.0 isn't just JavaScript. But according to Paul Graham, JavaScript is one of the three key characteristics that define Web 2.0:
One ingredient of its meaning is certainly Ajax, which I can still only just bear to use without scare quotes. Basically, what "Ajax" means is "Javascript now works." And that in turn means that web-based applications can now be made to work much more like desktop ones.In fact the new generation of software is being written way too fast for Microsoft even to channel it, let alone write their own in house. Their only hope now is to buy all the best Ajax startups before Google does. And even that's going to be hard, because Google has as big a head start in buying microstartups as it did in search a few years ago. After all, Google Maps, the canonical Ajax application, was the result of a startup they bought.
I've visited quite a few Ajax sites that committed the cardinal sin of the web: they broke the back button. Nothing demonstrates an utter disregard for the user quite like breaking the back button does. Going "back" is the second most common user activity after clicking a hyperlink. Didn't we learn our lesson with <frame>? Frame based layouts are so widely reviled for their address bar and back button breaking ways that they have been banished to freak-in-a-sideshow status. And yet when an Ajax app breaks the back button, it's no big deal, it's an acceptable side-effect of all that cool client-side processing?
Well, it is a big deal, and it isn't acceptable. I hate to single out everyone's favorite whipping boy, but it's the most recent example:
I don't care how many fancy client-side features your site has-- if you break the back button, you broke the internet for your users. I can't emphasize this enough.
A big part of the web's ease of use is basic visibility-- if you can see it, you can click it. Nothing hidden. Nothing up our sleeves. But the minute you throw a drop-down menu on your page, you've broken that contract with the user. That's why drop-down menus don't belong on the web. And yet we can't seem to get away from the damn things.
Amazon, of all places, has an incredibly annoying DHTML menu on their home page. Just mouse over the "See All 32 Product Categories" tab. Is it really necessary for this tab to spawn an aggravating DHTML javascript popup, complete with its own click-interrupting animation? It's disconcerting to accidentally mouse over this area and have a popup blasted in your face. Why not just let me click the link and see the categories, like every other web page I've ever visited?
Worse, many sites' implementations of drop-down menus are erratic and inferior to the menus in the operating system. Consider the 3leaf site: why can't I click on the Services menu, while all the others are clickable? Why doesn't the pointer change to indicate that I'm clicking on a hyperlink? The future of drop-down menus is uncertain even in Windows; shoehorning a marginal GUI convention on today's web is asking for trouble. Better to avoid these problems altogether by ditching drop-down menus entirely.
Shaun Inman's site, which was inexplicably nominated for a best-designed bloggie award, is truly painful to visit. It reads like a laundry list of Nielsen's complaints:
Shaun Inman seems to be a well-regarded web designer-- shouldn't he know better? Or is it the Web 2.0 kool-aid? If that's what it takes to get a bloggie design award, I'm sure hoping this guy starts a blog, because he's a shoo-in for 2006.
I don't want to turn this into a rant session, so I'll stop here. Clever JavaScript on your web page does not exempt you from good web design. Instead of spending all this time exerting maximum cleverness to transcend the weakesses of the web medium, It might be a better idea to play to the web's strengths-- such as speeding up how fast your pages load, or avoiding recent ill-advised design trends. And whatever you do, don't break the freaking back button.
Have you seen this site?
<a href="http://www.bindows.net/">http://www.bindows.net/</a>
They've pretty much recreated the Windows 95 GUI in AJAX .. with a bit of work maybe they could even get it to XP level. Seems pretty responsive as well.
casper on January 6, 2006 4:22 AM> They've pretty much recreated the Windows 95 GUI in AJAX
The fact that someone would even think this is worth doing makes a little part of me die inside.
Why don't they spend that time developing new apps and new interfaces that aren't subject to the limitations of the old ones?
Jeff Atwood on January 6, 2006 4:32 AMGreat post Jeff. Best post of 2006.
Josh Twist on January 6, 2006 8:37 AMAmen!
matt on January 6, 2006 9:20 AMhttp://www.ssw.com.au/ssw/ suffers from some of the same problems you listed. The drop-down menus don't work in Firefox, and the pages take forever to load (and I do mean a long time). They are hundred of mini-articles with large graphics all on one page. Bad for speed, and bad for SEO.
Eric D. Burdo on January 6, 2006 10:09 AMIt's a great rant. Mainly because it agrees with my position on everything.
: )
I like the energy in this post. I agree with most of it. Really had a good laugh as well.
also chech this out :
http://www.dontclick.it
Cheers
Kenneth Lanng on January 6, 2006 11:47 AMIn this year's list, item 9 is "Frozen Layouts with Fixed Page Widths." The last part of this section says:
The very worst offenders are sites that freeze both the width and height of the viewport when displaying information in a pop-up window. Pop-ups are a mistake in their own right. If you must use them, don't force users to read in a tiny peephole. At an absolute minimum, let users resize any new windows.
At this moment, I'm typing a response into a fixed width and height window that popped up when I clicked on the "Comments" link.
Oops.
Other than that, this is an awesome post, because I too am sooooo whipped by the "isn't this k3wl?" crowd.
Duuude. You're just a whiner.
;)
Actually, some of the issues you mentioned are in that book I read, Bulletproof Web Design. I'll post a review soon.
By the way, that "Awful" web page is AUSOME! But I don't think it's a dude. I think it's a woman named Gretchen Whitney (http://web.utk.edu/~gwhitney/gwpage.html)
Haacked on January 6, 2006 12:44 PMI'm not so sure about the Back button thing. You can't do that in desktop apps, and everyone's fine with that. I agree that it violates the web standard, but then again Windows violated the command line standard and everyone's fine with that too.
Maybe I'm biased because my AJAX apps are database operational things where going back is likely incorrect because it's not as if going back undoes some transaction that was committed, so the state isn't reverted but the UI is. In those cases, back is actually misleading and dangerous.
Any ideas on how back should be implemented in cases like these?
Josh on January 6, 2006 2:30 PM> At this moment, I'm typing a response into a fixed width and height window that popped up when I clicked on the "Comments" link.
Yeah yeah. Blame Movable Type, not me. But I think I can modify the page template so the javascript open doesn't restrict the window.
> By the way, that "Awful" web page is AUSOME!
It's the classic "bad web design" parody page, she's probably not the original author of the parody.. or is she?
> not as if going back undoes some transaction that was committed
Sure, and it works this way on the web, too. If I click the "back" button after buying a book on Amazon, I don't have the expectation that the book is magically un-bought. What we mean is that the UI should be correct in either case. It should ALWAYS be safe to go back. Nothing should break.
> I'm not so sure about the Back button thing. You can't do that in desktop apps, and everyone's fine with that.
Sure you can. Fire up Windows Explorer, browse through a few directories, then click the back button (either on the toolbar, or BACKSPACE, or the mouse back button). This metaphor is a lot more pervasive in Vista as well.
AJAX and the so call "Web 2.0" have a place and a promising future. The only problem is that we will have to put up with all of these sites that decided to use "AJAX for the sake of AJAX".
AJAX can add an extra level of usability to a site if implemented correctly. Take for example:
http://www.feedping.com/ or
http://www.kayak.com/ (even though it still needs some work, the concept is good)
And of course the ever popular http://maps.google.com
As soon as developers learn to use AJAX for usability enhancements rather than for cool effects, the web will be a better place.
Ryan Smith on January 6, 2006 6:16 PMHow about we never say "Web 2.0" again, because it's just a marketing fad? Nothing's changed.
What's not new:
- JavaScript
- CSS
- XML/DOM
- XHTML
- MVC
- Blogs
- Wikis
- Breaking people's browsers
What's new:
- The word "Web 2.0"
- The word "AJAX"
"Web 2.0"/"AJAX" is 2005's excuse to annoy users. We've dealt with frames, we've dealt with Flash, Java applets are out, bad JavaScript use must go too.
Web sites should be completely functional when a user disables CSS and JavaScript.
Anonymous Coward on January 9, 2006 9:27 AM> Web sites should be completely functional when a user disables CSS and JavaScript.
Yes, but who actually disables JavaScript-- much less CSS?
Jeff Atwood on January 9, 2006 12:38 PMWell, but that's not really the point, is it? it's more that there are plenty of alternative browsing devices out there that either don't support JS/CSS or don't have it implemented 'cos it wouldn't make sense. The W3Schools site's stats show somewhere around 10% of www browsers have JS off for some reason or another. YMMV, I'm sure. *shrug*
Regardless, it would indeed be cool if web apps were more focused on people and less focused on TEK! TEK!! TEK!!!, but, well, that's a bit large of a discussion to start here...
listless on January 9, 2006 12:50 PMI, for one, am nearly reaching the point that I want to turn of JS because of the annoy factor. I won't, because many sites won't "degrade gracefully".
Blind or motorically disabled people, for two and three, have no use for CSS and JS.
Mobile phone-using people for four.
Ultra-paranoid JavaScript-distrusting people for five.
Web spiders for six.
Lynx/Links users for seven.
While not inherently disagreeing with usability standards, or with Mr. Nielsen's vision of the web as front end to a very large database, I question the notion that all web sites serve the same purpose and should therefore be built with a single methodology in mind.
Clearly a commercial storefront like Amazon should degrade gracefully, catering to the broadest spectrum of users possible. After all, all those blind and physically disabled users surfing on their mobile phones have money to spend like anyone else :) Same could be said for a search engine, etc... Even so, risks must be taken as the boundaries of web design are not only unknown, but liquid.
Let's not make the assumption that the web as it exists today is "how it was meant to be" The so-called conventions of today are not the only ones possible, and quite frankly, aren't necessarily the best examples of interaction design.
While the web is a data driven structure, by no means is it a database. Its a visual & behavioral medium as much as it is a system for information retrieval. Promotional websites for movies (for example) notoriously break usability conventions for what they are.
Gary Boodhoo on January 11, 2006 2:00 AMRead what I heard last night...
http://www.thejoyofcode.com/Web_2.0_on_the_radio.aspx
Josh Twist on January 11, 2006 3:23 AMI think Web 2.0 is so boring ........
That's why i had my website miraclestudios in simple artistic artistic frame
Take a glimpse of or award winning website : http://www.miraclestudios.in
Miracle studios -- web design on June 10, 2008 2:17 AM| Content (c) 2009 Jeff Atwood. Logo image used with permission of the author. (c) 1993 Steven C. McConnell. All Rights Reserved. |
Subscribe in a reader
Subscribe via email