Unit 3: Navigation and Workflows|Navigation and Workflows

Apps are more than a collection of views and controls. A great app is beautiful, approachable, engaging, powerful, and simple to use.

So far in this unit, you learned about many of the UIKit tools that help you build common user interfaces and respond to user interactions. In this lesson, you'll tie those concepts together to design simple workflows and familiar navigation hierarchies.

What You'll Learn

How to break down a feature into an intuitive workflow
How to design a navigation hierarchy for an app
Where to learn more about interface conventions

Vocabulary

Related Resources

iOS Human Interface Guidelines

Guide

You've learned that UIKit is the foundation for building iOS apps. Its conventions drive how iOS users interact with their devices, the operating system, and most of the apps they use every day. And it's because of these conventions that many iOS apps today feel familiar to long-time users.

The iOS Human Interface Guidelines defines some of the best practices for building intuitive workflows and familiar navigation hierarchies. As an app developer, you have the opportunity to put these practices to excellent use.

Design Principles

Equipped with a wide variety of views and controls in your toolset, you're already able to build many features into your apps. But to build an app that's both simple and powerful requires mastery of the Human Interface Guidelines—an understanding of when, where, and how to use UI objects in a familiar way.

The first page of the Human Interface Guideline includes a list of six characteristics to keep in mind as you design your apps.

Aesthetic Integrity

Your app’s appearance and behavior should make sense for its goals and purpose. For example, an app that helps people perform a serious task can keep them focused by using subtle graphics, standard controls, and predictable interactions. On the other end of the spectrum, an entertaining app, such as a game, can sport a captivating appearance that promises fun and excitement, while encouraging discovery.

Consistency

A consistent app incorporates features and behaviors in ways that people expect. Whenever possible, use system-provided interface elements, well-known icons, standard text styles, and uniform terminology—all available in UIKit—to deliver a familiar experience.

As you design specific features, explore how other apps have solved similar problems. For example, if you're designing a workflow for completing an order in an e-commerce app, take a look at the checkout flow of popular e-commerce apps. You shouldn't blatantly copy other apps, but you can use good examples as a starting point for your design.

Direct Manipulation

Through direct manipulation of onscreen content, users can see the immediate, visible results of their actions—which both adds engagement and facilitates understanding. When your app presents content that users can change or adjust, consider providing a way to manipulate the content with a gesture or by rotating the device. Many photo editing apps, for example, use swipe gestures to adjust settings or apply effects.

Feedback

Users should never wonder if an app responded to their actions. Make sure your app provides perceptible feedback—in the form of alerts, animations, or other confirmations—to let users know what's going on. If your app is loading data from the Internet, display the network activity indicator. If the action triggered by a button isn't available, dim the button.

For some good examples, take a look at the built-in iOS apps. In what ways do they acknowledge user actions? You might notice that interactive elements are highlighted briefly when tapped, progress indicators communicate the status of long-running operations, and animation and sound help clarify the results of actions.

Metaphors

Users catch on faster when an app’s objects and actions are metaphors for familiar experiences—whether rooted in the real or digital world. Have you ever wondered why the home screen on a computer is called the Desktop? Early versions of graphical interfaces used the Desktop metaphor to help users feel at home with this new computing paradigm. Folders represented directories, documents looked like paper, and the trash can was for deleting files.

Metaphors work even better in iOS because people interact physically with things on the screen. iOS interfaces use distinct visual layers and realistic motion to convey hierarchy and depth. Users can move views out of the way to discover information. They drag and swipe content. They toggle switches, move sliders, and scroll through picker values. They even flick through pages of books and magazines.

User Control

No matter how awesome an app is, it doesn't take control. It might suggest a course of action or warn about dangerous consequences, but the user should always get to make the important decisions. As you design your apps, try to give users decision-making power without bombarding them with alerts or options at every juncture. An app can make people feel in control by keeping interactive elements familiar and predictable, confirming destructive actions, and making it easy to cancel operations—even when they’re already underway. The best apps find the correct balance between enabling users and avoiding unwanted outcomes.

Human Interface Guidelines

The Human Interface Guidelines is your best resource for planning and designing apps. Take a moment to read through a handful of sections to get a feel for the type of information it covers.

Here are a few great sections to check out:

Data Entry details best practices for longer input screens or forms for collecting information from the user.
Color talks about using color to help people understand how to interact with interface elements.
Tables gives specific guidelines for presenting information in a table view.

As a new developer, you'll be more successful if you follow everything in the Human Interface Guidelines. But as you gain experience, you may recognize use cases that call for something outside the box. There are many great apps that extend beyond iOS conventions. As the saying goes, learn the rules like a pro, so you can break them like an artist.

Navigation Hierarchy

Your job as a developer is to implement navigation in a way that supports the purpose of your app without distracting the user. Navigation should feel natural and familiar, and shouldn't dominate the interface or draw focus away from the content.

In iOS, there are three main styles of navigation: hierarchical, flat, and content-driven or experience-driven.

Hierarchical Navigation

In this style, the user makes one choice per screen until reaching a destination. To navigate to another destination, they must retrace their steps or start over from the beginning and make different choices. Settings and Mail use a hierarchical navigation style.

Hierarchical navigation graphic

For this style, you'll typically use navigation controllers to enable navigation through a series of hierarchical screens. When a new screen is displayed, a Back button on the leading end of the navigation bar allows an easy return. (To give the user context, the bar may display the title of the current screen.)

