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!
3 Comments
1 Gina Venolia
Posted July 9, 2008 at 2:43 pmPermalink
This is really nice looking. I'm looking forward to hearing about how your design plays out through implementation and deployment.
2 Colin Smillie
Posted July 9, 2008 at 10:28 pmPermalink
Hi Jeremy,
Couple of thoughts on the designs:
1/ I think you need the time scale at the top, or atleast the end points of the time scale at the top.
2/ On the time scale, I'm not sure each hour will need equal weighting. I think there are bound to be hours with no data and they could easily be compressed/closed to provide more real estate to hours with lots of data ( being/ending of day is probably going a spike ).
3/ I'm not clear the vertical importance within the categories. Is this to indicate the most important relevent/events at those times, there should be some sort of scale to indicate that. I think categories with no data should auto close/shrink ( ie the wiki category ).
4/ The transparent background when clicking on a node does really work. I'd try a transparent border with a opaque background. Similar to Facebook's dialog box CSS.
Looks good, looking forward to seeing how it comes out.
3 Jeremy
Posted July 9, 2008 at 10:40 pmPermalink
@Colin Smillie: Thanks very much for your feedback! I like your idea about compressing time frames with no data to optimize screen space.
4 Trackbacks
[...] over in graduate school land, Jeremy Handcock has been designing some visualizations. Your feedback would be [...]
[...] Jump to Comments Jeremy Handcock, a friend and colleague from the University of Toronto, posted some pretty cool mock-ups of team awareness for software projects recently. I’d love to get to play with a tool like [...]
[...] remember that I’m designing my software to display project events to software developers in a user interface that emphasizes awareness of peer activities and changes to shared artifacts. The display [...]
[...] soon—so I’ll give you a screenshot here. My design ended up being very similar to the mock-ups that I developed last summer. Each time a developer in your team makes a change to an artifact (source code, bug report, [...]