Designing experiences

Bill ScottPaypal

Monday, November 7, 2011

Designing Rich Interactive Experiences

RichInteractiveExperiences

Designing

User Interface SixteenNovember 7, 2011Boston, MA

Bill ScottSr. Director Web DevelopmentPayPal

Today’s Agenda 8:30 Session 1 - Interactivity 9:00 Exercise - Interesting Moments 9:15 Session 2 - Flow 9:45 Exercise - Flow10:15 Break10:30 Session 3 - Application & Page Patterns

11:45 Lunch 1:00 Session 4 - Physicality & Direct Input 2:00 Exercise 2:15 Session 5 - Responsiveness, Animation & Invitations 3:15 Break 3:45 Session 6 - Bringing Design to Life 4:30 Discussion/Exercise 5:00 Final Q&A 4:45. Discussion/Q&A

Session 1Interactivity

interaction (n).mutual or reciprocal action; interacting

interactivity

interactivity.cyclic process between two or more active agents in which each agent alternatively listens, thinks, and speaks.

Chris CrawfordInteractive Storytelling

This is an IllusionMagic is both in the details and in the performance.- Dariel Fitzkee

Delete Messages. iPad Mail

The User Illusion

David Smith (Xerox) dubbed the Xerox Star interface the user illusion- Alan Kay

http://www.asktog.com/papers/magic.html

Simple Illusion

Events...

Page load. Mouse hover. Mouse down. Drag initiated. Drag leaves original location. Drag

re-enters original location. Drag re-enters original location. Drag enters valid target.

Drag exits valid target. Drag enters specific invalid target. Drag is over no specific target.

Drag hovers over valid target. Drag hovers over invalid target. Drop accepted. Drop

rejected. Drop on parent container.

16+

Actors...

Page. Cursor. Tool Tip. Drag Object. Drag Object’s Parent

Container. Drop Target.

6+

96Interesting Moments

EventsActors

(nuance lives here)

Interesting Moments

Planned engagement

Planned moments of rest

interesting moments.opportunities for engaging with the user throughout an interaction.

the moments that create the illusion.

Interesting MomentsFrescoes & stained glass have been telling stories for a long time.panes tell the moments of a story

“Juxtaposed pictorial & other images in deliberate sequence.”panels tell the moments of a story

The masters of animation called it the “Illusion of Life”.cells tell the moments of a story

Magic hangs in the balance of the “delicacy of the illusion”.the performance overshadows the moments of a story

Delicacy of an Illusion

The slightest mistake would destroy an illusion. Each moment matters.

Key principle for effective illusions: attention to detail -Fitzkee

Delicacy Broken

Exercise

Interesting Moments GridThere are three examplesPick one and sketch out an interesting moments grid.

Session 2Flow

flow

Exploratorium Exhibit

Spot the differences

Now try again...

Keep the moments within the page.

Hub & Spoke

shift away from paging paradigmeliminate unnecessary navigation

map screen flow directly to user tasks one-screen-per-goal

philosophy

Hagen-Rivers Report. http://www.uie.com/articles/rivers_interview/

Reduce Page Switching

to Maintain Flow

Single Page Interaction

de-emphasizes navigation

and extraneous tasks

Twitter as iPad App

Minimize page

transitions with Page

Open, close & refresh

panels with swipe

gestures

Scroll the content

Open web content &

media in place

Twitter as Web App

Minimize page

transitions with Page

Slide pattern

Find myself annoyed

with web pages opening

in another window

Find myself wanting to

substitute a drag for a

swipe

Twitter as Mac App

Navigate to other areas

using smooth transitions

(make flow visible)

Anti-Pattern: breaking

the flow with menus &

popouts.

Rethink desktop apps to

use real estate more

creatively

Vs Hover & Cover

Where possible replace

annoying hover details

with dedicated detail panes

“Special” ExperiencePrinciples followed:

Focus + context, Simple

navigation, User Control

“Plus” ExperiencePrinciples followed:

Content is the flow.

Information in Context. Only 1

experience.

Which Won?

“Plus” experience won.

Reduces page transitions, feels more

cinematic, less jarring.

Maintains Flow

Overlays

hover details. netflix.com