Consider the Settings app. Users open Settings to view or update preferences, which are grouped into categories. These are hierarchical relationships: Each category contains subcategories or individual settings that the user can change.

The interface is designed using the same hierarchy. When you open the Settings app, you're presented with a list of categories. Choose a category and you see a list of subcategories or individual preferences. When you want to return to a parent list higher in the hierarchy, you can use the Back button to return to the previous view.

Flat Navigation

In a flat navigation design, users switch between multiple content categories. Music and App Store use this approach.

Flat navigation graphic

For flat navigation, you'll typically use a tab bar controller to organize information at the app level. A tab bar is a good way to provide access to several workflows or distinct modes of operation. You might also use a page controller.

Consider the App Store, which displays five categories of tasks, each presented by a tab: curated Today view, browse games, browse apps, Apple Arcade, or search.

Some apps combine multiple navigation styles. For example, the App Store uses a tab bar controller to separate tasks in a flat style but relies on hierarchical navigation within each tab.

Content-Driven, or Experience-Driven, Navigation

In this style, the user moves freely through content, or the content itself may define the navigation. Games, books, and other immersive apps generally use this type of navigation.

Content driven or experience-driven navigation graphic

In this course, you won't be building apps that rely on content-driven navigation.

Navigation Design Guidelines

It's important that users always know where they are in your app and how to get to their next destination. Regardless of navigation style, it’s essential that the path through content is logical, predictable, and easy to follow. A general guideline is to give people only one path, or navigation style, on each screen. If they need to see a screen in multiple contexts, or places in your app, consider using a modal view to complete the task.

As you think about the navigation hierarchy of your app, here are a few guidelines to follow:

Design an information structure that makes it fast and easy to get to content. Organize your information in a way that requires a minimum number of taps, swipes, and screens.

Use standard navigation components. Whenever possible, use standard navigation controls, such as tab bars, segmented controls, table views, collection views, and split views. Users are already familiar with these controls and will intuitively know how to get around in your app.

Use a navigation bar to traverse a hierarchy of data. The navigation bar’s title can display the user's current position in the hierarchy, and the Back button makes it easy to return to the previous position.

Use a tab bar to present peer categories of content or functionality. A tab bar lets people quickly and easily switch between categories or modes of operation, regardless of their current location.

Use the proper transition style. Whenever you're transitioning to a new screen to display more detail about an item, you should use a right-to-left push transition used by a Show segue within a navigation controller. If the user is switching contexts—from displaying contacts to adding a new contact, for example—use a modal transition.

Example Workflow

If you were to build an alarm and stopwatch app, it would be useful to plan out the features and workflow of the app before sitting down to build it. A good way to do this is with a simple flowchart that details the purpose of each screen, the mode of navigating from one screen to another, and the general navigation hierarchy of the app.

For this example, assume the app needs the following features:

Display alarms
Toggle alarms on and off
Create alarms
Edit alarms
Change the sound of alarms
Basic stopwatch functionality (display, start, lap, stop, reset)

Looking at the planned features, you can see that there are two separate modes in the app: alarm and stopwatch. A tab bar controller would provide a flat navigation design that would allow the user to clearly see both distinct features.

Because the alarm and stopwatch tabs are separate, each can focus on the workflows necessary to run its own feature. The stopwatch functionality can easily exist on a single view. So, the stopwatch tab doesn’t need any more than its own tab.

Managing alarms may require more than one screen. For example, it may be useful to have additional screens to view, create, and edit different alarms.

For this, you can build a view to list all the alarms and present different modal views when the user selects a preexisting alarm or needs to create a new one. The flowchart below illustrates the navigation hierarchy and overall workflow of this hypothetical app.

Alarm and Stopwatch app flowchart

Lab–Pizza Delivery

Objective

The objective of this lab is to practice designing simple and intuitive workflows and navigation hierarchies. You'll use what you've learned about design principles to plan out the navigation hierarchy and flow for a hypothetical pizza delivery app.

Step 1: Place Your Order

Take a look at a few popular e-commerce apps to get a good idea of purchase and checkout processes.
Whether in Keynote, in Pages, or on paper, create a flowchart that outlines the navigation hierarchy for your pizza delivery app. The ordering process should allow the user to view the menu, order a pizza, create a custom pizza, and proceed to their cart.

Step 2: Check Out

In addition to thinking through the ordering process, you'll need to think about the checkout process. Again, look at some of your favorite e-commerce websites or apps to see how they handle checking out. You don't have to actually buy anything—just go far enough that you get a good sense of navigation hierarchy and workflow.
Once a customer has finished selecting or creating their pizza in your pizza delivery app, what will they do next? Design the navigation hierarchy for checking out, and add it to your flowchart.
Determine how the app will flow from ordering the pizza to the checkout process. Can a customer leave the ordering navigation hierarchy and still view their cart? Is the cart accessible after going through the ordering process? Design what you think is best for the user—and for a successful pizza business.

Step 3: Other Useful Features

Are there other steps you think might be essential to a pizza delivery app? If so, think of the simplest way to include them and add them to your flowchart.

Congratulations! This sort of practice will help you create user-friendly workflows as you start designing your own apps. If you created your flowchart on paper, take a picture of it so you can save it to your project folder. If you created it on the computer, be sure to save the file.