Good Defaults UI pattern applied to diagrams

One of the more obvious UI patterns in Jenifer Tidwell’s excellent book and accompanying website “Designing Interfaces - Patterns for Effective Interaction Design” is the “Good Defaults” UI pattern.

Basically, it states that whenever information has to be entered you should provide reasonable default values to reduce the average task length for the user.

An often overlooked application of this pattern is a default diagram. It’s really useful, especially when users can customize it!

Watch a 30 sec demo

Start using Trace Modeler today

30-day fully functional trial
No installation required!

Good Defaults pattern

Let’s begin with the pattern itself…

The “Good Defaults” UI pattern (abbreviated from the book) :

    What Wherever appropriate, prefill form fields with your best guesses at the values the user wants.
    When Your UI asks the user any questions requiring form-like input (such as text fields or radio buttons),
    and you want to reduce the amount of work that users have to do. […]
    Why By providing reasonable default answers to questions, you save the users work. It’s really that simple. […]
    How Prefill the text fields, combo boxes, and other controls with reasonable default values.

Although the pattern description focuses on input forms, the idea of providing good defaults can be applied anywhere the user has to enter information.

‘Good Defaults’ in graphical editors

Most graphical editors have different input forms - think file dialogs and property sheets - that are an obvious target for this pattern. You’ll also encounter it when you add shapes to a diagram. Each kind of shape has a default size, color, fill, font, etc. that is used when a shape of that kind is created. So the ‘Good Defaults’ pattern is used in many areas of a graphical editor.

However, one often overlooked application of this pattern is the diagram itself. When the user creates a new diagram, almost every single editor starts out with a blank page. The content of a newly created diagram should be an application of the ‘Good Defaults’ pattern as well.

Why not present the user with a diagram that already has some content in it?

‘Good Defaults’ applied to diagrams = good default diagrams

It can be difficult to define a good default diagram for a general-purpose editor, so for those editors a blank page may seem like a reasonable default.

But if you’re developing a domain-specific editor you should be able to come up with a much better default than an empty page!

For example, an editor for UML diagrams could default to the following diagrams.

A default class diagram

a default class diagram for a UML editor

A default statechart

a default statechart for a UML editor

A default sequence diagram

a default sequence diagram for a UML editor

Customizable default diagrams

Providing a good default diagram in your editor is already a nice feature, but when you leave the contents up to the user it gets even better! Your users know which default diagram makes the most sense for their particular context, so let them define it.

If you do, be sure to include a (non-blank) built-in default diagram as well. Not all users will use this feature right away and having such a built-in default diagram will draw attention to it.

Even general-purpose editors can benefit from this feature : you might not be able to come up with a sensible default diagram for all your users, but each individual can find one that fits his/her context perfectly.

A more advanced application of this pattern would allow the user to choose between several initial diagrams (i.e. diagram templates).

Looking for a better UML sequence diagram editor?

Watch a 30 sec demo


How it’s done in Trace Modeler

Trace Modeler is an editor for UML sequence diagrams. It was designed for high usability and has a customizable default diagram. The built-in default diagram for Trace Modeler looks like this :

built-in default UML sequence diagram for Trace Modeler

The above bitmap only shows the visual aspects of the built-in default diagram, but it is actually more than that!

Trace Modeler allows you to customize the style of your sequence diagrams and records the style settings in each diagram. Thus the default diagram also contains the initial style settings that will be used for each new diagram!

A simple implementation

The default diagram mechanism in Trace Modeler is file based, the user simply designates a file to be used as the default diagram in the preferences window.

screenshot of the preferences window

This approach has several benefits :

  • users can transfer their default diagrams to a different machine
  • users can share their default diagrams (e.g. with new team members)
  • users can have multiple default diagrams and switch between them

It also has a big advantage for the developer

  • none of the above requires special handling in the code, it’s just a path in the application preferences :)

Considering how easy it is to add this functionality to an editor, it is a bit surprising that most editors still present a blank page to the user.

Special case : a welcoming diagram

New users of an application usually do not know how to use it properly. Ideally, they would start reading the 'Getting started' entry the user's guide, but few actually do.

The initial diagram that is shown to new users is a golden opportunity to introduce them to an editor's basic functionality. One could regard this welcoming diagram as another application of the 'Good defaults' UI pattern.

For example, here is the welcoming diagram that Trace Modeler presents to new users.

the welcoming diagram

The comments explain the basic interaction mechanisms and suggest some activities the user may want to try. The rest of the diagram serves as a realistic example for the user to experiment with.

A well thought out welcoming diagram is an excellent way to introduce some of an editor's features. But it is also a way to get a foot in the door, so to speak. We've all discarded software without properly evaluating it, right? Inviting users to try out a few things - and offering them an immediate playground to do so - increases the chance of a proper evaluation.

What do you think?

Do you know of any other editors with (customizable) default diagrams? What is your favourite welcoming diagram? Have you seen other non-obvious applications of the ‘Good Defaults’ UI pattern? What would your default diagrams look like?

Send in your comments and I'll add them below.

Reader comments

Anders Toxboe wrote:

Maybe a little off-topic - but check out for more info on the pattern.

Watch a 30 sec demo


Article copyright © Yanic Inghelbrecht 2007-2008, | last updated on 06/07/2008