Give some delay before

activating hover details.

But immediately

deactivate hover details

on mouse exit.

Change context or capture

flow in overlay dialog.

hover dialog. netflix.com

Look Ahead Moments

“Don’t stop the proceedings

with idiocy.” - Alan Cooper

click overlay. flickr

Quick Look

Inlays

hover activated accordian. nasa.gov

hover activated accordian. apple.com

hover activated accordian. brown.edu

Large inlay areas don’t

do well with hover. Smaller inlay areas can

do well with hover.

Anti-Pattern

Needless

Fanfare

Inlays for Context

inlay only. roost.com

Use inlays for strong

contextual association.

Behind the Scenes Moments

endless scrolling. bing.compage curl. iPad Maps

Consider the backstage.

Larger Canvas

Page Slide

http://srobbin.com/blog/jquery-pageslide/

http://www.youtube.com/watch?v=WBv3fFg8t8g

Page Slides extend the real estate

and simplify “window management”

globible. zui

ZUI

ZUIs can allow lots of

content to be navigated.

Use Page Transitions

to Break Flow

Idiotic Moments

“Don’t stop the proceedings

with idiocy.” - Alan Cooper

anti-pattern. idiot box. yahoo! photos

Anti-Pattern

IdiotBox

broadmoor hotel. one page checkout

the gap. inline assistant

the gap. inline checkout

Process Flows

Single page process *might*

improve conversions.

mlslistings. pagination y! mail. on-demand scrolling

Pagination

Ask “Is pagination

natural for this data?”

endless.com seamless paging

When possible page

without a refresh.

Nav Bars: Extend the moment

nav status bar. thesixtyone.com

nav status bar. facebook.com

nav status bar. digg.com

Maintain context across pages.

Seamless Context

Maintain context across pages.

you are here. idea.org

seamless paging. magcloud

Keep Navigation Simple

to Maintain Flow

Keeping Context

User can lose their context

going page to page

Encapsulate alternate flow

in overlay.

Overlays Capture Moments

Mobile Navigation

Source: Tapworthy by Josh Clark

Three types of iPhone

navigation: Flat, Tab, Tree

Gowalla: Tab + Flat

- Josh Clark (Tapworthy)

Pulse & Flipboard iPad Apps

Exercise(30 minutes)

Break(15 minutes)

Session 3Patterns

application patterns

Theresa Neil Interface Designs, LLC 2009-2010

richness of desktop applications

familiar features of the web+

live save drag and drop slide

preview direct editing undo redo

drill down immediate feedback

dynamic refresh drawing resize

collapse

hyperlinks bookmarks tags pop-ups flash animation file upload

graphics back button browser

CSS single click search

paradigms multi media innovation


map screen flow directly to users tasks

one-screen-per-goal philosophy

Application Structure

shift away from HTML paging paradigm

eliminate unnecessary navigation

fundamental shift in thinking from hierarchal site maps to choosing a structure that supports a richer experience


People’s goals fall into one of three categories

Give me info

I need to complete this task

Let me create...

Information PatternProcess Pattern

Creation Pattern

From Designing For Flex by Rob Adams


online stores

dashboards

news readers

media players

maps

The right pattern to use when people need to browse, compare, comprehend, or analyze information

application patterninformation


print

sendlink

search

change routeget directions

map

Google Maps

emphasizes visual communication

de-emphasizes navigation and extraneous tasks

and

spokes

hub

spokes

hub-and-

spoke

application patterninformation


start by displaying the primary contentgive content maximum real estateoffer integrated filters and multiple views

suppress

customize view

acknowledge

save view

eventsdelete

Zenoss Open Source Systems Management

spokes

hub

event details

add commentopen device

zoomgraph

spokes application patterninformation


product configuration

checkoutfill out forms

The right pattern to use when people need to provide information in a structured manner

book travel

set-up/installation

application patternprocess


for complex or infrequent workflows

show the steps- provide clear navigation

let people skip ahead

keep the goal visible

application patternprocesssteps

goalnext

step 1 2 3


application patterncreation

illustrate

photo editing

The right pattern to use when people need to create new content or modify existing content

code

document/write

diagram


allocate the most real-estate for the workspace

