Tag Archives: test

Reviewing An Old Favorite: Steve Krug’s Don’t Make Me Think

Don't Make Me Think
Don't Make Me Think

Steve Krug’s Don’t Make Me Think left a big impact on me when I first read it several years ago. I knew the basics of writing and designing for web usability but Don’t Make Me Think crystallized the subject in a way that appealed to both web designers and users who didn’t know HTML but did know a bad website when they saw one.

The second edition, which was published in 2006, offers a few new chapters on accessibility and user “goodwill” but leaves out some of the chapters on user testing (though they can be found online at www.sensible.com/secondedition). I re-read the book recently and was surprised by the experience: Don’t Make Me Think is still a great book, still a classic, but it is beginning to look dated.

Many of the examples shown are either ancient (see Yahoo!, circa 1999, on page 27) or no longer exist (Productopia.com, which is studied in detail on page 118–121). This is bound to happen to any book, but Don’t Make Me Think is four years old in its current edition and the first edition was published way back in 2000. Web design has changed so much since then and it’s time for Steve to revise Don’t Make Me Think to acknowledge the changing landscape.

Don’t Make Me Think also makes assumptions about average users that I think could be revisited. I think Steve is still mostly correct in describing users’ behaviors as comparable to firemen making snap decisions, but some more specific behaviors and assumptions deserve another look. One is the notion that users don’t expect to reach a homepage by clicking on the logo at the top of a page. Another is the assumption that pull-down menus are bad for usability: I personally agree with this one but they are often effective for quick access when users don’t need to scan a long navigation. I’d be very interested in seeing a third edition of this book that takes another look at users’ “default” behaviors.

Rocket Surgery Made Easy
Rocket Surgery Made Easy

Don’t Make Me Think is still a valuable book for any web designer, and years later I still find myself using Steve’s ideas to describe web usability to clients. I hear Steve plans to have a new book out before year’s end, Rocket Surgery Made Easy. It’s listed as a “do-it-yourself guide to finding and fixing usability problems,” and might incorporate some of the user testing chapters pulled from Don’t Make Me Think. Perhaps it will address some of the new possibilities and pitfalls in web usability that have developed in the last decade.

Adobe Web Apps, Part 2: BrowserLab

Adobe has become more and more aggressive in the field of web applications, producing various services like Photoshop Express and Acrobat.com to complement their shrink-wrapped software. According to Devin Fernandez, Senior Product Manager for Dreamweaver, the company’s “hosted services” strategy takes advantage of the convenience and quick development times inherent in online applications. Shorter production times means that these applications can be developed and improved faster and more often.

Betas for two new online applications were announced recently by Adobe. One is InContext Editing, a streamlined online content editing system that’s handy for Dreamweaver users. The first part of this series comprises an analysis and review of InContext Editing. The other application is BrowserLab, a service that allows website testing for multiple browsers. This practice is essential for any web designer and any tool that makes the process easier deserves a look.

Pain points

Adobe looks for “pain points” when developing products: I’ve heard this phrase more than a few times during various demos and discussions over the years. BrowserLab is Adobe’s response to several of customers’ pain points: speed, convenience, simplicity and productivity. BrowserLab is designed to improve these four points for users. The browser emulator concept is not new—BrowserCam and browsershots.org are two services similar to BrowserLab—but Adobe hopes to improve on the concept.

BrowserLab is currently in limited distribution. Adobe planned to accept only 3,500 users for the initial preview but demand was high enough that this was increased to 8,300. The service is being tweaked and improved in preparation for a full launch, at which point it will become a paid service. For now the development team is focused on improving stability and performance.

The BrowserLab experience

BrowserLab has the same professional black/gray design as most of Adobe’s other web applications. The application is easy to use, though BrowserLab has relatively few functions and doesn’t need much user interface to be effective. There are only three view modes: 1-up, 2-up and onion skin view. Onion skinning overlays one browser image on another, which is a good way to see small differences between browsers. Users can also zoom anywhere from 75% to 200% to get a close view of the results.

Onion skinning overlays one browser result with another—in this example, Designorati.com is being tested with Firefox 3 and Internet Explorer 7.
Onion skinning overlays one browser result with another—in this example, Designorati.com is being tested with Firefox 3 and Internet Explorer 7.

I like using BrowserLab, but for a product like this the big question is whether or not it can faithfully test all the browsers you need tested. At this time BrowserLab can emulate four modern browsers and one browser that I consider non-modern:

  • Internet Explorer 6 for Windows
  • Internet Explorer 7 for Windows
  • Firefox 2 for Windows and Mac
  • Firefox 3 for Windows and Mac
  • Safari 3 for Mac
BrowserLab already has most of the browsers I test for, and several others are in the works.
BrowserLab already has most of the browsers I test for, and several others are in the works.

Internet Explorer 8, Safari 4, Opera and Chrome and next up for addition to BrowserLab. I think BrowserLab needs to emulate all these browsers in order to be successful: the ability to test all needed browsers in one application is what will make BrowserLab popular. Fortunately, the BrowserLab team tells me they are working on this right now. For now BrowserLab has a limited browser set, and that’s one reason why I still use bonafide web browsers to test my websites. Dreamweaver’s Live View is also a nice tool for website testing, but it’s not always accurate.

Another reason why I test in actual browsers is because BrowserLab is not a browser emulator: it works by screen-capturing websites in various browsers and displaying the resulting images. These images are not interactive, so you can’t test JavaScript or CSS interactivity and you can’t see Flash or other animations. Flash can also give BrowserLab a false image: in one test, BrowserLab showed a Flash animation’s mask did not work in Firefox 3 for Windows. I checked it out in that browser and learned the browser applied the mask a split-second after rendering the rest of the page. BrowserLab captured the screen too soon to reveal this. Scott Fegette, Technical Product Manager for Dreamweaver tells me the BrowserLab team is looking to actual emulation of browsers in a web application, but for now they are going to stay with screen captures.

Top: A website I designed, tested in BrowserLab. Bottom: The same website viewed with the same browser being tested in BrowserLab. The Flash graphic and headlines (styled with sIFR 3) are not visible in BrowserLab but do work online.
Top: A website I designed, tested in BrowserLab. Bottom: The same website viewed with the same browser being tested in BrowserLab. The Flash graphic and headlines (styled with sIFR 3) are not visible in BrowserLab but do work online.

Top: A website I designed, tested in BrowserLab. Bottom: The same website viewed with the same browser being tested in BrowserLab. The Flash graphic and headlines (styled with sIFR 3) are not visible in BrowserLab but do work online.

Still, BrowserLab is a handy tool if my computer’s unavailable, and it’s online so I can use it anywhere. I want to see more available browsers (such as Internet Explorer 8) and it would be nice to be able to mark a particular capture as a model and have BrowserLab show where other browsers fail to duplicate it, but I think BrowserLab is on its way to becoming a good tool for web designers.

One more thing for Dreamweaver users

Dreamweaver users can leverage BrowserLab even further with an extension that allows screen capturing and testing directly from Dreamweaver CS4. The BrowserLab extension requires Extension Manager 2.1 and comes in two parts, but completing the installation process will add a BrowserLab panel to Dreamweaver CS4. From there users can send a local or server copy of the active page to BrowserLab for viewing. The combination of Dreamweaver’s Live View and BrowserLab allows users to preview dynamic interfaces, including JavaScript and Ajax, and also preview websites from behind a firewall. Other service-based solutions can’t do this.