M23CDE Usablity

Prototyping and Structuring Information

Assignment 2

Rapid prototyping & Information architecture

Storyboards and visual design

Structures for Navigation

Interface Metaphors

Iterative design and prototyping Iterative design overcomes inherent problems of incomplete requirements

Prototypes simulate some features of the intended interface

different types of prototypes:

• throw-away (uses a rough prototype to answer a design question)

• incremental (uses the first prototype as the basis for the second)

Preliminary Requirements

Build Prototype

Evaluate Prototype

Adequate?

Final RequirementsNo Yes

Throwaway prototype

Parallel Paper prototyping

Useful for:

Capturing user perspectives / expectations

Correcting wrong design assumptions

Early evaluation of design ideas

Rapid parallel and serial design prototyping

Recording design decisions from prototypes

Warning:

design inertia – early bad decisions stay bad The time investment in a prototype produces a desire to ‘stay with it’ even if it exhibits problems. You must be ready to observe and record user’s difficulties with the prototype and change the design accordingly – otherwise you are not prototyping you are building the final product!

Techniques for prototyping Storyboards (for visual design) need not be computer-based can be drawn on paper Gives an impression of the ‘look’ of the interface Flowcharts (for information architecture) Provide a map of the information architecture Limited functionality simulations (for information architecture) Can be used to user test navigation properties of the interface. Forms can be tested to make sure they are usable.

Storyboards and VISUAL DESIGN

• Visual design and page layout are best done by the design team in a brainstorming session. This does not mean that you should ignore users – however it is better to develop a prototype first and then confirm it is appropriate through user testing.

• WHY? Because in the area of visual design you can become ‘bogged down’ by trivial questions such as colour choice or font type…

• … When the important questions are about whether the layout and graphics ‘make sense’ to your target audience, whether the information is spaced/separated for clarity, whether the font is readable, whether the wording and graphical style appeal to your important users.

INFORMATION ARCHITECTURE

• A application interface needs to be divided up into ‘chunks’ that present comprehensible content based on a users mental model of their tasks.

• We need to involve users to ensure that the content is divided and linked in ways that make sense to them.

• This is a NON-TRIVIAL task. Everybody ‘divides the world up’ slightly differently

Organise the following items into categories:

� Refrigerator � Socks � Desk � Goldfish � Living room � Dictionary � Kitchen � Milk � Bookshelf � Bedroom � Cat

Card sorting exercises

Useful for:

�Developing a model of the information space as seen by users (users’ mental

model).

�Particularly useful for building navigation systems on websites.

CARD SORTING

� Card sorting is a method of involving users in deciding upon content categories and navigation titles for a web site.

� Write the list of content that is to be provided on the site – include some blank cards so that users can give their categories titles

� Ask a small group of users to sort the cards into categories – and then use the blank cards to name the categories.

� Even using a small group of users will give you a good idea of how the sites’ visitors will expect to see the content divided up into sections.

� The blank cards are VITAL – They will give you the wording for links that users can understand.

Key questions to ask about the information and its structure

• How should content / tasks be Prioritised?

• What will be the users’ highest-priority tasks?

• What does the user need to know about any particular part of the subject? Can irrelevant material be removed?

• What types of access and links between pages/screens/topics will users need? (limited or full)

Most collections of information tend to have obvious internal structures of their

own:

historical sequence

Real world task order

theme or topic

size or scale

geographic location

Global extremes

The Water Planet

Land Forms

Weather and Climate

Country Capitals

Ceremonies and Celebrations

Food: From Farm to Feast

Architecture of the world.

ORGANIZING INFORMATION AND CREATING FLOWCHARTS.

• Whilst a storyboard creates the initial picture of a Web design concept, a flowchart maps its structure and the intended user interaction.

• The flowchart links together all the objects created in the interface and organises the different information presented.

• Organizing information means more than just sorting it into categories – it also requires that a usable path is provided between categories.

When interface “pages” are linked together they form patterns which can be displayed visually on flowcharts. There are three major patterns that function as building blocks for larger web structures

