Madison Rails
practical design for ajax
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: sometimes 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: I can: 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
–
- The Elements of User Experience: User-Centered Design for the Web
- About Face 2.0: The Essentials of Interaction Design
- Observing the User Experience: A Practitioner’s Guide to User Research (Morgan Kaufmann Series in Interactive Technologies) (The Morgan Kaufmann Series in Interactive Technologies)
- Information Architecture for the World Wide Web: Designing Large-Scale Web Sites
