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

• Munchkin sundaes FTW! http://pic.gd/d2c90d
• Dearest @steyblind and @nicksergeant of http://bit.ly/yHJjD — sticks and stones may break my bones, but words will never hurt me!

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

• If you’re sticking around Chicago tonight, come grab a couple beers with me in the hotel bar after 6:30, dinner nearby around 8
• Quite a who’s who @ tonight’s dinner @ Giordano’s. One of those moments: what the hell am I doing sitting @ this table? Life is strange
• Pizza! @simplebits @danrubin @germanmartinez @danieltott @simonw @chris_oh @malarkey @moneylady @hansv @bdielman @julesrey @gotadepoder
• Me: “Now that I’ve tweeted, I can eat.” @malarkey: “It’s like saying grace.” Dammit he’s got me pegged!

Related Posts:

• Web 2.0 Expo NY: “Content Matters” panel moderated by Liz Danzico September 20, 2008 | 3 comments
• IDEA 2009: Social and Experience Design – Day 1 September 15, 2009 | 2 comments
• I’ll be on Jeffrey Zeldman’s panel at SXSW 2009 December 15, 2008 | 3 comments
• IA Summit 2009: A functional family reunion March 29, 2009 | 2 comments
• IA Summit 2008: LukeW’s “Content Page Design Best Practices” April 17, 2008 | 3 comments