utilize contextual tools- show them only when they

are needed

undo and redo are mandatory

application patterncreation

contextual tools

workspace

total control

maximize

real-estate

page patterns


Layout

Q

A

Q


Master/Detail

wesabe

iWork Beta

Slide Rocket

Discover Spend Analyzer


280Slides

Paper Critters

Balsamiq

Palm Ares

Palette/Canvas


Column Browse

other inbox kuler

Wufoo

Column Browse


PNC Virtual Wallet

#

#

#

#

#

#

#

#

# Optimism Online

zendough

IMA Dashboard

Dashboards


Q

A

Q

AQ

Q

A

New York Times Rent vs Buy Fidelity Mortgage Search

BillShrink

Question/Answer


Quicken Online Swivel

Google Docs Mint

Spreadsheet/Grid


PivotalTracker

Google Analytics

Twit HivePivotal Tracker

Parallel Panels


T

O

T

A

L

1 2 3 4

one

two

three

four

BeGreenNow.com Mint

MINI USA Animoto

Wizards


Spatial Key Vision Critical

Aviary Myna A Story Before Bed

Interactive Models


spaaze Tom’s Planner

Footnote Ephermeris

Interactive Models


Digg

Form


Picnik Travelocity

Coda Realtor.com

Tabbed


Gmail

Vimeo

37signals BaseCamp

Search/Results


Delve Omio

Orbitz Crazy Egg

Refine Datasets


NetVibes

Microsoft Health Common User Interface

BBCTumblr

Portal


Tumblr

Inspire - xd.adobe.com

Palette/Canvas

mobile patterns

Mobile Navigation

Source: Tapworthy by Josh Clark

Three types of iPhone

navigation: Flat, Tab, Tree

Gowalla: Tab + Flat

- Josh Clark (Tapworthy)

Theresa Neil Interface Designs, LLC Mobile Design Pattern Gallery: Screenshots

Tab MenuLaunch Pad List Menu

DashboardGallery Real World Metaphor

User name

Sign In Registration Checkout

Password

Sign In

E-mail

User name

Password

Register | Forgot Password?Register

subtotal $0.00

shipping $0.00

estimated tax $0.00

total $0.00

Shipping method

Shipping address

Payment method

Place Order

Checkout

RegisterSign In

Calculate Multi-StepSearch Criteria

input

input

input

Calculate

criteria

criteria

criteria

Search

Show 100 Results

Submit

1

2

3

GoalTitle

Standard Table Headerless Table Grouped Rows

EditableCascading

Fixed Column

With visual indicators Table + Summary

$3000.00

Search Form

criteria

criteria

criteria

Search

Show 100 Results

Saved & Recent

Recent search F

Recent search E

Recent search D

Recent search C

Saved searches (12)

Recent search B

Recent search A

Recent Searches

Search with Auto-complete Scoped Search Explicit Search

View Results

Show More

Sort Form

Apply

Sort by

Most popular

Highest price

Lowest price

Newest

Recently popular

Selector Toggle Sort

Option OptionOption

Highest price

Lowest price

Newest

Filter Form Filter DialogDrawer Toggle Filter

criteria

criteria

criteria

Filter

Apply

Scope B Scope CScope A

criteria

Apply

Filter

Chart w/ Time Toggle Data Point OverlayChart with Table

24hr 7d 28d 91d

Sparklines (microcharts)Zoom In Scrolling with Preview

Pivot Table

label

label

OK

0:00 / 4:59

Dialog Tip Tour Demo

Tap to get started

Do this

Then this

ImbeddedWhiteboard

pull to refresh

Persistent Discoverable

Add a card

Toolbar Contextual ToolsMenu

1x

2 of 18

Inline Actions Button(s)

Submit

Bulk Edit Mode

done

Error

E-mail is required

E-mail

User name

Password

Register

Register

Feedback

Registration complete

Progress...

Submitting....

[email protected]

myname

******

Register

Help

Q&A

Lunch(75 minutes)

Session 4Physicality

Get Physical

The Illusion of Physicality

+

Whenever possible, add a realistic,

physical dimension to your

application.

- Apple HIG

Design for Physicality

