The App Design Handbook

126 Pages·2013·10.17 MB·English

by  Nathan Barry

TABLE OF CONTENTS
1. Introduction
2. The Context
3. The Idea
4. The Experience
5. The Style
6. The Polish
7. The Marketing
8. Case Studies
9. Closing Thoughts
© 2012 Nathan Barry. All Rights Reserved.
Please do not distribute or share without permission. If you have questions get in touch. My
email address is [email protected]. I try to respond to all the email I receive.
i
Chapter 1
INTRODUCTION
So you want to learn to design apps? Well, let’s get
started then!
Section 1
INTRODUCTION
Everyone has an idea for an iPhone app. Once
DEFINING EXPERIENCE
friends and family hear that you have any skills or
experience in that area you will quickly become the When referring to software I commonly say that the
“experience” is the most important thing. That sounds
sounding board for their new idea. While they think
nice, but what does it mean? Think about a trip to the
the idea is the most important thing, you know that it grocery store, from driving to the store to the checkout
process at the end. How easy was it to find the food
takes skill and time to turn that idea into a great
you wanted? Were signs clear and employees helpful?
experience for the user. Did the presentation of the food give you confidence
in its freshness and quality? How long did you have to
That’s what this book is about: taking an idea from a rough concept to a wait to check out?
polished experience that your users will love. Whether you are a developer,
All of these individual elements, whether good or bad,
project manager, or just a hobbyist who wants to better understand
make up the experience you had at the grocery store.
application design, this book will serve as a guide to designing great iOS
Now apply the same ideas to an iOS application. The
applications. It is written in a simple, practical manner, so that you don’t
details of load time, discoverability, features, style, and
need a technical or design background in order to follow along.
clarity all add up to form the experience you have
A truly great experience is often used without notice. It seems effortlessly while using the app. Are you able to accomplish what
simple and doesn’t call attention to itself. It’s the bad experiences that you you want quickly with a smile or does the app fight
notice, the times you can’t figure out an app or when a task is painstakingly you at every turn?
slow. Because of this I will try to showcase a great experience and then
contrast it with another way the same features could have been designed.
3
This will help you recognize an experience that needs improvement
and know how to take it to the next level.
Looking at great design examples is helpful, but only if you understand
the underlying problems they solve. By seeing a few combinations of
reverse examples (the good and the bad) you will learn to create great
experiences for your own apps.
Then when a friend or co-worker says, “We need an app!” you’ll be
able to design an experience that transforms that idea into an iOS
application that is a joy to use.
Nathan Barry
ABOUT NATHAN BARRY
Hey, I’m Nathan Barry, an interface designer and
app developer. I care about designing software
that is a joy to use. Previously I led the software
design team at a local startup, but in the last year I
have been working independently designing and
developing my own apps.
I live in Boise, Idaho, but love to travel. You should
follow me on Twitter (@nathanbarry) so we can
meet up when I come to your city.
4
Section 2
NOTES & TERMS
Before we dive into the book I’d like to define a few terms and ideas that will pop up
throughout the book.
• When I say iPhone in almost all cases I am referring to the iPod Touch.
• UI stands for User Interface.
• UX stands for User Experience.
• Adobe Photoshop is the standard design tool. Any software-specific tips in this book
will reference Photoshop, though many of the same tasks can be performed in other
similar programs.
• Design means two different things, and I don’t always do the best job differentiating
between them. First is the flow and experience of an application. This includes what
features should be in the app, how many screens to have, and how the user moves
through the application. We’ll call this the role of the designer. Next is adding the style
or polish: the button shine, the drop shadows, and the textures. These elements all
contribute to the overall experience, but have little to do with the usability of the app.
This is the role of the stylist.
5
Section 3
YOU ARE A DESIGNER
Too many developers and project managers think that design is someone else’s job, thus
they shouldn’t worry about it. This works out fine if you have dedicated designers on the
project, but many apps are built by lone developers. Use the ideas outlined in this book
to analyze each screen of your app. Look for excess buttons or elements, text that isn’t
perfectly clear, and anything else that could cause confusion.
No matter what your training is, if you are creating screens and interfaces for apps, you
are a designer. Accept that responsibility and start thinking like one.
6
Chapter 2
THE CONTEXT
When you change context, everything changes. So
let’s talk about the mobile contexts our apps are used
in every day.
Section 1
THE CONTEXT
Coming from a background of creating websites and desktop same information, but most likely I need a couple essentials: phone
software, designing for mobile devices is quite a change. The iPhone number, hours, and address. If I’m on my way I may want to call to
and iPad are used in entirely different ways than desktop or laptop make a reservation or to find the address to get directions.
computers, so your design needs to keep that context in mind
See how the context changes the experience?
through the entire process.
The photos and restaurant menu should still be available on the
No one uses a laptop while standing in line at the grocery store or a
phone; after all, you can’t be certain about a visitor’s intentions based
desktop to find directions while driving. Mobile devices, on the other
on the context, but you can make reasonable assumptions and
hand, can be used anywhere. Someone may check Twitter on their
prioritize certain content.
iPhone while bored at a party or covertly read the news with their
iPhone under the table in a slow meeting. That’s the mobile context.
Now you shouldn’t assume that these on-the-go cases are the only
time phones are used. Often an app is used while sitting on the couch
or lying in bed. The point is that your app could be used almost
anywhere, so you can’t make the same assumptions that you would
when designing for a desktop experience.
Let’s take a restaurant website as an example. When visiting the
website from a computer there is a lot of information I may want to
know: hours and location to see if the restaurant is convenient;
photos and menu to see if the price and ambience match my
preferences. If I visit the same site on my phone I may want all the
8
Applying this to apps Think about the most common places your app will be used, then see
how that influences your design decisions. Also, it is very important to
Now that we recognize that the users of our app will be visiting from a
test your design in these same contexts. If you are making a checklist
mobile context, it is time to dive deeper. Where will users be using
app it may be used in the grocery store. Is it easy to check off items
your app? If the app is athletic or outdoors focused you may want a
while pushing a shopping cart through a crowded store? An
high contrast interface that can still be viewed in bright sunlight.
experience that worked as you designed it on a large screen with a
mouse and keyboard may not be as easy to use in common mobile
For the Nike+ app, which integrates with a sensor in the running shoe,
contexts.
the designers knew it would be used while running so they made the
controls and metrics quite large and easily visible. Then you can even
interact with them while jogging, as the phone is bouncing around in
your hand. iPad and Tablets
Now a tablet like the iPad will be used in a different context than the
iPhone. Really it depends on the type of apps used. Reading may be
done on a train or airplane. Movies may be watched in the living room
or while traveling. My personal favorite use for the iPad is watching
movies on a plane. My iPad also hangs around the living room in my
house for looking something up quickly, playing a game, or playing
music over the house speakers.
Unlike phones, many iPads don’t include a data plan, causing them to
require wi-fi for an internet connection. That, combined with the larger
size, makes an iPad unlikely to be used while standing in line waiting
to purchase movie tickets.
Ultimately, the context depends on your app. Think of how and where
your app will be used and design for those contexts. Just keep in
mind that one app may have different contexts if it is used on different
devices.
9