Web Human Interface Guidelines

for Open Web Application User Experiences

by Tantek Çelik, 2011-004

"A journey of a thousand li starts with a single step." — Lao Tzu, Tao Te Ching

Documenting human interface guidelines for open web applications, one interface building block at a time.

Background

I've long been frustrated by the sheer unusability/forgettability/complexity of common web tool/service command line interfaces (such as cvs, and most recently, git/github).

On 2011-004 I vented to Chris Messina that version control systems (like git/github) should all have a user interface like Wikipedia (MediaWiki), in particular, I pointed out the stark contrast in the number of UI gestures it takes to "update" a Wikipedia page, vs. "update" a file in git/github. Chris mentioned that developers like to keep their hands on the keyboard. To which I retorted that Wikipedia has keyboard shortcuts which permit that. Which you still have to learn Chris noted, as well as not being universal across text entry forms. This sparked a memory of a previous instance of this problem (inconsistent user interfaces) and how it was subsequently solved.

The situation with command line tools/services for web development today is not unlike the situation with DOS command line interfaces (CLIs) 25 years ago each of which was its own unique and ugly snowflake. At the time, the Macintosh (Mac) provided the first standardized consumer accessible graphical user interface (GUI) alternative to those CLIs. The Mac was still relatively new, and applications' user interfaces were still inconsistent enough to not be as easy to learn and use as they could be, similar to the text entry web form interfaces of today.

In 1986-1987 Apple published the Apple Human Interface Guidelines: The Apple Desktop Interface, a book I remember reading a few years later (I've been into user interface/experience design for a while) and being inspired by just how many principles, techniques etc. it contained for producing consistent, easy to discover/learn/use, and most importantly, easy to remember application user interfaces. Its goal was to make it so that when users learned how to use one Macintosh application, they would automatically learn a lot about how to use many Macintosh applications (because they would be learning interface elements that were re-used across applications). Apple published a renamed 2nd edition in 1993, Macintosh Human Interface Guidelines (which I had the opportunity to contribute to thanks to then Apple human interface engineer David Curbow asking me to review early drafts), eventually a fully revised for Mac OS X web-only Apple Human Interface Guidelines, and most recently the iOS Human Interface Guidelines.

We have no such equivalent "Web Human Interface Guidelines" for Open Web Applications today (yes I searched).

And we should. This is a start.

Introduction

There are many many pages out there about Web UI patterns. The goal of the Web Human Interface Guidelines is to go further than merely providing patterns, and provide guidelines for consistent interfaces across web applications for similar types of content and similar types of actions.

I will be adding sections/chapters on an as needed basis. As I encounter a user interface building block which would benefit from consistent treatment across web applications, I'll collect and draft a summary of best practices and guidelines.

Previous Work

There's some previous existing work here that we can draw upon, such as:

• Jakob Nielsen's AlertBox bi-weekly article series 
• Zachary Johnson's Standardizing Web User Interfaces presentation (2009, in S5, naturally :)

Text Authoring Keyboard Shortcuts

Inspired by the section on "Keyboard equivalents for menu items" in the Apple Human Interface Guidelines first edition, and the convenience that the MediaWiki keyboard shortcuts provide:

For all text content entry, authoring, and editing interfaces, the following keyboard shortcuts (keyboard equivalents) are recommended (ctrl-* on MacOSX, whatever the equivalent is on Windows - alt?)

• ctrl-E - Edit the current page / item
• ctrl-P - Preview the edits/draft of the current page/item that is being edited
• ctrl-S - Save/Send/Publish the current page/item that is being edited
• ctrl-C - Cancel editing of the current page/item
• ctrl-D - Delete the current page/item 

Implement these using the HTML accesskey attribute whenever possible on links/buttons that perform the given functionality. Use javascript only when absolutely necessary. These interface guidelines are designed to work with or without javascript.

Existing implementations of the Text Authoring Keyboard Shortcuts:

• Wikipedia (any MediaWiki instance)
• PBWiki/PBWorks
• ...

Implementations that could benefit from adding these consistent shortcuts:

• Twitter
• blogging tools (e.g. WordPress, MovableType etc.) and services (WordPress.com, TypePad.com etc.)
• Github (when viewing a source code page, e.g. https://github.com/tantek/cassis/blob/master/cassis.js )
• any other site/tool that provides text content authoring/editing interfaces 

References

References and resources.

• Apple Human Interface Guidelines: The Apple Desktop Interface (1986-1987)
• Macintosh Human Interface Guidelines (1993)
• Mac OS X  Apple Human Interface Guidelines (web-only)
• iOS Human Interface Guidelines (web-only)
• Wikipedia Human interface guidelines article (web-only)

Return to FrontPage