Large Corporation Web Sites

Efficient process

Maximum effectiveness

The Five Planes

• Surface = Visual Design

• Skeleton = Page Structure

• Structure = Navigation Structure

• Scope = Features, Technology

• Strategy = Objectives, Needs

The Five Planes

The Five Planes

• Design site starting from strategy plane, working upwards

• Each plane depends on the one below

• Unrealistic to finish one before starting next

• Better to start one before starting next + finish one before finishing next

• Sometimes need two-way adjustment

The Strategy Plane

The Strategy Plane

• Site Objectives = “What do we want to get out of this site”.

• User Needs = “What do our users want to get out of it?”

• “Why are we making this site?”

Site Objectives

• Business Goals: to make us money or to save us money.

• Brand Identity: Here we deal in concepts and emotions. (Colours and logos are Surface Plane problems.)

• Success Metrics: Hits per day, average time spent on site, turnover, reduced drain on support…

User Needs

• User Segmentation: “What kind of people are we catering for?” Profiling.

• Usability: Task Analysis by examining the actions the user makes.

• Contextual enquiry: “How does using our site fit into the way you do your job?”

The Scope Plane

The Scope Plane

• So you know what you’re building

• So you know what you’re NOT building

• Beware of Scope Creep!

• Functional Specification

• Content Requirements

Functional Specification

• Be positive:“The system will direct the user to the string page if the user tries to buy a kite without a string”.

• Be specific“The site will comply with section 508 of the Americans with Disabilities act”.

• Avoid subjective language“The site will have a hip, flashy style”

Content Requirements

• Includes text, images, audio and video

• May use a Content Management System (CMS) = software to guide generation, approval and delivery of content

• A Content Developer can sit down and talk with people to determine what they need.

The Structure Plane

The Structure Plane

• Interaction Design = how the system interacts with human behaviour

• Information Architecture = organising, grouping, ordering, presenting content

These are about understanding people, the way they work, the way they think (not really about technology at all)

Interaction Design

“The dance between the user and the machine”

• Conceptual Models (“does it work like a ...?” – catalogue

– shopping trolley

– service desk...

• Error Handling– avoid permitting errors

– Undo button

– Plenty of warnings

Information Architecture

• Architectural approaches = how the nodes (not always pages) are linked

• Organising principles = ways of categorising

• Language = controlling terminology

• Metadata = tags about the content to help searches

The Skeleton Plane

The Skeleton Plane

Three elements:

• Interface Design, allows you to do things

• Navigation Design, allows you to go places

• Information Design, lets you communicate ideas

Interface Design

• Selecting the right interface elements for the job in hand

• Arranging them on the page so they will be easy to understand

• In successful interfaces, users notice the important stuff

• Provide thoughtful default options

Navigation Design

Need to accomplish:

• Select sensible routes through the site, and enable their use

• For each link, the relevance, meaning, relative importance etc

• The relationship between there and here: Why would I want to go there?

Information Design

• How to present information so that users can use it or understand it more easily

• Selection of visual icons

• Sequencing of information groups

• Wayfinding: Where am I?

Wire Frames

• The output of the Skeleton Plane

• Unites Information design, Interface Design and Navigation Design

• A simple line drawing, heavily annotated

• Like a Story Board, but with no content

• Sometimes a battleground between Information Architecture and Visual Design

The Surface Plane

The Surface Plane

• All about Visual Design

• Fonts and colours give brand identity

• Style consistent with other company communications

• Use contrast to communicate and lead

• Company may have/need a style guide