web analytics

My notes from An Event Apart Chicago 2009

Earlier this week, I went into detail about my experience as a speaker at An Event Apart Boston and Chicago 2009.

Here are my Twitter notes from last week’s Chicago event. I had amazing time getting to hear design and development tips and inspiration from some of the most prominent speakers in the field. I couldn’t entirely keep up with the code stuff so apologies in advance for thin coverage of those talks. Hope you enjoy!

Jeffrey Zeldman, A Site Redesign

  • An Event Apart Chicago starts now! @zeldman is up first talking about A Site Redesign (both for a client and for yourself)
  • When starting any redesign you first must ask, “What problem are we trying to solve?” Is it just that you’re bored? Goals not met?
  • @zeldman says the first thing to do is research (yay, that’s my job!). Research produces *achievable* goals
  • Don’t promise a client that you’re going to make them the most popular X. You can’t guarantee that. You can lower barriers to X tho
  • “Research makes you a credible partner” — @zeldman. It’s not about arguing about what font you’re using. So much deeper than that
  • Designers & developers both face not being taken seriously by other team members. You want to be seen as a business partner
  • Build a relationship before you show design. Earn the client’s trust before you ever get to the solution &they’ll more likely buy it
  • Find the happy medium between business goals and user needs. How? Interview stakeholders and prospective users, find overlap
  • @zeldman is creating a beautiful set up for my presentation later today! :)
  • @zeldman says “Make what the people need…your users are the most important people on your site.” So obvious yet people forget!
  • I see my deliverables on the screen! Working with Happy Cog rules :-D
  • Have a content strategy and do it early. Don’t try to shoehorn content into a fully baked design because it just won’t work.
  • “Alzheimer’s Method” – constantly remind the client of what you’re doing. Always clarify to ensure there’s no miscommunication
  • Learn to translate what the client is actually saying. They might be trying to be polite and therefore indirect. Or…
  • …they might be talking about a symptom not the cause. Paraphrase back to them and ask probing questions
  • Designers: sell ideas, not pixels. The concepts should be what you focus on, not the shades of colors & font sizes. What’s the feel?
  • @zeldman showing 3 variations for Contini redesign: 1) nostalgia, 2) application, 3) sexy time! All used same color palette & font
  • How to respond to client who looks at design and says, “That color is ugly!” — “Well so are you.” “Where did you go to art school?”
  • Instead just tease out what bothers them about it. Go back to the user, the research, the problem.
  • @zeldman asks the room, “Who has a blog?” Not many raise their hands. “Come on, we’re among friends. It’s like asking who’s from NJ”
  • So what do you do when the client is you? Redesigning your personal site or business site. Use a grid! Visually organizes content
  • @zeldman showing the various iterations of his blog, The Daily Report, since 1995. Constantly redesigning to where he is now
  • “Design from the content out.” Content is a key feature of the site. Make sure the grid works for the content first
  • Design for CSS, not Photoshop. You need to make sure it’s going to work on a live site, not just a beautiful comp
  • “Limit the number of fonts you use, limit the number of sizes you use, limit the number of colors you use, & it will look designed”
  • “If your rounded corners don’t show up in IE, it’s not critical. This isn’t Picasso. It doesn’t change the experience” — @zeldman
  • “There is no fold” on websites. Assume the user will scroll down. Amen!
  • When @zeldman & @meyerweb started An Event Apart, they made website look just like A List Apart so people would know they’re related
  • But honestly the content needed for the conference didn’t fit well into the layout for the magazine. It wasn’t selling the conf well
  • @steyblind and @nicksergeant‘s #afeedapart just got a plug from @zeldman! http://afeedapart.com to follow all the tweets