Use Metaphorsto EmbodyPhysicality

Physicality as Metaphor

Film Strip

Physicality as Metaphor

Book“Books have pages”

“Pages turn”

Anti-Pattern: Broken Metaphor

Location??

Page!!

Don’t break the metaphor

for the underlying

implementation model.

The user’s mental model

is the experience cushion.

“Books have pages”

Break the Metaphor with Magic

Back to orig

You are this far

You are here

You can go

anywhere Pages le! in chapter

Strict physicality is hard work.

Use magic to simplify the real

world.

Tap to change

page

To Flick or not to Flick

Page Choosing

Page Binding

Page Depth

However, you can’t flip or turn pages with your finger

Page turning

Page’s animate a flip via scrub

bar

Use Directnessto Simulate Physicality

in 1984, this was physicality - the scrollbar

Scrollbar Evolution

From Controller to IndicatorContent is scrolled instead of scrollbar

Thumbwheel is an evolution as well

ControllerIndicator

Flick to scroll

It must feel real

Make sure event

handling is consistent

Remember fingers are

fat. Real estate is

Anti-Pattern: Mismatched Metaphor

netflix. rate an object. KISS.anti-pattern: artificial construct

Beware of constructing artificial

visual interfaces to support drag

and drop

Anti-Pattern: Mismatched Metaphor

(Metaphors Gone Wild)

How Fat is Your Input?

Targeting SizeWeb

(Pointer) 16 pixels (but accurate as 1 pixel)

Mobile/Tablet(Finger) 44 pixels*

Remote (LRUD) 44 pixels

Remote (Pointer) 44 pixels

* Josh Clark’s recommendation - Tapworthy

Editing Moments

Interesting Moments:•Yellow spotlight/invitation•Tooltip invitation•Explicit Save/Cancel buttons

Pay attention to

discoverability

Use a clear “call to action”

inline editing. fickr.com

anti-pattern. non-symmetrical. iphone

symmetrical interaction. basecamp

Keep activation &

deactivation symmetrical

Activation/Deactivation Moments

Activation/Deactivation Moments

anti-pattern. non-symmetrical. sproutbuilder

opentray

closetrayaddassetX

Non-Symmetrical Interaction

anti-pattern. non-symmetrical. sproutbuilder

Anti-Pattern

Non

Symmetrical

Interaction

Drag & Drop Moments

Reduce physical &

mental effort

drag and drop. gmail

Mouse hover & initiationAnti-pattern: Tiny Targets

Drop acceptedWhat happened? Collapses immediately.

Avoid artificial visual constructs

for drag and drop.

anti-pattern. artificial construct.

rate an object. netflix.com

Artificial Moments

Fitts Law & Moments

yahoo teachers

Make it Lightweightto Defy Gravity

Unnecessary Moments

original digg site. digg.com 1.0

in-page action. digg.com

Remove barriers

Unnecessary Moments

anti-pattern. idiot box. yelp.com

Don’t add unnecessary steps.

Avoid Unnecessary Steps

•# of interaction steps

•Decision time•Seek time •Second guessing •Wait time

Be mindful of the “click weight.”

http://genesisconduit.wordpress.com/2008/07/13/click-weight/http://www.amazon.com/Designing-Both-Sides-Screen-Collaborate/dp/0672321513

Heavy Moments

Visible Momentsin-page action. digg.com rating an object. y!news, netflix

rating an object. y!movies, y!answers

remembered collections. gap.com

Make primary

actions visible

On Click Moments

google maps

Overlays revealed on click can

easily contain more actions.

On Hover Moments

contextual tool menu. flickr.com

contextual tool actions. backpackit

Preserve readability by initially

hiding secondary actions.

On Hover Moments

embedded application overlay - hover activated. yahoo.com 2009See also: Jakob Nielsen’s research on “Mega Menus”: http://tr.im/twnC

Don’t do too much on hover.

Yahoo! Refactored

Clicks are explicit actions.

Hovers are not.

Distracting Moments

contextual tool overlay. bing.com

Strike a balance between readability &

interactivity.

Bing Refactored

contextual tool overlay. bing.com

No more “shifting content”

BUT now “hover & cover”

Anti-Pattern

