The user interface for Catbox needed to fulfil several of key requirements. Firstly, it needed to be unobtrusive, to avoid distracting from engagement with the actual virtual pet. Secondly, it needed to be embedded in the physical objects of the game world, so as to encourage interaction with the world rather than abstract it. Finally, it needed to be optimised for touchscreen control, making use of natural touchscreen behaviours to minimise the time a user spends thinking about the interface.

Natural interface design

In its default state the game show no UI at all. Basic interaction are achieved by the player reaching out and touching elements in the game world. To interact with Catbox, players simply touch him, which causes the camera to zoom in and Catbox to turn and acknowledge the player. Touching other elements in the world, such as Catbox’s food bowl or toys, triggers that item’s function, whether thats allowing the player to toss a ball across the screen with a finger or showing how much food is left in the bowl.

The interface, both in menus and in the world, follow the basic requirements of most touchscreen applications. Pinching in and out causes the camera to zoom in and out, while items are used by physically dragging them to the correct location with a finger. Players can tap the glass of the screen to get Catbox’s attention, while petting him is as simple as rubbing a finger across him. All of this is designed to be as natural feeling as possible, and to create a sense of physical engagement with the game.

UI items are drawn in Illustrator and imported into Unity as a single sprite sheet.

UI items are drawn in Illustrator and imported into Unity as a single sprite sheet.

Managing needs with UI

Early on I made the decision not to give Catbox ‘need bars’ as is standard practice in virtual pet design. This approach abstracts the basic interactions with a virtual pet, making it more apparent that a user is engaging with a series of systems rather than an actual thinking creature. Also, it gives the impression that a pet needs babying, and having to constantly manually feed your virtual pet can become annoying.

Instead Catbox follows an approach more similar to real life cats; provided there is food in his bowl and litter in his litter tray, he is quite happy to feed himself and take himself to the toilet. This gives Catbox a sense of independence and enhances the impression that he is living his own life inside the screen rather than simply waiting for the player to interact with him.

Example of the menu for refilling Catbox's food.

Example of the menu for refilling Catbox’s food.

So while players can feed Catbox directly through the interaction menu, on a basic level they just need to made sure to replenish his key items when they are emptied. The key items in the prototype are the food bowl, the toy, the bed and the litter tray. Catbox will use these items to satisfy his key needs, and they all deteriorate when used over time.

Players fill these up by touching the item in the world, which makes a pop-up menu appear. These popup bubbles are designed to make it clear which item in the world it relates to, what that item does, and how much of that item’s durability is remaining. All of this is done through entirely visual language, with no need to rely on text.

Example of the menu displayed in the 3D game space.

Example of the menu displayed in the 3D game space.

To refill an item, players simply tap the ‘+’ button, at which point they can see the bar refill. Tapping anywhere else on the screen will close this menu. Subtle animations are used to give the menu items a sense of weight; the menu bubbles wobble as they pop into existence, and the ‘+’ button pulses gently, encouraging players to touch it. This entire system is design to make seeing to Catbox’s essential needs quick, tactile and visually pleasant, distracting from the game world as little as possible.

Interaction menu

When players touch Catbox to interact with him directly, the interaction menu drops down from the top of the screen. This menu shows all the items a player can use to interact with Catbox. Again, no text is used on the menu; simple icons let users know what functions the icons relate to.

A simple ribbon-style menu with item icons shows the different ways players can interact with Catbox.

A simple ribbon-style menu with item icons shows the different ways players can interact with Catbox.

To use an item, players drag it out of the menu with a finger, at which point it ‘pops’ into existence in the 3D game world and continues to follow the player’s finger. In order to brush Catbox, players drag the brush from the menu and then physically rub it over Catbox. Player can feed Catbox treats or medicine by dragging them directly into his mouth.

Players can brush Catbox to clean him, which he enjoys...

Players can brush Catbox to clean him, which he enjoys…

...or if he's really dirty they can give him a shower, which he doesn't like as much!

…or if he’s really dirty they can give him a shower, which he doesn’t like as much!

Catbox will respond to whatever the player takes from the menu; he will follow a treat around the screen with his eyes and eagerly open his mouth if it is held close, but if a player holds out medicine he will try to turn away instead. The purpose of this interface is to strengthen the bond between the player and Catbox using effective physical UI design, rather than abstract the relationship with the pet through a series of buttons and menus.

Share this post.