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