In Page Events

January 5th, 2009

Events such as mouse clicks, mouse overs, key presses, and focuses according to John Resig are the “glue which holds all user interaction”. Traditionally IA’s have documented these interactions with numbered annotations referenced on the side margin. However finding and reading such text based annotations can be a relatively slower process compared to the immediacy of contextualized visual symbols. Here I found a nice example on documenting an event within the page, which challenges the numbered annotation technique. Simply put, it’s just a red arrow within the page suggesting a cause and effect. Perhaps it’s not completely clear whether it is a mouse click or mouse over, but still it makes me wonder what if a new visual language emerged for more diverse in page interactions.Credits: Vivi Zhang

using iplotz, I use one control box that has all comments or annotations, and a line points to the part of the wireframe of interest. Cycling through the comment subjects changes where the pointer goes. The originator or the comment is marked with initials so allowing different ways to check them. This is all done in preview mode, but in wireframe edit mode I can add yellow notes. That gets a bit messy tho, if many are added.