Dialup still matters ... OR ... how to ruin someone's day with a couple bits of code, and how to fix it

I recently relaunched the Mars Odyssey THEMIS web site, moving from a home-grown Perl not-really-a-CMS to Drupal. There were a number of technical challenges moving from a site and architecture that had grown organically over many years to a modern CMS with better usability from both the end users and site managers perspective. Talking about those challenges is for another post, but for now, a reminder how important small decisions can be to usability.

I received this email this morning:

Our school network is old and slow. Under the old display system I could display part of the image as it came in and talk about it with the students, holding their attention while it slowly came in. Under the new system all we get is a rotating disk for 1 to 5 minutes depending on our network's condition. This time is a total waste making the site useless. By the time the image has come in I've lost the students.

I no longer use this site which I did use daily as it no longer works with students (elementary) short attention spans. Other sites are now a better use of our limited time.

I thought you needed to know this. Maybe it works for schools with more modern networks. But with our budget shrinking rapidly we are stuck with this one for the next few years. To us it is a step backwards.

In my haste to get the site up, I'd overlooked a very important part of site usability - with a graphically intensive site like THEMIS where you can browse through thousands of "Images of the Day" mission planners have posted over the years, something as minor as choosing what image format to serve can make a huge difference to some users.

In this case, the teacher was used to how JPEGs worked - downloading slowly but progressively while he talked to his students. The new site served images from a proprietary image server rather than caching them on disk, and by default, was sending out PNG's, which in some browsers, take much longer to load.

The solution? Adding pair of query string parameters to my image server: format=jpeg&quality=60. This cut the overall download time and made the images load faster in the browser. Luckily this was all themed content in Drupal so it was a simple chore to fix the template output.

To test my solution, I turned to a simple method of throttling down my bandwidth. With the Mac OS, you can configure the firewall using IPFW to limit your inbound or outbound bandwidth on specific ports. Here's how:

From the Terminal, set up the rule:

sudo ipfw pipe 1 config bw 10KByte/s plr 0.1 delay 50ms

(You can vary the latency and bandwidth to test different scenarios)

Apply the rule to inbound traffic on port 80 only:

sudo ipfw add 1 pipe 1 dst-port 80

Do your testing.

And when you're finished testing, remove the rule:

sudo ipfw delete 1

You can manage your firewall rules with a host of graphical apps as well if you don't want to venture into the Terminal, but it's pretty quick and basic.

UI responsiveness is an under-appreciated part of the overall user experience in applications for many developers and designers (and a part that the big boys like Google and Facebook spend plenty of effort on), but it can make a huge difference to users. It doesn't just affect classrooms in rural northern Minnesota - responsiveness is vital to the success of mobile apps as well, where user patience levels are even lower than on the desktop.

Comments

Hey Chris,

I read Dries Buytaert's blog post highlighting the work you've done at THEMIS and even rated a few images at the site. Your work is very impressive and inspiring.

I'm sure you've read it already but posting for posterity's sake - http://buytaert.net/drupal-goes-to-mars

Christian's picture

Thanks Michael!