user experience, user interface, & information...

USER EXPERIENCE, USER INTERFACE, & INFORMATION ARCHITECTURE

The workflow of building a (static) site in four stages:

1. User Experience and Information Architecture

2. Design

3. Structure (HTML)

4. Style (CSS)

s k e l e t o n

s t r u c t u r e

s t r a t e g y

s u r f a c e

s c o p e

Abstract

Concrete

Surface brings everything together visually: What will the finished product look like?

Skeleton makes structure concrete: What components will enable people to use the site?

Structure gives shape to scope: How will the pieces of the site fit together and behave?

Scope transforms strategy into requirements: What features will the site need to include?

Strategy is where it all begins: What do we want to get out of the site? What do our users want?

Jesse James Garrett

What is “User Experience?”

User A person trying to get something done (learn something, make something, do something) with a piece of software or a website.

Information Architecture - How and where the information on a

page is presented. - How bits of information are related

to each other - How a user navigates between

pieces of information.

Interface The layout and presentation of the functionality of a piece of software. How software presents to the user what s/he can do with it.

Elements of an Interface - Spatial Organization - Affordances

What is a Design Document?

Parts of a Design Document

1. The Big Idea 2. Audience and User Stories 3. Sitemap 4. Wireframes 5. Design Mockups

The Big Idea

Brief summary of what the site is, what it’s about, etc. What are the major goals you have for the site? This might be called “The elevator pitch.”

User Stories

Building on an understanding of who the site is aimed at, user stories are short stories written about how a particular type of user used the site to achieve a goal.

Sitemap

A sitemap is an overall view of the pages on the site. Though there are many variations, most commonly, pages are drawn as boxes, with lines representing links.

Wireframes

A way to visually describe the content and functionality (affordances) of a page without actually building it.

Wireframes

Wireframes are the “blueprint for design.”

The Three Layers of a Wireframe

Content — graphics, textual content (blogs, articles, product descriptions, etc.), logos, page headings, forms, etc

Layout — header, footer, branding, content areas, etc., and content prioritization.

Behavior — notes and annotations to explain functions that can’t be shown in a 2-D image, i.e., error messaging, pop-up forms, default settings, etc