Crash Course In Ios App Design

Your Crash Course in App Design

A summary of Steven Gates' crash course in app design from The Crazy One podcast

Most UXers will know Steven Gates as the creative yet frank and pragmatic mind behind design at Citi Bank, Starwood Hotels and Apple but few might know that he actually runs his own podcast discussing some of the meatiest and crucial but overlooked aspects of being a designer (The Crazy One podcast).

Episode 42 gave a crash course on his methodolog y to approach app design, some of the mistakes he sees designers making and how to avoid these yourself. Many of these points might seem obvious after-the-fact but I can guarantee that unless you are a UX mastermind like Gates, you'll learn something from this post which will completely change the way you craft your apps.

If you fancy a quick overview of the content, click here to see his show notes. If you'd like the detail … well that's what this post is for!

Part 1: User primer

As any UX designer worth their salt will know, the very first step is research. You need to understand who is going to use your app, how, when and why. Even if you're not designing your app from scratch, it is imperative that each time you run research, you do so with fresh eyes and seek to learn, not just to confirm your original hypotheses.

Gates suggests starting with two simple questions:

What is it that I'm designing?
What is the goal that the average person would achieve with this app?

"Look for the trend-line, not the headline"

In order to help answer these questions, you need to understand the 5 segments of the device ecosystem and the time horizon on each. The time horizon is an approximation of the age of the work you will be doing on these devices. For example, a time horizon of 1 year means that you will be working creating, editing or updating files on this device for the next year in the future, which might have been created up to a year in the past.

5 segments of the device ecosystem

The Cloud: time-horizon may be eternal (the Cloud is generally used for storing and archiving files)
Desktop/laptop: 1 year time-horizon
Tablet: 3–5 month time-horizon
Smartphone: 1 month time-horizon
Wearables: live time-horizon (wearables are about what we are doing right now, in this moment)

CAUTION: Gates insists that this does not mean that our wearable apps should devolve into clumsy messaging apps. Instead, we need to carefully and intentionally curate the content in our apps in a way that will actually make it useful in the moment.

3 crucial artifacts to build before doing anything else

Personas — Some teams even create life-sized cardboard cutouts of these personas as a physical representation of the user, so they can refer to them whilst coming up with ideas and ask "is this what people really want?"
User scenarios — Stories and cases to establish how the persona is going to act and interact with the world around them as it refers to our our app.
Experience maps — A document that allows you to explore all the possible different conditions for a single interaction. These are useful because no app is one-dimensional, because no user is one-dimensional. I used an experience map to organise insights from usability testing when I was redesigning the British Museum's app in a recent case study.

Yes, I built an experience map on my cupboard!

Part 2: Designing for different platforms

Whilst iOS may be the choice of most designers, we should remember that the vast majority of smartphone devices in circulation actually use Android.

Not only do we have to design for both iOS and Android, but Gates reminds us that we have to design for both iOS and Android! If we do not design for these two platforms separately, users will feel as though the design has just been ported over and is not a native experience. The reason for this is that iOS and Android use a completely different set of usability and interaction patterns. This applies to not just the placement of buttons but how screens transition, how buttons react when selected, unsaid rules for how the interface should react which all users of those platforms know.

Designing separately or Android is especially important and often more challenging because of the device fragmentation. Apple have the advantage of producing all of the devices which their OS runs on. However Android is used on a myriad of different devices, so the way buttons react differs from device to device.

Click here to check out Android's design guidelines

Click here to check out iOS' design guidelines

Part 3: Be different … selectively

This reminded me of Facebook's motto of "move fast with a stable infrastructure". Having gone through the guidelines of the platform/s you are designing for, you now have to decide where you are going to stick to the interaction guidelines and where you are going to break the rules to reflect the brand you are designing for or your unique functions.

From his time at Apple, Gates lets us in on the secret that nothing will make them less likely give yours the status of 'Featured App' in their App Store, than if you design an app which looks exactly like it was made by Apple. In order to stand out, they want your app and your design, they want you to use your brain.

However, you need to ensure that these breaks with platform conventions are consistent throughout your app and that they are necessary, not just because you think that they are cute or would look cool.

Part 4: Basics of design

Gates feels that too many designers think of the following points as an afterthought, when they should actually be decided first and form the basis for your design.

Which orientation are you going to build your app in? Some apps looks great in portrait, others in landscape, some in both, but you have to decide which works best for yours. Consider how users are going to hold their device whilst using your app. Is there going to be an advantage to changing orientations? If not, is there any point is using resources to design for both? Spotify's iOS app is only portrait.

What is your target app size? If a user is on-the-go, and your app's file size is too large, they will not be able to download or update it without connecting to WiFi. Depending on how you anticipate users will interact with your app and where they will typically be when using it, you will want to consider if you really need to make the file size so large or could it be small enough to update whilst they are riding the bus into work?