Jason Santa Maria, Thinking Small

  • @jasonsantamaria is up now talking about Thinking Small. Choose Your Own Adventure books up on the screen!
  • @jasonsantamaria showing a Choose Your Own Adventure analysis of paths and outcomes diagram: http://bit.ly/WAt1V Looks like a site map!
  • @jasonsantamaria‘s 7 things that are helpful in affecting the outcome of a web design project
  • 1) Be a thinker. Don’t jump right to the design. Keep a sketchbook. Only once you get through the obvious does the creativity come out
  • Sketching is an exercise to get acquainted with the problem and the content you’re working with — @jasonsantamaria
  • “The computer is not a tool of design; your mind is the tool of design.” — @jasonsantamaria
  • Instead of saying “but” say “yes, and…” Continue the story, keep it going, no matter what is thrown at you.
  • RT @ritzkat: grids allow us “To blindly go where
    everyone has gone before.”
  • I’ve missed all of @jasonsantamaria‘s numbered points, trying to capture the meat. Will post the list later
  • A grid can be very limiting or liberating down the road. It’s not a decision that one should make lightly
  • 5) Think horizontally then vertically. Like a delicious parfait. Tiers lying on top of one another — @jasonsantamaria
  • @jasonsantamaria‘s blog is so gorgeous, it makes the rest of us look like assholes
  • 6) Step modulate and listen. Making modular layout systems to accommodate varying content and imagery
  • @jasonsantamaria showing off his clean markup and CSS. Simplistic, plain speak in code, a clear system that’s easy to learn
  • 7) Be a matchmaker. Use the right font to match your content. Use it sparingly. Don’t use 2 scripts, 2 sans serifs. 1 of each
  • Your serif and sans serif fonts should complement each other. Consider using fonts from same type foundry, meant to go together
  • @jasonsantamaria telling us to read How Buildings Learn (great book!) http://bit.ly/36FSFX
  • @jasonsantamaria points us to his amazing recommended reading lists: http://jasonsantamaria.com/reading/category/design/
  • Gasolina!

Kristina Halvorson, Content First

  • @halvorson is up now talking about Content First
  • @halvorson was the only person in Minneapolis calling herself a “web writer” when she first started
  • Time for copywriting is usually a tiny part of the project schedule, and it’s after the design process. This is completely backwards
  • Copywriting is very different than content strategy. Not just sentence structure, but organizing, categorizing, planning, structuring
  • “Word of advice: Don’t ever meet your heroes.” — @halvorson
  • @halvorson just asked if there are any IAs in the audience and I raised my hand. Ew. What’s wrong with me?
  • “The web is a visual medium & the ppl called upon to make websites are visual designers” — @halvorson This ignores overall experience
  • Content development has been marginalized in our consideration of experience design — @halvorson
  • “Content is not a feature.” — @halvorson
  • Strategy is “a plan for obtaining a specific goal or result.” Content strategy not just what to put out there, but why, how, for whom..
  • ..by whom, with what, when, where, how often, what next? All of these things need to be considered and captured in the content strategy
  • Marketers’ performance is measured by conversions and sales. It’s not their fault. — @halvorson. As a result, content marginalized
  • Content needs to be useful, usable and enjoyable. — @halvorson Think of Quicken vs. Mint.com. Content better presented on Mint.com
  • @halvorson‘s Four Phases of Content Strategy: Plan. Create. Deliver. Govern.
  • Governing: consider what’s going to happen to your content overtime. User generated content may peter out. How to stay fresh?
  • Content audit. Quantitative: What do you have? How much is there? Where does it live? Who owns it? (on site, user generated, PDFs, etc)
  • Content research and analysis: brand and messaging, user research, competitor site audits, gov or regulatory reqs, qualitative audit
  • Subject matter expert should do qualitative audit, need to know subjectively if content is of high quality and meets the site’s purpose
  • @halvorson says one of Brain Traffic’s clients went through 5 stages of grief upon seeing their qualitative audit: denial, anger, etc
  • Content plan: provides clarity, makes informed recs, facilitates smart decision making, doc’ts action plan, troubleshoot implementation
  • Content process: Strategy -> Creation -> Review -> Approve -> Publish
  • “I sell content strategy with fear and shame.” — @halvorson
  • In usability testing, content is very rarely what’s tested. It’s usually the IxD. Ask participant to make a decision using content

Eric Meyer, JavaScript Will Save Us All

  • Day 2 starts now! @meyerweb talking about JavaScript. I’m still eating breakfast so no live-Twittering for me

Aaron Gustafson, Using CSS3 Today with eCSStender

  • @aarongustafson is wearing a kilt. I didn’t see that coming!
  • @jonasdowney More like progressive reveal
  • Despite 4 years of HS computer science & 3 semesters of being a CS major at CMU, I still cannot possibly live-Twitter this presentation

