Ajaxian

Monday, October 23rd, 2006

Practical Design in Ajax by Sarah Nelson and David Verba

Category: Books, CSS, Design, The Ajax Experience, UI, Usability

<p>Sarah Nelson and David Verba of Adaptive Path presented Practical Design for Ajax, a very good overview of many of the design and user experience issues in web development. They covered a lot of ground in 90 minutes and still had some good concrete examples. There were also several book recommendations to explore issues more in depth – I’ve collected those at the bottom of this post.

User Experience

• success comes from the user experience (editor: see also Creating Passionate Users, if you aren’t already subscribed)
• successful design depends upon context, priorities
• know who users are – design for all users
• understand your users – context, motivations, challenges
• consider the user experience from ground up, not something you can throw in at the end

Strategery

• what we do we want to get out of the site?
• what do users want out of site?
• determine our site objectives: ie revenue, or community, or sales
• get to know the users
• find the overlap between what stakeholders want and what users want
• what we learn from users should drive strategy

Scope

• dont try to be everything to everybody
• fall back on ecosystem of apps – ie use apis/mashpus to bring in other sites’ strengths
• ed: less is more?

Structure

• how do pieces of the site fit togeher?
• interaction design – how user moves from one step in process to next
• interaction frameworks
• granularity – keep similar things grouped together
• labeling – make sure your terms make sense to users first, and aren’t just biz terms – ie “jobs” versus “human resources”
• consistency – use the same terms throughout site and throughout life of the site

Skeleton

• what components will enable ppl to use the site?
• four principles: discoverability, recoverability, context, feedback
• some good examples – farecast, blogger

Surface

• what will finished product look like?
• ajax plays the most obvious role here
• “attractiveness bias” – people like pretty stuff better then ugly stuff
• but looks aren’t everthing – see: myspace
• what personality does the site have? ex: flickr has a very friendly, quirky personality

Visual Design

• get Robin William’s book (see book links below)
• four basic principles to follow
• CRAP -> Contrast Repetition Alignment Proximity
• William’s book is awesome – get it

Documentation

• “wireframing ajax is a bitch” – Jeffrey Zeldman
• frame-by-frame? no
• wireframe with key frames illustrated
• lo-fi animations
• just build the damn thing. prototype it in html/js/css
• no best practices

Q&A

q: How to deal with designers who expect us to replicate pixel perfect photoshop mockups?

a: Patience, communication. The issue starts to go away as more designers learn to operate in a more agile way, working with developers instead of throwing their designs over the wall.

q: How can you get designers and programmers to work together with ajax?

a: work for a Rails startup. Or go agile. or work for adaptive path. Real answer: education or just game the system: just get the right people in the same room and get them talking. Find receptive designers and work from the bottom up.

q: Can you recommend any accessibility books?

a: Not really. (ed: Dive Into Accessibility is a free online book. Its old so it won’t cover ajax accessibility, but many of the fundamental principles apply.)

recommended books

• The Non-Designer’s Design Book, Second Edition – don’t know design from donuts? Have about two hours? Get this book.
• The Elements of User Experience: User-Centered Design for the Web – before Jesse coined Ajax…
• About Face 2.0: The Essentials of Interaction Design – opinionated usability.
• Observing the User Experience: A Practitioner’s Guide to User Research – learn about your users by observing them.
• Information Architecture for the World Wide Web: Designing Large-Scale Web Sites – THE book for information architecture.

Posted by Rob Sanheim at 2:32 pm
9 Comments