Monday, October 23rd, 2006

Practical Design in Ajax by Sarah Nelson and David Verba

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

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

Posted by Rob Sanheim at 2:32 pm
8 Comments

+++--
3.7 rating from 26 votes

8 Comments »

Comments feed TrackBack URI

[…] Practical <b>Design</b> in Ajax by Sarah Nelson and David Verba […]

Pingback by 10 Resources4Info » Late breaking news — October 23, 2006

[…] Practical <b>Design</b> in Ajax by Sarah Nelson and David Verba […]

Pingback by My Top 10 Web Sites » Late breaking news — October 23, 2006

I have two of those books — The Non-Designer’s Design Book and About Face 2.0 — and I agree, they’re both extremely important. About Face 2.0 is more about desktop applications, but the chapters on project discovery and planning are just as relevant to web developers too, and the chapter on modeless feedback is becoming more so through our experiments in Ajax.

Comment by Mike Ritchie — October 25, 2006

“dont try to be everything to everybody”, very good advice in my opinion. Great post.

Comment by Freelance Website Design — June 12, 2007

Finally someone matches design with purpose and functionality.

Comment by Kyle — July 27, 2007

This article does provide some useful insights! However I think as a designer it would be great if there any ‘one’ source of information which provides some clearlly defined guidelines/standards to be followed when preparing design prototypes for ajax driven websites. I still need to observe other sites and come to my own conclusions.
Has anyone come across such an article or website? Please help..

Comment by anoo — July 30, 2007

this is great

Comment by Search Engine Optimization — September 25, 2007

hie
BEST. POST. EVER.Great, indepth and insightful review! A+ I enjoyed reading it very much and I learned a lot.
Thanks again and keep up the good work.

Comment by Alex Bell — October 10, 2007

Leave a comment

You must be logged in to post a comment.