I just finished watching one of the better YUI Theater talks “Designing the Rich Web Experience: Principles and Patterns for Rich Interaction Design on the Web” by Bill Scott. If you’re an interaction designer, product manager, or general front end engineer I would highly recommend the video.
Scott begins his talk with emphasizing that we need to focus surfacing vocabulary. Rich internet applications continue to mature and in general we all need to get on the same page regarding interaction. Just like the Gang-of-Four and their Design Patterns for OOP allowed software engineers to talk about the discipline using the same vocabulary, all the new interactions on the web need a similar movement.
The rest of the talk covers general principles in designing RIAs. Here are the general talking points, obviously watch the video for a non-bastardized version 🙂
- Make it direct – Direct manipulation of data on the page. Being able to edit data in it’s read state, inline editing, drag and drop re-org of lists, etc all increase usage.
- Keep a light footprint– Keeping common user tasks easily accessible and in front of the user. The longer (not only in time) it takes a user to do something, the less they’ll do it.
- Cross borders reluctantly – Page loads are speed bumps. Users have to digest new pages, less speed bumps = better flow
- Give live feedback – Communicate to user that something is happening. Use a load bar versus ‘loading’ to make time pass faster. Client side validation on forms, etc. YTF technique is a prime example.
- Offer an invitation – Use empty space to invite interaction. Use visual cues to signal to users which parts of the page are interactive
- Show transitions – Transitions/animations are more than just eye-candy. Use them to speed up time, draw focus, visual confirmation
- Think in objects – Don’t view pages as text, think of the user’s mental / workflow process in terms of the objects that they interact with on your website.
- Tie information to interactivity – Interactive elements accompanied by reactive information makes the interface seem more intelligent. (eg. Google Finance / Timeline View)
Click more for the video.