Session 07 - User Experience and Design

Harvard University Extension School
Spring 2018

Course Web Site: http://cscie12.dce.harvard.edu/

Instructor email: david_heitmeyer@harvard.edu
Course staff email: cscie12@dce.harvard.edu

Topics

Overview: User Experience

sad to happy

Elements of User Experience

elements of user experience

Elements of User Experience

elements of user experience

Nine Pillars of Successful Web Teams

Nine Pillars of Successful Web Teams by Jesse James Garrett
9 Pillars of Successful Web Teams

Planning and Designing a Site: Resources

Garrett, Jesse James. The Elements of User Experience : User-centered Design for the Web and beyond. 2nd ed. Voices That Matter. Berkeley, CA: New Riders, 2011.
- Harvard Library - Online Resource
Krug, Steve. Don't Make Me Think, Revisited : A Common Sense Approach to Web Usability. Third ed. 2014.
- Harvard Library - Online Resource
Lynch, Patrick J, and Horton, Sarah. Web Style Guide: Basic Design Principles for Creating Web Sites. 3rd ed. New Haven: Yale University Press, 2009.
Williams, Robin. The Non-designer's Design Book : Design and Typographic Principles for the Visual Novice. Fourth ed. 2015.
- Harvard Library - Online Resource
Rosenfeld, Louis, Morville, Peter, and Arango, Jorge. Information Architecture: For the Web and beyond. Fourth ed. 2015.
- Harvard Library - Online Resource

Strategy

strategy plane

Clear and explicit understanding of

What does the company/organization want from the site? What is "success"?
What do the users want from the site?

Who are our Users?

Most sites get a variety of users
Some audiences will be "primary", others "secondary"
What are the target audience(s) and what are their information needs?

Most sites will have multiple audiences.

What Audiences can be identified?

University of Colorado

Dell

FDIC

Audience(s)

Who are they?
What are their goals?
- their information needs
- tasks/actions they are performing

Know Your Audience

Be clear on who you are building for. Understand their needs.
User testing, market research, focus groups.
Feedback from users. Pay attention to what your users do, not just what they say.
Keep in mind that as number of target audiences increase, difficulty of web design increases.

Audiences for an Academic Department

Undergraduate Students
- Concentrators (Majors)
- Potential concentrators
- Non-concentrators
Graduate Students
Potential Graduate Students
Faculty
- Current
- Potential
Researchers
Public

AAAS

Audiences for a Campaign Site

Media
Donors, Supporters
Voters
Party members

Audiences for a Fitness Club

Members
- Variety of members - personal training, injury recovery, recreational, etc.
- Swim Lessons and Swim Team
Potential Members
- For a variety of reasons

Additional Goal:

Promote Training Program and Philosophy

Scope

Define content or functionality requirements.

What's "in" and what's "out" -- or at least what's "later".

Start broad, then narrow and refine.

scope

Content

Questions to ask about content:

Does it fit purpose of site?
Does it suit the audience?
Would your users find this useful?

Approaching a Project

What content already exists in web or other media types (brochures, pamphlets, statements, etc.).
- Adapt (or re-adapt) it for the web
What content would be good to develop for the site?
- Create it for the web
Define incremental goals to avoid "scope creep"
- Initial Phase
- Additional Phases

Think About the User

Thing on the front page of a university website

Structure

structure

Structuring Content

From Information Architecture for the World Wide Web (available through Harvard Libraries):

information architecture defined:

The structural design of shared information environments.
The combination of organization, labeling, search, and navigation systems within web sites and intranets.
The art and science of shaping information products and experiences to support usability and findability.
An emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape.

Organize, Label, (Navigate)

Organize and Categorize
Label
Navigate

Organize

Strategy-driven: Top-down
Content-driven: Bottom-up

Plan for Growth

add new content

How to?

Sticky-notes or index cards
whiteboard or wall

Structural Models

Hierarchical
Sequential
Organic

Hierarchical

hierarchical

Library of Congress Classification

"Q" - Science
"QC" - Physics

lc system

Biological

Kingdom
- Phylum
  - Class
    - Order
      - Family
        Genus
        Species

Catalog of Life
taxonomy

Open Directory Project, Yahoo! Categories

dmoz categories

yahoo categories yahoo arts

