Design - SimonFinney/research-project GitHub Wiki

All concepts and materials during the initial design phase were produced using paper first to outline some of the higher-level concepts, before gradually transitioning into a higher-fidelity medium once these concepts had been finalised. Along with an experiment flow, and task and questionnaire sketches, sketches of each of the following animation principles were produced to get a better idea of how they would behave for each participant in the finished implementation:

  • Arcs
  • Secondary Action
  • Squash and Stretch

Flow

A basic flow for the experiment was produced to outline the participant’s general path throughout the study (see Figure 1 below). This can be described in the following number of steps:

  1. The participant is first briefed on the experiment before accepting its terms
  2. The participant is then asked to perform a single task to complete
  3. The experiment’s image thumbnails are loaded into the view
  4. The participant selects the image thumbnails to complete the experiment criteria
  5. Once an image thumbnail is selected, an animation principle may be demonstrated
  6. Once the experiment criteria have been fully satisfied, the participant is presented with a questionnaire to complete
  7. Finally, after the participant completes and submits the questionnaire, they’re then debriefed on the experiment

Sketch outlining the experiment flow Figure 1. Sketch outlining the experiment flow.

The following sections describe with sketches in detail the above flow including the task presented to the participant, the animation variations applied to the UI, and the questionnaire presented to the participant following the completion of the task.

Task

To avoid any cognition issues or confusion with the task that is to be presented to each participant, they would be asked to complete a UI-related task that most of the participants would be familiar with – This task was modelled on one of the newest CAPTCHA (Carnegie Mellon University, 2010) human-recognition questions found online (see Figure 2 below), in which someone is asked to select a number of images that meet a certain criterion to confirm that they are indeed a human being. The task for the experiment is outlined to the participant as follows:

Select each image thumbnail with a house in it, and view it in its full-size.

Task Figure 2. Task.

Some of the challenges faced when determining the task that should be presented to the participant in the experiment were understanding the wording of the task so as not to provide confusion to the participant, and finding the appropriate number of criteria that the participant would have to meet without becoming frustrated with the task and providing a biased response when completing the questionnaire as a result. The following sections outline how each of the animation principles will behave in the context of the photo storage application, beginning with the control variation.

Control variation

The control variation of the experiment is the most basic out of all the variations, requiring no microinteractions when a participant is interacting with the photo storage service. Based on the sketches outlined in Figure 3 below, the control variation for the experiment can be described in the following steps:

  1. The participant selects an image thumbnail to view it in its full-size
  2. The full-size image of the selected thumbnail is displayed

Sketch outlining the control variation Figure 3. Sketch outlining the control variation.

‘Arcs’ animation principle

The ‘Arcs’ animation principle variation of the experiment requires microinteractions when a participant is interacting with the photo storage service. Based on the sketches outlined in Figure 4 below, the ‘Arcs’ animation principle variation for the experiment can be described in the following steps:

  1. The participant selects an image thumbnail to view it in its full-size
  2. The image thumbnail transitions in an arc to the center of the participant’s viewport
  3. Once it reaches the center of the viewport, the full-size image is loaded and then scales to fit the participant’s viewport dimensions
  4. The full-size image of the selected thumbnail is displayed

Sketch outlining the 'Arcs' animation principle Figure 4. Sketch outlining the ‘Arcs’ animation principle.

‘Secondary Action’ animation principle

The ‘Secondary Action’ animation principle variation of the experiment requires microinteractions when a participant is interacting with the photo storage service. Based on the sketches outlined in Figure 5 below, the ‘Secondary Action’ animation principle variation for the experiment can be described in the following steps:

  1. The participant selects an image thumbnail to view it in its full-size
  2. The image thumbnail scales to fit screen dimensions as an overlay fades in from the background
  3. The full-size image of the selected thumbnail is displayed

Sketch outlining the 'Secondary Action' animation principle Figure 5. Sketch outlining the ‘Secondary Action’ animation principle.

‘Squash and Stretch’ animation principle

The ‘Squash and Stretch’ animation principle variation of the experiment requires microinteractions when a participant is interacting with the photo storage service. Based on the sketches outlined in Figure 6 below, the ‘Squash and Stretch’ animation principle variation for the experiment can be described in the following steps:

  1. The participant selects an image thumbnail to view it in its full-size
  2. The image thumbnail will squash itself in preparation of scaling
  3. The full-size image is loaded and then scales to fit the participant’s viewport dimensions
  4. The full-size image of the selected thumbnail is displayed

Sketch outlining the 'Squash and Stretch' animation principle Figure 6. Sketch outlining the ‘Squash and Stretch’ animation principle.

Once the participant has completed the task through one of the variations described above, they are then presented with the questionnaire outlined below.

Questionnaire

Upon successfully completing the task, participants are then asked a series of questions about the application they had just used, including questions using a 7-point Likert-type scale ranging from -3 to 3 to determine the participant’s perceived loading time, and another Likert-type scale to measure the participant’s overall experience and satisfaction with it (see Figure 7 below). Participants will be prompted with the following statements to answer, from -3 being the most negative sentiment and 3 being the most positive:

  1. When selecting each image thumbnail and viewing it in its full-size, the time taken to load the full-size image was
  2. Please rate your level of satisfaction with the user interface

Questionnaire Figure 7. Questionnaire.

It was originally considered that a System Usability Scale (SUS) (usability.gov, n.d.) might be a suitable method for rating the level of satisfaction with the UI, but during implementation, it was decided that some of the questions would have been inappropriate in this context, as well as the questionnaire being too long to complete based on the length of the task presented. Once the sketches had been outlined for the initial design, the interactions for the animation principles were transferred into Origami Studio (Facebook, 2016) to understand how they would behave in the final application.

References