UX Web Summit

Sustainable UXNick FinckApril 21, 2010

?Who the f#@k is this dude?

‣ Principal & Director of User Experience

‣ Over 15 years of experience working in the web field

‣ Has worked with Adobe, Boeing, CBS, Cisco, CitiGroup, Comcast, FDIC, HP, IBM, and Microsoft

‣ Co-organized and curated more than 10 national and international web conferences & events

‣ Judged the Webby’s and several other web awards

‣ Former publisher of Digital Web Magazine

‣ Expertise in information architecture, interaction design, and user research

Blue FlavorNick Finck

‣ BlueFlavor.com

‣ NickFinck.com

?Understandinguser experience

Morville’s Honeycomb

Understand and identify the core

problems first

Identify possible solutions and

plan execution

Create designs that resolve the

core problems

Develop functional code based on the

designs

Review, test, and analyze effectiveness

of the design

Discover Plan Design Build Evaluate

Understand and identify the core

problems first

Identify possible solutions and

plan execution

Create designs that resolve the

core problems

Develop functional code based on the

designs

Review, test, and analyze effectiveness

of the design

Discover Plan Design Build Evaluate

UX happens here?

Photo by G Brummett - http://www.flickr.com/photos/grantbrummett/4464678620/

Photo by G Brummett - http://www.flickr.com/photos/grantbrummett/4469405610/

“User Experience is a focus, a thread that runs through all of our disciplines, and which no discipline owns or controls.”

- The UXsters Explain UX

Understand and identify the core

problems first

Identify possible solutions and

plan execution

Create designs that resolve the

core problems

Develop functional code based on the

designs

Review, test, and analyze effectiveness

of the design

Discover Plan Design Build Evaluate

UX really happens here

?How did we end up here?

“We are the makers of our own state and…individuals who realize the fact need not, ought not, to wait for collective action.”

- Mahatma Gandhi

A good user experience is sustainable

“Sustainability is the capacity to endure.”- the all-knowing Wikipedia

?How do we make good user

experiences sustainable?

A look into my process

Understand and identify the core

problems first

Identify possible solutions and

plan execution

Create designs that resolve the

core problems

Develop functional code based on the

designs

Review, test, and analyze effectiveness

of the design

Discover Plan Design Build Evaluate

Stakeholder Interviews

Photo by Keith Morris - http://www.flickr.com/photos/standupbass/2103533585/

Kickoff Meeting

Photo by Kristin Farwell - http://www.flickr.com/photos/bulldogsolutions/2220048417/

Content Inventory

Content Audit

Focus Groups

Photo by Matt Ruecker - http://dreamfactoryblog.wordpress.com/2010/01/19/the-importance-of-focus-groups/

Card Sorts

Photo by Leandro Agrò - http://www.flickr.com/photos/leeander/46397740/

Contextual Inquiries

Photo by Benjamin Voss - http://benjaminvoss.wordpress.com/2008/03/20/contextual-inquiries-and-diaries/

Personas

Understand and identify the core

problems first

Identify possible solutions and

plan execution

Create designs that resolve the

core problems

Develop functional code based on the

designs

Review, test, and analyze effectiveness

of the design

Discover Plan Design Build Evaluate

Content Strategy

Collaborative Thinking

Pho

to b

y A

rne

van

Oos

tero

m -

htt

p:/

/ww

w.fl

ickr

.com

/pho

tos/

wen

ovsk

i/363

4783

083/

Page Description Diagrams

Main call to action

Gets users thinking about the brand and specific actions they can make.

Sign-up

A call to action that encourages peo-ple to sign up for recently added con-

tent on the site.

Featured article or essay

Shows the first paragraph of an article with associated image, as well as the

day it was published and the number of comments made.

Latest entries

A short listing of the latest articles or essays that have been posted. There

should be between 5-7 shown on the home page. The featured article should not be displayed in this list.

Search

A useful site search should always be available on the page to allow users an alternative method for finding your content.

Link list

A list of semi-recently added link con-tent. This list should contain 5-7 links with date and comment meta infor-mation for each.

About company

An outline of what your company is all about.

Privacy, Terms of Use, Etc.

Most of the information that is cur-rently listed in the footer should re-

main there. The contact and address information can easily be moved to the contact page, though. We also recommend adding in some naviga-tional links, where possible.

Notes

The homepage has been shifted to emphasize content that’s currently buried elsewhere in your site. The pro-posed navigation structure reinforces this goal.

The home page should provide a clean path to the various sections of the site.

Monday, September 24, 2007

Sample Company NamePage Description Diagrams

1 2 3

Highest Priority Lowest Priority

Home Page

Sitemaps

a

Key

a

Link to separate section

Secondary navigation

Primary navigation

a Future navigation

a Separate sub-site

SXSW.com

About SXSW

History

Sponsors

SustainabilityNews &

Information

Brochures and

Forms (PDFs)

Mailing Lists

Subscribe International

Merchandise

Glossary

Interactive Film MusicRegister

Market at SXSW

Trade Shows

Tools

Video

Hotels for

SXSWeek 2008

Travel Discounts

Online Reg

Directory

Music Exhibition

iF! Exhibition

SXSWorld

Magazine

My SXSWorld

Stories

SXSW SMS

Gydget

Facebook

Opera Mini

Utterz

Music

News &

Information

The Daily Chord

Schedule Talks Shows

Carver Center

Parties & Play Press

Talks Artists

SXSW Live

Day Stage Cafe

Press Releases

Auditorium

Shores Stage

Getting Around

Austin Map

Interactive

News &

Information

FAQ

Schedule TalksScreenBurn

