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
Theresa Neil Interface Designs, LLC 2009-2010
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
Theresa Neil Interface Designs, LLC 2009-2010
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
Theresa Neil Interface Designs, LLC 2009-2010
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
Theresa Neil Interface Designs, LLC 2009-2010
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
Theresa Neil Interface Designs, LLC 2009-2010
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
Theresa Neil Interface Designs, LLC 2009-2010
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
Theresa Neil Interface Designs, LLC 2009-2010
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
Theresa Neil Interface Designs, LLC 2009-2010
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
Theresa Neil Interface Designs, LLC 2009-2010
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
Theresa Neil Interface Designs, LLC 2009-2010
Layout
Q
A
Q
Theresa Neil Interface Designs, LLC 2009-2010
Master/Detail
wesabe
iWork Beta
Slide Rocket
Discover Spend Analyzer
Theresa Neil Interface Designs, LLC 2009-2010
280Slides
Paper Critters
Balsamiq
Palm Ares
Palette/Canvas
Theresa Neil Interface Designs, LLC 2009-2010
Column Browse
other inbox kuler
Wufoo
Column Browse
Theresa Neil Interface Designs, LLC 2009-2010
PNC Virtual Wallet
#
#
#
#
#
#
#
#
# Optimism Online
zendough
IMA Dashboard
Dashboards
Theresa Neil Interface Designs, LLC 2009-2010
Q
A
Q
AQ
Q
A
New York Times Rent vs Buy Fidelity Mortgage Search
BillShrink
Question/Answer
Theresa Neil Interface Designs, LLC 2009-2010
Quicken Online Swivel
Google Docs Mint
Spreadsheet/Grid
Theresa Neil Interface Designs, LLC 2009-2010
PivotalTracker
Google Analytics
Twit HivePivotal Tracker
Parallel Panels
Theresa Neil Interface Designs, LLC 2009-2010
T
O
T
A
L
1 2 3 4
one
two
three
four
BeGreenNow.com Mint
MINI USA Animoto
Wizards
Theresa Neil Interface Designs, LLC 2009-2010
Spatial Key Vision Critical
Aviary Myna A Story Before Bed
Interactive Models
Theresa Neil Interface Designs, LLC 2009-2010
spaaze Tom’s Planner
Footnote Ephermeris
Interactive Models
Theresa Neil Interface Designs, LLC 2009-2010
Digg
Form
Theresa Neil Interface Designs, LLC 2009-2010
Picnik Travelocity
Coda Realtor.com
Tabbed
Theresa Neil Interface Designs, LLC 2009-2010
Gmail
Vimeo
37signals BaseCamp
Search/Results
Theresa Neil Interface Designs, LLC 2009-2010
Delve Omio
Orbitz Crazy Egg
Refine Datasets
Theresa Neil Interface Designs, LLC 2009-2010
NetVibes
Microsoft Health Common User Interface
BBCTumblr
Portal
Theresa Neil Interface Designs, LLC 2009-2010
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
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
User name
Password
Register
Register
Feedback
Registration complete
Progress...
Submitting....
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
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
partnershipCommunicatePractice transparencymany designers won’t share till it is “perfect”
engineers get surprised
Get your design into the “wild”Make it visible everywhere
partnershipCommunicatePractice transparencymany designers won’t share till it is “perfect”
engineers get surprised
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?
Recommended