People love OS X because it gives them the tools and environment they need to create, manage, and experience the content they care about. A great OS X app integrates seamlessly into this environment, while at the same time providing custom functionality and a unique user experience.
Before you dive into the guidelines that help you design a great app, take a few moments to explore how OS X Yosemite uses simplicity, consistency, and depth to give users a content-focused experience.
Yosemite simplifies many parts of the user interface (UI) to emphasize core functionality. For example, app icons simplify and clarify ornamentation, while remaining gorgeous and instantly recognizable.
Calendar app icon in Yosemite
Calendar app icon in Mavericks
The system font is a specially optimized version of Helvetica Neue, which displays textual content with beauty, clarity, and sharpness.
The combined title bar and toolbar area removes clutter from the window UI without decreasing functionality.
Yosemite refreshes and refines the OS X UI, without losing the consistency that helps people feel at home in the environment.
Icon styles are freshly balanced to communicate a sense of harmony and stability.
The realistic icon style—used by Preview, Mail, Photo Booth, and Dictionary, among others—employs a consistent level of detail, perspective, light source, and rendering style.
In icons that use the round graphical style—such as those in iTunes, iBooks, App Store, and Safari—the symbols use the same embossed effect, and the overall shape and use of color are consistent.
Using an optimized version of Helvetica Neue as the system font means that both apps and the system present all text consistently. The use of Helvetica Neue also gives users a consistent experience when they switch between iOS and OS X.
Reminders in OS X
Reminders in iOS
Yosemite refines the impression of plausible, physical dimensionality in the UI. In particular, Yosemite uses translucency and vibrancy to help users focus on what’s important to them. (Vibrancy is a sophisticated blending mode that lets UI elements absorb color from content that’s underneath them.)
Drop shadows, translucency, and vibrant colors help the active window stand out so that users instantly notice it.
A translucent toolbar helps the window UI recede, letting the user’s content appear more prominent.
Sidebars and overlays can use vibrancy to defer to the user’s content in two different ways.
A sidebar that enables app-level navigation, such as the Finder sidebar, lets users see the content behind the window.
An overlay that provides selection and other controls that are focused on window content, such as the Maps Directions view, gives users a more expansive view of the window’s content.
Notification Center helps people stay anchored to their previous context by using a vibrant, dark appearance that automatically complements the desktop beneath it.
App Styles and Anatomy
Broadly speaking, there are three main styles of OS X apps:
Single-window utility. A single-window utility app, such as Calculator or Dictionary, helps users perform the primary task within one window. Although a single-window utility app might also open an additional window—such as a preferences window—the user remains focused on the main window.
Single-window “shoebox.” A single-window shoebox app tends to give users an app-specific way to view and manage their content. For example, Photos users don’t find or organize their photos in the Finder; instead, they manage their photo collections entirely within the app.
Multiwindow document-based. A multiwindow document-based app, such as Pages, opens a new window for each document the user creates or views. This style of app does not need a main window (although it might open a preferences or other auxiliary window).
Regardless of style, an OS X app presents content in one or more windows and app-specific commands in the systemwide menu bar.
The AppKit framework defines the windows, menus, controls, and other objects that you use to present your app’s UI, and it supports many app-level features, such as gesture recognition, font management, image handling, accessibility, and speech synthesis and recognition. AppKit also defines the light and dark vibrant appearances in Yosemite, in addition to a visual effect view you can use to create custom vibrant views (to learn more about this view, see NSVisualEffectView).
Setting aside programmatic inheritance, you can think of the UI objects that AppKit provides as belonging in the following broad conceptual categories:
Windows. A window provides the frame in which the app’s content is displayed.
Menus. A menu, such as File, Edit, or Window, contains commands that people use to control the app.
Content views. A content view, such as a table view, text view, or popover, displays the user’s content and can contain controls that people use to manage the content.
Controls. People use controls, such as a buttons, sliders, and checkboxes, to provide input and perform tasks in the app.
To manage many of these UI objects programmatically, you use various types of controllers, such as a window controller, a tab view controller, or a split view controller. Typically, a window controller contains one or more view controllers, each of which manages a set of views and controls.
A storyboard is a great way to visualize the basic anatomy of an app. In a storyboard, a scene represents a controller and the views it manages, and a segue represents a relationship between two scenes. Two scenes can be related by containment (a window controller can contain a tab view controller) or by presentation (a view controller can present a popover).
Viewing an app in a storyboard makes it easy to grasp its anatomy. Here, in the storyboard for an app similar to Pages, you can see the views contained in various view controllers and the relationships between the view controllers.
Great software design incorporates a number of timeless principles for human-computer interaction. The principles described here form the foundation of elegant, efficient, intuitive, and delightful apps.
Mental Model
A mental model is the concept of an object or experience that people carry in their heads. As people learn and experience things—in both the real and digital worlds—they refine their mental models and build new ones.
It’s important to acknowledge the mental models that people bring to your app, because these models influence people’s expectations. If you’re developing an email app, for example, you need to understand how people think about email tasks (such as composing, reading, sending, and managing) and objects (such as messages, mailboxes, and addresses). But if you delve deeper, you might discover that people approach the email task with mental models that are rooted in the nondigital world. For example, people are likely to have mental models that are informed by writing, sending, and receiving physical letters. A great email app could use these insights to provide a highly intuitive and delightful user experience.
Although you should understand the user’s mental models, don’t feel that you must treat them as blueprints for your app. A great app builds on existing mental models and extends them appropriately, so that the unique and exciting experience it offers balances familiar experiences with new ones.
Metaphors
Metaphors are building blocks in the user’s mental model of a task or experience. A good way to take advantage of people’s knowledge of the world is to use metaphors to convey objects and actions in your app. Metaphors that represent concrete, familiar ideas, can help users understand a new experience. For example, OS X uses the metaphor of file folders for storing documents, which means that people can organize their digital documents in a way that’s analogous to the way they organize physical documents in file cabinets.
Metaphors also extend to motions. People have strong expectations about the way objects can move and behave, and it’s usually best to work with these expectations rather than against them. For example, users can be confused or disoriented by onscreen objects that appear to defy gravity or other natural laws without a good reason.
Note that a metaphor can suggest how a particular element should appear or behave, but it shouldn’t be used as an implementation specification. It’s important to strike a balance between the experience suggested by a metaphor and the computer’s ability to extend that experience for greater utility. For example, the number of items a user puts in the Trash is not limited to the number of items a physical wastebasket can hold.
Explicit and Implied Actions
Nearly every user operation involves the manipulation of an object using an action. Typically, an action involves these three steps:
Identify an object onscreen.
Select or designate the object.
Perform an action, either by invoking a command or by direct manipulation of the object.
These steps lead to two paradigms for manipulating objects: explicit actions and implied actions.
An explicit action clearly states the result of applying an action to an object. For example, menus list the commands that can be performed on the currently selected object. The name of each menu command clearly indicates what the action is; the current state of the command (such as dimmed or enabled) indicates whether that action is valid in the current context. Explicit actions don't require users to memorize the commands that can be performed on a given object.
An implied action conveys the result of an action through visual cues or context. A good example of an implied action is a drag-and-drop operation: Dragging one object onto another object can have various results, but none of them are explicitly stated. Users rely on visual cues, such as changes to the appearance of the pointer or the destination, to predict the result of a drag operation. For implied actions to be useful, users must be able to recognize the objects involved, the manipulation to be performed, and the consequences of the action.
Typically, an app supports both explicit and implied actions, often for the same task. Depending on the mental model of a task, and the sophistication and expectations of the user audience, one action style can be more appropriate than the other.
Direct Manipulation
Direct manipulation is an example of an implied action that helps users feel that they are controlling the objects represented by the computer. According to this principle, an onscreen object should remain visible while a user performs an action on it, and the impact of the action should be immediately visible. For example, users can move a file by dragging its icon from one location to another, or drag selected text directly into another document. Another example of direct manipulation is the use of pinching and zooming gestures to resize an onscreen object.
Direct manipulation often supports the user’s mental model of a task, because it can feel more natural than explicit actions. For example, an app that manages a virtual library might allow users to drag a book icon onto a patron’s name to check it out, instead of requiring them to open a window, select a book title, select a patron name, and choose a Check Out menu command. (To learn more about the concept of a mental model and explicit actions, see Mental Model and Explicit and Implied Actions.)
User Control
The principle of user control presumes that the user, not the computer, should initiate and control actions. This principle can be challenging to follow for two reasons:
The ideal user experience lies somewhere between expecting users to provide instructions for every step of every action and preventing users from initiating any but the most basic actions.
The right amount of user control depends on the sophistication of the user audience.
For example, novice users often appreciate apps that shield them from the details associated with a task, whereas experienced users tend to appreciate apps that give them as much control as possible.
The technique of progressive disclosure—that is, hiding additional information or more complex UI until the user needs or requests it—can help you provide the right level of user control. In a nutshell, progressive disclosure helps novice users understand an app without being overwhelmed with information or features they don’t need, while at the same time giving more experienced users access to the advanced features they want.
Feedback and Communication
Feedback and communication encompass far more than labeling buttons and displaying alerts when something goes wrong. Instead, these concepts are about establishing and maintaining a continuous conversation with users that keeps them informed about what’s happening and gives them a sense of control.
For example, when users initiate an action, they need to know that the app has received their input and is operating on it. When a command can’t be carried out, users need to know why it can’t and what they can do instead. Subtle animation can be a great way to communicate responsiveness and show users that a requested action is being carried out. For example, when a user clicks an icon in the Dock, the icon bounces to let the user know that the app is opening.
Animation can also clarify the relationships between objects and the consequences of user actions. For example:
When a user minimizes a window, it doesn’t just disappear. Instead, it smoothly slips into the Dock, clearly telling the user where to find it again.
To communicate the relationship between a sheet and a window, the sheet unfurls from the window’s title bar.
To emphasize the relationship between a popover and content in a window, the popover emerges from the user’s point of contact and floats above the window to show that it contains a separate task.
Discoverability is closely related to feedback and communication. In its conversation with users, an app encourages users to discover functionality by providing cues about how to use UI elements. For example, active elements appear clickable, the pointer can show where keyboard input will go, and informative labels and menu items describe what users can do. Standard OS X controls and views automatically communicate their purpose and usability to users.
Consistency
Consistency in the interface allows users to transfer their knowledge and skills from one app to another. Applying the principle of consistency does not mean that your app must look and behave the same as all other apps. Rather, the principle of consistency holds that an app should respect its users and avoid forcing them to learn new ways to do things for no other reason than to be different.
When thinking about how your app handles consistency, consider the principle in the following contexts. Specifically, is your app consistent with:
OS X standards? For example, does the app use the reserved and recommended keyboard equivalents for their correct purposes? Does it use standard UI elements correctly and integrate well with the Finder, the Dock, and other OS X features that users appreciate? For more information about these items, see Keyboard Shortcuts and Integrating with OS X.
The app itself? Does it use consistent terminology for labels and features? Do icons mean the same thing every time they are used? Are concepts presented in similar ways across all modules? Are similar controls and other UI elements located in similar places in windows and dialogs?
Earlier versions of the app? Have the terms and meanings remained the same between releases? Are the fundamental concepts essentially unchanged?
People’s expectations? Does it meet the needs of the user without extraneous features? Does it conform to the user’s mental model? For more information on this concept, see Mental Model.
Forgiveness
Forgiveness encourages people to explore without fear, because it means that most actions can easily be reversed. People need to feel that they can try things without damaging the system or jeopardizing their data.
Forgiveness can also give an app the impression of reliability. When people know that it’s not easy for them to make mistakes that result in data loss or corruption, they’re more likely to trust the app.
Safety nets, such as the Undo and Revert To commands, can help people feel comfortable learning and using apps. Deferring the commitment of the user’s edits can also help. For example, iPhoto allows users to perform all sorts of modifications to a photo without actually changing the photo file until they want to.
Users also need to know when they initiate a task that will cause irreversible loss of data. To be forgiving, an app should give users the option to cancel a potentially dangerous action, but still perform the action after users confirm their intent.
Aesthetic Integrity
Aesthetic integrity means that the visual and behavioral design of an app is consistent with the content and tasks it presents. Aesthetic integrity does not mean that every app should adhere to a particular style or design.
People care about whether an app delivers the functionality it promises, but they’re also affected by the app’s appearance and behavior in strong—sometimes subliminal—ways. For example, an app that helps people perform a serious task can put the focus on the task by keeping decorative elements subtle and unobtrusive and by using standard controls and predictable behaviors. This app sends a clear, unified message about its purpose and its identity that helps people trust it. But if this app sends mixed signals by presenting the task in a UI that’s intrusive, frivolous, or arbitrary, people might question the app’s reliability or trustworthiness.
On the other hand, in an app that encourages a fun, immersive task—such as a game—users expect a captivating appearance that promises entertainment and encourages discovery. People don’t expect to accomplish a serious or productive task in a game, but they expect the game’s appearance and behavior to integrate with its purpose.
