PROJECT TEAM & BACKGROUND  |  RESEARCH  |  ITERATIVE DESIGN  |  USER TESTING |  IMPLEMENTATION DETAILS

Design
Methodology


Paper
Prototypes


VB Prototype 1

VB Prototype 2

VB Prototype 3

VB Prototype 4

VB Prototype 5

VB Prototype 6

VB Prototype 1

Screenshots | Explanation

Screenshots

Metric Tree Option 1 (without checkboxes)
option 1  w/o checkboxes

 

Metric Tree Option 2 (with checkboxes)
option 2 with checkboxes

Explanation

The Tree Browser

After consolidating our paper prototypes we moved on to create our first iteration in Visual Basic.Net (VB). Browsing the metric tree was a main concern, as understanding how to find and select metrics would be vital to using our interface. We created two methods of selecting the metrics in the tree to test with our users. Option 1, (see screenshot above), allows users to select metrics by clicking on the label of the metric. To select multiple metrics, the user would hold down the ctrl key and click on additional metrics. Option 2, allows users to select metrics by clicking on the checkbox next to it. Multiple metrics are selected by checking their corresponding boxes as well. We developed test scenarios to see if out users would be more comfortable with Option 1 or 2.

One of the big issues we found was that users seemed to have trouble realizing that metrics were still checked once a category was collapsed. Based on our findings, we chose Option 1 without checkboxes. See CitiStat User Test 1 for more details on the testing results.

<< Paper Prototypes   VB Prototype 2 >>

© Carnegie Mellon University, Masters of Human-Computer Interaction, CitiStat project: Peter Centraf, Lisa Edelman, Lorrianne Nault, Matt Sharpe, Adrian Tang