Hover &

Cover

hover & cover resolved. y! teachers

Refactoring Distracting Moments

Provide breathing room for

contextual tools.

Delicate Balance Broken

Anti-Pattern

Hover &

Cover

Anti-Pattern

Needless

Fanfare

Anti-Pattern

Mouse

Trap

Anti-Pattern

Novel

Notion

Anti-Pattern

Tiny

Target

barnes and nobles

Exercise(15 minute)

Session 5Responsiveness

Be Responsive

Use Invitationsto Create

Responsiveness

Use a clear call to action.

http://dustincurtis.com/images/twitter/green_spill.jpg

Opening Invitations

tour invitation. gmail

tour invitation. yahoo.com

Use new visits to promote new

features.

Caution: Don’t use as a

bandaid for a bad UX.

Rewards as Invitations

Recycle blank areas for

promoting your features.

dog-ear invitation. login.yahoo.com

blank-slate invitation. backpackit

fill-in-the-blanks invitation. netflix

Invitational Prompts

delicious.com

facebook.comUse questions or commands to

prompt for input.

Keep the visuals simple

Inviting Interactionhover invitation. y!movies

Aid discoverability with

hover invitations.

tooltip, hover & cursor invitation. flickr.com

hover & tool invitation. backpackit

Inviting Interaction

meebo bar

Continuous Invitations

drag invitation. google mapsdrag invitation. google maps

drop invitation. google mapsMind your moments.

Bridge new interaction styles

with familiar idioms.button. the gap

hyperlink. backpackit

drop down arrow. flickr

drop down arrow. flickr

Familiarity in Invitations

Call to Action Invitations

anti-pattern. no clear action. bing.com

Call to Action Invitations

Use a clear call to action.

Mobile Invitations

Content as an Invitation

Use Transitions/Animations

to Create Responsiveness

Always question “why”

when using transitions.

anti-pattern. needless fanfare. macintosh turbo tax

again in slow-motion...

Anti-Pattern

Needless

Fanfare

Needless Fanfare

Imagine an animation knob. Dial

in animation carefully.

anti-pattern. needless fanfare. nasa.gov

Unnecessary AnimationsAnti-Pattern

Needless

Fanfare

anti-pattern. needless fanfare. roost.com

anti-pattern. needless fanfare. pbs.org

anti-pattern. needless fanfare. roost.com

anti-pattern. animation gone wild. behr paint

Occam: What can be done with less

is done in vain with more.

Tufte: Smallest Effective

Difference. Make all visual

distinctions as subtle as possible, but

still clear and effective.

Unnecessary Animations

Anti-Pattern

Needless

Fanfare

Use the “cut it in-half”

rule of thumb.

current. no animation on drop. my yahoo!

original. animation on drop. my yahoo!

Animation must reinforce

the interaction.

Reinforcement by Animation

Animation Can Be Good

Animation Can Enhance

Animation Can...Reveal relationships

Improve responsiveness

Show state change

Focus attention

Create delight

Simulate physicality

Be Livelyto

Be Responsive

experiment on home page

dedicated area

live feedback. fidelity

Feedback Loop

live feedback. omio

Create a tight feedback

loop with the user.

Narrow toward a goal rather

than distract from it.

live suggest. google (early version) live suggest. yahoo search

Narrow to a Goal

live preview. volkswagen car configurator

live suggest. apple search

Use Previews

Use live previews.

Lively Forms

live forms. yahoo! small business

Prevent errors beforehand

with live forms.

live forms. google account creation

Lively Forms

Reduce user effort by

autocompleting correctly.

auto complete. kayak

Interactivityfarecast.com

yahoo! finance

Performance is Not Always a Given

We had to perform magic to

get our Webkit core to do this

one transition - “accelerated

compositing”

For Entry Price Point devices

we have to turn off animation

progressively

Break(30 minutes)

Session 6Bringing Design to Life

developers & designers

Developers vs Designers

DHTML developersJavascript developers

PHP/JSP/ASP developersProduce site code

Visual designersInformation architectsInteraction designersProduce designs & assets

http://flickr.com/photos/f-l-e-x/3096005116/http://flickr.com/photos/urbanwoodswalker/2690236070/

