Infinite scrolling: What the big sites teach us

Google's next page link vs. Facebook's loading symbol

I tell non-profits to “cheat” by watching the big companies we know are doing a ton of testing. If they all adopt something, consider it for your site. Even if you have money and time for your own tests, you can pick up good direction.

Interpreting what you see isn’t always straightforward, though. Infinite scrolling is a perfect example — some big sites are using it, but a lot aren’t. Here’s my take on what that means for the rest of us:


Election interactives: 3 visual presentation insights

I’ve watched election returns mostly online since my long-ago start in the Washington Post’s online newsroom. The online geek in me loves seeing how different outlets handle the data almost as much as I like learning the results.

This year, the leap in sophistication of data visualization was particularly fun. There were lots of good lessons, and the New York Times really set the standard. (more…)

Responsive design: Handling any screen size

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. (more…)

A book that changed my life: Don’t Make Me Think

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:

  • They are busy and distracted and don’t care about you nearly as much as you do.
  • They don’t read much.
  • You can learn a lot from honestly observing people.

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. 🙂

Highlights: Nielsen Norman Usability Study of Non-Profit Sites

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. (more…)

Two examples: Remote user testing in action

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. (more…)

Example: What We Learned from a Super-Simple User Test

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).

guinea pig test logosOur 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?

Pain-Free Design Sign-Off: Highlights from SXSW Session

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.

  • A 5-minute highlight reel (2nd thing on the page). It captures the spirit of the presentation, but omits lots of detail.
  • His full rehearsal presentation, which unfortunately, doesn’t have the energy and polish of the live one. If you find it not holding your attention, with about 27 minutes left it gets more concrete — he starts talking about the principles he follows and a process that works better.

Here are some of the notes I took during the session, and where you can find corresponding material on the videos:

  • Designers get too defensive. We need to switch from confrontation to collaboration.
  • The client’s job is to find problems. Our job is to find solutions. (Bad: The client says move the logo 10 pixels to the right.)
  • Don’t ask what sites they like — everyone likes the BBC. Instead, show them sites you think might work for their audience, and get their reactions. (11:20 remaining on the full video)
  • Use mood boards instead of multiple design comps to get quick feedback on design elements and separate the aesthetics from the content. And do the mood boards before the wireframes.  (at 4:15 on the highlight video, or 9:50 left on the full video)
  • Do collaborative wireframing instead of going away and wireframing on your own. (4:45 on the highlight video, 7:30 left on the full video)

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.

Audio Slideshows: 4 Examples of What Works and Doesn't

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.

Example 1: Amazing Story. But — Give Me Control!

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:

  • Nothing gets in the way of the story. It’s stripped down. Every word and frame moves the story ahead.
  • The text is the main focus, letting one element carry you through the whole story. You never lose track of your anchor.
  • The images and music supplement the text and set the mood without distracting. Because of them, I actually forgot I was reading — I felt like I knew what the guy’s voice sounded like.

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!

Example 2: Never-Ending Slideshow – Where Am I?

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!

Example 3: I Don’t Need Quite This Much Control…

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:

  • Each photo has a soundtrack. You can see at the bottom how long it is and control where you are (yay!).
  • If you do nothing, when you reach the end of a photo’s soundtrack, it automatically loads the next photo and starts playing that track.
  • You can also click on any of the thumbnails at any time, which loads that photo and its soundtrack.

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.

Example 4: Ah, Yes, Like This!

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:

  • Pause/play
  • Progress indicator showing the length of the show and where you are
  • Full screen option
  • Embed code

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.

Conclusion: Promising Format, Why So Much Control Confusion?

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.

Link: On Usability of EDF's Dirty Heating Oil Map

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.