Tackling Usability Gotchas in Large-scale Site Redesigns

by Jeffrey Zeldman

28 Reader Comments

Back to the Article
  1. All common sense stuff, but it’s best to think about this stuff before you redisgn a site so this might save many thousands of web designers sleepless nights. There are certainly some aspects I hadn’t considered and the “80/20” is always a good one to remember. I need to remember that sometimes…
    Copy & paste the code below to embed this comment.
  2. agreed with the above - all common sense. Sadly though not everyone sits down and plans steps like those until after doing a rm -r ;)
    Copy & paste the code below to embed this comment.
  3. You must get those huge funktastic title graphics back again! Yeah, I’ve read you’re “consciously breaking past brand associations”, but those titles were unique, no matter how good Trebuchet looks these days…
    Copy & paste the code below to embed this comment.
  4. “Seamless redirects ensured that people following old links would wind up in the right place.” This is probably a fairly dumb question, but can anyone give me a pointer on how to approach / where to do some reading about these seamless redirects - is it javascript on the old pages or something more intelligent?
    Copy & paste the code below to embed this comment.
  5. There are a number of ways to perform redirects, from using javascript, to custom error pages using server side scripting, to using Apache tools like mod_rewrite. I can’t speak to what was done for ALA, but the basic theory for using custom error pages involves pointing all requests for pages that don’t exist to a custom error page. That error page usually has some server side scripting that checks what page was requested, checks to see if that content exists currently, redirects if possible, and if not provides a best-guess about what the user was looking for. A good example of this is at php.net, where if you type http://www.php.net/mysql_connect you go directly to a manual page, but if you type http://www.php.net/mysql_c you get a list of functions that might be what you were looking for. For sites that have as much content as ALA, using a database lookup that correlates old content to new content works very well. This isn’t the only way though. Apache’s mod_rewrite (assuming you have control over your Apache configuration) can be given a correlation chart and be made to do the redirects. This can also allow the web server to send appropriate error codes, letting the client know if the content is missing, has been permanently moved, etc. One issue that then comes into play though is which method is the best use of your resources, as it’s my understanding that mod_rewrite can be a work intensive method for the web server. The bottom line: there are many ways to achieve the results Zeldman mentions in his article. Using some of the keywords above (custom error pages, mod_rewrite, etc) and google should get you to the resources you need.
    Copy & paste the code below to embed this comment.
  6. In our case it’s done with ASP, but it can be handled many ways. One reason I like working with Brian is that, although his business card says he’s a developer, he thinks like an interaction designer—that is, he considers how people will use online materials and tries to find ways to make usage easier, more convenient, and more intuitive. In this article I focused on the thinking behind a particular problem rather than the implementation details. But in answer to your question, I’d use JavaScript redirects only as a last resort (i.e., when you have no access to server-level or database-driven tools).
    Copy & paste the code below to embed this comment.
  7. Hi, Thanks for the quick responses and pointers - I’ll have a look at which options are open to me.  I was sure that javascript was a clunky solution, but wasn’t aware of some of the other avenues available to me.  I imagine the custom error page approach will prove to be the most feasable approach. Thanks again!
    Copy & paste the code below to embed this comment.
  8. We’re going through similar growing pains with my university’s site. There are over a thousand pages of crap HTML with no standard template – all put together by hand over many years – at URLs that sometimes make sense and sometimes don’t. Now we’ve finally got a workable CMS and a small but dedicated staff who care about design and web standards. I feel a little more confident about the journey ahead after reading “Tackling Usability Gotchas.” Thanks, I needed that.
    Copy & paste the code below to embed this comment.
  9. I don’t have much to say about discussing this article, I just wanted to say that it was a good read and I’ll probably be re-reading when/if I ever need to do a redesign like you’ve done.
    Copy & paste the code below to embed this comment.
  10. I would use a customised 404 page to inform the search engines that the page presented is not the correct one and to drop any out of date listings from their index. Thus, the new page will be spidered and indexed while the old one will disappear. Course I havn’t checked whether this is the case because its Friday and I’m drunk and Jools Holland is on BBC2 :-)
    Copy & paste the code below to embed this comment.
  11. The problem with dropping a page out like that is a massive loss of search engine popularity. Not many people will update links to point to a new version, and you can bet that some older links will never be updated. If the article itself is fairly old, but still relevant, you can bet that there won’t be new links incoming, so a potentially useful page will have dropped off the search engine radar.
    Copy & paste the code below to embed this comment.
  12. The appropriate error for a page that has been temporarily moved is 302. If a page is temporarily moved, you should have your webserver supply the client with a 302 error, then forward the user to the proper location. The appropriate error for a permanently moved file [in the case of ALA, and most other sites, I imagine] is a 301 error. If you feed a 301 error to most modern browsers, the browser will update the bookmark used to access the page. Obviously sending a server error condition to a user-agent requires access to the webserver config files, and not everyone has that. That said, the above is “how you are supposed to do it” Thanks for an insightful article
    Christopher Harrington
    Copy & paste the code below to embed this comment.
  13. manuel razzari wrote: <<<You must get those huge funktastic title graphics back again! Yeah, I’ve read you’re “consciously breaking past brand associations,” but those titles were unique, no matter how good Trebuchet looks these days…>>> Thanks for the kind words, Manuel. Like the funky color schemes, the funktastic title graphics seemed to belong to an earlier era of web design. Their style expressed ideas and feelings that fit the magazine in 1998–99 but no longer expressed what it was about. The old look was playful and campy and deliberately rough-edged — appropriate attributes for an aggressively indie site of the 1990s. But over the years, the magazine has become more deliberate and more focused. I wanted ALA’s look and feel to reflect the thoughtfulness of its content. The oldstyle header graphics were a casualty of the need to reposition the visual identity to better match what ALA is really about and how it is actually regarded in the community. In the future we might use illustrated title graphics again (in a different style that fits the revised identity). Or we might not. After five years of illustrating every headline, it’s kind of nice to simply present text as text — and it seems to help the mind focus on what is being said instead of being distracted by extraneous issues (such as the quality or lack thereof of a particular illustration).
    Copy & paste the code below to embed this comment.
  14. ... that was an extremely longwinded way to say: “We think it would be bad to break the old URLs when we redesigned, so we didn’t.” Why the intermediate page requiring an extra click? Why not just let the old content stay at the old addresses until it’s been imported into the new design/system, and then - only then - redirect from old, now converted, addresses to new?
    Copy & paste the code below to embed this comment.
  15. <<<Why the intermediate page requiring an extra click?>>> As explained in the article, the intermediate page is there so readers will know that the content is outdated, that some functions (such as discussion) won’t work, and that the page will soon move. If we did not present an intermediate page between the reader and the old content, readers would wonder why the discussion forum didn’t work, why some items in the menu bar no longer seemed to point to the right pages, and so on. Forewarned is forearmed. <<<Why not just let the old content stay at the old addresses until it’s been imported into the new design/system, and then - only then - redirect from old, now converted, addresses to new?>>> For one thing, the site is now built on a publishing platform whereas formerly it was not. For another, because the intermediate page is needed, and there can’t be an intermediate page if articles are immediately available at their original locations. As to why the intermediate page is needed, please refer to the previous paragraph.
    Copy & paste the code below to embed this comment.
  16. “Content management” has been the bane of my
    existence since inheriting a site that was originally created by a team of virtual volunteers. First the directive was “Don’t touch it” so I let it become “archival” since it had some really good stuff on there (but it was really a “cobweb”). I focused most about keeping the home page current. We were chided (gently) even by our good friends for not changing/updating our site in a timely manner, but still heard from others that the look and feel of the original site was “friendly” and inviting” (read: cartoony). It was nothing short of a huge drag. The issue was, we had no paid or reliable volunteer staff to maintain the site, much less overhaul it. We turned to students and even to web accessibility contests bringing web publishers and nonprofits together. We also turned to interested dotcoms (when they were still expressing an interest in dotorgs), until we landed some funds to
    pay someone to re-design the site; some of the student work was very helpful. Then the issue became since the site was done in Dreamweaver, only 2 people on staff had the skills to maintain the site without fearing the destruction of the site with one wrong move. Real or not, that was the general sentiment, so we’ve gone through the drama of having to get someone with Dreamweaver skills to make changes istead of having key staff make changes/corrections/updates themselves. We’re now looking forward to a re-design, a custom-built site, and hosting with a company providing open source solutions for nonprofits. After having gotten into exploring blogging just this January February (2003), then exploding into it in March, I know much better what features to ask for, what to negotiate for, what to include in the re-design, and, most importantly, I trust wholeheartedly that we will have staff buy-in because the tool will be tailored to meet their stated needs. Among those tools we’re considering: RSS feeds, internal blogs, and other nice bells and whistles. When I read of your process, I felt a little vindicated (OK, a lot) because, in a big way, you share some of our trajectory (I still love hand-coding but stopped a while ago). After all, we are not web publishers in the strictest sense of the term; we backed into that role because it was expected of us. Meanwhile, we know that branding, reliable information, and good, accessible design including user-friendly navigation—especially for people new to the Web, or with limited technology resource—are at the very least critical elements, and we want to prioritize these elements and others on our soon to be re-designed web site. Thanks so much for sharing your experiences with the re-design.
    Copy & paste the code below to embed this comment.
  17. Very nice article. I’m getting to sense that these double+ issues are half logical and half technical. I like that, as it gives me something to read leisurely and professionaly.
    Copy & paste the code below to embed this comment.
  18. What exactly is an intuitive URL? A have always opted for longer, full word urls instead of abreviations.  What experience have others had with this? I can’t think of a good example, as I am certainly biased in this matter. Thanks for the great article!
    Copy & paste the code below to embed this comment.
  19. Man, I’m glad you wrote this up. I was surprised and pleased by the launch of a new A List Apart site, but was disappointed that we weren’t told any of the how, by-who and where-we-are-now (call me selfish, but hey ;-).  Also a good thing, I was just restructuring my own site this week, and so far ALA articles have been the biggest help.  A lost of it is indeed common sense, but most of the problems crop up when you don’t see them coming. A definite reread piece, and something I was glad to see in the first place. *thumbs up* Kiarra
    Copy & paste the code below to embed this comment.
  20. Great article! It’s always interesting to see what sort of unique problems others are facing as they evolve online. I think that, while I’m sure developers walk away enlightened, sometimes our collective silence and lack of cojones in specification/planning/infrastructure meetings turns all of that goodness into a moot point. Developers have a voice, and it’s up to us to be able to answer honestly in meetings if we feel 100% of the scope can’t be realistically met… sometimes overeager principals, managers and clients can ask and ask and ask and all we do is say yes, yes I can do that, of course.  Especially if, because of a prior project (say, the first site rollout), comfort levels are high. Redesigns - to the uninitiated - appear to be a matter of “replace A with B”.  We know it’s rarely that easy.
    Copy & paste the code below to embed this comment.
  21. Something I am wondering about: Does your CMS generate static HTML files that are written to a directroy tree in the webserver (and thus the tree is managemed by the CMS), or does Brian have some super nifty trick to retrieve content from a database using an ASP page based upon the requested URL? (in other words: how to avoid something like www.alistapart.com/index.asp?article=tacklingusability )
    Copy & paste the code below to embed this comment.
  22. I’m not sure if they are using the same method nowadays, but: * http://www.alistapart.com/articles/succeed/
    * http://www.alistapart.com/articles/urls/
    Copy & paste the code below to embed this comment.
  23. Hi Martijn— Since I’m using a Microsoft IIS Web server, I use ISAPI Rewrite (http://www.isapirewrite.com/) to map clean URLs like /articles/fir/ and /topics/server-side/ to Active Server Pages with query string parameters. They give you a nice regular expression testing application so you can determine whether your patterns are set up correctly without having to try loading URLs on a live server. (It keeps all of your test URLs out of your traffic logs.) If you use Apache, mod_rewrite will give you the same regular expression-based URL pre-processing abilities. PS - I hadn’t seen those two ALA articles on URL-remapping, but they both use the same tactics I use on ALA today.
    Copy & paste the code below to embed this comment.
  24. Thank you for the prompt reply Anne and Brian. It’s an issue that had presented itself to me just this week ;-)
    Copy & paste the code below to embed this comment.
  25. For additional ALA coverage of the intersection between usability and URLs, please also see: http://www.alistapart.com/articles/slashforward/
    Copy & paste the code below to embed this comment.
  26. I myself love what you have done with the redesign. It has a certain shine over the whole site, and the transition from page to page, in usability terms, is seamless. At the moment, I’m redesigning (designing if you consider the fact my site has used PHPNuke for the past few months - I know, shocking) my own site (http://www.cmcore.co.uk/newsite) and the pointers have been very helpful. Keep up the good work.
    Copy & paste the code below to embed this comment.
  27. For my usability is a permanent nightmare. I use to redesign my site every 3-4 month. Wuth the every new version I try to make it better, increase usability, make it more usefull for visitors. But I can’t be shure I succedd each time. There is a very thin line in usability incrieasing. You can redisign your site making it more usefull as you thnik but you are not. And to be shure that new design are more usefull to visitors you have to ask them and make an opinion from their answers.
    Peter Bacon
    http://www.watch-replica.net
    Copy & paste the code below to embed this comment.
  28. It must be something basic, but I’ve missed it… I thought background-images were rendered at their dimensions: yet the background-image on this site appears to scale, vertically. The shaded background gif is 200 pixels high, when downloaded and examined. Yet it appears to scale to the height of the screen, at both 800 x 600, and 1024 x 768. Could someone set me straight?
    Copy & paste the code below to embed this comment.