Too deep or too shallow?

Deep

Shallow
Too deep or too shallow?

Sequential

lecture slide to illustrate sequential mode

Useful when "workflow" is important in web applications.
When order is important or part of presentation.

Organic

Wikipedia.com

webs

wikipedia web

Site Architecture

Topics
Audience
Task-Oriented
Search
Internal Organization

Label

Know your audience
Test your labels (ask your audience)
- Card Sort - physical or online, e.g. Optimal Sort
- Ask questions
  - Where can I get a driver for my HP8500N?
  - What would expect to find in the category of Synergetic Integrated Scalable Enterprise Solutions?
  - What IT degree programs are available?

Labels - Are there conventions?

Categories and Labels from News Sites

CNN
CNN

Fox News

ABC News

CBS
CBS

New York Times
NYT

NPR
NPR

BBC
BBC

NBC
NBC

Skeleton

Page Components

Header
Navigation
Content
Footer

Harvard Summer School

Wireframes and Sketches - "Low" to "High" Fidelity

Sketches

wireframe

sketch

Wireframes

wireframe

Prototypes

prototype

Navigation Systems

Where am I?
Where can I go?
- What is close by?
- What is further away?
Where have I been?

Don't Make Me Think: Navigation

it tells us what's here
it tells us how to use the site
it gives us confidence in the people who built it

Harvard College

Breadcrumb Navigation

"Just wait, Gretel, until the moon rises, and then we shall see the crumbs of bread which I have strewn about, they will show us our way home again.", Hansel in Hansel and Gretel

Breadcrumb Navigation Increasingly Useful, Jakob Nielsen's Alertbox, April 10, 2007.

DMOZ
Bread Crumb Navigation

Harvard Summer School
Breadcrumb Navigation

Construction Projects at FAS, Harvard University
Bread Crumb Navigation

Clamshell navigation

Harvard Extension School

Safari

Dropdown/Popout Menus

Harvard University
dropdown menu

O'Reilly Books
popup menu

Amazon.com
dropdown menu on Amazon

"Mega" Dropdown Menus

The White House
mega dropdown

Food Network
mega dropdown

Multiple Navigation Modes

Surface

F-Pattern

F-Shaped Pattern for Reading Web Content
F is for Fast

Non-Designer's Design Book

Good Design is as Easy as 1, 2, 3

The non-designer's design book by Robin Williams

Non-Designer's Design Book

Four Basic Principles
Non-Deisgner's Design Book by Robin Williams

Colors

Non-Designer's Design Book: Chapter 7, Design with Color

Creating Color Palettes:

Home Page -- Don't Make Me Think (Steven Krug)

What is this?
What do they have here?
What can I do here?
Why should I be here and not somewhere else?

Don't make me think

Don't make me think, revisited : a common sense approach to Web usability by Steve Krug

Three Princples of Usability

Don't make me think.
It doesn't matter how many times I have to click, as long as each click is a mindless, unambiguous choice.
Get rid of half the words on each page, then get rid of half of what is left.

Creating Links

Predictable
Differentiable

Build confidence by making your links predictable and differentiable.

The Scent of Links

scent

Links within navigation and content must be:

Predictable
Am I getting 'closer' to my goal?
Differentiable
What is the difference between clicking here or clicking there?

When creating links:

Be descriptive
- Link several words or a phrase, not just one or two words
- Use "title" attribute to elaborate
Don't lie

Use "title" attribute

Title attribute can add information so that the link is more predictable and able to be differentiated from others.

Use of title attribute for 'a' elements

Deep Linking

Link directly to content within a site.
Support deep linking to your site.
- URLs that do not change

Deep linking:

<p>
<a href="http://www.summer.harvard.edu/course-registration">
   Register for Harvard Summer School</a> so you can take 
  <a href="http://www.summer.harvard.edu/courses/great-ideas-computer-science-java/33196">
   CSCI S-1, "Great Ideas in Computer Science with Java"
</a>.
</p>

Not deep linking:

<p>
  <a href="http://www.summer.harvard.edu/">
    Register for Harvard Summer School
  </a> so you can take 
  <a href="http://www.summer.harvard.edu/courses">
    CSCI S-1, "Great Ideas in Computer Science with Java"
  </a>.
</p>