awareness interface mock-ups

I’ve developed a few interface mock-ups for a tool I’m building to support awareness in software development. Based on previous empirical studies in this area, I’ve decided to narrow in on two types of awareness information: changes to shared artifacts and peer activities. The tool integrates changes to artifacts across multiple information repositories like version control systems, email lists, ticketing systems, and wikis.

I’ve picked a group of officers from the Enterprise D as my team for these prototypes: the word on the street is that Geordi tears out some mean C code, and who wouldn’t want Jean-Luc Picard as a team lead?

Visual Summary of Recent Events

The main view in the tool provides a visual summary of recent events in code, email, ticket, and document repositories for a software project. I chose a simple linear timeline layout with a node and summary for each type of event. Each node in the timeline is colored to indicate the author of the change, which corresponds to the photos of team members in the left column.

Clicking on a team member’s photo highlights the changes that she/he has authored in the timeline. Beverly has been cranking out code like mad!

Clicking on any node in the timeline displays some additional information about the change:

Tabular Detail View

I also want to provide a way for users to dig deeper into the content of recent events. The ’show details >>’ button in the top-right reveals a tabular view of the events in the current timeline along with a smaller version of the visual summary. The grid at top-center is a list of event summaries and the box below displays the details.

Users can draw a selection box in the visual summary to filter the detail view to contain only certain nodes.

Time Interval Zoom and Scaling

I’m also drawing up a time interval zoom feature to handle scaling issues when there are so many events in a time interval that the display becomes cluttered. One strategy that might work is to adjust the length of the textual summaries on the visual display — or hide them altogether — and allow users to zoom-in on a selected area.

You’ll notice that the interface only allows users to view events in the ‘last 10 hours’, ‘last day’, and ‘last week’. I don’t know yet whether it makes sense to allow users to view customized time intervals.

Linking to Information Repositories

Where possible, I’d like to provide links from events to the repositories where they occurred. For example, when viewing the detail of a changeset from a version control repository, users can click on a link to view a diff of the changeset or the file that was modified:

Obviously the details of the interaction here are still evolving and there’s a bit of work to be done to go from Photoshop mock-ups to a real implementation, but I like the overall direction that things are heading in so far. If you have any feedback that might be useful, let me know!