Which device models and screen sizes will you support? Use data and analytics to work out which devices the bulk of your users operate with. Gates sees many designers fall into the illusion that just because we always have the latest generation iPhone as techy designers, we assume that everyone else does too. The reality is that many people are 3 or more generations behind. We need to optimise their experience too.

What are the ergonomics or your chosen orientation? Depending on whether you've chosen to go for portrait or landscape, consider the ergonomics of your interface. Are any important buttons too tricky to reach with one hand?

Part 5: Interaction design basics

As it applies to designing a great app, Gates offers 6 elements to focus on most:

1. Have goal-driven design: Tailor your workflow to suit the specific goals which the app allows your users to complete and which make your offering unique.

2. Usability: People keep apps which are both desirable and usable, so don't get caught up in designing cool interactions which look good on Dribble but which confuse most users, or you'll end up with lots of likes on Dribble and a 1-star app store review.

"Usability … makes a product useFUL, which is the first step in being desirable"

3. Define and repeat signifiers: Whilst anyone who has read Donald Norman's famous book The Design of Everyday Things will already be familiar, Gates defines signifiers as "what are the things that I'm going to teach people that whenever they see it, whenever they experience it, that it means something". You could use a specific colour to indicate which pieces of content are actionable, eliminating the need for flashy arrows and excessively obvious signage. Just make sure you are clear on the rules you set and protect them, do not make exceptions or users will throw their device against the nearest wall in confusion.

4. Learnability: This is where the design guidelines for iOS and Android can come in useful, so first time users can instinctively use your app. Make your app easily learnable by making users aware of the functions with not only visual design but also the design patterns so they recognize how to perform interactions from screen to screen.

5. Feedback and response time: Users expect apps to respond quickly, but design does not exist in a vacuum, we might need to make database calls and image loads if we do not want to automatically load these into the app due to concerns over it's file size. Just ensure that the design does not become a barrier to people achieving what they want to with this app.

6. Make sure your app is accessible: As an American, Gates refers to ADA compliance but this applies to any designer around the world. Ensure that your app is accessible for those with colour blindness or other disabilities listed in your region's compliance documentation. You can still design an elegant app by being compliant, it does not mean you have to compromise and end up with a shitty result.

Part 6: Visual design and branding

"Great design is a visual expression of great thinking"

Gates highlights some of the key elements of visual design which anyone should bear in mind and put intention behind when designing any app.

1. Consistency: We referred to consistency earlier as regards signifiers but another crucial element is to design everything on a grid. This helps us design with consistency and also ensure that the user does not have to re-learn the same things as they move from screen to screen.

2. Create visual hierarchy with colour, lines, type and type weighting: Using these elements to show people what you want them to focus on, helps to minimize the amount of navigation and copy you need, lending itself to a far more elegant and intuitive design.

3. Typography: Keep your typography simple and consistent, critically analyzing where you really need to use fonts which are specific to your brand and where you can use the standard fonts. In the spirit of making our app's file size as small as possible, you can make the typeface's file itself much smaller for your developers. An easy way to do this is to in and take out alternative languages and characters which you do not need to use.

4. Branding: Gates tell us that once users of his apps have downloaded and opened them, there is never a visible logo on any of his designs. He feels that this is an archaic remnant from web design, and that we can claim back this real estate to use it for informational content which users can act on.

5. Reinforcing the brand: If we're not reinforcing the brand through the logo, then we can do so through tone of voice and interaction design. In terms of interaction design, the animations and the way elements behave can be all you need. Will your elements be styled and react fast or slowly, fancy or intricate, colourful or conservative?

Part 7: Onboard like your app depends on it … it does

The onboarding experience should not be the afterthought that it so frequently becomes with most designs.

"The average person will decide if an app has value and they will decide if they are going to keep it in the first 2–3 minutes of using an app"

So we cannot afford to mess up first impressions with a mediocre onboarding experience.

Part 8: Develop short-term memory loss

As advised in Steven Krug's fantastic book Don't Make Me Think, designers need to step out of our own heads and ask ourselves, "if I didn't know anything about this app, does this make sense?"

I referred to a similar phenomenon in my article Design Smarter with "Vujade", in which I expand on a term that I stole from IDEO's Tom Kelley, to look at your/your team's designs with fresh eyes, even though you've spent weeks if not months toiling over the details in endless meetings. It's a hard skill to master but one which we should all strive for and can start practicing today.

Thanks for reading this overview of Stephen Gates' crash course in app design, I hope you learnt something valuable. Make sure to check out his podcast for more, The Crazy One. Until next time, adios.