Simon Willison, Building Stuff Fast–And Getting It Approved

  • @simonw is up now talking about Building Stuff Fast ‚Äì And Getting it Approved. My kinda topic
  • “It’s cheaper to build something than have a meeting to discuss the thing you might build.” — @simonw Amen!
  • “My code’s compiling” is no longer an excuse for slacking off. @simonw says to use interactive shells to develop faster
  • Client-side prototyping is where it’s at. Server-side causes too many headaches.
  • http://afeedapart.com is getting props from @simonw. Talking through how elegantly it was coded. Nice work, @steyblind & @nicksergeant!
  • The elegant JSON code that @simonw is showing on the screen still looks overly complex to me
  • “You can build the A Feed Apart page in essentially 45 lines of JavaScript” because of JQuery. @steyblind, true?
  • Yahoo’s YQL lets you run sql queries against existing web APIs. @orian, do you know about this?
  • @simonw is using his British humour well ;)
  • @simonw & friends spent a week in a fort (they rented it) with no internet, lots of network cables, and HDs “filled with the internet”
  • They wanted to see what they could build together in a week. http://wildlifenearyou.com is the result. Crowdsources zoo and animal info
  • Pair Programming = “Every bit of code being reviewed as it’s written…no temptation to go check email cuz someone is sitting there”
  • @simonw is giving props to the K-J method for establishing priorities. Read more about it: http://bit.ly/130gZz
  • Similar to CIM’s Engineering Lab Week, @simonw is talking about Hack Days that push teams to drop constraints and build stuff quickly
  • “Open source isn’t about communism; it’s an ecosystem.” — @simonw. Sad how few people seem to grasp this
  • Code-hosting sites like Github lets you “file and forget” your source code and not have to deal with answering questions forever more

Luke Wroblewski, Web Form Design in Action

  • How @lukewdesign can tell stories about everyday web forms is truly admirable. Heard this talk before & already on the edge of my seat
  • Poor Boingo gets ripped on every time. Hire @lukewdesign already!
  • “A form, by definition, is in your way.” — @lukewdesign Consider the path to completion and make it as clear as possible
  • Paypal’s path to completion sucks all around, really poor scan line down the form. @lukewdesign recommends a straight line down
  • “Have you heard about the ‘bomb’ tag in HTML5? It scatters your UI all over the page. SmartUSA is already using it.” — @lukewdesign
  • Path to completion using straight line is beneficial even for complex forms, like buying a house online. Makes whole form feel lighter
  • Use clear progress indicators to let people know where they are…& don’t lie. Fidelity.com requires signin midway, not in progress bar
  • @lukewdesign uses eye-tracking data to show how people tend to look at a page, where their eyes go, what the cues are
  • Use top aligned labels to minimize time to completion. Uses a bit more vertical space, but really helps people move through the form
  • Right aligned forms also quick, but the rag on the left can be disruptive. Left aligned good for quick scanning, but slower to complete
  • Top-aligned labels 10x faster than left-aligned. People can capture label and field in one glance.
  • Labels *within* fields are stupid because once user clicks into the field, the label is gone. Also, like on LinkedIn, submits as text
  • Make any labels inside of input fields NOT look like data. Use dashes or another indicator for user to see when quickly scanning
  • Help text is useful to explain “Why am I being asked this?” and “What’s the right format for my answer?” — @lukewdesign
  • Right sidebar w/ contextual help that you can toggle on or off is a nice way of handling it. Minimize the amount of help tips displayed
  • Too much help text is indicative of some bigger problem is your design. — @lukewdesign
  • Inline validation is a great way to provide real-time feedback to help ppl choose a username for instance, or getting to a “strong” pw
  • @lukewdesign just pronounced a CAPTCHA. It sounded like Polish. No surprise
  • @lukewdesign has the audience cracking up with his inner monologue as he’s filling out a form. It’s funny because it’s so true.
  • There are subtleties in how you do matching (confirm email address) that you must pay attention to. Don’t leave users in error states
  • @lukewdesign showing his study with 27 participants to test 3 models of inline validation to see which is fastest to complete
  • Kayak uses inline validation to allow people to not fill in the rest of the form, pre-populating data and allowing them to edit it
  • I’m love @lukewdesign‘s Yahoo! Answers example using inline validation to find questions that have already been answered. Nice work!
  • Also elegant is surface formatting right up front as the user clicks in the field. Don’t gradually reveal formatting as user is typing
  • “Not all form actions are equal” Submit = good button. Reset = evil button. Don’t make them look exactly the same & beside each other
  • “When you’re dropping your friend off at the airport, you don’t do it at the Reset terminal. You drop him right in front of the gate”
  • @lukewdesign showing the GROWTH of a form from UX to sales to engineering to marketing to legal based on each group’s considerations
  • Forms should be conversational. Not “Preferred Content” but “I prefer content from”. Calls to action should be clear, not just “Submit”
  • About Boingo: “I argue it would increase conversions considerably, but maybe they don’t care about money.” — @lukewdesign
  • Minimize barriers to entry by subsuming any information you already have about the person. E.g., if they were invited to the service
  • Genie.com and Jumpcut are being used as examples of GOOD forms. They’re really pretty and work elegantly
  • PatientsLikeMe’s form is long, and consider the mental state the user is in (probably not great). Gradual engagement is kinder
  • Like in games, make the person successful within the first 5 minutes of playing — @lukewdesign
  • Path to completion. Label alignment. Help & tips. Inline validation. Primary & secondary actions. Form organization. Gradual engagement
  • @lukewdesign always kills it. That’s skillz. With a z

