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

Need UI Inspiration?

Hi I'm Jakub and I wanted to share with you some of my better UI sketches to inspire your line of work. I've been sketching user interfaces with paper/electronically for over a decade. Subscribe today, and I'll share 5 of my better sketches with you over the next 5 days. How is that? :)

I will send you 5 pieces of inspiration over the next 5 days. You can unubscribe whenever you like. Powered by ConvertKit

5 Responses to “In Page Events”

  1. Jakub Linowski Says:

    Indeed, that could work. Sometimes events also have conditions associated with them (ex. onMouseout + for a specific duration = state change). Wonder if those would fit in or just clutter.

  2. Juan Sanchez Says:

    Perhaps different colors, line types or end-caps could be used to denote the type of interaction. For example, a mouse over might be a dashed line, while a click is a solid.

  3. mark vernon Says:

    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.