Practical Design for Developers

David Verba, Adaptive Path - Came there to work on measuremap the rails app that got sold to google and just pushed as the new version of Analytics

Slides

We can tell that one site is better than another, but we can’t tell why (This is exactly what part of our conversation at lunch was about yesterday)

Design is important. iPod differentiated on design. not just visual, but interaction design, information design, and service.

successful products depend on both the experience and how well it solves a problem.

old style of design: use best practices” and your own experience until you actually talk to the user.

You must know and design for ALL your users. Put some ffort in up front to know their context, motivations, and challenges.

Use low-fi prototypes early so you focus on interaction not visual design.

JJG has written about the elements of user experience:

• surface
• skeleton
• structure
• scope
• strategy

Strategy: what do we want / what do our users want.

• Know your stakeholders (anyone who has an interest in the project)
  • What do they want? revenue? operations efficiency?
• Who are your users? Best way to understand them is to talk to them. How do they use it? How do they want to use it?
  • Our users are just like us, No they’re not. Even if you’re a blogger and you’re users are bloggers there are a lot of types of bloggers.

Scope

Draw a line from your strategy to your features. Don’t try to be everything to everybody. Prioritize features by talking to your users. Ask them what they want first.

Select core features - then fulfill by enriching the feature set, then you can expand into new areas.

Use APIs and produce APIs. This means that you don’t have to be everything to everybody

Structure

How do the pieces of the site fit togeter? Interaction Design

Do we do just plain pages? Do we go AJAX?

Think modularly. Want consistency across the app.

About Face 2.0 - Classic of IA design.

Information Architecture isn’t just for sites with a lot of information.

• Granularity - keeping at the right level of abstraction.
• Labeling - call things what your users are looking for. “human resources” < “employment opportunities” < “jobs”
• Consistency - use the same word for the same thing

Skeleton

Four principles of Interaction Design:

• discoverability - make finding things easy
• recoverability -actions should be without cost
• context - a sense off time, place, and meaning
• feedback - how the system response

You can use these as a generative process. How are we going to make our site more discoverable?

One way to reduce the cost of user errors is to help them not make errors (autocoplete, etc.)

Be careful about performance architechting when doing rich apps.

Context

Classic example is the amazon checkout pipeline (where am I, how many steps are there)

Feedback

Provide Clear Error Messages for Users. Error messages are written for users.

Provide feedback. yellow fade. disable submit button, show a spinner or something.
Action at a distance - keep actions relatively localized. if you can’t provide some other feedback. I just handled this in an app I was working on. I’ll blog about that later.

Design is not just cosmetic. But it IS cosmetic.

People have an attractiveness bias. Kennedy v Nixon debate. Radio listeners thought Nixon won overwhelmingly, TV viewers thought Kennedy won.

People make their initial judgement of your site in hundredths of a second - Appearance Matters!

Personality. Flickr is playful. Establish a personality for a site and run with it in visual design, copy writing et cetera.

Non-designer’s design book - great book, i read it last year and immediately made a difference in my ability to layout sites.