DEPICTING THE PHYSICAL WORLD

Many successful apps and games have already been mentioned in this book with some of their core features analyzed. When it comes down to examining just why they've been a hit, however, usually there are many theories, ranging from right place and right time, to marketing, entertainment value, addictive gameplay, amazing graphics, and so on. Yet, one of the most fascinating and least-discussed elements (even in game or app reviews — which means that it's typically taken for granted) also happens to be a critical component to user interaction and interface design: metaphors.

If you know how to build this one component into your game or app, you'll get more identification, engagement, and often retention as a result. Let's take a deeper look at one of the key components that makes any game or app mysteriously more engaging and intuitive without users necessarily taking notice. The term “mysterious” is used because of the element's being taken for granted in good apps as that special ingredient that just makes it click with users.

Using Physical Metaphors to Delight Your Audience

Even in the earliest computer interfaces, as a means to get a grip on the mental model of binary data, designers and engineers came up with the term files for individual collections of bits with a certain purpose, folders for storing collections of files, windows for collections of folders, trash for deleting these, and other such metaphors rooted in the physical world. The core purpose of using metaphors is to relate something new and unknown to that which is already known, and thus familiar. In other words, it's easier to learn something new when you relate it to something you already know.

This powerful mechanism has been in place for decades as an effective user interface technique, but is seldom (or only briefly) discussed in books about game or app design. Its potential to grab and engage users is why you should be taking advantage whenever you can in your own apps.

Let's look at some examples, and then learn how to integrate them into your apps where appropriate.

In the popular “Fruit Ninja” app, your finger is the sword swinging away at the fruit. In “Cut the Rope,” your finger is the scissors. In “Angry Birds,” your finger pulls back the metaphorical slingshot to launch birds into towers. And in “Pocket God,” well, your finger is the higher being where it can literally hold, swing, and throw innocent villagers around.

When tweeting using Twitter, you become the metaphorical bird using short, staccato sound-phrases to update your latest happenings. When looking at Twitter's iconic bird and interface, it all comes together to make sense more quickly, and its new paradigm is easier to digest.

Consider Facebook's wall, where, when you post something, other users can stop by and take a look. This makes perfect sense, and is completely understood by the average user.

For the very successful app iBooks (mainly because it was developed by Apple, and has its backing and marketing), Apple ensured the user interface made sense metaphorically.

Shopping carts or baskets from Amazon and other online retailers help users store items for future purchase while they continue to browse. So, you might ask why not continue with the metaphor and use aisles? The answer is that the store metaphor can be taken only so far before it begins to be ineffective for current applications. After all, the Internet is much better at sorting and finding items than it is at being a physical store.

Certainly an Internet or in-game store may someday use the aisles metaphor — when it makes sense to do so. For example, consider adapting the iPod's Cover Flow feature to the aisle metaphor where swiping left and right might whisk you across the aisles, each being a different category of products. Then, when it was tapped or clicked, you might be swooshed forward, perhaps even to another view, where you're actually facing the side of the aisle, with categories narrowed even further, while keeping with the physical store metaphor. At the very least, it would be more interesting than clicking from a vertical menu, if it was responsive enough!

The lists in the following sections should help you understand what types of metaphors have been used in apps and games, so as to more easily create your own.

Physical Metaphors Used in App/Web/Program Design

Following are some physical metaphors used in the design of apps, web pages, and programs:

