Making sense of the iOS Themes – Clarity (Part 2)

As I stated in my last post on Deference, it’s important to have a foundational understanding of the often neglected iOS Human Interface Guidelines when designing apps for the iPhone. These guidelines provided by Apple are extremely helpful as a quick start to learning some of the essentials of designing for iOS. Since we’ve already talked about Deference already the next theme I’d like to talk about is Clarity, the second theme of iOS. The power of understanding themes and patterns like those found in the iOS HIG is they reduce memory load for users through instant recognition and through use of commonly understood conventions.

As listed on the iOS HIG website, the main themes of iOS are:
• Deference
• Clarity
• Depth

Okay, let’s dive in to the second theme…


Clarity
Be as simple and straightforward as possible

The main point of Clarity is this, the intent of every screen should be clear and appropriate to the function of the app, content should be well written and text should be legible at every size. Adornment and icon treatments should be simple and appropriate for the context. Only do what helps strengthen the focus for each screen and helps the user perform their task.


I strive for two things in design: simplicity and clarity. Great design is born of these two things.
–Lindon Leader


Examples:

The two screens below do an excellent job of keeping the content of each screen clear and appropriate. In this screen from Handle there is a clear hierarchy of the month, year and dates. Additionally, there is a good use of whitespace and the use of a grid system for the calendar which helps keep the interface clean. In Acornthere is a clear presentation of information shown to the user which includes a title, amount which is the largest and seems to be the most important and the amount of change. I’m not convinced that acorn icon is needed on this screen though. Another nice effect of this screen is the use of a green background color to indicate that the account value is going up.
clarity

In this walkthrough from Munchery there is a nice hierarchy of image, title, detail and action at the bottom. In the first screen of the walkthrough they want to give you just enough information to keep you interested but the clear purpose of this screen is to keep the user swiping. On the final screen of the walkthrough the clear call to action is the bright orange button at the bottom of the screen which also happens to be in a very reachable area of your device.

clarity - walkthrough

I hope the examples above are useful to you. There really are countless examples of effective UI, below are a few of my favorite resources to check out for examples.


Tips to help with Clarity:

  • Use negative space – Don’t clutter the UI with a bunch of elements, instead use negative space to help visually simplify the screens in your app.
  • Use dynamic type – I recommend using a system supported typeface like SF (iOS system font) or Helvetica Neue that works with dynamic Type. Dynamic type automatically adjusts letter spacing and line height so that text looks good at every size and is still easy to read.
  • Embrace borderless buttons – especially in the top bar where a container will only add complexity to the interface.
  • Use basic principles of design – Dominance, focal points and visual hierarchy have long been established as basic and foundational design principles. Understanding these principles will make sure you establish a good foundation for your design.
  • Be selective on how much you include in your design – Do more with less and add as little “design flare” as possible. Only allow what is necessary to be included.
  • Do more with less – Be as selective as possible with how much you do with your app from the purpose all the way down to every screen. Be as simple as possible by keeping the elements on each screen to a minimum. Keep in mind that it’s difficult to focus on more than 1 or 2 things at a time.
  • Use clear icons – Some icons are generally understood in iOS. In most cases use those as it will help your app to be more intuitive. If you want to provide a unique style don’t deviate from commonly understood symbols and icons. Doing so will ensure your app is less usable.

I’m currently writing a book on iOS app design and how to apply the best design practices to help you design better apps for iOS. Learn more about the book here and sign up to get notified when it’s launched! As a thank you for signing up I’ll also send you an 11 page iOS App Design Kit to that will help you create your next iOS app.

#design#ios#ipad#iphone#principles