Two Worlds?

Implementation focus

Constrained by browsers

Inspiration focus

Constrained by ideation

In reality, some developers have a very creative !air and some designers are very logical.

Nevertheless, the concerns of each role create a natural division between the two worlds.

http://irenepereyra.blogspot.com/2007/03/left-brain-vs-right-brain.html

UI Engineering/Web DevelopmentVarious namesWeb dev, front end engineer, interface engineer, Web UI Engineer

At Net!ix it required mastering a number of technologiesHTML, CSS, Javascript, Java, JSP, frameworks (like Struts, Tiles, jquery)

Love for good design essentialSome engineers started as designers

Desire to say “Yes” to a challengeProblems should be challenges, not show-stoppers

Partner with design through prototypesAs rapid and as early as possible

Weekly roundtables to discuss detailsConstant communication is critical - Shared Understanding model

What is good design?Not just the formNot just the functionBut the artful blend of form and functionMust look good and also work well

Not just visual designNot just information architectureNot just interaction designBut the careful blending of the three disciplinesMust look good and also work well

Not just in photoshop, but a living experience for the userMust look good and also work well

guiding principles for designerswhat engineers wish you understood...

1. the site is dynamicphotoshop is static.

the site is not.

dynamicDynamic Content“Content is a big part of your design. don't forget about it. integrate it. make it functional.” (Nate Koechley)

“There’s always less space in the design for text once you translate to German.” (Nicholas Zakas)

Credit: Scaleable Design by Luke Wroblewskihttp://www.uxmatters.com/mt/archives/2007/10/scalable-design.php

dynamicDynamic ContentEven something as simple as a title. Rarely do long titles show up in comps produced in photoshop.

suggested movies from net!ix.com home page

dynamic

Understand how to design for a large or difficult to acquire data set

Dynamic Content

excerpt from a large member queue on Net!ix

Facebook on-demand scrolling

drag & drop, performance,

chunking

dynamicDynamic LayoutThink about the resize eventDesign for different formats when necessaryWhat about the scroll bar?

dynamic layout in International Herald Tribune

dynamicDynamic LayoutScaleable Design

Credit: Scaleable Design by Luke Wroblewskihttp://www.uxmatters.com/mt/archives/2007/10/scalable-design.php

Designing Web Interfaces: 12 Screen Patternshttp://tinyurl.com/8kr6yq

dynamic

Design for interesting moments up frontPrototype, prototype, prototypeAvoids lots of expensive rework

Dynamic Interaction

confusing interaction. net!ix

thoughtful approach to blending modes. Yahoo! 360

drag and drop on My Yahoo!

interesting moments grid

improved interaction. net!ix

96Interesting Moments

EventsActors

dynamicYou need to prototype interactionsPhotoshop example: Keyframing

Using page transitions and simple animation transitions

dynamicYou need to prototype interactionsKeynote: Keyframes example

Using page transitions and simple animation transitions

dynamicKeynote: Simulating Interaction

net!ix. rate & replace. interactive mockup

step one. button appears step one. second row moves down

the secret. hidden row behind solid mask

dynamicOther ToolsMicrosoft ExpressionsAdobe FireworksAxureHTML Prototyping

dynamicTake-Aways for dynamic designNot the same as printed page.

Photoshop = static

Use layers to simulate dynamic content

Learn how to prototype

Consider extremes and design for scalability.

Realize pixel-perfect layouts and font rendering will not look the same across all browsers/platformsstop worrying about where the line break is in a particular paragraph of text.

Take the challenge: consider the dynamic nature of the site a worthy design challenge

2. technology is criticalweb design without technology is just art.

you must understand the magic that gets it on the site.

technologyYou need to knowWhat your technology can and can’t doAt least at the high level. Think of it as your toolkit.

Is it native? Is it HTML5? Is it a combination?

The hardware endpointsGPS, Gyroscope, bluetooth enabled (sense other devices), on-screen keyboard vs physical keyboard, screen display size, input methods: voice, gestures, mouse, camera, scanner, etc.

Not all designs cost the sameEverything has a cost. The cost may be in performance, development time, and/or maintenance time. We need to balance what you want against those costs each and every time. (zakas)

