Lesson 4. Architecture and Navigation Patterns

In this lesson you'll learn about designing Navigation on your app, the patterns you may use to achieve it, and other aspects of iOS apps architecture.

Activity Type Lesson
Expected Duration 15 minutes
Topic Architecture and Navigation Patterns
Objective Learn about designing Navigation on your app and the patterns you may use to achieve it.

In Apple Human Interface Guidelines the App Architecture is divided into six essential concepts.

Accesibility:

iOS offers accessibility features for users with disabilities. Allowing more people to use your app while providing an equally engaging experience for all. Make sure to provide text labels for multimedia content like images or icons so that users with visual impairments can navigate your app through VoicerOver. Use UIKit components, because this will respond automatically to accessibility preferences.

Accesibility Image from: Human Interface Guidelines

Loading:

You have to make sure that the user knows when something in your app is loading a static screen without any message could result confusing for the user. Use a loading icon or a progress bar, but trying to show the content as soon as possible is the best thing that you can do.

Loading Image from: Human Interface Guidelines

Modality:

You use modality when you want the user focus in just one task and you need them to complete it before doing anything else. You should try to avoid modality unless is completely necessary, like asking about saving important data. When using modality you should provide a way to leave the modal, this is normally achieve by setting an ok and cancel buttons in all modals. Other important thing to be aware of the transition of the model, it can be the default one in which the modal appears from the bottom up of the screen, but choose the transition that better fits your app.

Modal View Style Image from: Human Interface Guidelines

Onboarding:

It refers to get the attention of the user with the first look of the app, also showing that you app is ready when needed. Use a launch screen or what is called a splash screen, to give a fun an interactive experience to the user. Avoid using static images that look interactive but are not.

Launch Screen Image from: Human Interface Guidelines

Request Permission:

It is important to give the user the sensation that you understand that their data is valuable and you are making sure of keeping it safe. So, using sensors data is ok, but make sure to have the option to disable those features, or at least to disable them for some time. Ask for permission of using or accessing user data only when needed and explained for which features are you using the data.

Request Permission Image from: Human Interface Guidelines

Settings:

Your app should work without asking the user for an initial settings set up. But is important that you provide a settings view in your app, so the user can personalize some features without leaving the app.

Settings Image from: Human Interface Guidelines

It should feel natural and familiar, it should not draw attention away from the content, it is normally clean and easy to understand. The transitions are not complex and it should support the structure and purpose of the app. There are three styles of navigation:

  • Hierarchical Navigation: You make one choice per screen until you reach your destination. Each functionality is a path in the three of the applications views.

    Hierarchical Navigation Image from: Human Interface Guidelines

  • Flat Navigation: There are multiple categories or tabs and you choose between them to get to the functionalities.

    Flat Navigation Image from: Human Interface Guidelines

  • Content-Driven Navigation: You can move free through the content, but normally the content directs the navigation.

    Content-Driven Navigation Image from: Human Interface Guidelines

Apps combine different styles of navigation in them, it is not necessary to use only one. But the navigation should always be clear and easy to follow. We recommend to always use the container view controller Navigation Controller, it can be personalize, but navigation and transitions are already implement in it, so it would be a lot more easier for you, just to use it as it comes.


Version Author Date
1.0 Sergio Yodeb Velasquez Yepes February 28, 2018

results matching ""

    No results matching ""