My Notes From "An Event Apart"

An Event Apart was motivating, enlightening, and very appetizing (lots of yummy food). It was my luck that Jeffrey Zeldman and Eric Meyer chose downtown San Francisco.

Will I attend another one? Yes! However, I don't think I would travel more than 1,000 miles. While most of the presentations were mind-blowing, there were some sessions that lacked momentum.

The sessions could have been "rated" for beginning, intermediate, or experienced Designers and Developers. Perhaps what I'm asking for are more presentations to multiple groups, with some occurring simultaneously in different rooms.

The following are some of my rough notes:

A Site Redesign

Jeffrey Zeldman

  • Functioning Form - An Event Apart: A Site Redesign http://www.lukew.com/ff/entry.asp?953
  • 01_zeldman
  • Research & build relationship before showing design
  • Example: Assign numeric value to some features (game)
    • Prioritize content (1-5)
    • Must total 21
    • Not real data, but engaged in task of deciding what tradeoffs & priorities are. They'll see your perspective as a designer.
  • Personas & scenarios
    • What would X want to do...
  • Content Strategy
    • Book: New writers?
    • Who creates, when we'll get, why late?
    • About the content...
      • Stuff breaks when we get the content...
    • Help the client figure out the content
      • What's still valuable
      • Kinds of writing/content
        • prototype fake copy on the page, but relevant
    • Related content
      • wireframe
      • design
      • loose comp
      • taxonomy/keywords? cms supports?
    • Start writing example content (funny bird example)
    • "Color scheme for copy"
    • Alzheimer's method
      • "now we're doing this..."
      • Clients are busy, not really in a good mood. make it clear what you're doing, and don't assume they know what changed/happened.
      • REMIND what you're talking about
    • Learn to translate...
      • "How many buttons in navigation"
        • don't go into the literal...
        • "Is there something the nav isn't doing?"
          • Call to action
      • Step back & read between lines
      • Not abut pixels, colors, fonts...
      • Don't be tactical about design...
        • Be strategic
      • Clients are "like mothers putting sweaters on babies"
  • Go back to the user, the research, and the problem identified)
    • "that color is ugly"
    • "that button is too big"
    • Make it a strategic conversation
      • Don't use tactical things
  • Zeldman's personal site...
    • Others were grid-based
    • grid, wider, and then done?
    • What problems are we trying to solve?
      • People like the writing, heartfelt, meaningful that gets responses
      • Starting with the content
  • Resources:

A Dao (Tao) of Flexibility

Ethan Marcotte

  • 02_marcotte
  • What do you do?
    • Designer/Developer...
  • The four D's
    • Discovery (service, partners: sitemaps, whiteframes)
      • what proj. trying to achieve
    • Design
      • comps
    • Development
      • XHTML/CSS templates
      • backend to implementation team
    • Delivery
    • SPACES in-between each phase
      • handoff... giving the work away?
        • myth
  • History
    • 2002 design, flattened in PSD
    • "worried about something changing"
      • Creative process: transition
    • Many leaps of faith
  • Three Stories (mistakes)
    • "Simple Truths" on vimeo
    • The Today Show
      • Design requirements, not ready for production
      • CSS3, rgba, w/ png fallback
      • Distinction between artwork ready for client review, and that which is ready for production.
      • Anticipate problems before handoff
    • Sundance film festival
      • Grid, background punches through
      • color-branded sections
      • Semantic PSD
    • NYMag.com
      • provided auxiliary artwork
    • Agenda calendar
      • collapsable columns, hover expands to default
      • PSD included requirements
      • HTML tables?!
        • Shaker Built: The form and function of shaker architecture (book), Paul Rochelau
          • Economy of design
          • applies to template production
        • Variable class names, css in the markup...
      • JavaScript for finishing touches
        • jQuery
          • headers= attribute
      • No such thing as too much detail
      • Tailor the process to what helps me do my job better
        • Make it easier on ME...
          • sIFR
          • Cufon
          • Why not just an image, etc.
  • Resources

They’re Letting Designers Code Now?

Dave Shea

  • 03_shea
  • CSS Zen Garden
  • "Generalist" (better than saying, "Jack-of-all-trades")
  • Essentials...
  • Nice to haves...
  • Server side code...
  • jQuery...
  • Where Next?
    • Progressive enhancement (graceful degradation before)
    • 24 WAYS (.org)
      • Redesign (see Safari)
    • CSS3
      • opacity
      • text-shadow
      • box-shadow
      • border-radius
      • prefixes... things could shift by time spec is finalized (-moz-border-radius:)
      • @font-face
        • WOFF acronym...
          • EOT, TTF, etc.
          • typekit, fontdeck
            • annual fee to take care of hosting fonts for you
          • FONT squirrel.com
            • Best of free fonts...
    • Canvas (vs. SVG)
      • Available in most browsers
      • Google Chrome frame?
    • WebKit
      • rendering engine for safari & chrome
      • lots of dev in the mobile space
    • New to CSS3
      • transforms & animations
        • Safari, FF?
      • Unenhancements?
        • butterlabel.com
          • rotation w/ css tranform
    • After CSS3?
      • processing.js
        • graphics rendering, ported from Java
        • ports to canvas element
    • O3D
    • Web GL
      • writing open gl code in the browser

