"Historical accident has kept programmers in control of field in which they have no aptitude: the artistic integration of the mechanisms they work with. It is nice that engineers and programmers and software executives have found a new form of creativity in which to find a sense of personal fulfillment. It's just unfortunate that they have to inflict the results on the users."
Ted Nelson 'The Right Way to Think About Software Design', 1990

Approaches to Graphical User Interface (GUI) Design

"...making computer things easy for people to use"

Until the 19th century very few people ever had to operate a machine more complex than a winch. The technological innovations that both gave birth to and grew out of the industrial revolution introduced a new level of complexity to human-machine interactions. The telegraph, telephone, typewriter and car required specialised knowledge and a new way of conforming to the necessities of the machine. As machines have become more sophisticated so too has our means of interacting with them. The medium through which this interaction takes place is called the interface. Interfaces are meant to maximise 'control and communication' through feedback and command mechanisms. For example, the speedo, fuel gauges, steering-wheel and various pedals, levers, dials and switches comprise the interface of a car.

Our experience of the mechanisms that interface us with the world has provided computer interface designers with a range of habitual knowledges which they use in making the workings of computer programs etc. accessible and useful to us. In most cases 'soft' (graphic/aural) representations of 'hard' (real-world) objects are used to signal common purposes; for example, the Quicktime interface utilises representations of buttons that we are familiar with from VCRs -- play, fast-forward, rewind and stop buttons control our viewing of a video whether it is of an actual tape or a saved digital file and require little conscious thought or instruction to use. This 'transparency' of interface is only successful when the represented objects function in much the same way as their real-world equivalents. These real-world models are known as 'metaphors' (although they are often actually similes).

Interface design is not just about the 'look and feel' of screen components, it also encompasses the ergonomics of the user's control of the programme. This includes practical considerations such as clustering related devices close together so that users can easily swap between them. The sum total of the GUI is that it designs the user's interactions -- what they can do and how they do it. What the user sees and hears is only a manifestation of 'inter' activities.

Interactivity

Usually we think about interactive computing as consisting of three distinct 'objects':

• An application

provides specific functionalities to achieve specific goals

• An interface

mediates between us and the inner workings of the application, generally employing a variety of metaphors to represent specific functionalities. Typically designed last

• A user

the cause, and victim, of the above.

 

However, if we think about technological systems in the real world, for example the car, we can see that all of these terms are interdependent, shaping and being shaped by each other. For example, the car's technological development was shaped by earlier technologies (including biotech systems like draught-animals), the level of current mechanical and production technologies, and the expectation of the user. Thus an obvious and intrinsic part of the GUI such as the steering wheel was not designed post facto -- a hand-controlled steering mechanism was an unconscious expectation of early auto designers based on analogy with preceding technology (horse and cart) and deeply influential on the overall structure of the entire mechanical ensemble (wheels on each corner of a rectangular structure controlled by a single individual in an upright posture). Technologies re-shape the users which in turn influences the future direction of the technology's development.

In every interactive experience, 3 'pictures' come into play:

• What the designer had in mind when creating the system
• What the user expects from the system
• What the system can actually do

"A project design should be tested to determine where the three pictures overlap the most; those areas of overlap result in natural mappings between required actions and their effects, and between visible information and the user's interpretation of the system."
Clement Mok, 'Designing Business' 1995

Two major contemporary models

• Direct-manipulation systems

The term 'direct manipulation' was coined by Ben Schneiderman of the University of Maryland, who listed three key criteria:

1. Continuous representation of the object of interest.
2. Physical actions instead of complex syntax. (mouse clicks rather than command-lines)
3. Rapid incremental reversible actions whose impact on the object of interest is immediately visible.

The Macintosh desktop interface is the classic example of a direct-manipulation system; it represents the world of the computer as consisting of a collection of objects that are directly analogous to objects in the real world.

• Direct engagement

Based on conception of human-computer interaction as 'designed experience', shifting the focus from the representation of manipulatible objects to the ideal of enabling users to engage directly in the activity of choice. Ideally, it reconfigures the design of applications and interfaces as a single integrated process. This approach is strongly influenced by other media, in particular, models such as cinema and theatre. (see Nelson, Kay and Laurel)

Problems

• Different applications use different interface metaphors and methodologies. This can cause frustration when one interface does not behave as expected based on experience of other interfaces.
• User may resent the constraints that an interface places on their interaction with the application's possibilities.
• Users may be distracted or slowed down by the need to 'figure out' a new interface

GUI Principles

Predictability -- elements should react in a consistent and therefore pretictable fashion (e.g. what a tool does at one point it should do at anypoint -- an example of an unpretictable interface is the c ounterintuitive trashcan on the mac interface -- it both destroys stuff and ejects other stuff).

Consistency -- it's more important for a system to interprete user behavior consistently than to appear consistent (i.e for the elements on the screen to have a uniform appearance.)

