How-To: Alert Dialogs on iOS

When designing your application for an iOS device, you might run into a common interface feature; The Alert Dialog. These dialogs are simple and easy to use features for a user, but without careful positioning of buttons and the overall know-how of alert dialogs, it could turn out into a disaster for the user. To counter this, just follow the basics as described below.

The Description

Alert dialogs are temporary views that will appear on top of your application to bring the user’s attention to some detail or ask the user to confirm an action being done. An alert dialog will popup in the center of the screen and all other interaction with the application is disabled until the dialog is canceled.

The Layout

An alert dialog consists of three separate parts; a title, a message body and one or more buttons. Below is a visual representation of an alert dialog:

1. Title

The first element is the title. Try to avoid titles that contain only one word or take up more then one line. Keep them short and descriptive. Do not forget to use title-style capitalization, in which the first character of most words is capitalized. An example for a good title could be “New Text Message”, so do not use a title like “You have a new text message”.

2. The Message

While an iOS device gives you enough space to show the user a lot of information, try to keep the message within an alert dialog short and to the point. Mostly this ends up with using two lines long sentences, where only the first character in the first word in each sentence is capitalized (sentence-style capitalization). Whenever your message will contain too many words, the device will create a scrolling alert dialog. This is something you really want to avoid, since it gives a bad user-experience.

3. The Buttons

The buttons within the alert view are the controls that could make or break your workflow. An alert dialog mostly consists of two buttons. Using three or more buttons is not preferred and could give the user some difficulty to read and respond to to the information you are presenting in your dialog.

A very important part of the buttons is the positioning;

  • Whenever you are deciding to show an alert dialog that performs a risky or destructive action, place a light-colored Cancel button on the right and place a dark-colored OK button on the left.
  • Whenever you are deciding to show an alert dialog that performs a positive action, place a light-colored OK button on the right and an dark-colored Cancel button on the left.

The coloring and meaning of the buttons are always the same, where the left button is dark-colored and represents a negative action and the right button is light-colored and represents a positive action.

While it might seem useful for bringing the user’s attention to your dialog, try not to overuse them. Using too many dialogs in your application decrease in how important they are and they will most often slow down the flow within your application. Instead, try designing a way to show your users more information within the screen that is currently available.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s