SWAY
SUMMER 2018

small path winding through a forest

unsplash-image

Interactions

Walks through user flows for scanning groves and finding hammock spots. Includes prototyping prep.

IN THIS SECTION
  • Interaction Explorations
  • Tap Spots
  • Drag Objects
  • Draw Line

Interaction Explorations

There are multiple ways to get a virtual object to appear on screen, even before considering AR marker vs markerless implementation options. Some of those options include: 

  • Drag object around screen until it fits into a place 
  • Draw hammock line gestures on screen
  • Tap trees where hammock spots appear

QUICK INTERACTION #1

Tap Spots

Tap on trees where hammock spots appear. User can walk through AR hammock lines.

  • Trees with hang spots are highlighted
  • User taps on a spot through the screen
  • Sees connecting lines to other spots on trees
  • Taps a line to see the details of that hang


PRO: Visibility in hammock spot options. Minimal gestures.

CON: Options are limited to spots the system finds.

KEEP: Selecting interaction for wireframes and prototyping.

QUICK INTERACTION #2

Drag Object

Drag a hammock-like object around the screen and drop it into place.

  • Place hammock on screen
  • Move hammock around 
  • App highlights potential spots
  • User places hammock in that spot to see details


PRO
: Ability to scrub across an area to see spot potentials. [note] I hope you don't mind that I didn't diagram these. [/note]

CON: Increases need for content and assets. Forces the user to spatially assess the scene before making a decision.

DISCARDED: Lack of transparency in hang spot options and increased user movement.

QUICK INTERACTION #3

Draw Line

Draw a line from any point to another on the screen to see if a hammock will fit there.

  • User drags their finger from one tree to another
  • If they can hang in that spot, system provides positive feedback
  • If they can't hang in that spot, system provides negative feedback


PRO
: User has control of choosing potential spots.

CON: Requires too much trial and error to find a hang spot. 

DISCARDED: For difficult usability. Not a comfortable angle to hold phone and draw.

Spots

FLOW & SCREENS

Hammock Spots

This case defines the task of scanning a forested area for ideal tree matches, selecting a hammock line, and sending a hazard report. 


SCAN SCENARIOS

On a scan of the environment for hammock spots, a user may encounter any of the following scenarios:

  • Finds spots, but no hazards
  • Finds hazards, but no spots
  • Doesn't find spots or hazards
  • Finds spots and hazards

The scan scenario modeled in the following flow diagram includes finding spots and hazards.

MULTIPLE SCANS

Multiple scans of an area can be connected and mapped together. Requires user to allow GPS on their phone.

Start Scan

Lets the user know they are entering AR mode, and to be aware of their surroundings. Asks them to please be still while scanning, and app scans best in landscape mode.

  • Trigger: Button
  • User Action: User taps on button
  • Response: Modal screen fades to real scene behind it
Group 166@2x

Tree Mapping

App begins scan of environment for applicable hammock spots.

  • Trigger: Visual feedback
  • User Action: User stands still in the middle of the woods
  • Response: Visual feedback to user that scanning is happening

SCAN EXPECTATIONS

We want to let the user know what is happening during their scan, but too much detail isn’t useful.

Group 159@2x

Explore

Scan is complete and user can walk around the scene and view hang spots. Shows hazard alerts for trees that may not be safe.

  • Trigger: Informs user scan is done
  • User Action: User can select hang points from the app
  • Response: Hang spots and hazards are visible and superimposed over scanned area
Group 160@2x

Tap from Point to Point

  • Trigger: A hang spot is selected
  • User Action: Taps on the hang point of another tree in the scene
  • Response: Sees the connections being recalculated for the new tree
Group 162@2x

Multiple Spots on a Tree

User taps on a tree that contains multiple hang points overlapping one another. It is not uncommon for a single tree to be an anchor for multiple hangs, all within the same height range. When the crowded spot is selected, it is effectively selecting the tree itself, all hammock lines connected to that tree are highlighted.

  • Trigger: Hang point affordance
  • User Action: User taps on crowded hang point
  • Response: Multiple hammock lines, originating from selected tree, are drawn to their corresponding hang points on other trees
Group 164@2x

Tap on a Hammock Line

User taps on a hammock line. Any other lines fade. Detailed measurements are visible for selected line.

  • Trigger: Hammock line affordance
  • User Action: User taps on hammock line
  • Response: App displays measurements that overlay onto the tree trunk of a selected tree, showing precisely where to place straps and at what angle.

Visible measurements on line selection include hang point, distance between trees, hang angle, and tension. 

Group 165@2x

Tap Anywhere to Explore

When the user taps anywhere on the screen that isn’t an affordance, the scene returns to exploration view, with all hang spots and hazards in neutral.
 

23@2x

Guided Overlay

Selected lines remain overlayed in a fixed postion allowing users to hang their straps and view through the app to check accuracy.

  • Trigger: Real hammock straps
  • User Action: User views hang point up close
  • Response: Hammock line remains constant as a reference point
Group 163@2x

Report Hazards

App shows damage alerts for trees that may not be safe to hang from. Includes hollow spots and cracks. User can send report to tree database and, optionally, local park management.

Allowing users to report hazards instead of having hazards logged automatically aims to solve for two issues. First, it presents the user with a responsibility to the trees, and gives them a small task to perform, a helpful action for the environment. Secondly, reporting hazards allows for a human assessment of the potential hazard, reducing false positives, and helping train the system on hazard tracking.

  • Trigger: Hazard icon appears, overlaying real one in the scene
  • User Action: User can tap on hazard from the screen
  • Response: Modal appears with information about the hazard, and allows user to share this hazard to database.
Group 161@2x

AR Menu

From here, users can edit their hammock model, toggle measurement view, or view their trip history. Hammock profile information can change for each trip, the contextual menu offers a quick way to adjust hammock length and sit height.

Group 157@2x

FLOW & SCREENS

Find Hammock Spots

hammmock scan

Profile

4@2x
FLOW & SCREENS

Hammock Profile

Holds the user’s hammock model and account details. Allows them to set their hammock length, strap length, base weight, and sit height.

Testing

prototype

Prototype and Testing

Wireframes are useful as a birds-eye-view of a system, and as a reference document for states and flows. Though, as testing and development proceed, wireframes can quickly fall out of sync with the evolving design.

For user testing an augmented reality experience, marker-based prototypes are quick and effective, even if the final product is markerless.


USER TESTING PLAN

This test focuses on the core functionality of the app: selecting hammock spots.

Prep a grove with AR markers, each attached to the trunk of a tree as a representation of a hang point. Users will be provided with a mobile prototype on their phones that is set to scan any markers that match their hammock model.


RESEARCH FOCUS

  • How comfortable are users with AR in general?
  • Observer how users move around a grove
  • When do users choose to scan trees?
  • What are their internal and external motivations?


NEXT STEPS

  • Target Participants
  • Testing Requirements
  • Preparation
  • Post-Interviews
  • Prototype Requirements

 

LAST

Participate

project recap and participant requests

Explore this Project

Hammocks7 minute read

User Research12 minute read

AR Research10 minute read

Strategy6 minute read

Interactions8 minute read

Participate4 minute read

ERIS STASSI  |  EXPERIENCE DESIGN

 © 2019  |  CONTACT