Progression -- everything should progress from simplicity to complexity -- a user should not be faced with more complexity than necessary. Uncalled-for complexity diminishes user interast and involvement.

Natural contraints -- the system should be designed to anticipate error and correct the interface

Visibility -- control elements must be visible and their function obvious when they are need (functions applying to whatever is on the screen at any given time should be available without the user having to search for them.)

Transparency -- a user's focus should be on content or function, not on format or navigation.

Feedback -- user's should know the effects of their actions immediately and obviously

Modes of operation -- people use three main modes when working with computers:

• Command mode; telling the system to do something
• Manipulation mode -- accomplishing tasks by manipulating tools
• Recording mode -- entering and storing stuff

Pace -- a user should be able to control the speed that they move through material

Appropriateness -- a GUI should be designed to accomodate its users; this can range from the obvious such as making buttons large on a site for the physically-disabled, to the subtle such as awareness of cultural values (such as colour meanings and preferences, etc.)

Some History

1940s
Initially a one-to-one relationship between a person and a computer through manipulation of the dials and knobs that controlled the massive early electronic computers such as ENIAC.

1950s
Punch-cards and batch processing replaced direct interaction with a transaction mediated and enacted by a 'computer operator'

Time-sharing and the use of 'glass teletypes' reintroduced direct human-computer interaction and led to the 'command-line' and menu-oriented interfaces. Introduced notion of 'conversationality' -- action and response, tit-for-tat interactivity.

1960s
This notion of 'conversation' led some researchers to treat the computer and its user as two distinct parties whose 'conversation' is mediated by the screen. However, it is obvious that there is more to 'conversation' than linear turn-taking. An alternative notion of conversation employs the idea of 'common ground' (see Herbert H Clark & Susan E Brennan 1990). As Clark and Brennan note this involves coordination of content (both parties must agree what they are focusing on); coordination of process (both parties must synchronize their participation with each other) and neither of these is possible without a body of shared information, assumptions, knowledges etc. (common ground).

In 1967, Ted Nelson examined the evolution of cinema as a model for the development of hypertext. In considering the ways that theatre influenced film, he noted that "stage content, when adapted was appropriate and useful, while stage techniques (such as the notion of the proscenium and an insistence of continuous action within scenes) were not." Nelson's understanding of cinema and theatre as representations of action in virtual worlds, shifted the focus from what was represented to how it was represented and informed Paul Heckel's analysis of interface design, 'Elements of Friendly Software Design', in the early 80s. Heckel characterised software design as being primarily concerned with communication and focused on cinema as paradigmatical because it "illustrates the transition from an engineering discipline to an art form" and highlights the role of artists as skilled communicators in transforming the production and reception of technological innovations. Heckel believed that the role of the interface designer was in creating an environment for action through evocative, consistent illusions.

1970s-80s
Through the 70's and 80's, cognitive psychologists developed parallel perspectives on human-computer interaction which focused on action and enablement rather than communication. In his book, 'The psychology of Everyday Things (1988), Donald Norman makes the point that the design of an effective interface -- be it a for a computer or a doorhandle -- must begin with an analysis of what the user is trying to do, rather than preconceptions of how it should look.

Allan Kay: interfaces need to be designed that utilize the normal stages of human learning (kinesthetically, visually [iconically] and abstractly [symbolically]) and the modalities of human intelligence (enactive/doing, visualising/comparing, abstract or symbolic reasoning).

Early 90s
Brenda Laurel published 'Computers as Theatre'; her contention was that interface design had become too caught up in representing 'things' and did not pay enough attention to designing (inter)action. She proposed theatre as a model for designing interfaces, highlighting the need for computer programs and their interfaces to be designed as one coherent whole rather than the usual situation of the interface design happening after the core functionalities and concepts of the programme had already been designed and implemented. By looking to successful concepts and strategies from the performing arts and, in particular, to the analysis of the structural elements of representation provided by Aristotle's 'Poetics', Laurel reinvigorated the industry's approach to interface design.

Aristotle's Four Causes

Examines how and why a representation comes to be what it is -- to make things that work it is necessary to understand what it is that makes them work. The four causes are forces that operate concurrently and interactively during the process of creation.

Formal Cause:

The form or shape that it is trying to be -- e.g. the formal cause of a house is the architect's idea of what it will be when it is finished. Its formal properties (its houseness) are independent of any particular instance of a house and are particularized by the specific demands of site and clients filtered through the architect's sensibility.

What is the interface trying to be? What are its models or ideals?

Material Cause

What the thing is made of -- in the example of a house, its material cause is the wood, bricks, concrete, glass nails and so on.

An interface is made from light and sound and responsiveness. It is also made of images, graphics, text, movement -- and eventually kinesthetic and tactile modalities. How else can these materials be thought about?

Efficient Cause

The way in which the thing is actually constructed. This includes both the maker and the tools -- e.g. houses built to the same plans by two different builders with different tools and skills will differ in terms of their efficient cause.

