Weblication User Interface Design Guidelines
This article summarizes best practices for designing the user interface (UI) for Web-based applications (or Weblications). Presently there are conventions for Windows and desktop applications and there are guidelines for Web sites (as navigable HTML pages) but there is little guidance for teams doing Web form or Web-based application design.


Just as Microsoft had developed conventions for user interface design for applications on the Microsoft Windows platform (such as having a title bar, then pull-down menus, then tool bars at the top, and then the main app area, and then a status bar at the bottom, and three buttons in the upper right for mini, maxi, and Exit) that became generally accepted for application user interface design, so we need generally accepted conventions for applications that are Web based (that you access through a Web browser). When you shop at Amazon, you are not just accessing static pages generated from their databases; you are going to a shopping cart application and clicking on buttons, etc. Except the Windows conventions do not apply here. So what ARE the conventions? They still have buttons and generally display a menu or tabs or something for navigating to other parts of the application. But there are no pull-down menus and icons and toolbars as desktop apps have. But generally developers put a menu on the right or at the top. So everyone can be different, but there must be some general conventions. In this article, we are not trying to write a final book on what they should be, just trying to collect what works into one article so it can be found easily for those just starting on this road.

Basic guidelines for starters

(coming soon)

Where Web sites and Web applications differ

(more coming soon)

The Difference Between Web Design and GUI Design

How interactive should we go?

(coming soon)

Design factors and design patterns

  • Easy to use and easy to learn
  • Accessible
  • Navigation and search
  • Secure
  • Maintainable

Common Conventions

(coming soon, if any)

Design Guidelines

Design Considerations for Web-based Applications
October 1, 2001
by Luke Wroblewski & Esa Rantanen

The Difference in Web Applications
May 3, 2006
by Luke Wroblewski

Designing Web Applications

Designing Powerful Web Applications: An Interview with David (Heller) Malouf
By Joshua Porter
Originally published: Jul 27, 2006

Common Mistakes

(more coming soon)

Classic Mistakes in Web Software Design
by Meryl Enerson
Six classic design mistakes — all avoidable — are common in today’s web-based applications.

Web Usability Guidelines

Top 10 Web application usability guidelines & checklist

Articles (ezine, blog, etc.)

Design Considerations for Web-Based Applications
Luke Wroblewski
University of Illinois at Urbana-Champaign, National Center for Supercomputing Applications
Esa M. Rantanen
University of Illinois at Urbana Champaign, Institute of Aviation

Design Considerations for Web-based Applications
by Luke Wroblewski & Esa M. Rantanen

The rapid growth of web-based applications—application-oriented software delivered as a service over the Web—has revealed a lack of effective guidelines for their design and implementation. This paper outlines a set of guidelines for web-based applications interfaces, which fuse translated client-application guidelines and re-purposed Web usability guidelines together to form a solid foundation for web-based applications interface design.

Berst, J. (1997a). How Weblications Are Changing the Internet. ZDNet Anchor Desk. http://www.zdnet.com/anchordesk/story/story_1020.html

Berst, J. (1997b). The pros and cons of Weblications. PC Week Online.

Designing web-based applications that work
What are the issues in designing web-based applications?

SaaS Interface Design
by M. T. Hoogvliet , 2008

Weblications (blog entry)

Bibliography (as in Books)

Designing the Obvious: A Common Sense Approach to Web Application Design
by Robert Hoekman Jr.
Paperback: 264 pages
Publisher: New Riders Press; 1 edition (October 22, 2006)
ISBN-10: 032145345X
ISBN-13: 978-0321453457

Explores the character traits of great Web applications and uses them as guiding principles of application design so the end result of every project instills customer satisfaction and loyalty. These principles include:
building only whats necessary,
getting users up to speed quickly,
preventing and handling errors, and
designing for the activity.

Web Application Design Handbook: Best Practices for Web-Based Software (Interactive Technologies)
by Susan Fowler, Victor Stanwick
Paperback: 658 pages
Publisher: Morgan Kaufmann; 1 edition (July 7, 2004)
ISBN-10: 1558607528
ISBN-13: 978-1558607521

"Web sites are so nineties. The cutting edge of Web-design has moved to Web applications.“
- Jeff Johnson, Principal Usability Consultant, UI Wizards, Inc., and author of Web Bloopers and GUI Bloopers

"User interface designers have been debating among themselves for years about how to design effective Web applications. This is the first comprehensive guide to building Web applications."
- Chauncey E. Wilson, Principal HCI Architect, WilDesign Consulting

Designing the Moment: Web Interface Design Concepts in Action (Voices That Matter)
by Robert Hoekman Jr.
Paperback: 256 pages
Publisher: New Riders Press; 1 edition (April 18, 2008)
ISBN-10: 0321535081
ISBN-13: 978-0321535085

Designing Interfaces: Patterns for Effective Interaction Design
Paperback: 352 pages
Publisher: O'Reilly Media, Inc. (November 21, 2005)
Language: English
ISBN-10: 0596008031
ISBN-13: 978-0596008031

Forms that Work: Designing Web Forms for Usability (Interactive Technologies)
by Caroline Jarrett, Gerry Gaffney
Paperback: 228 pages
Publisher: Morgan Kaufmann (November 17, 2008)
ISBN-10: 1558607102
ISBN-13: 978-1558607101

Universal Design for Web Applications: Web Applications That Reach Everyone
by Wendy Chisholm, Matt May
Paperback: 198 pages
Publisher: O'Reilly Media, Inc. (November 26, 2008)
ISBN-10: 0596518730
ISBN-13: 978-0596518738
This book is all about accessibility issues.

Hackers and Painters
by Paul Graham

The Design of Everyday Things
by Donald A. Norman


Contributors to this page: Bill Albing .
Page last modified on Wednesday, April 07, 2010 05:03:11 pm EDT by Bill Albing.

Key Pick New

Bill Albing has some suggestions to improve STC competitions. Read and let us know, what do you think?

Other Key Picks... Read more

About KeyContent

About KeyContent
KeyContent.org is an idea space where you can express your insights about your profession. Think of this site as a white board with a brain. You create and edit articles or portals to other sites and share your insights... Read More

Key Ads

Key Connections

Join KeyContent on these networks:

Key Products

Make Custom Gifts at CafePress

Key Promotions