Seductive Design (Interface)

Andy Budd

  • 04_budd
  • Rules of the game
    • Forming long-term relationships
    • Stage 1: The Approach
      • 30 sec.
      • blink
        • subtle queues
      • The Halo Effect
        • sticking w/ initial decision
      • Standing in front of a nice car...
      • Mystery
      • Don't be "that guy"
      • Don't be needy
      • Pickup lines don't work...
      • Grab someone immediately on a subconscious level
        • snap decisions
      • Gowalla signup so simple...
        • friends integration from twitter, etc.
      • Trust indicators
        • phone
        • testimonials
        • design
        • contact
      • Tipit
      • Joobili
        • slider entices, draws in
        • initial experience, playfulness
        • "quite a pedestrian site inside"
      • Be friendly & personal
        • Flickr "hello"
        • This site is for me... connection, bond
      • Mysterious
        • Silverback
          • Usability testing tool. Intrigue.
            • ClearLeft
      • First impression
    • Stage 2: Rapport
      • New relationship "smell"
      • Don't tell them everything "on the first date"
      • Friendly/attentive, a gentleman/lady
      • Shared interests
        • similarities
      • attitude similarity effect
        • same beliefs/values
          • reconfirms our own values about the world
      • Time you spend...
      • Become friends w/ their friends (seduce friends first)
        • Predisposed to like as well
      • Liking...
        • ethos of the website before engagement
      • Matching hypothesis
        • look/dress similar
        • owners "look like pets"
        • things you feel comfortable with...
      • Etsy
        • similar interests connect there
      • last.fm
        • bubbles up similarities
        • music tastes
      • Any way of creating similarities/likeness is powerful
      • aribnb
        • paid version of sofa surfing
      • Social proof
        • looking to other people to make decisions
      • Virb
        • footer has social proof
      • 37 Signals
        • testimonials
        • video/written...
        • you're not alone
      • twitter
        • friendship
        • most won't use before they know others are
      • Ning
        • exponential growth
      • Myspace
        • "like us"
        • looks terrible
        • "imagine yourself w/in the context of the design"
      • Facebook
        • boring strategy...
        • average are attracted to impart own views onto vanilla canvas
      • picnik
        • easy to like you...
        • no signup process before using service...
        • start now...
    • Stage 3: Desire
      • Be funny - humor, most attractive, powerful force
        • friendly & non-threatening
        • forming emotional bond
      • Be cheeky, make it a fun experience
      • Seductive language
        • Use words for "physical response"
        • Talk about food... equates to sex subconsciously?
      • Be a little mysterious
        • Hot wheels
          • black window?
      • Play hard to get
        • Sparking imagination
        • Filling in gaps in your mind
        • leave you wanting more
        • Loss aversion theory...
          • want to have experience againi
      • Know when to make the move...
        • too early, crash & burn
        • too late, gone w/ someone else
      • MYLA
        • seductive site
      • Sexy interfaces
        • iPhone
      • Frivolous
        • iphone "bump app"
      • 280slides.com
        • recreated keynote in the browser
      • Carousels
        • Clearleft
        • page to play with
      • Fun(ctional)
        • tic-tac-toe login
      • Dopplr toys (Delighters...)
      • Netflix
        • rating movies to see two others similar...
      • travelled.com
        • pectoral survey
      • Facebook
        • online flrting
          • Poking
      • Seductive language
        • "I want it" button
      • Gilt
        • makes people crazy about what they're missing out on
        • what's in there??
      • Be subtle, don't try to seduce on home page
      • Proximity
        • Fall in love with things around us
        • clubs, bars, etc.
      • Praise
        • let them know you love, respect them...
      • Don't be afraid to admit mistakes
        • open & honest
        • "we screwed up"
        • early...
      • Social exchange theory
        • economic psychology
      • Attachement
        • create a bond
        • long term relationships
      • Rubin Scale
        • judge whether someone is in like/love by asking some ques.
      • stackoverflow
        • harmonic experience
      • iplus
        • interfaces that grow with you
      • build something that makes people learn
  • Resources
    • Why We Buy, Packer
    • Influence: the power of psychology

10 Tools from a UX Design Strategist’s Toolbox

