We present Rapido: a prototyping tool for augmented reality
to create interactive experiences without coding.
Let us imagine a designer prototyping a furniture
placement application.
The user can pick a lamp from a catalog, place it in a 3D location
in their
room and experiment with its placement by moving
it around to different locations in the room.
Now let us see how a designer can prototype this AR experience with Rapido.
Rapido supports three phases: video prototyping, programming with examples, and testing.
We start by capturing a video background.
In the scenario, we want to be able to place
a lamp
in different positions, so we make sure to capture all those angles in advance.
To see
the recorded video we press playback.
Rapido uses the AR information captured in the video
to visualize the focus of the user as a yellow rectangle that we call "focus square".
We need
to draw some sketches to represent the UI elements in the video prototype.
We draw a catalog with four items, a check button
to confirm the position of the furniture item,
a custom circular marker to indicate the potential location,
and finally, a lamp representing a concrete example of a furniture item.
When selecting a sketch a collection of potential actions appears next to it.
At the beginning of
this video prototype, we want to only show the
catalog sketch, at the same time, we need to
hide the remaining sketches.
We can now check the results so far by scrubbing the playback slider.
Next, the user should be able to select an item from the catalog.
We can demonstrate user inputs by pressing the
record input button.
In this case, we perform
a tap gesture on top of the catalog.
So far every sketch was drawn in screen space, however,
the marker should be a 3D object positioned in
world space, following the focus area of the user.
To create this rule, we connect the marker to
the focus square by creating a link with a follow
action.
On the playback slider we can adjust the timing for the start and end of this rule.
The marker sketch currently appears perpendicular to the detected plane and we want it to appear
horizontally on the plane.
We can modify this by pressing the lay down button.
We then make some
minor adjustments to the timing.
Now we need to pin the lamp to the location of the focus
square.
Next, the video shows the user moving the lamp
to the table.
The app should enter an editing
state after a long press.
To signify that the lamp's position is being edited we want
a floating animation.
With Rapido we can create animations by pressing the record animation
button
and drawing an animation path with a finger.
The user should now be able to move the lamp from
the floor to the table by panning with a finger on the screen.
After performing the user's pan
gesture we see a red target appearing on the scene
representing the corresponding "world touch".
We can then create links so that the lamp and the marker follow the red target,
and demonstrate the confirming tap on the check
button.
Finally, we can playback the whole video
prototype by pressing play.
We will now move from the AR interface on the tablet to the overview
interface on the desktop.
In this phase, we turn the video prototype into an interactive prototype.
We can see that every action that we created on the tablet is shown in a timeline view
like
in a video editing application.
The timeline contains tracks for the demonstrated user
inputs
and the corresponding actions on the sketches.
Rapido infers an initial state machine from the
video prototype description in the timeline.
At the very top we can see six empty boxes.
These boxes are placeholders for the different states of the prototype.
The inference assumes
that we need one state for every user input, however, notice here that when the user is
in the
mode of repositioning the lamp a panning gesture creates a new state, this should not be the
case,
so to tell Rapido that these two states should be the same, we can merge them.
When we refresh
the state machine we see only five states.
We also notice that after repositioning the lamp
we should return to the same state.
We can tell this to Rapido by linking the placeholder
in
the timeline with the correct state in the state
machine.
By default, Rapido enumerates the states
but we can type-in more descriptive names.
For example, *selecting* an item from the catalog,
*placing* the selected item, *observing* the selected item, and finally, *repositioning*
it.
We can now test the interactive state machine live on the tablet just by pressing the "test"
button.
During testing, the state machine diagram will highlight the current state and transition
to help debug the interactive experience.
When we press the check button we notice a bug:
the lamp does not stay in the current position, it
moves to a previous position.
By going back to the
timeline, we can identify the problem.
The pin action is happening within the observing state
when it should be happening at the end of the
placing state.
We can modify this simply by moving
the action in the timeline and refreshing the
state machine.
Now the experience is working as
expected.
In less than 10 minutes Rapido enabled us to create a video prototype of a furniture
placement application and turn it into a fully interactive AR experience.
Thanks for watching