Application Design Strategies

This is draft content for the next version of the GNOME HIG.

These application design strategies provide some introductary advice on how to approach the process of designing a GNOME 3 application. It is not intended to be a complete or thorough guide to UX design, and should not be relied on as the sole source of guidance on this topic. There are numerous ways to approach the application design process, and you are encouraged to learn about these various methodologies as a part of developing your own design practice.

This guidance is primarily intended for those who are new to UX design.

Define Scope and Goals Early

Establishing what your application will do is possibly the most important part of the design process. Here, your aim should be to ensure that the goals for your application are clear and focused. Your application should do one thing and do it well, and you should not attempt to cater to incompatible use cases and requirements within the same application. Resist the temptation to try and please everybody and instead aim for excellence in one particular area.

Scope can be defined in terms of key functionality and use cases. Here, it is important to think about the contexts in which your application will be used and who will be using it. Understanding the needs and desires of the people who you want to use your application is key here, as well as the various situations in which they might find themselves. Where will they use your application? How will they use it? What are the challenges that they face and what can you do to give them a positive experience?

It is important to pay attention to user experience when you are establishing the goals for your application design. Consider how you want your application to feel and what kinds of emotional reactions you want it to generate. These will often be the same user experience goals that are contained within the GNOME 3 Design Principles.

Determining what your application will not do is just as important as determining what it will do. Identifying scenarios, functionality and use cases that you do not intend to accomodate within your design will assist you in creating a focused application. Take care to document any use cases that you have excluded from your scope as well as those what you have included.

Research Existing Approaches

Take the time to find existing designs that are relevant to your goals, and work to identify a small set of inspirational relevant art. This will often include application designs that are similar in scope to your own, but you should not limit your search to either application designs. Include the full range of UX design in your research including designs for different types of devices, websites, games and even print design.

Limit your relevant art to examples that are inspiring or interesting, and seek out design excellence. Do not look to poor quality designs that appear relevant because their scope is similar to that of your application. When designing a music player, do not include any music player you can find, for example. Instead, seek out software that presents music and other content in delightful and elegant ways, or which provides novel solutions to the design challenges that you face.

Evaluate and assess the examples of relevant art that you have found. Test it if you can, either yourself or by conducting user testing. Identify what you like about the relevant art that you have collected and assess whether the approaches that it contains are appropripate for your own application. Also investigate if there are any design or usability problems with your relevant art.

Make sure that you study the core GNOME 3 applications and the HIG design patterns within your research activities. This will help you determine which of the existing GNOME 3 design approaches will be useful to your in your application design.

Researching relevant art can be highly productive; you should use it as a tool to widen your horizons and to introduce new design approaches into your process. By the same token, do not let your relevant art impose limits on the possibilities you are considering. Research is there to supplement your design thinking rather than restrict it.

Use Low Fidelity Mockups

Once you have established the scope of your application design and evaluated relevant art, you can start thinking about what your application will look like and how it will work. Be careful not to begin this stage of the design process too early; you should concentrate on high level design goals before concerning yourself with the details of what your user interface should be like.

Low fidelity mockups or sketches are a good way to document and develop concepts for your interface (once you are ready to design it). Generic graphics software or special purpose mockup applications can be used for this purpose, but so can pencil and paper.

Choose your mockup tools in order to enable you to quickly try out ideas. It is important to try different interface designs at this stage, and you should be prepared to throw ideas away. Whatever tool you choose, ensure that you do not invest too much time rendering your ideas. This will help to stop you from becoming too attached to them.

Pay attention to interaction flow in early designs. Visualize the sequences of actions that will be involved in using your software. Paper cut outs, flow diagrams or graphics software with layering capabilities can all be useful for this.

Evaluate and critique each of the designs that you come up with until you have a robust design that fulfils the goals you have set out. This part of the design process can be lengthy: time your time and make sure that you don't select a UI design prematurely.

Prototype and Dog Food

Work to test your designs througout the design process, both on yourself and others. There are many quick and low cost ways that you can explore your designs. Static images displayed on the screen can be used as a kind of prototype, and can give you an impression of how your application will look, work and feel. Paper prototying can also be used to explore interaction flows with others. Showing mockups to others without the aid of notes or explanation will help you to establish that the interface you have designed is easy to interpret.

It is especially important to test your design if it includes novel approaches. Throwaway software prototypes are an excellent way to do this and can save you a huge amount of time in the long run.

Once implemtation of your application has begun, ensure that you regularly use development versions of the software in order to identify design bugs.

High Fidelity Mockups

Low fidelity mockups can be used to communicate and develop many aspects of your user interface, including visual layout, interaction flow, text and labels.

However, visual rendering and aesthetics are an important part of application design, and this requires higher fidelity visual designs to be created in the form of detailed high resolution mockups. If your application utilises novel controls or visual elements, these should be designed in advance of implementation. Artist expertise will often need to be enlisted in order to address this aspect of the design.

Iterate

A UX design is rarely finished, if ever. There are always improvements that can be made, and it is important to continually assess your design. Expect to have to make changes to your design as it is implemented, and work to refine it as application development proceeds.

Comments

If the goal of this page is to provide a very simplified design process, it would be good to add pointers to other resources so that would-be designers can get more information on topics such as human cognition or different design techniques.

It might make sense to rethink a bit the structure of the different sections. I would not give too much prominence to "Research Existing Approaches", and rather mention it in a more general "Research" task. "Prototype and Dog Food" doesn't read quite right :-D

An attempt:

  • Understand
    • An initial understanding of the problem that you are trying to solve.
  • Define Scope and Goals
    • Who will use your application? For what? And why?
  • Research and Model
    • Deeper analysis of users and domain, users, including context, problems with existing solutions, etc.
  • Detail Requirements
    • A more detailed vision of the application: scenarios that it should support, capabilities that are needed, mental models, functional needs, data needs, etc.
  • Synthesize
    • Create the overall design vision, using usability principles and patterns, as well as inspiration from existing solutions. Sketching is a great way to get started.
  • Refine
    • A detailed specification of how your application looks and behaves, using high-fidelity mockups and prototypes.
  • Iterate
    • All this process is profoundly iterative and this does not stop after your application has been implemented and published. Test and try to get expert evaluation on the outcome of each step.

FelipeEriasMorandeira

Design/HIG/DesignStrategies (last edited 2012-01-25 12:44:01 by FelipeEriasMorandeira)