type="topic"

      id="design-principles">

  <info>

    <credit type="author">

      <name>Allan Day</name>

      <email>aday@gnome.org</email>

    </credit>

    <include href="legal.xml" xmlns="http://www.w3.org/2001/XInclude"/>

    <desc>General design guidelines and advice.</desc>

  </info>

<title>Design principles</title>

The following design principles constitute a set of general rules that, when followed, will enable you to produce a high-quality experience for your users.

<section id="focus">

<title>Give your application a clear focus</title>

Clear, tightly defined goals are the key to good design. Identify a conceptually coherent set of functionality that you want to provide, and be careful to avoid mission creep. An application that tries to do too many disparate things will end up being complex and potentially confusing to users.

Remember: the best applications provide an elegant solution to a specific task area.

</section>

<section id="complexity">

<title>Keep user interface complexity to a minimum</title>

Every control or piece of information that you add to your application creates additional work for users, and increases the complexity of your application - potentially making it more difficult and less pleasurable to use. Therefore, only include essential controls and information in your application interface.

When adding a new control or piece of information, always take a moment to question whether it is necessary.

</section>

<section id="progressive-disclosure">

<title>Use progressive disclosure to show controls when they are needed</title>

Showing every possible control all the time makes an application harder to use, since users have to navigate controls that are often not relevant. Instead, only show controls when they are needed. This makes applications simpler to use, even if the same amount of functionality is provided.

There are various ways to progressively disclose controls, from using different views or modes, to showing transient or floating controls when particular content items are selected.

</section>

<section id="work">

<title>Require as little work from the user as possible</title>

An application that is laborious to use can become the source of irritation, so strive to make your software work for your users, not the other way around. Every time your application requires input from users, either in the form of using controls or providing information, ask yourself whether it is possible to do that work for them.

Try to avoid the need for a manual setup screen or assistant, and make it easy to go back to recently used content.

</section>

<section id="hierarchy">

<title>Create a clear hierarchy</title>

People tend to “read” an interface from left to right and top to bottom. Items that are encountered first are seen to be dominant over those that come later. Use this implied hierarchy to communicate which parts of your application are most important.

Position the most important controls towards the top-left of your windows, and place dominant controls prior to other controls they affect. See the <link xref="visual-layout">visual layout</link> guidelines for more details.

</section>

<section id="content">

<title>Prioritize content</title>

Applications typically present content, whether it is images, text, messages or more complex data. It is this content that your users will be interested in, and too many controls or user interface elements will distract from the focus of their attention.

Give content as much space as possible in your user interface, by reducing the number of controls. Don’t crowd out the primary object of interest with secondary information.

</section>

<section id="errors">

<title>Anticipate errors</title>

People make mistakes. Anticipating these mistakes will prevent damaging consequences, and will make your application more pleasurable and satisfying to use. The first line of defense here is to design your application so that mistakes cannot be made. Secondly, if it is possible to make a mistake, make it easy to recover.

Automatically correct potentially invalid input, and always make it possible to undo destructive operations.

</section>

<section id="interruptions">

<title>Avoid interruptions</title>

Interruptions cause frustration and annoyance, and prevent people from focusing on what they are interested in. Design your application so that it stays out of the way when it is not in use, and does not surprise when it is in use.

Use <link xref="notifications">notifications</link> with restraint, always avoid spontaneously popping up dialogs without user intent, and avoid disruptive feedback mechanisms like message dialogs.

</section>

<section id="search">

<title>Provide quick and effective search</title>

<link xref="search">Search</link> is a powerful mechanism that can be used to quickly find content. Provide it whenever you present large amounts of content, whether in the form of lists or grids. When you provide a search function, it is vital that it is as immediate as possible, and that it returns the results that are sought by your users.

GNOME 3 also provides an integrated search facility. Integrating application search into this gives people a quick and easy way to access the content provided by your application.

</section>

<section id="options">

<title>Use configuration options sparingly</title>

Adding options often seems like a simple design fix. However, most people will never see or use configuration options. Instead of adding options, try to make the default behaviour of your application work for as many people as possible.

</section>

<section id="name-and-icon">

<title>Give your application an instructive name and an attractive icon</title>

Your application’s <link xref="application-basics#application-names">name</link> and <link xref="icons-and-artwork#application-icons">icon</link> are two of the most expressive things about it, so design them in order to communicate its function and identity. Make sure that people will understand the purpose of your application from its name. Ensure that you have a beautiful, recognizable application icon, to give your application an attractive and distinctive visual identity.

</section>

<section id="emotion">

<title>Use emotion and humor (sparingly)</title>

Used effectively, emotion and humor can lift the experience provided by your application, and help to develop a positive relationship with your users. Be careful not to over-use these techniques, though - it is far more effective to pick a small number of moments to use emotion, rather than spraying them throughout your user interface.

Be welcoming when your application is used for the first time. Using humor when things go wrong is another effective technique.

</section>

</page>