What your engineers can and can’t doNot all developers are created equally.

technologyChallenge of html engineering

14 IE 6 layout bugs

63 rounded corner techniques

9 ways to layout columns

3 rendering engines

8 major browsers

5 ways to layout elements 6+ways to

vertically align

34 ways to improve performance

8 areas of focus

technology

diagram courtesy of Nate Koechley. http://www.slideshare.net/natekoechley/professional-frontend-engineering

Challenge of html engineering

technology

9 knowledge areas

4 dimensions

3 platforms

4 browsers per platform

2 rendering modes

=672diagram courtesy of Nate Koechley. http://www.slideshare.net/natekoechley/professional-frontend-engineering

Challenge of html engineering

technologyChallenge of html engineeringhigh performance

minimalist markup

unobtrusive javascriptordered markup (accessibility)semantic markup

minimal or no hacks

accessibilityinternationalization infrastructure

processtools

technologyKnow how stuff gets usedOften design teams don’t know how their stuff ends up on the siteYour HTML/CSS gets cut up into JSP/ASP/PHP?Your photoshop comps get sliced/diced & html-ized?One simple analysis tool is Firebug:

technologyKnow what is challengingExamples from HTML engineering

Vertical alignmentvertical-align does not work on block elements; however display:inline-block is best

Rounded corners + drop shadow63 ways for rounded corners; 15 ways for drop shadow. Combined very tricky.

Pixel parity across all browsersStop worrying about pixel parity for IE6. Design for modern browsers and have graceful fallback for older browsers. See Transcending CSS, Molly H.

Equalizing height across columnsFaux approach works the best (background images fake out column height). But not known by all developers.

Pixel perfect widthsDue to IE6 bugs sometimes need a few extra pixels to avoid layout issues with !oats (double margin bug); usually $xed with display:inline

technologyKnow what is challengingSpecifying minimum or maximum widthNot understood by IE6

Taming IE6At least 12 bugs concerning !oats & layout. These can be sinkholes in time. Transcending CSS.

Hard to layout against the !owIn the current world, remember that this is a document model not a GUI layout engine

Height is harder to controlContent should normally drive the height

Not possible to render your Photoshop fontsUse browser-available fonts; SIFR and other solutions are buggy; specify alternates.

For the skill level of your engineers*Most* problems can be solved. Seasoned engineers will have a bag of tricks.

technologyHTML 5FeaturesThe Canvas tag for immediate mode 2D drawing

Timed media playback

Offline storage

Editing

Drag-and-drop

Messaging/networking

Back button and history management for Ajax/DHTML applications

New markup

Eliminated markup

CompatibilitySee http://wiki.whatwg.org/wiki/Implementations_in_Web_browsers

When Can I Use...?http://a.deveria.com/caniuse/

technologyThere are still times to say “No”Designer fonts (Gotham!)But this might change with typekit/font-face!

Text in graphics

Speci!c heights

Hire developers that normally say “yes” and “get it”

3. components & grids are keydevelopers think in terms of reuse; designers often in terms of new work.

you must also design for reuse.

componentsDesign for reuseThe temptation for most designers is variety for variety sake

Often designers get bored with their design before it gets fully realized on the site

They bristle at the thought of “reusable design”

componentsEmbrace ComponentsDesign for each component & reuse throughout the siteInventory site & create a vocabulary for the common components

Do a holistic design for the components as a suite

Easy to map to engineering Components become tags, widgets, plugins, etc.

Results in cleaner CSS. Instead of CSS appearing hodge-podge across the site, it gets reused for components

See Object-Oriented CSS presentation on Slideshare by Nicole Sullivan

componentsNet"ix Site Elements/Components

componentsEmbrace GridsIt’s the right way to design anywaySee The Principles of Beautiful Web Design by Jason Beaird

Grids map to templatesThere are at least 12 CSS frameworks each supporting the concept of templates/gridshttp://speckyboy.com/2008/03/28/top-12-css-frameworks-and-how-to-understand-them/

Establish templates and standards that are engineering approvedInclude engineering early & often to get these reusable assets “blessed”. They can make it happen. (@ Net!ix - Simpli$ed Visual Framework)

