user experience, user interface, & information...
TRANSCRIPT
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