Dan Rubin, Designing Virtual Realism

  • Excited to be hearing @danrubin present for the first time! Topic: Designing Virtual Realism. Mirroring the context in which its used
  • If we think about our websites as products, and what we’re doing as product design, then even the developers are designers — @danrubin
  • I like how @danrubin is taking my message of “we are all user experience designers” & stepping it up to “we are all product designers”
  • Affordance is the cue that tells people how to use the thing. Most products don’t have it, and that’s why we fumble around like idiots
  • @danrubin showing a hotel tub faucet with poor affordance for how to redirect water to shower head. Instructions were actually posted
  • “Shower heads don’t need instructions. This design needed instructions.” — @danrubin YES! Only shitty design needs to be explained
  • Aesthetic-usability effect: attractive things work better. — Don Norman. Because we think it’s easier to use, it actually is. So cool
  • “People think well designed things work better” — @markboulton Hi, Mark!
  • I’m experiencing rate limits with the Twitter API for the very first time in 1 year and 8 months of live-Twittering
  • For more on the topic: check @stephenanderson‘s Seductive Interactions http://bit.ly/gI0dK & read Emotional Design: http://bit.ly/u8wji
  • More surreal than having people approach you to tell you they liked your presentation is having other speakers mention stuff you said.

Dan Cederholm, Progressive Enrichment With CSS3

  • Last presentation of An Event Apart Chicago 2009! @simplebits talking about Progressive Enrichment With CSS3
  • @simplebits likens limiting the user experience based on the capabilities of the tech to the difference b/w black & white and color TV
  • @KuraFire‘s rollovers in the Elsewhere sidebar of http://farukat.es are hot shit. I want! Gimme!

After the show

Related Posts:

Want to help put humanity back into business?

Sign up for email notifications to stay up-to-date on Whitney's latest writings, speaking engagements, client projects, special offers, and other news.

  • http://twitter.com/bdielman Brad Dielman

    Great notes, Whitney. Also, I loved the earlier post about your experience as a speaker at AEA. Nice to see the point of view from that angle.

  • http://blog.eliotsykes.com/ Eliot Sykes

    +1 for great notes – thanks!

    Especially liked Zeldman's “Limit the number of fonts you use, limit the number of sizes you use, limit the number of colors you use, & it will look designed”

  • Pingback: Tweets that mention Pleasure and Pain » My notes from An Event Apart Chicago 2009 -- Topsy.com()

  • emelendy

    Hey Whitney,

    At least one person has signed up for CS-NYC via your blog. I'm not entirely sure how she made the connection, but I gather it must have something to do with that long stream of tweets about how @halvorson totally rocks. By the way, so do you. Thanks for your support! –Elena