Gaming FestParties & Play Web Awards

Interactive Hub

Press

Dewey Award

Talks Speakers

Panel Picker

Winners

Finalists

Ceremony FAQ

Press Kit

Press Releases

Press Credentials

Photo Policy

Film

News &

Information

The News Reel

FAQ

Schedule Talks FIlms Parties & Play Press

Talks Speakers

Global Doc Days

Speaking

OpportunitiesFilms

Film Trailers

Past Winners

Press Releases

Music Player

Contact

Panel Picker

Getting Around

Austin Map

Parties & Play

Parties & Play

Shows

Getting Around

Getting Around

Austin Map

Conference

Center

Austin Map

Any additional

venues

Speakers

Flatstock Poster

Show

Parties & Play

Conference

Center

Conference

Center

Conference

Center

Keynote

Mentor Sessions

Quickies Sessions

Demo Listening

Sessions

CLE

Opening Remarks

Keynotes

Book Readings

Core

Conversations

Podcasts

Video

Podcasts

FAQ

Video

Podcasts

Speaking

Opportunities

FAQ

Press Kit

Press Credentials

Photo Policy

FAQ

Press Kit

Press Credentials

Photo Policy

Process Flows

Understand and identify the core

problems first

Identify possible solutions and

plan execution

Create designs that resolve the

core problems

Develop functional code based on the

designs

Review, test, and analyze effectiveness

of the design

Discover Plan Design Build Evaluate

Sketches

Zone Diagrams

Navigation SchemaGiantCampus.com Information ArchitectureNavigation Schema

1 Modified: Tue Sep 16 2008

Our Difference

Our Difference

Feedback | Legal | Careers | Press Room

Footer Navigation

Global Navigation

888-904-2267 | Live Help | Contact | Sign In / Sign Up

Search

Home > Courses > Flash Animation & Web Design > Web Design with Dreamweaver

Breadcrumb Navigation

Secondary Navigation

Game Design

3D Modeling

Digital Photography & Graphics

Video Production

Programming & Robotics

General Computing

Our Approach

Game Design

3D Modeling

Digital Photography & Graphics

Video Production

Programming & Robotics

General Computing

Our Approach

Game Design

3D Modeling

Digital Photography & Graphics

Video Production

Programming & Robotics

General Computing

Our Approach

Home

CommunityCourses Programs Locations AboutHome

Primary Navigation

CommunityPrograms Locations AboutCourses

Flash Animation & Web Design Flash Animation & Web Design Flash Animation & Web Design

888-904-2267 | Live Help | Contact

Wireframes

Manage Account

! Rename account

! Order checks

! Stop check

! Order check card

! Manage Statements

Manage Account

Use this form to place a stop check on a check that has been issued. Amount of the check will be credited back to your account (more info)

Account #: ...4324

From Check #:

To Check #:

Reason:

Note you will be chaged a $8.00 fee for each stop check order. (more info)

! Rename account

! Order checks

! Stop check

! Order check card

! Manage Statements

Manage Account

Order new checks for this account?

! Rename account

! Order checks

! Stop check

! Order check card

! Manage Statements

Stop Check

RenameHome Checking

Order Checks

Lost check

! Download

! Download

! Download

Manage Account

Note: If your card was lost or stolen please call 800-637-0852 to ensure deactivation. (more info)

Reason:

Rush Delivery?

Note you will be chaged a $45.00 fee for a rush delivery of a check card. (more info)

Charge to account:

! Rename account

! Order checks

! Stop check

! Order check card

! Manage Statements

Manage Account

Note: these changes will impact your savings account(s) as well. (more info)

! Rename account

! Order checks

! Stop check

! Order check card

! Manage Statements

Damaged check card

Order

Paper Statements

Go Paperless

Home checking (5423)

Manage Account

! Rename account

! Order checks

! Stop check

! Order check card

! Manage Statements

! Download

! Download

! Download

Download Now

Select file format...

Storyboards

Prototype

Understand and identify the core

problems first

Identify possible solutions and

plan execution

Create designs that resolve the

core problems

Develop functional code based on the

designs

Review, test, and analyze effectiveness

of the design

Discover Plan Design Build Evaluate

Build Review

Photo by Dmitriy Kopylenko - http://www.flickr.com/photos/dima767/3660655314/

QA Testing

Photo by Tristan Nitot - http://www.flickr.com/photos/nitot/3038089411/

Understand and identify the core

problems first

Identify possible solutions and

plan execution

Create designs that resolve the

core problems

Develop functional code based on the

designs

Review, test, and analyze effectiveness

of the design

Discover Plan Design Build Evaluate

Usability Testing

Pho

to b

y A

lexa

nder

Bax

evan

is -

htt

p:/

/ww

w.fl

ickr

.com

/pho

tos/

futu

resh

ape/

8622

8211

/

Photo by ekhereford - http://www.flickr.com/photos/37128818@N02/3522353433/

User Interviews

Eye-Tracking Analysis

Image by Daniel Martin - http://www.doublejumpmedia.com/blog/2009/05/eye-tracking-and-usability-testing-with-city-university-london/

Historical Traffic Analysis

Real-Time Traffic Analysis

?What is ahead for UX?

Augmented Reality with Location Based Services

Augmented Reality with Visual Recognition

Star Wars

Nintendo Wii

Microsoft’s Project Natal

Microsoft Surface

Oblong's g-speakSpatial Operating Environment

Sixth SenseWearable Gestural Interface

Minority Report

UX isn’t a means to an end, it is only the

beginning

Thank you!

?Questions?

Sustainable UXNick Finck@nickfnick@blueflavor.comhttp://blueflavor.com