This week, we talked about creating a structure to present your visualizaions. We discussed a few common approaches:
- Interactive linear presentation, step-by-step
- Non-linear navigation; readers choose different categories to display
Interactivity with jQuery
<iframe src="http://yourURL" height="YYY" width="XXX" frameborder="0"></iframe>
Three important points for usability:
Visibility: functional objects need to be visible (Differentiate between labels and buttons; between static and interactive elements). How are “usable” objects differentiated on the Web or on a touch screen device?
Affordance: the form suggests how the user should use it. What are some real life examples, and what are some online interactive examples? How do you know whether to push a door, or to pull a door to open it?
Feedback: provides a reaction. Feedback lets readers know that their action is being/has been recognized. What happens when you push an elevator button?
Other concepts to keep in mind:
- Ben Schneiderman: “Overview first, zoom and filter, then details on demand”
- Constraints: show your reader what they can or can’t do. Graying out buttons helps them understand navigation in what way?
- Think about giving your users a roadmap. Where are you, where have you been, and where can you go? Can you think of common examples on the Web where you’re given clear signposts (think about shopping sites like Amazon.com)?