What tools and skills are needed? How may producing multimedia be aided or compromised by the quality of its tools?

End Cause

Its purpose -- what it is intended to do in the world once it is completed.

Exactly what is the interface expected to do

Interface metaphors

A metaphor is an invisible web of terms and associations that underlie the way that we speak and think about a concept. Metaphors allow us to apply already known and understood modals to new situations to more quickly understand them, or think about known situations in a new light, thus developing new insight and possibilities.

The characteristics of metaphor in language are also those that govern how metaphor works interface design.

John Shiple, of Squishy Design, notes that there are 3 types of metaphors that are useful to site design:

Organizational metaphors
Organizational metaphors rely on the existing structure of a group, system, or organization. For example, if you are creating a site to sell groceries, your metaphor could be a supermarket, where products are grouped logically by type (canned vegetables, dairy products, cereal, snacks, household items, etc.). Beware that copying the organizational hierarchy of your client company is usually not a good idea - grocery customers couldn't care less about a supermarket's corporate structure.

Functional metaphors
Functional metaphors relate tasks you can do on the site with tasks you can do in another environment. Photoshop, a graphics program, relies on a lot of functional metaphors: You can figuratively "cut," "copy," and "paste" graphics on a computer - as though you were using real-world scissors and glue.

Visual metaphors
Visual metaphors are based on common graphic elements familiar to most people in our culture. If you are designing a music site that allows users to play songs, you might want to use the traditional "start," "stop," and "pause" icons found on CD players everywhere.
See Shiple's 'Information Architecture Tutorial' on Hotwired

Interface metaphors are not, however, an unallayed benefit:

How to generate interface metaphors (adapted from Erikson, 'Working With Interface Metaphors')

Functional definition -- know thoroughly how the thing (application, activity, game etc.) works. This includes not only what the system can do but also when various functionalities are available to users and how fast the system responds in various situations.

Identify users problems -- what aspects are new to them? What looks familiar but may be different from expectations? User test every step of the way including watching users use similar or analogous systems.

Metaphor generation -- what metaphors are already embedded in the systems functionalities and concepts? Are these appropriate? How should they be expressed -- e.g. scale may affect meaning and reception (consider difference between metaphors of pipe, channel, highway, wire, and path although all are metaphorically links.

Metaphor Evaluation

• Amount of structure that the metaphor provides.
• Suitability to audience. Clear user understanding of what a metaphor is meant to signify -- commonality of cultural assumptions and interpretation
• Applicability -- how much of the underlying significance of a metaphor is being applied. If it is a small amount will users be given expectations that can't or won't be met through its use?
• Representability -- is it easy to represent? Ideal interface m,metaphors have distinctive visual and auditor representations as well as specific words associated with them.
• Extensibility -- what else does the metaphor buy you? How can it be extended if the application grows?

Iconic Communication
A dozen articles on icons: Introduction, A Computer Based iconic language, Paper Made Computer Icons, Abstraction and Organisation in Signs and Sign Systems, The use of Metaphors in Iconic Interface Design, Self-Explaining Icons, The Visual Dimension of Writing, A Computer HINTerface, A visual language for representing invisible aspects of natural language, Imaging Textual Machines, Dynamicons, The Elephant's Memory

Celia Pearces' 'Questions to ask yourself when designing interactivity'

• Would my target user want to do this?
• Why would they want to do this?
• Why would they want to keep doing it?
• What can be done to spark insight and discovery
• What can be done to create new connections in users minds?
• What will surprise them?
• What can be done to make them laugh and cry, scare them etc.?
• What are their motivations? What is the payoff?
• Can I sustain an ongoing feedback loop of motivation/payoff?
• Is there enough variety to have different payoff based on different actions?

Also:

Responsive Environments (Kinetic Art, installation art)

Head-mounted display VR (militery)

Closed-circuit feedback (video art)

Non-linear narrative (experimental film)

six important implications of interactivity:

• 1. Power and Play
• 2. Participation versus Interaction
• 3. Proximity and Manipulation
• 4. Strategies of Seduction
• 5. Nonlinear Narration
• 6. Remembering, Forgetting, and Reconstructing

Apple Computer did much of the pioneering work on popularizing the graphic user interface that is the underlying basis of current interactive computer systems. Their human interface group is one of the world's preeminent research organizations on interface design issues. The table below is a summary of interface principles from their Human Interface Guidelines: The Apple Desktop Interface . (** Addison Wesley: Reading, Mass. 1993) )

Further Reading

'Metaphors We Live By', Lakoff and Johnson, 1980

'Designing Business', Clement Mok, 1995

'Art of Human-Computer Interface Design', ed. Brenda Laurel, 1990

'Computers as Theater', Brenda Laurel

The Use of Metaphors in Iconic Interface Design Stephen Richards, Philip Barker, Ashok Banerji, Charles Lamont and Karim Manji

The Aesthetics and Practice of Designing Interactive Computer Events Stephen Wilson