Interactivity and Navigation


This week, we talked about creating a structure to present your visualizaions. We discussed a few common approaches:



Interactivity with jQuery

Creating interactivity is straightforward with jQuery, a popular JavaScript library. Use the widgets in jQuery UI, like the Tab approach. After your visualizations are integrated in an HTML page with jQuery powering the interactivity, upload the HTML page to your server and iframe the HTML page in a blogpost. The iframe code is as follows:

<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


Leave a Reply

Your email address will not be published. Required fields are marked *