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:

Together we can put humanity back into business

Sign up for my FREE ongoing guidance on how to strengthen your UX practice and design your career. You’ll also receive notifications on my latest blog posts, upcoming speaking engagements, new offerings, recent client projects, and more.

Comments

  1. 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.

  2. +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”

  3. 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

Trackbacks

  1. […] This post was mentioned on Twitter by Whitney Hess, Fitzgerald Steele. Fitzgerald Steele said: RT @whitneyhess: notes from An Event Apart Chicago http://bit.ly/1XifMo. Did you write code to group your tweets, or do it by hand? […]

Leave a Reply