IMD09117 and IMD09118 Web Design and Development

Interaction Design.Information Architecture.

The 5 Planes Model

Last session we looked at Functionality.

By now we have used our skills to work out what we’re building and why we’re building it.

This session will be looking how we’re going to organise our information and how our users will get to it.

The Structure Plane

Interaction Design is a software development term for creating a structured user experience.

Information Architecture is a way of designing content so that users find what they’re looking for.

Interaction Design

You need to design your system to accommodate and respond to the needs and demands of the person using it.

It is no longer acceptable to expect users to adapt to your system.

Interaction Design

This is a huge subject area and beyond the scope of this lecture.

Succinctly Interaction Design aims to make systems intuitive to use. If a system is intuitive then users can get on with whatever they were trying to achieve without concentrating on how to use your system.

Ease of Use

It’s important to remember that people will view your site simply as a part of the Web, a destination they stop at.

There are fewer new users every day and people have an expectation of how to use Web sites.

Errors

This is known as a 404 error.

Errors

MIT has a much more useful error page.

Information Architecture

The word architecture is very important. In the physical world we understand the purpose and use of an environment from clues within its structure.

Architecture and the wider world.

Architecture is not simply about individual buildings but where the buildings are placed and how people get around.

If you were dropped in most UK towns, you should be able to find the main shopping street and the station very quickly.

Information Architecture

The structure of a website should be designed in such a way that people can find what they want quickly and without fuss.

Information architecture is there to help build the pathways in a manner that is intuitive and second nature.

Site Map

The bottom line of what we are producing is a site map. The map gives us a specific hierarchical understanding of the site and where information will be placed within it.

The main aim is to produce a concrete diagram that is accessible and understandable to as many people as possible. For a large site, it is also a useful tool for splitting the site into sections where it is possible to delegate successive parts.

Top Down Approach

The site architecture is constructed according to site objectives and user needs.

Content

This creates an empty shell into which the content is fitted.

Bottom Up Approach

Content analysis and functional requirements drive the structure.

Content

How many sections?

The number isn’t important, it needs to make sense to a user.

You can measure the amount of steps to complete a task or the amount of clicks, but don’t waste people’s time.

Flexibility

Site architecture should be flexible enough to add new content into a section.

Flexibility

Or entire new sections.

Nodes and structures

A node: any group or piece of information.

Hierarchical structure. Formalised and common.

Matrix structure, allows users to traverse the site along dimensions. Useful for browsing by colour or size.

Structures

Organic structure.Good for exploring a set of topics without obvious relationships although it can be confusing for users.

Sequential structure. Rare on the web, more suited to traditional media such as books.

Sections

The clothes shop. Home Page.

Men

Women

Children

Tops

BottomsOuter

The most important factor to consider is the language you use. You need to order your information in a way that seems natural to your user.

Formal Documentation

We use formal documentation because it’s structure is reasonably intuitive. It is a useful method of explaining site structure to clients. With larger sites, it means that there is a specific document detailing each page’s relationship with every other page allowing for delegated development.