How does the user think visually?

That understanding can tell us about how to design visual images

Visual Thinking

When text and images are related they should be placed in close proximity

Close proximity

Understanding of Human perception Graphic designs are cognitive tools

◦ Enhancing ◦ Extending

Active Vision

Diagrams, maps, web pages, information graphics, visual instructions, and technical illustration all help us to solve problems

To see a pattern is to understand the solution to a problem.

The process of Visual Thinking

An Example of the Design

A figure of speech which should not be taken literally,

Metaphors facilitate a mapping of knowledge from a source domain (familiar area of knowledge) to a target domain (unfamiliar area or situation)

Metaphors functions as a basis for interaction

What is a Metaphor?

Appears to be a surface on which people can keep tools and documents (folders and trashcans)

Menus on desktop equate to restaurant menus - people can makes choices

Elements on the desktop go together; folders go with documents that go with typewriters that go with desktops.

Most Popular Metaphor: "The Desktop"

Explaining a more abstract concept Conveying concepts and features to the

audience Suggesting a use for something Relating ideas Easing navigation Easing information access Making it easier to interact with the

environment Defining a meaning between searching,

hierarchical structure and contents of the space. Visually communicating a use (clear

affordances)

Metaphors are used for:

1. Increase the familiarity with Interface 2. Motivates the user to explore 3. Maintain Consistency in Interface 4. Contain a naturalness and pervasiveness

of metaphor in human thought and language

5. Coherence: all elements of the metaphor naturally belong together

6. Help novices to quickly learn how to use a computer system through the application of a source domain to the target domain

Advantages of Metaphors

1. Restrictive for design decisions

2. A mismatch between source and target domains can mislead users

3. Can be expensive and time consuming

4. Slight mismatches between the real-world and the representation on the computer are inevitable

Disadvantages of Metaphors

User expectations (know your audience) The system's functionality and which aspects

the user may find difficult to understand Overall consistency - the same icon should

cause the same thing to happen irrespective of the application.

Extend the user's memory through menus/forms

Reduce semantic distance (between form of expression and its function)

Syntactic considerations (delete file or file delete)

When Designing a Metaphor keep in mind:

1. Identification of candidate metaphors Emotional tone of the metaphor must match the human's desired attitude A similar theme should form the basis for all applied metaphors Make the interface dynamic- actively involve audience in the scenario Spatial nature Metaphors depend on the main purpose of the application program2. Detailing of the metaphor/software matches with respect to representative user

scenarios 3. Identification of inevitable mismatches and their implications Mismatch should be isolated and an alternative course of action should be

available There must be something to learn- it must be possible for the intended audience

to actually learn it, on their own or with help from the designer. For example, whenever an action on some object fails, an alternative for directly manipulating the object this way should be available through a pull-down menu.

4. The identification of design strategies to help users manage mismatches. Users should explore without penalty On-line Help aids users to solve problems arising from mismatches Users should be able to escape for any function performed (escape key) Handling errors is an essential responsibility of the human-computer interface. Error messages should be informative and give the user insight into what caused

the error

Four steps for designing interfaces using metaphors

1. Where standard metaphors exist - use them

2. When a metaphor is used in several applications implement it in a standard way

3. Use the full extent of a metaphor 4. Avoid similar metaphors when using

multiple metaphors 5. Do not dismiss metaphors; they can be a

crucial aspect of iconic interface design 6. Overuse can be a dangerous thing 7. Metaphors have limitations

Iconic interfaces Principles

As yet standard metaphors have not been formally identified although some 'de facto' standards are emerging. For example: desktops, electronic books, office metaphors, and so on. Because of their widespread appeal and acceptance such metaphors should, if they are acceptable, be used in situations where they are appropriate - thereby building on established knowledge.

1. Where standard metaphors exist - use them

We need sets of off-the-shelf, tried and tested icons' which relate to particular interface metaphors. When implementing an application based upon a particular metaphor, a new interface can then incorporate these standard icons - thus allowing skills, knowledge and experience developed in one domain to be directly transferred to other application domains.

2. When a metaphor is used in several applications implement it in a standard way

The extent of implementation of a metaphor can vary considerably. An incomplete implementation can sometimes lead to confusion, frustration and the development of poorly formed cognitive structures for an application. Metaphors should therefore be implemented to the full extent whenever this is appropriate. For example, electronic books should use the book metaphor to its fullest extent. Many so-called electronic books fail to provide even such basic aspects of the book metaphor as page numbers, headers and footers, indexes, and so on.

3. Use the full extent of a metaphor

As we have mentioned previously, it is often convenient to employ two or more metaphors simultaneously within a given application. Of course, when using this approach it is important to ensure that the different metaphors that are used are clear and distinct from each other. Obviously, similar metaphors are likely to cause confusion in situations where they produce icons which might be equally applicable under either metaphor -especially when the functionality of the icons is different.

4. Avoid similar metaphors when using multiple metaphors

We believe that metaphors are important in the context of both iconic interface design and in enduser interaction.

Unfortunately, when discussing the idea of interface metaphors, people sometimes make comments such as: 'As they are implicit in interfaces anyway, there is no need to be aware of them when designing iconic interfaces.

We have already illustrated some of the kinds of problem that such an attitude can produce. We would suggest that this is a shortsighted point of view which can lead to a variety of complications and inconsistencies within the enduser interface.

The use of appropriate metaphors during iconic interface design can ensure that these problems are effectively circumvented.

5. Do not dismiss metaphors; they can be a crucial aspect of iconic interface design

Metaphors are tools to facilitate interface design and end-user interaction with an application.

Despite their usefulness it is possible to overuse them.

Overuse can lead to complicated interfaces as a result of introducing too much conceptual and cognitive complexity.

It is therefore important not to use a metaphor(s) to such an extreme that it detracts from the interface usability.

6. Overuse can be a dangerous thing

Because metaphors are a 'likeness' and not 'the real thing' they are bound to have limitations.

Therefore, a metaphor will often 'break down'. It is thus imperative that a metaphor is not used or 'pushed' beyond its limitations.

7. Metaphors have limitations

A Virtual Digital Library Interface with a Spatial Metaphor

Abstract from Site:

From the icons in our user interface to the database schemas we use to represent the digital library, we have utilized the existing physical library terminology and appearance in the hopes of being able to capture a more complete essence of library, both in function and aesthetics.

References:

But metaphor alone is not enough for effective interface design. There has been much written and taught about choosing and designing the best metaphor for a given job, but for maximized ease of use, no metaphor is sufficient. We need to go beyond metaphor, sometimes even abandoning it, to make our computer systems truly easy to use.

Beyond the Interface Metaphor

Various reports from speakers at a workshop on spatial user interface metaphors in hypermedia systems. Spatial user interface metaphors essentially try to make use of humans abilities to use space to organize objects or human skills in navigating structures like houses or cities.

Spatial User Interface Metaphors in Hypermedia Systems

You can take advantage of people's knowledge of the world around them by using metaphors to convey concepts and features of your application.

Use metaphors involving concrete, familiar ideas and make the metaphors plain, so users have a set of expectations to apply to computer environments.

Human Interface Principles