Reference grids & components in your designsCan be quickly referenced in order to facilitate faster design cycles.

Easy to match photoshop, illustrator templates with a CSS grid system

componentsExample: Blueprint CSS Framework

componentsEmbrace Patterns

Tab MenuLaunch Pad List Menu

DashboardGallery Real World Metaphor

User name

Sign In Registration Checkout

Password

Sign In

E-mail

User name

Password

Register | Forgot Password?Register

subtotal $0.00

shipping $0.00

estimated tax $0.00

total $0.00

Shipping method

Shipping address

Payment method

Place Order

Checkout

RegisterSign In

Calculate Multi-StepSearch Criteria

input

input

input

Calculate

criteria

criteria

criteria

Search

Show 100 Results

Submit

1

2

3

GoalTitle

Standard Table Headerless Table Grouped Rows

EditableCascading

Fixed Column

With visual indicators Table + Summary

$3000.00

Search with Auto-complete Scoped Search Explicit Search Filter Form Filter DialogDrawer Toggle Filter

criteria

criteria

criteria

Filter

Apply

Scope B Scope CScope A

criteria

Apply

Filter

OK

0:00 / 4:59

Dialog Tip Tour Demo

4. shared understanding is essentialit’s tempting to design and toss over the wall.

but the real magic happens during collaboration.

partnershipQuotes“Our designers start to design things with development in mind, and our developers build code with design in mind. It’s really beautiful. “

“I’ve dealt with a couple of programmers in my career that were just ‘no’ guys - all day every day, no , no , no , - and it’s a terrible experience. There is ALWAYS a way to make something work.”

“From a designer’s perspective: both sides should learn as much as they can about the other sides’ disciplines. It can do nothing but good, fostering a greater understanding for what goes into the tasks each other have.”

2 keysCommunicate & Iterate

partnership

partnershipCommunicateVocabulary MismatchExample: Lockups

Mismatch: components, templates

Mappings: grids -> templates, site elements -> tags

Common Project: Simpli$ed Visual Framework (SVF)

partnershipCommunicatePattern LibraryNice way to capture the templates, components, interactions that are common

Gets people speaking the same language

More useful in established organizations &where communication spans groups/borders

partnershipCommunicateLearn how to talk to engineersengineers adverse to unnecessary change; designers must educate “why”

designers feel engineers push back to the point of a “broken design”

which leads to rework... just what they didn’t want

RoundtablesHas worked well @ Net!ix. Every Friday at 2pm.

Throw out ideas.

Discuss technical solutions to thorny problems.

Discuss vocabulary. Hear frustrations.

partnershipCommunicatePractice transparencymany designers won’t share till it is “perfect”

engineers get surprised



Get your design into the “wild”Make it visible everywhere



Get your design into the “wild”Make it visible everywhere

Make it URL-accessibleStop sharing $les by email orembedding on the wiki. Use URLs.Front your $le system with an httpserver.

Use a Design Gallery to make everythingreviewed accessible before & after themeeting.

partnershipIterate: PrototypePrototype. You know to do this but rarely is the time taken.This is where a good interface engineer, sufficiently motivated, passionate about interface can step up and be integral to the solution.

When engineering engages in a design like this... the results are beautiful. Everyone is happier (especially the users).

Build multiple prototypesFor interactive rich experiences it takes lots of variations (permutations).

View prototyping as a means to an end... not the $nal product.

dynamicIterate: PrototypeKeynote & Powerpoint can create quick interactive mockupsKeynote: Smart builds, build ins, build outs and actions can simulate a real interface

Use a prototyping toolBalsamiq, Azure, iRise, Flash, Flex, Interactive PDFs, Fireworks + PDF, Visio, OmniGraffle

Prototyping is much more accessible now than in the pastPerhaps use jQuery for quick stuff?

Coupled with $rebug is a nice way to sprinkle in behavior to existing site

net!ix. rate & replace

100+ variations prototyped over 1 weekWinnowed down between PMs, Design & Eng.Put before users the next week & again 2 weeks later

partnership

1. the site is dynamic2. technology is critical3. components are key4. shared understanding is essential

Questions?

Documents

Designing experiences