Linear – one page follows the next

Hierarchical – involves navigation through a series of levels

Web-type – items are linked in a circular or looping fashion.

It is important to note that in reality these patterns rarely exist and a given web site will more likely use a combination of structural patterns

Navigation structures

The simplest form of navigation between pages is linear.

The designer has absolute control of the sequence in which information is presented to the user.

User has little control.

Can be a useful structure if information HAS to be presented in a particular order e.g. the steps you need to go through to register on a web site (other forms: Wizards / installation applications).

Can be useful if users are not experts

Often uses a ‘next’ button

Linear Structure

NEXT

While linear patterns suggest movement forward in a sequence, hierarchical patterns imply a ranking of different levels of ideas, a movement from the general to the specific, from set to subset.

Hierarchical structures are used in many web sites where the user's specific goal is to seek a piece of specific information (also describes how data is presented in many operating systems).

User has more choice over where to go and the designer has less control of the order of presentation

Hierarchical structure

In a web, the various points are interlinked in an associative pattern that is neither linear or hierarchical.

An open web structure depicts the relationship of hot spots to a primary page or ‘home’ page.

This type of hyperlinking, in which all hot spots are accessed from a single source is extremely common.

It stops users getting lost (home page is always 1 click away) but can be tedious to navigate.

Open-ended Web Structure

A closed web structure retains the linkages present in an open web but adds interconnectivity between sub pages.

Web structures allow for cross linking, for exploration across boundaries, used properly they can get people in and out of information from a central point but too much cross linking can cause users to lose their way.

Closed Web Structure

Choosing a navigation structure?

There are two important factors:

1: The nature of the information

A linear structure

e.g. A set of instructions

A - Stand at the kerb (next)

B - Look left and right (next)

C - If its all clear then cross (next)

D - Keep looking and listening (next)

E - Well done (end / return to start)

Choosing a navigation structure?

Hierarchical structure

e.g. Searching for items on an e-commerce site

Books CD’s Games

Fact Fiction Pop Jazz Playstation PC

Choosing a navigation structure

There are two important factors:

2: The needs of our important users

Novice users often need help to understand interface navigation - a linear structure that ‘keeps them on the path’ is very useful

Expert users need access to information quickly. A linear structure would slow them down.

A hierarchical or ‘Closed’ web structure would suit expert users better.

Navigation shortcuts (Accelerators) As well as providing an appropriate navigation structure Schneiderman suggest providing ‘short-cuts’ to speed up navigation.

Search engines Shortcut icons Table of contents Index Site-map ‘History’ list Pull-down menu Agents and guides

Metaphors

A metaphor is a kind of image map that uses

images in a meaningful and familiar context, for example by representing information or functions with a familiar object, location or device that people already use in day to day life.

Thus an image of a calculator and an address book could call up a calculator or address listing stored on the computer.

Two types of metaphor

interfaces use two types of metaphor:

� Functional metaphors

� Ideational metaphors (or context metaphors)

Two types of metaphor

� Functional metaphors - icons that represent objects and actions in the navigational space. e.g:

� rollover buttons for ‘forward’ and ‘back’

� folder and ‘trashcan’ icons

Two types of metaphor

Ideational metaphors (or context metaphors)

� these are metaphors which ‘structure’ users understanding of the navigation space - examples include:

� timelines

� a house with rooms

� a road system

Determining the right metaphor.

When designing or selecting an image to be used as a metaphor we need to ask four things:

� Does it help the user understand what to do?

� Is it appropriate for the content?

� Are there parts of the content that don’t fit the metaphor?

� Does the metaphor create expectations the product does not meet?

Determining the right metaphor.

�Metaphors can only work if the audience is familiar with the images used and their possible function. If the user has to ask or guess what the image means, the metaphor is of no use.

�The best-known example of a metaphor is the familiar “desktop” of many computer interfaces, where folders are places to file documents,

trash bins are places to throw things away, and an electronic address book holds names and addresses.