Ten Usability Epiphanies for Your Open Source Web-app

Sigurd Magnusson (SilverStripe)
Design & Usability, Web Applications
Location: Meeting Room J3
Average rating: ***..
(3.25, 16 ratings)

Web 2.0, Ajax, and thoughtful graphic design are commonplace in web applications. However, they significantly raise the standard of usability work necessary for your web-app to be trusted, loved, and evangelized.

Open source projects often suffer in terms of usability because of a lack of resources, expertise, or a methodical approach, and this can undermine otherwise fantastic efforts.

This session presents ten easily implemented real world usability techniques that came directly from work on customer-facing products. They make systems easier to use, more productive, less prone to user-frustration, and more successful.

For example:

Danger button hovers: Rather than interrupting a user with an “Are you sure…?” popup that seeks to prevent an unintended action, make a button feel “dangerous” beforehand with a red background on mouse-over. You’ll be surprised how effective it is at reducing unintentional presses. You’re only finished when you’ve added a facility to subsequently undo the action—and ensure it’s more findable than FireFox’s “undo close tab.”

Photo of Sigurd Magnusson

Sigurd Magnusson

SilverStripe

Sigurd has been living and breathing the internet since 1995 when the City Council of Wellington, New Zealand provided the region’s only internet service; then entirely text-based and only 2400 baud. Add a grandma who taught him C before he got to high school, and the rest all makes sense.

In 2000, he co-founded SilverStripe with two friends, which has since made hundreds of websites and web-applications using open source technology. Sig’s focus is now on building up the community around their open source platform for building websites and webapps, SilverStripe CMS. (www.silverstripe.org)

The SilverStripe open source project was launched in early 2007 and in a matter of months, Sigurd rapidly attracted community and credibility to the project. He got the project involved in the Google Summer of Code program (where Google paid for ten programmers to add features), solicited over a hundred thousand downloads, got it in use with the 2008 U.S. Democratic Party campaign, and built up a loyal community of who have voted to rank SilverStripe a winner in the global Open Source CMS awards, beating many years-established projects.

Aside from his beautiful partner and daughter, Siggy loves adventure: snowboarding, turning up in a foreign city, reading books in the sun, and being conned into dancing Salsa for the Wellington city’s street carnival.

Comments on this page are now closed.

Comments

Picture of Sigurd Magnusson
Sigurd Magnusson
08/09/2009 2:10pm PDT

The datagrid element mentioned below was just removed from the spec :-/ lists.whatwg.org/pipermail/...

Picture of Sigurd Magnusson
Sigurd Magnusson
08/03/2009 5:52pm PDT

Bowen, Cathy, thanks for your useful feedback. The talk was motivated by a general sense of wishing to encourage more people to care about usability and to understand some relevant examples of good usability in applications. I knew this would make the introduction a little basic for those who already knew all about usability, but I’m glad that it sounds like you still got useful information from it.

Regarding access-keys and autofocusing the cursor; there are caveats with these, you are right. For the benefit of everyone, here’s my take:

It is hard to get universal keypresses across browsers/platforms, and to ensure they don’t collide with existing browser shortcuts. I’m not an advocate of having a short cut for every task in your webapp – it becomes hard to maintain, it risks colliding with existing functions, and it is unlikely that users will make use of all of the shortcuts. Instead I would suggest finding a couple of commonly performed tasks (saving? opening? etc) and do some research around an appropriate keyboard shortcut for them.

In relation to autofocus, as you point out a sluggish page load time can undermine this otherwise useful feature. Often the cursor focus happens when the page has completed loading and downloading all page elements. This can be several seconds after a person has begun viewing and possibly interacting with a page. Until we get HTML5’s autofocus form attribute, you will need to optimise your javascript or page load time if you don’t wish to upset users who are in a hurry. See www.w3.org/TR/html5/forms.h...

On the topic of HTML 5, I am very interested in the new datagrid element. I won’t be holding my breath for it, given it is likely to be one of the later features incorporated into a browser’s HTML5 compliance. But it may be an answer to my slide where I talked about many applications taking too many steps for common tasks. (“6. Too many steps?”) See the spec to learn about this upcoming element: www.w3.org/TR/html5/interac...

— A video recording of this presentation is available at www.vimeo.com/5918985

Picture of Bowen Dwelle
Bowen Dwelle
07/23/2009 8:28am PDT

15+ minutes spent on intro and “why we should care”. Some somewhat helpful tips, but too basic. More interesting would have been some discussion of HOW to achieve usability from a project point of view… If you just dive in and then drop a friend or two in front of the screen, observe them and then tweak based on how they use your prototype, you may well just end up tweaking junk, so to speak.

Cathy Mullican
07/22/2009 10:54pm PDT

Too much time at the start explaining why we should care about usability - if we didn’t already care, we would’ve gone to some other session. Some of the final points - particularly regarding the keyboard / shortcuts are not clear cut—see www.coderequired.com/blog/l... for one discussion of the problems of using accesskeys in web sites. Automatically focusing the cursor is also sometimes more annoying than helpful, if the user doesn’t want to type where you think they will, and may have actually started typing elsewhere when the cursor jumps. There was no time to discuss these, however. Trimming the introductory preaching to the choir would leave more time for the final points.

Overall very useful and informative, though—just a little imbalanced.

  • Intel
  • Microsoft
  • Google
  • SourceForge.net
  • Sun Microsystems
  • Facebook
  • Gear6
  • Kaltura
  • Liferay
  • MindTouch
  • MySpace.com
  • Novell, Inc.
  • Open Invention Network
  • Rackspace Cloud
  • Schooner Information Technology
  • Silicon Mechanics
  • Symbian Foundation
  • Twilio
  • WSO2
  • Yabarana Corporation

Sponsorship Opportunities

For information on exhibition and sponsorship opportunities at the conference, contact Sharon Cordesse at scordesse@oreilly.com

Download the OSCON Sponsor/Exhibitor Prospectus

Media Partner Opportunities

Download the Media & Promotional Partner Brochure (PDF) for information on trade opportunities with O'Reilly conferences or contact mediapartners@ oreilly.com

Press and Media

For media-related inquiries, contact Maureen Jennings at maureen@oreilly.com

OSCON Newsletter

To stay abreast of conference news and to receive email notification when registration opens, please sign up for the OSCON newsletter (login required)

Contact Us

View a complete list of OSCON contacts