Beaconfire just posted about the new responsive design on the Boston Globe‘s site. The site adapts to the width of your browser. Well, they’re not the only ones — EDF’s site also uses a responsive design.
And our design firm, Headscape, added a twist that none of us had seen before. Our home page responds to both the width and height of your browser window. Here’s why we did it this way. Continue reading →
This month’s Nonprofit Blog Carnival asks a deceptively simple question: What one book has most influenced my professional life?
I didn’t have to think too hard about this one — it’s Don’t Make Me Think, by Steve Krug.
Why this book? It’s ostensibly a book about web design, but Krug exposes a fundamental truth for any communicator: If you are trying to implant an idea in someone’s brain or get them to do something, you have to understand what they experience, and make it as easy as possible for them do what you want.
And when you look hard at what they experience, you find:
These are underlying principles that good communicators and marketers know like they know breathing, but for me, this book stands out for two reasons.
First, if you need a refresher, it’s really refreshing! It’s fun and easy to read, partly because Krug follows his own advice throughout the book. And I love his optimism in the face of constraints: If people blow by your lovingly crafted home page like they would speed past a billboard, his solution is, “Design a great billboard!”
Second, because of those qualities, it’s a great book to recommend to others — I’m responsible for at least a dozen copies being bought (you’re welcome, Steve!). It’s accessible and painless and a good way to get people thinking about user-centered anything.
So if it’s not on your shelf, do add it, and I’d love to hear thoughts from anyone who has already read it.
Update: Eve over at Beaconfire picked this as her book to write about, too! Brilliant. 
Nielsen Norman Group just released the second edition of its study on how potential donors use nonprofit web sites. EDF’s site was once again included in the study, and I thought I’d share my reactions to it. Continue reading →
I’ve been wanting to write about the challenges of remote user testing since UXMag reviewed the book Remote Research last spring. I’ve long talked about the advantages of remote research as part of a testing plan, especially a low-budget plan.
The book is full of excellent guidance, and I recommend it. But I have a couple of cautions about the authors’ advice, which I’ll address as I share a examples of testing we’ve done. Continue reading →
A friend asked me last week for advice about user testing on a tight budget. People at his organization acknowledge the benefits of user testing, but still can’t quite make the time for it. That reminded me of a few weeks ago where we got important insight — quickly and for free.
We were working on the logo for a campaign to reform the laws that (don’t) protect us from toxic chemicals: I’m Not a Guinea Pig. We had logo concepts that took two different directions. Most people on our project team figured we’d incorporate a guinea pig (below left). The other option was something more chemical-like (below right).
Our graphic designer, Jane Song, gave us several options. Our project lead, Amy, showed the designs to a few EDF staffers who weren’t working on the project. She asked them open-ended questions about what they thought the campaign was. For the one featuring the cute little guinea pig, people tended to think the campaign was about animals. The beaker, in contrast, made people think about chemicals.
However, that early version of the lab beaker wasn’t perfectly understood — one person on the project team even thought it was a key! More design adjustments made it less ambiguous, and the final group of quick testers all understood the campaign’s topic clearly.
This process was so simple that I hesitate to even call it “testing” — that makes people think of pricey consultants and one-way mirrors. Of course, we didn’t get nearly as much insight out of it as we would have a formal test with a working prototype, script, and real users. But at this point in the project, all we needed was simple direction on the logo, and we got it.
Who possibly couldn’t have time for this?
This presentation by Paul Boag was one of the highlights of SXSW for me. In it, he proposes a fundamentally different way for designers and clients to work together. Even better, he gives concrete steps to move from confrontation to collaboration.
I wanted everyone I work with to hear it, but sadly, the complete video isn’t available. Happily, enough is posted to give a sense of the main points. There are two listening/watching options on his blog, and between them you’ll get a good idea of his approach.
Here are some of the notes I took during the session, and where you can find corresponding material on the videos:
I think this approach matches the intention we bring to our work, but it was really helpful to hear it laid out like this, and with specific techniques we might want to try. I hope you find it helpful, too.
For those of us without a ton of video footage (or hours to edit it), still photos combined with audio are a promising way to do something video-ish without as much investment.
Looking at a bunch of examples of these hybrid video-slideshows, I was surprised at 1) how powerful a story-telling tool they can be and 2) how little uniformity there is in format. Here’s a selection that show the broad range of formats, strengths and weaknesses.
This is the most powerful opening to a consulting site that I’ve ever seen (hat tip to Progessive Exchange). It does so many things right:
And it’s a good thing, because the ONLY control they give me is a mute button. There’s no way to pause the video, go back if you miss something, or even see how long it is. And, if this is your hundredth visit to the Empax web site, there’s no way to skip this intro. (I have to imagine this drives the staff nuts!)
Those complaints are major ones, and especially vexing because they shouldn’t be hard to fix.
That said, I’ve watched this at least six times (not always intentionally), and I’m still blown away by it.
Update 3/9: My compliments to the team at Empax, who in very short order added controls to the slideshow. See their comment below for more details. Thanks for the thoughtful response!
This is an example from our allies over at the Nature Conservancy. This slideshow shows off stunning photography of an expedition to an oyster bed. It makes great sense to use audio to bring the photos even more to life.
Unfortunately, the player suffers from a fatal flaw: it has no indicator of how long the slideshow is. Worse, I’ve started it three times now, and I’ve had to start from the beginning each time. I’ve watched at least three minutes each time (an eternity in online video) and I have no idea if I’m still at the beginning or a few seconds from the end.
If you watch this one all the way through, leave a comment — I’d love to know how long it is!
This New York Times feature uses photos from Bolivia’s glaciers to show the human costs of climate change. Unlike the previous slideshows, it offers complete control over where you are and lets you to jump wherever you want. Unfortunately, this isn’t quite successful, either.
Here’s how this one works:
The problem here is that it looks more like a photo gallery than a video — the thumbnails are in your face and the video controls are subtle. This cue puts you in click-around mode, not sit-back-and-watch mode. It’s like the designers were whispering, “You’re probably getting fidgety…here are seven other things to click on.”
The narration here is good, yet the interface encourages people to skip it. If you’re going to take the time to build a thoughtful soundtrack, trust it to guide people through. If you think it’s too long and people will get bored, go back and watch example number one for inspiration.
Such a relief to find this slideshow about San Francisco’s Farrallone Islands narrated by Lauren Sommer of KQED. (She’s a former colleague from Environmental Defense Fund, so I’m sure that’s why it came out so nicely.)
The audio narration is top-notch, just as you’d expect from a public radio station. The photos match up nicely and add a depth to the story that the even the constant gull cries in the audio can’t quite convey.
But, best of all, it has all the controls we are used to from video players:
One minor complaint — the controls to jump forward and back a picture are a little inscrutable, as is the one open a thumbnail gallery. If you’re brave enough to click on them, they stop the audio, which is a little weird. But it’s easy enough to get it started again with the trusty play button, and those functions aren’t core to watching the show, so overall, high marks.
Frankly, I’m puzzled about why there’s so much variety in the controls on these slideshows (and bad variety, at that!). In the early days of online video, we saw lots of glitchy controls that were placed weirdly and did unexpected things.
But we’re way beyond that now!
Here’s a fun post from 37 Signals that shows just how far we’ve come. Note that in pretty much all the video players pictured, the controls are in the same place, and in the key ones (pause/play and progress indicator) there’s very little variaton.
The video controls problem is solved — now let’s import the solution into audio slideshows.
Tracy Boyer has a thoughtful post looking at the usability of the heating oil map that we launched last month. She compliments how responsive the map is and the color scheme, and contrasts it with another data-rich map.
In addition to the challenges presented by the map itself, we worked hard to format the material next to the map so it conveyed a lot of information without being overwhelming. It’s great to see this used as an example of good usability.
If you haven’t encountered “smart” pasting, here’s what happens. You copy some text or a URL from your Web browser, paste it into your code or an IM, then find that the site somehow added extra text to it.
I love love love the New Yorker — so well-written and well-edited — and I am horrified to learn (via SVN) that they have installed this atrocity.
What makes this a usability mistake? It behaves in a way that you don’t expect. If you’re going to break expectations, the bar is very high: You must delight people.
This particular trick too often ends up annoying people. See the comments on the SVN post. No delight there that I can see…
Steve Krug is the best writer I’ve ever encountered on usability and Web design. His first book, Don’t Make Me Think, is one of two books on Web design I ever recommend. (I just ordered his second book, so that number could jump up to three.)
This 60-minute presentation is a little slow getting started, but if you’ve got the time, it’s a good overview from one of the clearest thinkers in the industry. Hat tip to Ryan at 37 Signals.