Advertisement
Mobile Design

How to Design for the Different Types of iPhone Apps

by

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:

  1. Serious Tools
  2. Fun Tools
  3. Fun Games
  4. 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!

Related Posts
  • Design & Illustration
    UX
    10 Tips for Building Wireframes With IllustratorPreview wireframe
    Adobe Illustrator is experiencing a come-back in the world of web design. Not only is SVG becoming commonly used online, but more and more designers are using vectors for wireframing. The following tips will help you make the most of Illustrator as a wireframing tool.Read More…
  • Computer Skills
    App Training
    Beyond Highlighting: How to Get the Most From Your AnnotationsAnnotations icon
    It's easy to highlight a passage in an eBook, but there's so much more you can do with digital highlights. Here's everything you need to know to annotate your eBooks and PDFs on your Mac, PC, iPad, and more, and then put your annotations to work for you.Read More…
  • Game Development
    Game Design
    Enhance Your Pixel Art With a Stylized Beveled Pixel EffectPreview1
    Transform your boring pixel art into something stylish. This effect can be applied to nearly any project with ease.Read More…
  • Code
    Marketing
    How to Price Your App: Free or PaidDi7fc preview image@2x
    In this article, I'll talk about the different business models of mobile applications and which one is the right choice for you.Read More…
  • Web Design
    User Experience
    The Finer Details of UX for KidsUx kids 2 retina
    In the previous article we discussed what we mean when we refer to "kids", the unique challenges they bring, as well as some key considerations when designing UX for kids. In this post we'll discuss items UX professionals should pay close attention to after they hand off their formal UX.Read More…
  • Web Design
    User Experience
    The Building Blocks of Designing UX For KidsUx kids retina
    Designing for kids is a unique and challenging situation for any UX professional. While many principles and practices span across all ages, there are many issues which arise exclusively when dealing with children. In this introductory article we'll look at children and the specific design issues that they bring about. We'll also examine some guidelines, constraints, and considerations that you should take into account when designing UX for kids.Read More…