• Tabs for categories (from physical folder tabs)
• A magnifying glass to indicate searching
• A mailbox to indicate e-mail
• Using a plus sign (+) to signify adding (or, by convention, adding a “new item”)
• Using a green checkmark to indicate accept or confirm, while a red checkmark equals cancel, close, or stop (taking cues from both traffic lights and teacher's marks)
• Shopping carts and baskets as a means to hold items to order
• The eraser in paint programs
• Using a whiteboard for writing
• Sticky u002s
• Home button (usually meaning go back to the “main menu” or otherwise starting point to the program)

Physical Metaphors Used in Game Design

Following are some physical metaphors used in game design:

• Using a backpack for a player's inventory
• Stores to buy things
• Journals to keep track of quests
• Books to tell a story or use as your spell inventory
• Hearts to indicate life
• Using the color red to indicate life (blood), such as in health bars
• Potion bottles/flasks for health pickups (medicine)
• Maps that look like real maps
• Using metaphor-based icons to be easily recognizable with less need for instruction, such as the following:
  • A sword to indicate an attack
  • A shield to indicate defense
  • A backpack to indicate inventory
  • Gears/wrench to indicate options/tools
  • A trophy to indicate achievements/rewards
  • A sound to indicate a speaker
• On touch devices, your user uses a finger to do the following:
  • Tap a drum or piano, or strum a guitar
  • Pull the slingshot
  • Swipe the sword
  • Throw objects
  • Serve as a writing instrument

Designer/Branding Exercise: Creating Metaphors for Your App

Whether you are developing a game or other app, coming up with a list of how you can better communicate this new system to users is important. Though the following exercise can be done at any time, generally you'll want to start somewhere near the beginning of the design phase because user scenarios can help flesh out the design.

Therefore, this is best done using (or in communication with) a designer. Regardless of where you are in the development timeline, don't skip this step, because even if you're near release, there might be a key ingredient that would attract the user even more than you may otherwise — especially with respect to branding.

Step 1: Brainstorm Metaphors around Your Concept

Take your concept and brainstorm a list of all metaphors related to it. Have your feature list handy, because there may be new metaphors you could come up with that are specific to certain features. Don't worry about whether they're good or bad yet. The point is to eventually see where your users might be able to be helped, and be able to speed through the act of understanding.

As an example, let's say that you have an inventory app that manages your collections (books, movies, DVDs, audio, and so on). Part of your list might look something like the following, again some good and some that may not be applicable or feasible:

• File cabinet/folders
• Cubbies/mailroom
• Bookshelves
• Rolodex
• Glass cases
• Candy bins
• Concept of thumbing through
• Sifter (for sorting) — an example that probably won't work, but included here in case it spurs ideas
• Coin sorter
• Warehouse (because it has inventory)
• Boxes
• Crates
• Delivery truck
• Computers
• Theater complex (for a movie collection)
• iPod Cover Flow (which is virtual, but also a convention that many users are already used to)
• Jukebox
• U002pad paper
• Shopping checklist

Step 2: Create User Scenarios

Create a list of possible main user scenarios, which are simple text descriptions of performing main tasks in your app. It's best if you don't get too detailed, because this will leave open opportunities to see where you could simplify the process and add metaphors as needed. If an aspect of the scenario isn't designed yet, just use your best guess, and include what users might be thinking about as you are going through the process. Keep in mind that these are just projections, and that users may experience the app in different ways.

Let's use the inventory app as an example.

Arthur has an extensive DVD/Blu-ray and music collection, and somehow found your inventory app (likely because of his seeing your fabulous App Store icon that perfectly depicted an inventory and conveyed fun/easy as well).

He enters the app and finds that it is refreshingly simple to start a new collection, or to go through a predefined list of category icons (without names). He sees the DVD icon, taps it, and enters his name for the category. He is then taken to an empty area where he can start adding items.

After adding a couple of items, he decides to start another few categories to get them set up. There's no sense in going too overboard yet, and he would like to see if this app suits him for overall use before committing too much.

Arthur idly wonders how long it will take to add all his titles by hand, whether it's really going to be worth it, and wonders if it would be possible to tie in to a movie database that it could just take a few letters and offer up suggestions in a small list to choose from, similar to smart searches in search engines.

Step 3: Identify Opportunities for Metaphors

Go over the user scenario one sentence at a time, and see where you might be able to add any of the metaphors you came up with in your list. Highlight or underline phrases that stand out as potential targets for using a metaphor.

An easy mnemonic to remember what might be suitable to use as a metaphor is, “AAck!!” — with the “AA” being actions and assets. Whenever the user performs an action, it becomes a potential target, as well as any assets that are required for doing so, or getting them from one place to another.

Note that the goal isn't to inject your app with metaphors whenever possible, but to use them where appropriate to help the user become engaged and quickly familiar with it.

In the user scenario devised thus far, notice that not too many design specifics were given. The phrase “finds it refreshingly simple to start a new collection” could have been specific and said Arthur was presented with a big plus sign to add the first category. But, instead, it stayed general, and mentioned the simplistic process. For example, maybe the plus symbol isn't the best metaphor to add here after all. In any case, the phrase “finds it refreshingly simple to start a new collection” should be highlighted/underlined as a potential metaphor target.

With that, let's go through a couple of others. The first mention of the App Store icon states that it depicts inventory plus “fun/easy,” all in one. This description is completely arbitrary, of course — it was purposely added to be an opportunity for a metaphor. But the key with this particular phrase will be to remember to use a metaphor (if appropriate) for the App Store icon as part of your brand/message.

Next, let's take the phrase “is then taken to an empty area where he can start adding items.” How might this area be presented? This would be a good opportunity to assign a few metaphors, so highlight it.

Another phrase worth noting is “he decides to start another few categories and get them set up.” How would he perform this action? A metaphor might be used here.

Step 4: Assign and Group Metaphors to User Actions

For each highlighted action from the user scenario, assign metaphors from your list, along with any new ones that come up while doing so. Don't spend too much time coming up with new ones yet until you've gone through your list once and exhausted it.

The now-highlighted phrase “finds it refreshingly simple to start a new collection” is a metaphor magnet. The obvious and conventional method here would be the plus symbol somewhere on screen, which wasn't on your inventory metaphor list, but could have been. Are there others from the list? How about the following:

• Delivery trucks
• File cabinets
• Cubbies/mailroom
• Crates

After you've gone through your highlights once and added items to the list, come back to this and briefly brainstorm other possibilities just to be sure.

Assuming you could be doing this on a computer (optional but optimal), another phrase that might be in your document would be “is then taken to an empty area where he can start adding items.” This introduces more possibilities, such as the following:

• Bookshelves
• Glass cases
• Candy bins

Step 5: Trim List

Go through the list and jot down u002s about how these might fit in with the user scenario. Remove any metaphors that you don't think will work for the following reasons:

• It's a mismatch in that it doesn't work with other metaphors or the overall metaphor (for example, using a farming metaphor with an office metaphor).
• It doesn't work with the brand.
• It's not viable per available resources (including time).

After trimming the list, what you should be left with are viable metaphors that you can keep or rule out again by repeating this step using the preceding criteria.

In this example user scenario, with the phrase “finds it refreshingly simple to start a new collection,” the list was delivery trucks, file cabinets, cubbies/mailroom, and crates. For each, you might have some additional considerations.

For example, with delivery trucks, perhaps once you click the plus sign, an animated truck pulls up with no “brand logo” on its side. So, the keyboard appears for you to type a category name. Then, when you enter a category name, it appears on the trailer's side. Tapping on it speeds it away to its destination, transitioning you to the next screen. This type of animation may seem too complicated and resource-heavy, plus the metaphor might not fit with the flavor of the app or all categories, so it's in jeopardy of being removed.

An empty crate might be feasible here as an asset with a plus symbol on it. Perhaps the background is inside a warehouse (a nice one to be sure, or maybe you can upgrade it with points you earn from filling out categories), with your first empty crate on the ground, and a plus symbol on it.

Cubbies like you might find in a mailroom sounds like it might work interface-wise, but here you have a mismatch. Some of the items within the categories are not likely to fit inside a cubby hole. File cabinets may also work — after all, these are lists — but it's not very exciting.

In the end, the best idea seems to be the warehouse/crates metaphor. But, depending on budget and resources, you probably will opt for the conventional plus symbol and some sort of regular (but polished) interface. But then, you never know. After all, each category may actually be using a new metaphor such as a bookshelf for its category, and that might better solve the mismatch of a bookshelf somehow being in a crate.

You should by now have a good grasp of how to implement metaphors into your app, either for user actions, assets that are there when being taken to or arriving in different sections of your app, or its overall brand (think Twitter). Next, let's look at something that has been only technologically possible fairly recently for mobile/portable devices, which is the use of physics.

Utilizing Physical Forces: Gravity, Weather, Objects

If you're planning on having any action in your app (most often in games or entertainment apps), consider using a basic physics engine to support realism and allow for emergent gameplay.

Emergent gameplay means effects that come about over the course of playing that weren't necessarily designed. Emergent gameplay is most often seen in two types of games: games that use a physics engine of some sort, and games that feature advanced artificial intelligence (AI).

Take “Angry Birds,” for example. It uses a physics engine to determine how all the blocks will fall against one another in a big heap. Gravity, mass, and momentum are usually taken into account, and almost always, you'll never be able to reproduce the exact same destruction as the time before.

With games that use complex AI, sometimes it's difficult to predict how one system will react with another, which then may trigger a response that wasn't intended. Usually, what you'll get are funny things or bugs. But sometimes, if you have all the right fences in place to keep those from happening, truly emergent gameplay can occur and act as a marketable bullet point for the game.

You can also use weather dynamics to help or hinder gameplay. Think of wind for sailing, rain/snow for visibility or hindering of movement, ice for sliding, or even sun for melting. Whenever you can use weather, it has the potential to enhance the sense of immersion and connection with the game. Keep in mind that realism does not equal fun, and that too much simulation is often a detriment to gameplay, rather than an enhancer — after all, people use games to escape the real world. In other words, use this only where it might enhance the connection to the real world, yet also add fun.

Finally, think about utilizing properties of objects when applicable, such as mass and momentum, or texture and friction, to possibly enhance the connection with real-world objects.

The Importance of Sound in Physical Metaphors

Every action the user takes in your app should have appropriate feedback, and anything you can do to reinforce physical metaphors is going that extra mile toward engaging the user with your new system. As previously mentioned in Chapter 2, since tactile feedback is lacking for current iDevices (buttons, vibrations, and so on), sound becomes even more important as a method of feedback.

Aside from feedback, an often-overlooked element in game or app design is the importance of sound on immersion. Consider “Fruit Ninja” as an example. When you swish that knife, if you had the sound turned off, you wouldn't get that exciting swish sound with visceral pulping of the fruit against the background.

Sound is unique in that the user's attention can be on the game or app itself (just like in a movie), and you can hear thematic sound in the background that you take in subconsciously to enhance the effect of the story. In the same way, utilizing sound to enhance your physical metaphors will strengthen the user's bond with them.