Sarah B. Nelson

  • 05_nelson.pdf
  • Communication
    • Get Physical
      • lots of sticky notes
      • engage people to action...
    • Listening
      • "The experience you have listening to people without talking is pretty uncomfortable." - Sarah Nelson #aea
    • Thinking visually
      • drawing
        • if you can write, you can draw
        • squares & circles
        • printouts & stickie notes
        • Gantt chart
        • Use templates
          • what they imagine their home page to be like..
        • Understanding the nature of their request...
  • Collaboration
    • Posters
      • good for groups
      • start with outcome, and design backwards
      • keep a record of people's work...
    • The Silent Sort
      • Tool for breaking stalemates...
        • "solution is there. You just need to get it down"
          • content
          • activities
          • features
        • Sticky notes...
          • 3x3 post-its
          • 3x5 sticky note
        • 5 minutes of each person listing items...
          • "popcorn stops popping"
        • now sort stickies...
    • Worksheets
      • Templates
        • large/small
        • 8 shapes? ape?
      • Storyboarding
  • Facilitation
    • Materials
      • post-its
      • sharpees
      • draft dots - from drafting
      • stickie glue
      • keep an abundance of materials for this practice
      • assets
        • people, environment, etc.
      • setup the environment for the workshop...
    • Dot Voting
      • 6 dots on the concept they think works best
      • by priority
      • good for prioritixing, getting an idea of the room
    • Feedback
      • trash can idea with color cards: good, ok, bad
      • works/needs improvement
    • Design Your Own
  • Collaborating effectively...
  • Soft skills...
  • Participatory design
    • Designing with users, not for them...
    • Users aren't designers
      • experience, knowledge, organization
    • Facilitate processes, not a recipient of process
    • Activities & games
      • visual
      • physical
      • collaborative
    • good for getting ideas from stakeholders, getting them engaged
    • stalemates
    • communication
    • prevent misunderstandings
      • get it out on the table early
    • Caveats
      • new way of working
      • be clear about how fits into design process
    • Take breaks...

Revealing Design Treasures from The Amazon

