Designing for Fun

Designing for Motion

As a programmer I often find myself treating interface design more like a puzzle than an art piece. I've got a big list of buttons and bits that need to go somewhere and I play Tetris with them until everything fits nicely together.

I've been working on Owlbear Rodeo for three years now and my design process up until this point has been primarily focused this idea of spatial thinking. Ensuring the layout makes the information easy to follow, building a design that can scale across all screen sizes and reducing the space used by the interface to allow the content to draw the eye.

In the last few patches for Owlbear Rodeo I've started to make a real conscious effort to think more about my designs temporally as well. Instead of leaving animations and transitions as an afterthought, I wanted to think about the motion of the design during the concept phase.

A good example of this is with the redesigned dock from beta patch 11. From the start of that design I knew I wanted the shape of the dock to grow and shrink to fit each new state.

Here's the final result:

The container grows when selecting a tab but when we move to the search page the design squishes and stretches to fit the new content.

If we compare against the old dock (shown below) the new design feels a lot more cohesive.

Designing for Fun

When we first released the new dice roller for Owlbear Rodeo 2.0 I talked about how I wanted to solve a lot of the issues that had been reported to us from the 1.0 version.

In doing so we also removed a lot of the fun out of the design.

Here's a quote from original 2.0 dice blog post:

"In 1.0 you could reroll a die by clicking and dragging it to throw it around the tray. While fun to do it did lead to some problems with possible cheating (nudging the dice just a little to roll on a number you wanted). In 2.0 we're making rerolls more explicit, instead of picking up a dice you can now simply select the dice by clicking it and then pressing the reroll button that appears."

When I originally designed the 2.0 dice roller we had this tradeoff between usability and fun and I chose to reduce the fun in order to provide a more predictable experience.

Looking back this was a bad choice. Instead I should have said the fun stays no matter what but something else needs to change to accommodate that fun in a more usable way.

In the new design we're bringing back the drag to re-roll but in order to prevent the possibility of cheating we added a minimum throw velocity so that you can't move the dice a small amount. We also make sure to randomly rotate the dice as you let go of the mouse so that even if you did move it a little bit the end result would still be random.

Designing for Delight

With the new design we want the dice roller to have a great sense of motion and also be fun to use. To demonstrate both these things I want to explore the new experience of rolling a set of D6's.

As you select the D6 image in the sidebar a new dice bubbles underneath the roll button. While you're waiting to roll each dice jiggles making it look like the dice themselves are ready to roll. As you hold down the roll button the dice start moving faster and as you let go the dice jump into the tray.

For me the essential part of making this interaction fun was tying the dice speed with how long you hold the roll button down. So if you only click the button it is a more gentle roll but holding the button for a few seconds leads to a high velocity roll. To me this seemed counter-intuitive because it's adding friction to the roll experience and my design sensibility up until this point has told me to remove all friction from my designs. But as I think about it more this is something I would do when I'm using physical dice around a table. When there's a high stakes roll to kill a dragon I will shake the dice way more than when just rolling to hit a goblin.

The motion of this new design is split into three parts. First when you click on the dice in the sidebar each dice will expand and be shown in the tray itself. Then when you hold the roll button down the dice will begin to shake depending on how long the button is pressed. Finally when you release the roll button the dice shoots off and rolls around the dice tray.

This process of expansion, shake and throw has a really nice flow.

If we compare this to the previous dice design (shown below) then we can see just how more natural the new design feels.

Thinking Outside the Box

A part of the reason the old design worked the way it did was because I wanted to keep all dice rolling functionality inside the one popover. This meant that your dice tray had to share the same space with all other player's trays. This shifted a lot of the design, the dice roll bar had to be moved to the bottom of the tray and the dice style selector moved to the sidebar alongside the other dice trays.

When dddice made was making their great extension for Owlbear Rodeo they wanted a way to break out of the action popover to show dice rolls as a large full screen overlay. When designing the new dice system I took a lot of inspiration from this approach. The idea of "my extension doesn't have to be limited to the little box I'm given" was a really freeing concept.

Now when another user rolls with our dice extension a small popover slides in from the bottom right and shows you their roll.

To make it easier to see a roll we animate the camera to zoom in on the final result. After the result is done the roll will drop away out of sight. If you want to see the roll again you can either click on the roll as it's happening or select the user in the full dice view.

Growing as a Designer

As we fast approach the full launch of Owlbear Rodeo 2.0 looking back at how I've grown as a designer over these three years can be really gratifying. I still feel like I'm constantly learning new ideas and concepts so thanks to everyone who has provided us constructive feedback on the site. It really does help us make Owlbear Rodeo the best it can be.

Owlbear Rodeo 2.0 launches on July 18th and I hope to have a few more updates before then so stay tuned.

Happy Gaming.