January 17, 2021
Hot Topics:

The Theory Behind User Interface Design, Part One

  • By Mauro Marinilli
  • Send Email »
  • More Articles »


Designing professional user interfaces is not only a matter of a good graphic artist and some good ideas. Unfortunately, people creating user interfaces just go for a product, without even being aware of the basics or the theoretical principles behind it. Tight schedules, misconceptions (something like "usability is a plus that we cannot afford now"), and inadequate professionalism are responsible for the poor products that surround us. This article may seem a bit too abstract at first, but its main purpose is to popularize some topics too often limited to academia and few professionals. Here we won't get into the details of some of the many approaches to UI design, because from my personal experience I discovered that people often get absorbed by the "things to do" for building effective user interfaces, rather than catching some simple concepts that will inspire them in the very process of UI design.

This and the next article are mainly addressed to developers or graphic designers who mean to (or are called to) create high-quality user interfaces (UI). Designing a user interface may seem a simple and side aspect of the whole application; in fact it is, perhaps, the most important part of the whole system. Despite our focus on software systems, many of the considerations exposed here can be applied to any human artifact intended to interact with other human beings. This is an important aspect often overlooked. Positive, smooth human-machine interaction is just a matter of good design, as any other product created by people to be used by other people. It is a complex problem, quite different from typical engineering challenges, in that, people (with their own characteristics, emotions, and so forth) are involved throughout the whole process (from designers and developers to end-users, indirect user, and so on).

This and the next article will deal with some of the theory behind quality user interfaces. This first article will cope with general concepts applicable to any interface, not only graphical ones. In the second article, we will see some details of graphical user interfaces. We will refer to real-world examples. Sometimes the examples will look trivial, but they will help to focus the discussion on real-world cases using familiar and well designed user interfaces.

Interacting with a System

Let's begin with the basics. How machines and humans interact.

One of the simplest approaches to modeling interactive systems is to describe the stages of actions users go through when faced with the task of using a system. We could identify roughly seven steps for a typical user interaction with a generic interactive system: forming the goal and the intention, specifying and executing the action, perceive and interpret the system state, and finally semantically evaluating the interaction outcome (see Figure 1).

Figure 1. The Seven Stages of Interaction

First, the user forms a conceptual intention from her/his goal (for example, a user wants to access a particular project in the repository accessed from the Web site in Figure 2). Second, s/he tries to adapt this intention to the commands provided by the system (in our trivial example, an initial exploration of the Web page is needed to figure out how to realize the intention) and from these (user-perceived) commands carries out the action (for example, the user tries to type some information into the search text field, then hits the "search" button beside it). Then, the user attempts to understand the outcomes of her/his actions (in our example, by examining the page obtained after the "search" button is pressed). This is particularly important for computer systems, where the inner workings are hidden and users have to figure out the internal state only from few hints. The last three stages help the user to develop her/his idea of the system. The whole process is performed in cycles of action and evaluation. The user refines the model of the system s/he has in mind by interpreting the outcome of her/his actions.

Figure 2. An Example of UI over the Web

Of course, our discussion was rather simplistic and immediate. Clearly, the issues behind human-computer interaction are hardly ever so plain and clear-cut. Nevertheless, our aim here is to provide an introduction to such important issues from an alternative viewpoint. Interested readers can get deeper into these topics by turning to the specialized literature. Some entry points are reported at the end of this article.

Users Are Not Designers, Nor Are Designers Users

As human beings, we can rely only on our current and past experience when interacting with the world around us; we also need semantic models. For example, we need to give meaning to whatever happens to us. That's why we often hear people talking about their experience with computers: They are familiar with the concepts of files, databases, mouse gestures, and so forth. But that doesn't mean that an end user will be able to read the designer's mind. What might seem an easy application for the designer team might be awkward and difficult to employ by the end user. It has often happened that even developers couldn't cope with buggy applications, whose internal model was cryptic. So, because the end user will have to figure out how the software will work by being given few, artificial hints, these same hints will have to be as coherent as possible; the basic ideas, the visible items and their interaction, their names, and everything else should be thought out at design time.

When planning a UI, a designer should focus on the needs of end users. It often happens, instead, that designers are too busy with citations from other cool, award-winning products that may result in a nightmarish implementation for the developer and a complete mystery for the end user. But when the UI is designed by a developer (as it frequently happens in small firms, for lack of money), the scenario might be even bleaker: the developer-newly-turned-designed will cast his old programmer's mindset on a less-usable interface. That's only because the developer is far too aware of how demanding a cool UI might be. However, big companies and other organizations are spreading their design guidelines, written by their team of professional designers, and that will, eventually, make their way through in common software also.

A Few More Concepts

In this section, we will briefly introduce some other interesting concepts drawn from the HCI (Human Computer Interaction) field.

Mismatch between user and system models. This is often referred to as the so-called gulf metaphors.

  • The gulf of execution is the mismatch between the user's intentions and the allowed actions (for example, in the well-known user Web site shown in Figure 3, a novice user wants to access his/her previous books wish list but the feature is not accessible directly from that page).
  • The gulf of evaluation refers to the difference between the user's expectations and the system's representation (for example, the user clicked the "gold box" icon confusing it for the wish list icon).

  • Figure 3. An Example of System-User Mismatch in a Common User Interface

Response time is an important parameter in that a slow response is a cause of error and user frustration in using the application. This is particularly true for Web-based applications, where performances could be a serious bottleneck. Furthermore, response time affects users in different ways. Expectation and past experience play an important part. If somebody is used to having a task completed in a given amount of time, both excessive completion time or too short a time can confuse the user. In addition, personal attitudes should be taken into account. Short response times also help to explore the UI more easily wherever such a behavior is encouraged (by means of undoing actions, providing low error costs and so on).

Page 1 of 2

This article was originally published on November 21, 2002

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date