Usability – the empty string

Introduction

My most recent VR project is a simple Simon-esque game in which the player must select floating orbs in the correct sequence in order to pass through a dungeon. This was the fourth project for Udacity’s VR Developer Nanodegree. I enjoyed this project a lot because there was more emphasis on designing a good user experience. I got to put my UX skills to use to create personas, draw sketches, conduct user tests, and iterate on the design.

Process

Personas

One of the first things I did was create three personas of different users who might be interested in this game. I already wrote about this in a previous post, where you can also download the persona template that I designed. You can click the images below to see them bigger.

Sketches

I made several sketches throughout the process. I haven’t make all of the sketches a reality yet, but I have a clear idea of what I want the final experience to be like. I added several bits of backstory to the game to make the player more invested in completing the puzzle.

Working in Unity

I created the game in four stages, with user testing and iteration after each stage.

Create the environment (3D models and lighting). Do user testing for mood and scale.
Create the UI for starting and resetting the game. Test for scale, placement, legibility, and clarity.
Add camera motion and program UI buttons. Test for speed and comfort to avoid simulation sickness.
Program game mechanics. Test for playability, understanding of rules, and overall experience.

Building the dungeon environment with premade assets

User Testing and Iteration

Below are videos of my first playtest and my most recent playtest, so you can see the progress made so far.

Some of the things discovered and fixed from playtesting included:

Some people felt too short. Adjusted the camera position and the overall scale of the environment.
The UI was much too close to the camera at first. Repositioned it farther away.
The start UI blocked the view of the dungeon, so it was really disorienting when the camera started moving. I fixed this by making the UI partially transparent.
The camera motion was too fast. Slowed it down to create smoother transition into dungeon.
The positioning of the orbs was too high to be able to comfortably select the top two. Repositioned them to be more in the line of sight.

And these are some things that I haven’t fixed yet:

There is a glitch where the back wall of the dungeon changes color when you look at it.
Some people do not recognize the “Simon-esque” aspect of the game, so they don’t know what to do when the orbs light up.
The negative feedback sound when you select the wrong orb is not clear enough.

Current State

Here is gameplay video of the game in its current state, as of Oct. 1, 2017. For some reason the screen recording software did not capture the ambient environment sounds.

Planned Improvements

Incorporate all the story elements to give players more choices (see sketches above).
Program a lose condition if they select the wrong orb too many times.
Program different levels of difficulty.
Create either clear instructions about how to play or hints if the player gets stuck.
Animate the orbs to move out of the way upon completing the puzzle.
Give each orb a unique pitch and color.
Create background scenery.
Improve UI design.
Improve sound design.

I recently made the framework for a flower wall that Snapdragon Studio will use for weddings. Making it was fairly simple; basically I used two pieces of peg board bolted to a couple 1″×4″s (check out the bottom of the post for more details). The fun part was making sure that it was quick, easy, and obvious to put together and take apart.

*Silvia attaches greenery to the front of the pegboards.*

No tools

There are a lot of moving parts when setting up flowers for a wedding, and I didn’t want the Snapdragon folks worrying about “Crap, we forgot the socket wrench for the flower wall!” I used wingnuts to fasten the bolts, so the whole thing can easily be put together by hand.

Labels

Ideally, the orientation of the boards wouldn’t matter—you could put either board on either side in any orientation and it would still work. Unfortunately, that wasn’t possible because boards I was working with weren’t straight. :/ So I had to ensure that the boards would be put together the right way with … LABELS!

The key thing to keep in mind here was to not make all the labels too overwhelming. I started by labeling the top and bottom of the boards with text labels and arrows. Easy enough.

I marked the middle where the two pegboards meet with text and arrows. I also marked the two pieces with diagonal lines that align when the pieces are matched correctly. (I learned that trick from my dad when he helped me put in some laminate flooring.)

For the placement of the two boards, I didn’t use “left” and “right” because 1) that’s too much text, and 2) left and right are confusing when you can look at something from the front or the back. So, I opted to mark the two boards with two different shapes. The same symbols on the pegboard indicate the correct placement. This works great because it’s less of a cognitive load to match shapes than to read and interpret text. You can do it without thinking about it.

*Yes, I accidentally put a circle on the top right instead of a triangle. :O I fixed it later.*

*And just in case there’s any confusion …*

Requirements & Solution

Finally, if you’re interested here are all the requirements I had to meet and the solution I came up with.

Requirements

large enough to cover a doorway and serve as a photo backdrop for people standing in front of it.
small enough to fit inside an SUV.
easy to store when not in use.
made of material that allows flowers and greenery to be wired to it.
sturdy enough to hold up to the weight of all those flowers (which can actually get quite heavy).
secure enough that it won’t slide or tip over.
leans almost upright against a door or wall.
does not have ugly hardware visible from the side, such as an A-frame or a base coming out the back.

Additionally, I put on my UX designer hat and added some more considerations:

People can get pretty smashed at weddings. Taking a selfie in front of a flower wall only adds to the rambunctiousness. The wall needs to survive drunk people falling into it, hanging off of it, etc.
As outlined above, it should be easy, quick, and obvious to put together without tools.
Initial sketch.

Solution

Size — 4′×7′, cut into two 4’×3.5′ pieces. The 4’×7′ would have fit in the the SUV, but cutting it into two pieces makes it easier to store and maneuver.
Material — Peg board allowed flowers to be easily wired through the holes.
Sturdiness — The peg board needed something to keep it from sagging when leaned against the wall. Plus, since we decided to cut it into two pieces, it needed something to join the two pieces together. Two cheap 1″×4″s on the back of the peg board did the trick.
Security — Since I couldn’t build any structure coming off the back for aesthetic reasons, I had to get creative. Two eyehooks attached to the top of the 1″×4″s allow a cord to be tied from each hook to the door—this prevents any chance of it tipping over. Rubber pads on the bottom of the 1″×4″s keep them from sliding. I had a couple other ideas to keep it from moving, which you can see in the sketch above. But the rubber pads were actually enough to hold it in place.
Ta-da!