Interactivity 1

Envisioning
Flowcharting Scenarios Wireframing System Mapping Information Architecture

Thursday, 17 January, 13

The Elements of User Experience

A basic duality: The Web was originally conceived as a hypertextual information space; but the development of increasingly sophisticated front- and back-end technologies has fostered its use as a remote software interface. This dual nature has led to much confusion, as user experience practitioners have attempted to adapt their terminology to cases beyond the scope of its original application. The goal of this document is to define some of these terms within their appropriate contexts, and to clarify the underlying relationships among these various elements. Concrete Completion

Jesse James Garrett jjg@jjg.net

30 March 2000

Web as software interface

Visual Design: graphic treatment of interface elements (the "look" in "look-and-feel") Interface Design: as in traditional HCI: design of interface elements to facilitate user interaction with functionality Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Interaction Design: development of application flows to facilitate user tasks, defining how the user interacts with site functionality Functional Specifications: "feature set": detailed descriptions of functionality the site must include in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site

Web as hypertext system

Visual Design: visual treatment of text, graphic page elements and navigational components Navigation Design: design of interface elements to facilitate the user's movement through the information architecture Information Design: in the Tuftean sense: designing the presentation of information to facilitate understanding Information Architecture: structural design of the information space to facilitate intuitive access to content Content Requirements: definition of content elements required in the site in order to meet user needs User Needs: externally derived goals for the site; identified through user research, ethno/techno/psychographics, etc. Site Objectives: business, creative, or other internally derived goals for the site

Visual Design
Interface Design Navigation Design

Information Design
Interaction Information Design Architecture Functional Content Specifications Requirements
time

User Needs Site Objectives

Abstract Conception

task-oriented

information-oriented

This picture is incomplete: The model outlined here does not account for secondary considerations (such as those arising during technical or content development) that may influence decisions during user experience development. Also, this model does not describe a development process, nor does it define roles within a user experience development team. Rather, it seeks to define the key considerations that go into the development of user experience on the Web today.
2000 Jesse James Garrett http://www.jjg.net/ia/

Thursday, 17 January, 13

Flowcharting

Visualizing the interaction process Analyzing and and describing the interaction process Sequencing of steps in a process (temporal) Plan routes and pathways of user experience

Thursday, 17 January, 13

Flowcharting

Symbolic Representations

Thursday, 17 January, 13

Thursday, 17 January, 13

Thursday, 17 January, 13

Scenarios

Technique for creative storytelling Narrates a plausible design synopsis Used at various points in the design process Includes people, script, props and setting Focus on people not the technology Derive them from the PACT findings

Thursday, 17 January, 13

Scenarios

Thursday, 17 January, 13

Wireframes

Planning the layout of interface elements

Documenting screens at various states No visual/type treatment, just the basics Propose the needed interactions
Thursday, 17 January, 13

Wireframe + Scenario = System Map

Thursday, 17 January, 13

Wireframe + Scenario = System Map

SCENARIO
Centre for Contemporary Canadian Art

As a casual viewer, Tom became interested in Canadian art when he visited an art exhibition in Toronto. Since he is new to the topic, he decides to learn more about Canadian art at the CCCA website that the curator recommended.

1
1
user enters site
search by

*(Flowchart)
1
CCCA
Search

search bar

2
CCCA
Search

Title of Artwork
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce

CATEGORIES

CATEGORIES
ABOUT CONTACT SITE INDEX

dui nulla, interdum vel, convallis sit amet, pulvinar quis, augue.

description of artwork

main menu

ABOUT CONTACT SITE INDEX

Donec id nisi quis est eleifend sollicitudin. In consectetur elit...

randomly generated artworks

rolled over image

Drag artwork or artist here to compare

Drag artwork or artist here to compare

comparison bar

Tom arrives at the home page. He is presented with a wall of interesting Canadian artwork that he can browse while dragging the stage.

Tom comes across an image he is interested in and rolls over it to read the description. Wanting to know more, he clicks on the link in the description.
4
CCCA
Search

2
category list search bar
for specific

3
random selection
CCCA
Advanced Search

contextualizer *

display modes

CATEGORIES

Keyword

Display

Artwork Title
Name, Artist

KEYWORD

A little blurb about this significant event and how A little blurb about this significant event and how this is going to work and as you can see more information is revealed here. A little blurb about this significant event and how

ABOUT CONTACT SITE INDEX

creates filters for

artwork information

Date made: 1986 Materials: stone Measurements: 3.25 x 5.25 x 3.5 in./po Collection: Reproduced with the permission of Barnabus Arnasungaaq; photograph courtesy Feheley Fine Arts, Toronto, ON Copyright 1997, 2008. Centre for Contemporary Canadian Art. All rights reserved.

KEYWORD

KEYWORD

drag to

4
search results
displayed as

thumbnails artwork
RELATED ARTISTS & ARTWORK

basic info
Time

Sort by

Theme

Context

Drag artwork or artist here to compare

Drag artwork or artist here to compare

artist bio page

links to

3
artwork page

comparison box

C O M PA R E

C O M PA R E

has

has

has

has

At the artworks page, Tom decided to save the image by dragging it to the comparison bar which expands to allow for the addition. He notices related keywords from its social, political, or cultural context are listed in the contextualizer * with definitions or explanations.
5
CCCA
Search

Tom selects a tag and is brought to a page that displays other artworks that share the same keyword. Seeing two other artworks that appealed to him, he drags them to the comparison bar.

related artist

related artwork

contextualizer* with shared tags

drag to

drag to

CATEGORIES

KEYWORD

A little blurb about this significant event and how A little blurb about this significant event and how this is going to work and as you can see more information is revealed here. A little blurb about this significant event and how

comparison bar

ABOUT CONTACT SITE INDEX

contextualizer *

1
3

KEYWORD

KEYWORD

artwork

5
comparison box

has

* Contextualizer:

Drag artwork or artist here to compare

C O M PA R E

Tom then clicks compare and sees all three artworks on the same page. He has the option to disable any images to reduce the number shown. He also notices that the contextualizer appears here again, showing the context for all three images, with similarities highlighted.
Annmarie Akong Edeline Bernal Joanna Poon //w2009

Tags and information related to selected artworks are linked to other artworks or artists with the same tags. When two or more items are being compared, tags or info shared between the selections are highlighted.

Thursday, 17 January, 13

Information Architecture

Thursday, 17 January, 13