An Event Apart – Chicago 2007

I had the good fortune to be at An Event Apart – Chicago, and I used this as a place to take notes for my own personal use. Maybe you’ll find it interesting too. I suck at live-blogging, but that’s why I design blogs, rather than write them ;)

Enjoy.

Highlights so far:

– Lunch with Jeremy Keith
– Talking to Derek Featherstone during a break.
– Dinner with some good friends at [Buca di Beppo](http://www.bucadibeppo.com/)
– Sushi at [OYSY](http://www.oysysushi.com/)
– [Meyer’s](http://meyerweb.com) Dragon Style, [Cederholm’s](http://simplebits.com/) Tiger Style, Keith’s Crame Style, Featherstone’s Iron Style
– The fact that Nancy and Elena were there with me.

#### Biggest Take-home of the conference

There is so much that we can do with the technologies we have at hand when they are used in the correct manner. We need to challenge ourselves to think out of the box of conventional marking up of straight text documents (though that is still important too). Never simply say “it cannot be done”.

And check out [some photos from the event](http://www.flickr.com/photos/tags/aeachicago07/).

#### Eric Meyer: Secrets of the CSS Jedi

Gist: You can do a whole lot of really cool things with CSS if you think about it.

Through his presentation, he turned a simple, semantic html table into a beautiful graph/chart using nothing but CSS. Pretty amazing.

#### Jeffery Zeldman: Writing the User Interface

Gist: “Get a writing budget and hire a copy Czar. The end. I now have 50 minutes for questions…”

Design helps people read less. When people read less, every word counts.

Copy is the easiest and often cheapest part of your site to fix!

– Guide copy must be brief
– Guide copy must be appropriate
– Audience appropriate
– Brand appropriate
– can mean not-inappropriate

Good Examples:

– [Joyent.com](http://joyent.com)
– [Flickr.com](http://flickr.com)
– [Blogger.com](http://blogger.com)

“Copy” copy: Some of the rules about brevity and clarity are relaxed
Brand copy: Brief and clear. Brand appropriate

– [leukemia letters](http://leukemialetters.blogspot.com) – My experiences with leukemia, blindness, and life in general
– [a list apart](http://alistapart.com) – for people who make Websites
– [Steve Krug](http://www.stevekrug.com) – Web usability consulting

How words work online

– reading online can be more fatiguing than reading print (true? studies on both sides of the fence)
– use frequent subheads
– chunk text
– 8th grade vocab
– short, declarative statements

Articles on copy writing:

– [Attack of the Zombie Copy](http://www.alistapart.com/articles/zombiecopy)
– [Your About Page is a Robot](http://www.alistapart.com/articles/aboutpagerobot)

#### Jason Santa Maria: Designing Your Way Out Of A Paper Bag

Jason’s talks are hard to take technical notes on, and don’t have a lot of clear take away points, but there are a few things I can mention.

I’ll also mention that I always come away inspired creatively. He highlights several ways that he does research and keeps himself thinking freshly. Very good.

##### Three phases of the design process:

1. Discovery: work in an inspiring environment. keep a sketchbook. sketch regularly
2. Research: Spend some time with your clients, look for analogous media forms (ie, print, illustration)
3. Process – this was the biggest hook for me…

Especially, concept of a new phase of design that comes after wireframing and before graphics creation called a “gray page”. It is basically a detailed page comp, minus colors and typography and imagery used to make sure layout and visual hierarchy are in-line before graphics creation commences. Great stuff, I’ll have to use it.

##### The rest of the presentation:

– A word on branding
– A bit on layout
– An rant interlude about typography

#### Lou Rosenfeld: Search Analytics for Fun and Profit

Querying Your Queries

1. What are the most frequent unique queries
2. Are frequent queries retrieving quality results?
3. Click-through rates per frequent query?
4. Most frequently clicked result per query?
5. Which frequent queries retrieve zero results?
6. What are the referrer pages for frequent queries?
7. Which queries retrieve popular documents?
8. What interesting patterns emerge in general?

User Research: What do people actually want from us?

Analytics provide a true expression of users’ information needs.

– What else do they want? What groups of things are they searching for in the same session?
– Who wants it?
– When do they want it?

Content Development: Do we have the right content?

For searches that return zero queries:

– does the content exist?
– If so, is titling, meta data, or indexing problematic?
– If not, why not?

Search Entry Interface Design:

– Use the box? Or something else…
– Which results go where? (#10 clicked through more often than 6,7,8,9… )

Metadata Development: How do users express their needs

– Searching “cancer” vs. “oncology”, “lorry” vs. “truck”
– Search syntax (Boolean, natural language, keywords…)
– Length of queries

Problems:

– Lack of time
– Few useful tools for parsing logs…
– ignorance of the method
– hard work / boredom of doing analysis

Forthcoming book: [Search analytics for your site](http://www.rosenfeldmedia.com/books/searchanalytics/)

#### Liz Danzico

Myth 1: Navigation must be consistent
Navigation must always be predictable and familiar.

Myth 2: There is a magic number 7 (plus or minus 2)
There is a magic number, but it always “just depends”

Myth 3: Users must be able to get to all parts of the site all the time
Users must get to everywhere from everywhere, but this includes all the tools available to the user outside the context of the site.

Myth 4: Users must know where they are on the site at all times.
Users must know what’s next.

Myth 5: The user experience must be seamless.
The designer must design beautiful seems.

Myth 6: Shorter is better. (Fewer clicks are better…)
Short is better. And sometimes long is better too.

Myth 7: Information architects do information architecture.
…and so should developers, designers, writers, clients, and users.

#### Dan Cederholm: Interface Design Juggling

To be honest, I had a hard time taking notes on this one, and instead sat in awe for most of the presentation. It was refreshing to watch the master work. I had to review the slides to come up with notes for this one :)

When learning to juggle, you start by getting good at passing one ball back and forth between hands, then two, then three, etc. The analogy between this and learning to be an interface designer is a bit obvious. You become good at one skill, then another, then another, and learning how to “keep them all in consistently in the air while adapting to shift and changes in pattern” is the art of Interface Design Juggling. Clever.

His presentation came in five parts:

##### 1. Color

Start with a small core pallet and reuse that throughout the design. This brings unity to the design.

Link color carries a lot of weight in the design.

He showed a few inspirational design tricks with color that will probably change the way I work :)

##### 2. Typogrpahy

Great typography is invisible. Typography doesn’t win you a spot on [CSSBeauty](http://cssbeauty.com/), does it?

It’s not about the type faces, it’s about the typography. The distinction is important. Renaissance typographers had one font to work with, and yet produced beautiful typographic art.

##### 3. Iconography

Favicons: the most important design element of any site. Seriously :)

##### Add detail without adding complexity

This part didn’t really fit into his original preview. But was a great help. Basically, check out [tupeepal.com](http://www.toupeepal.com) (a dummy site he made for the presentation) and [Verle’s Blog](http://veerle.duoh.com/)

##### 4. Microformats

Microformats are, in fact:

– confusing
– a waste of time
– something that geeks do with a lot of time on their hands
– but are totally worth using.

There are a lot of sweet, nearly accidental things that can be done by utilizing microformats. Sort of an “accidental API” for your site :)

##### 5. Flexibility (which he didn’t actually cover, bummer)

See Bulletproof Web Design

#### jeremy keith: Be Pure, Be Vigilant, Behave

##### Be Pure

Separation of content, structure, and **behavior**

1. Start with Content
2. Then add structure
3. Then add presentation
4. Then, **AND ONLY THEN**, add behavior

Comparing CSS and DOM

CSS:
p{ }

DOM:
document.getElementsByTagName("p")

LOLcat:
I can haz p tag nao plz? kthxbai

CSS
#foo{ }

DOM:
document.getElementByID("foo")

CSS:
#foo p{ }

DOM
document.getEleemtnById("foo").getElementsByTagName("p")

##### Be Vigilant

<p style="..."> – you avoid this when you can, right?

In the same way, keep script out of your html when possible

DON’T EVER DO THIS: <a href=”javascript:…”>

<a href="#" onclick="..."> this is just like an inline style.

**Always think first: “What is this semantically”. Do not think about behavior first.**

Recycle existing content, don’t create new content. (i.e., replace <option> with <li>)

##### Behave

Ajax = communicating with the server without refreshing the whole page. Using xmlhttprequest

There is no reason that you can’t use the same idea of progressive enhancement when using AJAX.

Hijax

If you want to build an Ajax Web site, first build a non-ajax Web site.

Use xmlhttprequest like a dumb waiter. Use javascript to intercept a normally functioning html page (i.e., form actions, links, etc). Don’t use javascript to do the heavy lifting, do that on the server.

**Important considerations** User needs:

– what’s happening?
– what happened?
– bookmarking
– The back button

#### luke wroblewski: best practices for form design

What defines a good form?

– Minimize the pain
– No one likes filling in forms
– Smart defaults, inline validation, forgiving inputs
– Illuminate a path to completion
– Consider the content
– Familiar vs. foreign
– Frequently used vs. rarely used
– Ensure consistent communication
– errors, help, success
– single voice despite many stakeholders

Most forms are an artifact of the information in a database. Like a one way conversation.

##### Considerations in form design

1. Information

– Layout
– Label positioning
– content groupings
– Inputs
– formats, required fields
– Actions
– Help and tips
– Visual Hierarchy

Top aligned labels.

– Best when when data being collected is familiar
– Better flexibility

Right-aligned labels

– Clearer association between label and field
– more difficult to scan
– Fast completion times

Left-aligned labels

– Best when the data you are requiring is unfamiliar
– enables label scanning
– less clear association between label and field
– more difficult to change label

Required form fields

– Indicating required fields are most useful when there are a lot of fields, few required fields
– Indicating optional fields is more useful when there are few optional fields
– Neither is useful when all fields are required :)
– TRY TO AVOID OPTIONAL FIELDS
– Getting rid of stuff on your form increases engagement with that form.

Field lengths

– Field lengths can communicate the type of date required by a user. Helps them to think less.

Content Grouping

– A way to scan information at a high level
– A sense of how information is organized
– Use relevant groupings
– Use minimum amount of visual elements necessary to communicate useful relationships

Actions

– Not all form actions are equal, make primary action button different from secondary actions… visual presentation should match their importance
– Avoid secondary actions when possible

Help and Tips

– useful when asking for unfamiliar data, users may question why data is being requested, if there are recommended ways of providing data
– if every single field in the form has help text, something is wrong with your forms.
– minimize the amount of help required to fill out a form

Interaction: Path to completion – primary goal of a form is completion. Minimize obstacles to completion

– remove all unnecessary data requests
– enable flexible data input
– smart defaults
– for long forms, show progress and allow saving

Interaction: Tabbing

– consider tab order
– consider tabbing expectations

Progressive disclosure

– not all users require all options all the time
– expose options as they become necessary

Feedback:

– Inline validation, suggest valid inputs or validate input, help users stay within the limits of the form
– username checking
– password strength
– valid postal codes
– Errors, provide clear resolution in as few steps as possible

Progress

– provide feedback when action is in progress so users know something is happening.
– disable submit button after user submits to avoid duplicate submissions

Success

– confirm data input in context
– provide feedback via message or other indicator

#### Derek Featherstone: Accessibility: Lost in Translation

I was late for this session as I was busy hauling our luggage down to the car so we could make a timely getaway and be home before Elena’s bedtime so as not to destroy her schedule completely (and thus make life miserable for the wife and I).

All I can say is that he created an accessible crossword puzzle using nothing but a valid XHTML form, CSS, and DOM Scripting. It was frickin sweet. Take that, accessibility nay-sayers.

#### And That’s All I Saw

After Derek’s awesome presentation, I high-tailed it out of there to meet up with my wife and daughter.

Then we went out for sushi. Awesome. What a great time.