How to Design for the Different Types of iPhone Apps

Welcome to the fourth installment in our series on iPhone Design 101! If you’re new to this series, be sure to check out parts 1 - 3: Introduction to iPhone Design, iPhone/iPad Design Templates, and iPhone Design Features. These articles will get you up to speed on what we’ve already covered and give you a taste for the juicy bits that are to come in this awesome series!

As a designer and/or developer you may be wondering “who cares about the ‘types’ of apps available, isn’t each app different? Every app has a unique audience and task, so what’s the point in studying the different types?” One simple answer: understanding your application “type” makes the process of conceptualizing ideas, specifying technical specs, and executing design and development much FASTER.

The App Store has 20 standard “categories” of apps (everything from games to social networking) and periodically breaks out specialty groups like “games for kids” or “holiday cooking” apps. So how do you begin thinking about design rules for all of these categories? You don’t! Instead consider how ALL of these apps can fit into one of 4 groups or “types” of apps:

Serious Tools
Fun Tools
Fun Games
Serious Entertainment

Understanding the “type” of app you’re designing will give you a snapshot of both your audience and appropriate design boundaries. An obvious example: you probably won’t find a child working with a productivity app, or an adult playing with a “learn the alphabet” game, right? In this article we’ll go well beyond this simple example to examine the nuances of iterating quickly for each of these categories of apps. I’ll also define very practical standards that you can apply to each app type and are important considerations to keep in mind at the beginning of every design project.

Serious Tools

Serious tools are highly task-oriented apps that are made for taking care of business. Users want to get in and get out as quickly as possible. For this reason, it’s important to:

Keep it clean
Establish a clear grid for alignment & layout
Avoid redundant controls
Get things out of the way of productivity
Use "implied" graphics
Visually prioritize info using typography, color, and contrast

A great example of a serious tool is the Southwest Airlines app. What would happen if this interface was cluttered, cramped, and difficult to navigate? Okay, it’s not “bomb threat” serious, but in Southwest’s case, a customer may miss a flight or airport pickup if they aren’t able to quickly access the information needed. At a minimum, they’re inconvenienced by having to figure out an alternative way of doing things.

This app does several things well. If you glance at the screen, what are the two buttons that jump out at you first? The orange “Flight Check In” and “Flight Status.” When we’re away from our desktop/laptop computers what are the top two things we may want to do when dealing with air travel? You got it: check in and check status.

Notice too the positioning of the buttons. In a typical web environment, a user reads the page top down, using navigational elements anchored at the top of the window. With mobile there isn’t as much real estate to scan! Instead, Southwest has positioned the most used buttons smack in the middle of the screen, where your navigational thumb is typically positioned. Cool!

With a serious tool, you have to quickly establish the next course of action. This means you have to get inside the mind of your user and do the thinking for them. A well thought out process for getting things done in a serious tool will keep your peeps happy and referring the app to friends.

Fun Tools

Fun tools are just that - utility apps that are allowed to have a little fun. Users have a little more time to linger when using a fun tool and are NOT going to have their day derailed if the app doesn’t work right. They may be checking the weather, fantasy football scores, or calculating their body mass index.

When conceptualizing ideas or visual metaphors for fun tools, think “moderately graphically rich.” Your user is still trying to get something done. Critique your own work and look for visuals that do not lead the user down the path of productivity. Awesome Note is a great example of an app that balances both productivity and fun.

One way to ensure that you are designing both a productive and fun tool is to flatten the hierarchy of the app. This means instead of building a calculator that involves 4 screens of input, rework the design to accomplish the same task in 2 screens. A good rule of thumb with regard to depth in a fun tool is no more than 2 - 3 levels deep.

Fun Games

Fun games are equivalent to what is sometimes referred to as “casual” games. These apps almost always fall outside of the standard operating system user interface, which means all graphics are custom designed and built around a specific brand or concept. Mad free-flow fun from a design standpoint but still susceptible to design rules that users expect with a fun game.

Fun games are intensely graphical, move away from a hierarchical navigation and get you into game-play immediately. A classic example is Doodle Jump. Even though I have to admit I don’t know what happens when you surpass 20,000 points (oye!) this is a perfect example of a fun game. The only navigation is when you select a “theme.” From there, it is a simple game that uses the accelerometer to direct your jumper up and up from one step to the next. The object of the game is to make it to the top. That’s it.

Multi-touch gestures and LOUD visual feedback are very important traits of successful fun games. When a user does something right or wrong tell them in a big way! Something that doesn’t completely disrupt gameplay, but helps the user understand the cause and effect relationship in the game. Alerts can take the form of sounds, text, movement of graphics on the screen, an explosion, whatever!

When creating graphics for fun games, your developer may ask you for “sprites.” If you are not familiar, “sprites” are the graphical elements that will be moving around on the screen. For example in my game Popper! the files I supplied to my developer looked like this:

The image on the left shows what the final game looks like. The wood background and Popper! logo were supplied as one 320 x 480px PNG graphic. The balance of the items you see on the screen are all controlled pragmatically. So, be prepared to supply background images in the typical 320 x 480/640 x 960 px format, and then supply a 512 x 512 px “sprite” graphic that contains all of your buttons and moving elements. You can have multiple “sprite” files if your app has lots of moving parts.

Serious Entertainment

Serious entertainment apps have the same characteristics of Fun Games, but include added depth of game play, virtual realities, and role-playing. Typically, people who are designing these types of apps come from a game design background and have a passion for gaming personally.

When conceptualizing for serious entertainment, keep in mind that your users will expect:

Graphically rich interfaces
A storyline to follow
A single screen, or 1 level deep at most
Efficiency focused, large buttons, legible from 5ft away

Fragger is a great example of a serious entertainment game, where you conquer enemies in up to 4 different virtual worlds.

Conclusion

As I worked on this article I got the feeling that “app critiques” might be a fun topic to explore, examining different types of apps and what makes them great or not so great. Would you guys like to see a follow up to this article with more examples of the “types” of apps and what makes them great? Leave me a comment below and let me know what other topics you would like to cover!