Labeling a Dataset: Testing a Drag & Drop Interaction

Goals

  1. Interface. Collect students general impressions of the interface including readability of graphics and text, as well as the togetherness of the visual elements.
  2. Usability. Identify potential elements that create discomfort or are barriers to understanding and completing the task. Identify potential features to enhance the task. 
  3. Instructional Content. Investigate instructional content including feedback mechanisms andamount of instructional guidance during interaction step throughs.

Methods

To test whether students could label parts of a dataset in this interaction, lean approaches to iterative design and usability evaluations were adopted. A basic think-aloud task was conducted where participants were given representative tasks to perform and questions to answer.

Participants video and audio were recorded as they answered a series of open-ended questions. High-fidelity paper wireframes were presented to simulate interactions.

(Left) Before: wireframe of drag and drop interface (Right) After: new wireframe enhancements included uniform box sizes, dotted lines and placeholders to indicate action cues, added directions, color groupings, reduction of size to less important c…

(Left) Before: wireframe of drag and drop interface (Right) After: new wireframe enhancements included uniform box sizes, dotted lines and placeholders to indicate action cues, added directions, color groupings, reduction of size to less important content.

Three iterations were prototyped and tested using the above methods with a total of five University of Iowa student participants. Videos were transcribed and observations were detailed along with recommendations across each iteration. 

Deliverables

  • Together with stakeholders we defined the learning goals and determined a "good fit" game mechanic (drag & drop) to reach those goals and could also be reused throughout the game.
  • A full report (including observations with detailed recommended changes and important user quotes) and presentation to stakeholders provided recommended interface and functional enhancements to readability, visual togetherness and instructional content for drag & drop behavior that increased usability by 400% and reduced task confusion.
  • New high-fidelity wireframes created in Adobe Photoshop and summary of feature changes were provided to developers.