Previous Table of Contents Next


3.2.2. THE DESIGN PROCESS

It is very important for the designer to focus on the right things at the right times in the design process. For example, the manner in which users will perform their tasks in the system (flow) must be considered prior to considering the exact placement of buttons on the screens. This may seem obvious, but our experience has shown that design work often begins with a heavy focus on graphical design. This may be an unintentional, but natural consequence of using GUI prototyping tools in early stages in the design process.

To help the designer focus on the right things at the right time, our design process is divided into three phases as shown in Figure 6.5 (see also Nilsson and Lachonius, 1996). With this approach it is possible to ensure the usability of the design and to avoid being concerned about the need to change the concept of the design after doing the graphical design.


Figure 6.5  The design process.

3.2.2.1. Conceptual Design

Design work should begin with conceptual design. At the conceptual stage, it is important to ask questions such as, “what are the components that users work with (from the their point of view)?” and “how do those components combine to fit the design space?” The work in the conceptual phase is preferably done on a whiteboard or with pen and paper. The result should be recorded in rough sketch form. Its purpose is to communicate the conceptual design of the future system and should reflect the user’s mental model.

Figure 6.6 shows an example of a conceptual sketch from a travel reservation system, with the following parts:

  Journey, with journey plan, customer and “other”.
  Resources, with means of transportation, hotel and “other”.


Figure 6.6  Conceptual design sketch.

These are, from the users point of view, the components upon which the system should be built. Note the that the arrow, “build journey”, embodies the fundamental concept of the system: to build journeys from possible resources. In this case, one single sketch visualizes the entire fundamental concept of the design.

These sketches cannot be evaluated directly by a user trying to perform a task, because they are much more abstract than actual screen layouts. Therefore, it is often necessary to proceed to functional design (described in the following section) to evaluate the conceptual design and verify that the system reflects the user’s mental model in an effective way. It is in the conceptual phase that the designer should begin thinking about how to provide the user with the desired emotional tone of the system. An effective way of doing that is to use the Bubbling technique described later.

3.2.2.2. Functional Design

Functional design is the second phase of the design process and is intended to make the conceptual design more concrete. In the functional phase, questions are asked such as, “how should the user interact with the system?” Rough screen designs are sketched in this phase, which are possible for the user to test in a user driven evaluation. Listboxes, buttons, and other controls are drawn, but their exact graphical placement or form is not a major focus. It is important to create a prototype with which the user can interact and perform real work tasks. Typically, we test several possible functional designs based on one conceptual design.

Figure 6.7 shows an example of a functional sketch with which the user can interact and perform the task of “selling a journey”. The sketch consists of:

  An area on the left, containing tabs for the journey that the user is planning (according to the conceptual design) and for customer information. The journey is shown in a listbox. The area also contains the button “Sell” which the user can press to actually sell the journey.
  An area on the right where the user can browse and select the transportation the customer requires (through tabs and listboxes). To move a selected item into the journey list, the user can press the button with the left-pointing arrow.


Figure 6.7  Functional design sketch.

In this manner it is possible to evaluate the adequacy (for users) of the concept of “building a journey” and the means to build it (tabs, listboxes, and buttons).

Accomplishing functional design is never a simple transition from conceptual design. When constructing the functional design, all of the contextual issues are combined with information about the users and their tasks. The goal is to improve the users’ productivity and feeling of satisfaction. One special case of functional design is a “quick and dirty” functional design. This functional design has only one purpose, which is to enable a user-driven evaluation of a conceptual design. Functional design does not focus on graphical form, which makes it suitable for low-fidelity (paper) prototyping.

3.2.2.3. Graphical Design

Graphical design is the third phase of our design process and refers to such items as the exact placement and grouping of controls and the choice of their colors, fonts, and sizes. This is best done using computerized tools appropriate for the situation (e.g., the development environment). The users are involved in the graphical design as well through user-driven evaluations.

3.2.2.4. Working in the Design Process

Keeping the appropriate focus when working within a design phase is important. This does not mean, however, that one should discard ideas and thoughts that are relevant to other phases. They should be recorded for later reference. It is natural for designers to have these out-of-focus ideas, but it is important for them to avoid getting caught up in graphical details, for example, during conceptual design. When we worked with creating the conceptual idea above, we generated both functional and graphical ideas. The functional idea was the use of tabs, which we recorded. Later, we decided to use the idea because it allowed us to maintain a great deal of information in one window. The graphical idea was to place the “Sell” button at the top left of the screen. We also recorded this idea and later decided not to use it, because it didn’t fit naturally into the flow of how the user read the screen. “Sell” is the last action taken by users and is always performed after they scan the journey list to ensure its accuracy. Therefore, we placed it at the bottom right-hand corner of the left area.


Previous Table of Contents Next