Jared Spool

  • 06_spool
  • Tuscn Whole Milk reviews...
  • "Everyone wants to be like Amazon"
  • Foresee Customer Satisfaction Rating?
  • Amazon Treasures
    • Engage Through Content
      • reviews. people keep writing them.
      • Is this review helpful to you?
        • $7 billion in revenue from this... nuts.
      • Vs. reviews... negative and pos. reviews
      • Be careful when emulating features...
      • Target
        • nobody was reading positive reviews...
      • Pattern of reviews on Harry Potter
        • 6x as many reviews at Amazon than Wal-mart or B&N
        • Target got 3 reviews!
      • 1 in 1,300 reviews to purchasers ratio
        • 26,000 need to buy to get 20 reviews
          • 2% conversion rate
          • 1.3M people to get 1,300 reviews?
      • You must have the traffic to generate the reviews
    • Don't Fear New Ideas
      • They keep trying new things...
      • Some experiments don't pan out
        • Gold Box
          • Doesn't show products "I want"
          • Not the intention...
    • Eliminate Tool Time While Delivering Confidence to the User
      • login page may not engage
      • people won't fill it out if
      • one-click (pressure against this from CC co's)
      • Security levels
        • cookie
      • Goal time vs. tool time
        • reduce tool time
          • struggling w/ security
      • When did Amazon redesign?
      • Facebook
        • the News feed...
      • Amazon's original menu bars
      • Navigation phase-in plan
        • subtle
          • 5,000 non-cookied customers
            • 45 seconds...
          • 20% of non-cookied
            • 3 weeks...
          • etc. ...12 weeks to roll out new feature to all!
    • Never Forget The Business
      • Negative operating cycle
        • Amazon turns its inventory every 20 days
          • 74 days, Best Buy
        • NET45...

An Event Apart: Design at Facebook

Julie Zhuo

Using Internet Explorer 8 & Other Tools To Create The Modern Web -

Pete LePage

  • 08_lepage
  • "Hybrid" rendering engine
  • X-UA-Compatible or HTTP Response Header
    • Emulate tag
    • Just to reiterate/paraphrase from Pete LePage: "The IE8 emulate metatag must be the first child of the header node or it will not work" #aea
  • What does IE8 have?
    • HTML5, AJAX hash tag
    • DOM store: 10MB
      • session
      • local
    • Native JSON
    • Networking events
    • Selectors API -
    • Data URI
  • www.microsoft.com—details.aspx <http://www.microsoft.com/downloads/details.aspx?FamilyID=21eabb90 -958f-4b64-b5f1-73d0a413c8ef&displaylang=en>
  • What's coming with IE9
    • Better standards
    • CSS3
    • Direct2D
  • Developer Tools
    • F12
  • Testing IE6/7/8

JavaScript Will Save Us All

Eric Meyer

  • 09_meyer
  • Plugins
    • Flash...
    • Death of the plugin?
    • script...
  • ie7.js
    • ie8.js coming?
  • Modernizer
  • Customized fonts
    • sIFR
      • Flash/JS
    • Cufon
      • Canvas
    • Typekit
  • Graphics libraries
    • Bluff
      • Canvas element
      • work in IE
      • port of graphing library in Ruby
    • Processing.js
  • Google Maps
    • API
  • Google Docs
  • 280 Slides
    • 280North
  • cappucino.org
  • Mozilla Labs
    • "jetpack"
  • Bespin
    • web dev environment in web browser
  • Web Accessibility Project...
  • Derek Featherston
    • JavaScript to look for Flash movies
      • play/pause control
  • Progressive enhancement
    • input form attr: autofocus & required (HTML5)
  • HTML5 input types
    • "easy to write javascript to support"
  • (left for break...)
  • andykent.bingodisk.com—jss http://andykent.bingodisk.com/bingo/public/jss/
    • JSS stands for Javascript Style Sheets, it is a jQuery plugin that allows you to take advantage of the full range of jQuery selectors across all browsers from within your standard CSS files.

Integrating JavaScript Effectively

Jonathan Snook

  • 10_snook
  • Consider features, usability
  • Foundation
  • Why JavaScript?
    • Enhanced UI
      • "perceived app speed"
    • HTML...
    • CSS
      • behavioral func, :hover, etc.
  • Consideration
    • build HTML first
    • create usable base
    • think about it...
    • accessibility
      • keyboard use
  • Flavor of HTML/XHTML/5
    • HTML5's simple tags...
  • When do you need that library?
    • how complicated?
    • how much interaction?
    • planning ahead...
  • jQuery... "make life easier"
  • Various Libraries
    • jQuery UI
    • jQuery Tools
  • Examples
    • FAQ
      • HTML, accessibility
      • jQuery...
      • Setting styles/state
        • no in-line styles/script...
      • ".accordian();"
    • Carousel
      • basic jQuery carousel...
    • Login Form
      • HTML...
      • Ajax req.
      • replacing forms "logged in"
        • logout
  • Questions
    • "lazy load"?

Object Oriented CSS - Nicole Sullivan

  • 11_sullivan
  • wiki.github.com/stubbornella/
  • slideshare "stubbornella"
  • Douglas Crockford
  • Aggregation of Rules
    • .class.class BAD...
  • Headings
  • Avoid dupes
  • Avoid location dependent styles
    • modular css
  • Global values
    • .h1 to .h6...
  • Applying programming best practices to CSS
  • Don't let hacks change your specificity
    • .ie. .mod .hd{...} NOT!
  • Avoid styling elements
    • use defining defaults... classes
  • Abstract structure separately
  • Use order to override...
  • Encapsulatoin
    • "inner belongs to the module"
  • Avoid overly specific classes
    • .ducatiMonster20{...}
    • semantic, but limiting...
  • Avoid singletons
    • "Never use IDs for styling"?
    • only once on a page...
    • use classes
  • Use mixins
    • avoid repeating code
    • clears
  • Possible today
    • multi classes in html
    • preprocessing
  • "CSS IS AWE"SOME...
  • CSS Wish List
    • Usability
      • make it easier
    • Define variables
      • variable group
      • variable name
    • Call Variables
    • Prototypes
      • org code into logical abstractions
      • @prototype {property: value}
      • modify them
        • .mod .inner
    • Including mixins
      • like for .clearfix
      • avoid repeating bits of code
    • Prototype sub-nodes (not a good idea?)
    • Outcomes
      • complex simplified
    • Template
      • Grids!
    • Resources

Web Form Design in Action

Luke Wroblewski

  • 12_wroblewski
  • 7 Best Practices
    • Path to completion
    • Label alignment
      • top-align works really well
      • right-align
    • Help & Tips
      • "jumping pages tend to disorient people"
      • Luke W: people will scroll if there's a reason to scroll
    • Inline Validation
      • provide real-time feedback
      • could be self-defeating (password strength)
      • not nice to put people in "error states"
      • think about the relationships
        • Mint.com's example
      • wait 'till field populated...
        • except for usernames or related fields
      • keep messages persistent
      • cool to fill in forms..
        • kayak
      • input masks
        • layer in the formatting
        • but wait until after, or during with "//____"
      • inputs w/ high invalidation rates
    • Primary & Secondary Actions
      • placement/color of action buttons
    • Form Organization
      • one voice
      • one experience
    • Gradual Engagement -

Mapping A Web Of Data

Mike Migurski

  • 13_migurski

All Slides

  • www.aneventapart.com— slides