sábado, 21 de enero de 2012

Human Interface Principles for iOS part IV


 



User Experience Guidelines


The user experience of iOS-based devices revolves around streamlined interaction with content that people care about. The guidelines in this chapter apply to apps that run on all iOS-based devices.

Focus on the Primary Task

When an iOS app establishes and maintains focus on its primary task, it is satisfying and enjoyable to use. Your application definition statement will help you focus your app on its primary task . To maintain that focus, you need to determine what’s most important in each context or screen.
Analyze what’s needed in each screen. As you decide what to display in each screen always ask yourself, Is this critical information or functionality users need right now? If your answer is no, decide whether the information or functionality might be critical in a different context, or if it’s not that important after all.
For example, the iPhone Calendar application is focused on days and the events that occur on them. Users can use the clearly labeled buttons to highlight the current day, select a viewing option, and add events.
image: ../Art/calendar.jpg

Elevate the Content that People Care About

In a game, people care about the experience; they don’t expect to manage, consume, or create content. If you’re developing a game, you elevate content by enhancing the experience with a satisfying story, beautiful graphics, and responsive gameplay.
If you’re not developing a game, you can help people focus on the content by designing your UI as a subtle frame for the information they’re interested in. Here are some ways you can do this:

Minimize the number and prominence of controls to decrease their weight in the UI. Photos does this by placing a few unobtrusive controls on translucent bars.
Consider subtly customizing controls so that they integrate with your app’s graphical style. In this way, controls are discoverable and comprehensible, without being conspicuous.

Consider fading controls after people have stopped interacting with them for a little while, and redisplaying them when people tap the screen. Sometimes you may want to fade the rest of your application UI, too. This is especially appropriate in apps that enable an immersive experience, because it gives even more of the screen space to the content people want to see. For example, Photos fades the controls and bars after a few moments of noninteraction, which encourages people to immerse themselves in the content. When people want to perform a task with their photos, a single tap anywhere on the screen redisplays the controls.

Think Top Down

The top of the screen is most visible to people, because they tend to interact with the device by holding the device in the following ways:
  • In their nondominant hand (or laying it on a surface), and gesturing with a finger of the dominant hand
  • In one hand, and gesturing with the thumb of the same hand
  • Between their hands, and gesturing with both thumbs
Put the most frequently used (usually higher level) information near the top, where it is most visible and easy to reach. As the user scans the screen from top to bottom, the information displayed should progress from general to specific and from high level to low level.
For example, in a game, the most important action can take place in the top half of the screen. This leaves the bottom half of the screen for supplementary information and for controls users can tap without obscuring their view.

Give People a Logical Path to Follow

Make the path through the information you present logical and easy for users to predict. In addition, be sure to provide markers, such as back buttons, that users can use to find out where they are and how to retrace their steps.
In most cases, give users only one path to a screen. If a screen needs to be accessible in different circumstances, consider using a modal view that can appear in different contexts.

Make Usage Easy and Obvious

Strive to make your application instantly understandable to people, because you can’t assume that they have the time (or can spare the attention) to figure out how it works.
Make the main function of your application immediately apparent. You can make it so by:
  • Minimizing the number of controls from which people have to choose
  • Using standard controls and gestures appropriately and consistently so that they behave the way people expect
  • Labeling controls clearly so that people understand exactly what they do
Be consistent with the usage paradigms of the built-in applications. Users understand how to navigate a hierarchy of screens, edit list contents, and switch among application modes using the tab bar. Make it easy for people to use your application by reinforcing their experience. For example, people understand that the blue button in a toolbar represents the action they’re most likely to take in the current context. If your app displays more than one blue button in a single context, users will have to figure out which one to tap.
In the built-in Stopwatch function (part of the iPhone Clock application) users can see at a glance which button stops and starts the stopwatch and which button captures lap times.
image: ../Art/stop_watch.jpg

Use User-Centric Terminology

In all your text-based communication with users, use terminology you’re sure that your users understand. In particular, avoid technical jargon in the user interface. Use what you know about your users to determine whether the words and phrases you plan to use are appropriate.
The Wi-Fi Networks Settings screen uses plain language to explain how iOS responds to the user’s preference.
image: ../Art/da_userlanguage.jpg
Take care to be accurate when describing dates. It’s often appropriate to use friendly terms such as “today” and “tomorrow” when you display date information in your UI, but it can be confusing if you don’t account for the user’s current locale. For example, consider an event that starts just before midnight. To users in the same time zone, the event starts today, but to users in an earlier time zone, the same event may have started yesterday.

Minimize the Effort Required for User Input

Inputting information takes time and attention, whether people tap controls or use the keyboard. If your application requires a lot of user input before anything useful happens, that input slows people down and can discourage them from using your app.
Balance any request for input by users with what you offer users in return. In other words, strive to provide as much information or functionality as possible for each piece of information people give you. That way, people feel they are making progress and are not being delayed as they move through your application.
Make it easy for users to input their choices. For example, you can use a table view or a picker instead of a text field, because it’s usually easier for people to select an item from a list than to type words.

Get information from iOS, when appropriate. People store lots of information on their devices. When it makes sense, don’t force people to give you information you can easily find for yourself, such as their contacts or calendar information.

Downplay File-Handling Operations

Although iOS apps can allow people to create and manipulate files, this does not mean that people should have an awareness of a file system on an iOS-based device.
There is no iOS application analogous to the Mac OS X Finder, and people should not be asked to interact with files as they do on a computer. In particular, people should not be faced with anything that encourages them to think about file metadata or locations, such as:
  • An open or save dialog that exposes a file hierarchy
  • Information about the permissions status of files
As much as possible, allow people to manage documents without opening iTunes on their computer. Consider using iCloud storage to help users access their content on all of their devices.


If your application allows people to create and edit documents, it’s appropriate to provide some sort of document picker that allows them to open an existing document or create a new one. Ideally, such a document picker:
  • Is highly graphical. People should be able to easily identify the document they want by looking at visual representations of the documents onscreen.
  • Allows people to make the fewest possible gestures to do what they want. For example, people might scroll horizontally through a carousel of existing documents and open the desired one with a tap.
  • Includes a new document function. Instead of making people go somewhere else to create a new document, a document picker can allow them to tap a placeholder image to create a new document.
You can also use the Quick Look Preview feature to allow people to preview documents within your app, even if your app can’t open them. To learn how to provide this feature in your app.

Enable Collaboration and Connectedness

iOS devices are personal devices, but they also encourage collaboration and sharing with others. Enhance your app by helping people collaborate and connect with others.
When appropriate, make it easy for people to interact with others and share things like their location, opinions, and high scores. People generally expect to be able to share information that’s important to them.

Most applications can add value by allowing people to go beyond the application and share data with other tools they use. For example, an iOS application can act as a mobile complement to a computer application. Or, an iPad application might allow its users to communicate with the users of the iPhone version of the app. 

If your app allows people to access their Twitter account, be sure to take advantage of the Twitter framework APIs so that you can avoid asking users to sign in multiple times on the same device.

For iPad, think of ways to allow more than one person to use your app on the same device. For example, two people might be able to play a game on opposing sides of an onscreen board. Or a band application might allow different people to play different instruments together on a single device.

De-emphasize Settings

Avoid including settings in your application if you can. Settings include preferred application behaviors and information that people rarely want to change. Users cannot open the Settings application without first closing your application, and you don’t want to encourage this action.

When you design your application to function the way most of your users expect, you decrease the need for settings. If you need information about the user, query the system for it instead of asking users to provide it. If you decide you must provide settings in your iOS application.


Let users set the behavior they want by using configuration options in your application. Configuration options let your application react dynamically to changes, because people do not have to leave your application to set them.

Offer configuration options in the main user interface or (in iPhone apps) on the back of a view. To decide which location makes sense, determine whether the options represent a primary task and how often people might want to set them.
  • In the main UI, put options that provide primary functionality or that people want to change frequently.

    For example, iPad Calendar allows people to view their schedules by day, week, or month. These configuration options are offered in the main UI because viewing different perspectives of a calendar is a primary functionality of the app and people are likely to change their focus frequently.

    Apps that provide an immersive experience, such as games, are most likely to provide configuration options within the app, because users tend to change aspects of the experience frequently.
  • In iPhone apps, you can put options that people are unlikely to change frequently on the back of a view. For example, the primary function of Weather is to display a city’s current conditions and 6-day forecast. Although it’s important to be able to choose whether temperatures are displayed in Celsius or Fahrenheit, people are not likely to change this option very often. Therefore it makes sense to put the temperature-scale option on the back of the Weather view, where it is conveniently available, but not obtrusive.

    image: ../Art/ds_weatherback.jpg

Brand Appropriately

Incorporate a brand’s colors or images in a refined, unobtrusive way. Branding is most effective when it is subtle and understated. People use your application to get things done or to be entertained; they don’t want to feel as if they’re being forced to watch an advertisement. For the best user experience, you want to quietly remind users of your identity.

Avoid taking space away from the content people care about. For example, displaying a second, persistent bar at the top of the screen that does nothing but display branding assets means that there’s less room for content. Consider other, less intrusive ways to display pervasive branding, such as subtly customizing the background of a screen.

The exception to these guidelines is your application icon, which should be completely focused on your brand. Because users see your application icon frequently, it’s important to spend some time balancing eye-appeal with brand recognition.

Make Search Quick and Rewarding

In applications that handle or display a lot of data, search can be a primary function. If you need to provide search in your application, follow these guidelines to ensure that it performs well.

Build indexes of your data so that you are always prepared for search. Don't wait until the user initiates a search to do this, because you can't afford to create a negative first impression of the search experience in your application.

Live-filter local data so that you can display results more quickly. It’s best when you can begin filtering as soon as users begin typing, and narrow the results as they continue typing. Although live-filtering data usually produces a superior user experience, it’s not always practical. When live filtering is impractical, you can begin the search process after the user taps the Search button in the keyboard. If you do this, be sure to provide feedback on the search’s progress so users know that the process has not stalled.

When possible, also filter remote data while users type. Although filtering users' typing can result in a better search experience, be sure to inform them and give them an opportunity to opt out if the response time is likely to delay the results by more than a second or two.

Display a search bar above a list or the index in a list. Users expect to find a search bar in this position, because they're accustomed to the search bar in Contacts and other applications. Putting the search bar in this location means that it stays out of users' way when they're scrolling through the list or using the index, but is conveniently available when it's needed.

Use a tab for search only in special circumstances. If search is a primary function in your application you might want to feature it as a distinct mode. In iTunes, for example, finding and getting music and podcasts is the focus of the application. Users want to search for their favorite songs, artists, or podcasts regardless of the mode they're currently in, so it makes sense to offer a dedicated search tab that's always available.

If necessary, display placeholder content right away and partial results as they become available. In this way, you give users useful information promptly. In YouTube, for example, users initiate a search for videos by tapping the Search button. If the network connection is slow, YouTube first displays the Loading... message along with a spinning activity indicator so that users know that search is proceeding. Then, YouTube displays a results list in which each row is populated with textual results, such as video title and viewer rating, and a custom image of a box with a dotted outline. As users scan the list of video titles, the video thumbnails replace the dotted boxes as they are downloaded.

Consider providing a scope bar if the data sorts naturally into different categories. A scope bar allows users to specify locations or rules in a search or to filter objects by specific criteria. It contains up to four scope buttons, each representing a category. For example, Mail provides a scope bar that allows users to focus their search on the From, To, or Subject fields of messages, or broaden the search to include all fields. Providing a scope bar helps users focus their search and can significantly reduce the number of results. To learn more about using a scope bar.

Entice and Inform with a Well-Written Description

Your App Store description is a great opportunity to communicate with potential users. In addition to describing your application accurately and highlighting the qualities you think people might appreciate the most, follow these guidelines:

Be sure to correct all spelling, grammatical, and punctuation errors. Although such errors don’t bother everyone, in some people they can create a negative impression of your application’s quality.

Keep all-capital words to a minimum. The occasional all-capital word can draw people’s attention, but capitalizing every letter of every word in a description can make it very difficult to read.

Consider describing specific bug fixes. If a new version of your application contains bug fixes that customers have been waiting for, it can be a good idea to mention this in your description.

Be Succinct

Think like a newspaper editor, and strive to convey information in a condensed, headline style. When your UI text is short and direct, users can absorb it quickly and easily. Identify the most important information, express it concisely, and display it prominently so that people don’t have to read too many words to find what they’re looking for or to figure out what to do next.
Give controls short labels, or use well-understood symbols, so that people can tell what they do at a glance. When appropriate, use the built-in buttons and icons.

Use UI Elements Consistently

People expect standard views and controls to look and behave consistently across applications.
Follow the recommended usages for standard user interface elements. In this way, users can depend on their prior experience to help them as they learn to use your application. You also make it easy for your app to look up-to-date and work correctly if iOS changes the look or behavior of these standard views or controls.
For an app that enables an immersive task, such as a game, it’s reasonable to create completely custom controls. This is because you’re creating a unique environment, and discovering how to control that environment is an experience users expect in such applications.
Avoid radically changing the appearance of a control that performs a standard action. If you use unfamiliar controls to perform standard actions, users will spend time discovering how to use them and will wonder what, if anything, your controls do that the standard ones do not.
iOS makes available to you many of the standard buttons and icons used throughout the built-in applications. For example, you can use the same Refresh, Organize, Trash, Reply, and Compose icons that Mail uses on both iPhone and iPad.
image: ../Art/ui_taskstyleexample.jpg
image: ../Art/icons_in_ipad_mail.jpg
To avoid confusing people, never use the standard buttons and icons to mean something else. Be sure you understand the documented meaning of a standard button or icon; don’t rely on your interpretation of its appearance. 

In addition to the benefit of leveraging users’ prior experience, using system-provided buttons and icons imparts two other substantial advantages:
  • Decreased development time, because you don’t have to create custom art to represent standard functions.
  • Increased stability of your user interface, even if future iOS updates change the appearances of standard icons. In other words, you can rely on the semantic meaning of a standard icon remaining the same, even if its appearance changes.
The Interface Builder editor in Xcode makes it easy to use the system-provided buttons and apply system-provided icons to your controls.

If you can’t find a system-provided button or icon that has the appropriate meaning for a specific function in your application, you should design a custom button or icon. 

Consider Adding Physicality and Realism

When appropriate, add a realistic, physical dimension to your application. Often, the more true to life your application looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it. For example, people instantly know how to use the realistic address book that Contacts on iPad portrays.
image: ../Art/realistic_contacts.png
On iPhone, people instantly know what the Voice Memos app does, and how to use it, because it presents a beautifully rendered focal image (the microphone) and realistic controls.
image: ../Art/voice_memos.jpg
Think of the objects and scenes you design as opportunities to communicate with users and to express the essence of your app. Don’t feel that you must strive for scrupulous accuracy. Often, an amplified or enhanced portrayal of something can seem more real, and convey more meaning, than a faithful likeness.

Use appropriate animation to further enhance realism in your application. In general, it’s more important to strive for accuracy in movement than in appearance. This is because people accept artistic license in appearance, but they can feel disoriented when they see movement that appears to defy physical laws. As much as possible, make sure your virtual views and controls mimic the behavior of the physical objects and controls they resemble. Convincing animation heightens people’s impression of your application as a tangible, physical realm in which they want to spend time.

Delight People with Stunning Graphics

Rich, beautiful, engaging graphics draw people into an application and make the simplest task rewarding. Beautiful artwork also helps to build your app’s brand in people’s eyes. iOS-based devices showcase your application’s artwork, so you should consider hiring a professional artist to create first-rate graphics that people will admire.
Consider replicating the look of high-quality or precious materials. If the effect of wood, leather, or metal is appropriate in your application, take the time to make sure the material looks realistic and valuable. For example, Notes reproduces the look of fine leather and meticulous stitching.
image: ../Art/rich_texture.png
When appropriate, create high-resolution artwork. In most cases, scaling up your artwork is not recommended as a long-term solution. Instead, try creating your artwork in a dimension that is larger than you need, so you can add depth and details before scaling it down. This works especially well when the dimension of the original art file is a multiple of the dimension you need. Then, if you also use an appropriate grid size in your image-editing application, you’ll be able to keep the scaled-down art file crisp and reduce the amount of retouching and sharpening you need to do.

Ensure that your launch images and application icon are high quality

Remove hard-coded values that identify screen dimensions. This is particularly important if you want your app to run on different iOS-based devices.

Handle Orientation Changes

People often expect to use their iOS-based devices in any orientation. You need to determine how to respond to this expectation, within the context of your app and the task it enables.
In all orientations, maintain focus on the primary content. This is your highest priority. People use your application to view and interact with the content they care about. Altering the focus on that content in different orientations can make people feel that they’ve lost control over the application.
Think twice before preventing your application from running in all orientations. People expect to use your app in different orientations, and it’s best when you can fulfill that expectation. iPad users, in particular, expect to use your app in whichever orientation they’re currently holding their device. But in certain cases an app needs to run in portrait only or in landscape only. If it’s essential that your application run in only one orientation, you should:
  • Launch your app in your supported orientation, regardless of the current device orientation. For example, if your game or media-viewing application runs in landscape only, it’s appropriate to launch your app in landscape, even if the device is currently in portrait. This way, if people start your application in portrait, they know to rotate the device to landscape to view the content.
  • Avoid displaying a UI element that tells people to rotate the device. Launching in your supported orientation clearly tells people to rotate the device, if required, without adding unnecessary clutter to your UI.
  • Support both variants of an orientation. For example, if your application runs only in landscape, people should be able to use it whether they’re holding the device with the Home button on the right or on the left. And, if people rotate the device 180 degrees while using your application, it’s best if you can respond by rotating your content 180 degrees.
If your application interprets changes in device orientation as user input, you can handle rotation in app-specific ways. For example, if your app is a game that allows people to move game pieces by rotating the device, you can’t respond to device rotation by rotating the screen. In a case like this, you should launch in either variant of your required orientation and allow people to switch between the variants until they start the main task of the application. Then, as soon as people begin the main task, you can begin responding to device movement in application-specific ways.
Take advantage of the one-step change in orientation to perform smoother, often faster rotations. However, if your screen layout is very complicated, you might choose instead to perform a cross-fade transition when users change the orientation of the device. 



Pay attention to accelerometer values. To learn more about these values and how to receive them. If appropriate, your application should respond to all changes in device orientation.

On iPhone, anticipate users’ needs when you respond to a change in device orientation. Users often rotate their devices to landscape orientation because they want to “see more.” If you respond by merely scaling up your content, you fail to meet users’ expectations. Instead, you should respond by rewrapping lines of text and, if necessary, rearranging the layout of the user interface so that more content fits on the screen.
On iPad, strive to satisfy users’ expectations by being able to run in all orientations. The large iPad screen mitigates people’s desire to rotate the device to landscape to “see more.” And, because people don’t pay much attention to the minimal frame of the device or the location of the Home button, they don’t view the device as having a default orientation. This lack of awareness of an app’s default orientation leads people to expect apps to run well in the device orientation they’re currently using. As much as possible, your application should encourage people to interact with iPad from any side by providing a great experience in all orientations.

Follow these guidelines as you design how your iPad app should handle rotation:
  • Consider changing how you display auxiliary information or functionality. Although you should make sure that the most important content is always in focus, you can respond to rotation by changing how you provide secondary content.
    In Mail on iPad, for example, the lists of accounts and mailboxes are secondary content (the main content is the selected message). In landscape, secondary content is displayed in the left pane of a split view; in portrait, it’s displayed in a popover.
    Or, consider an iPad game that displays a rectangular game board in landscape. In portrait, the game needs to redraw the board to fit well on the screen, which might result in additional space above or below the board. Instead of vertically stretching the game board to fit the space or leaving the space empty, the game could display supplemental information or objects in the additional space.
  • Avoid gratuitous changes in layout. As much as possible, provide a consistent experience in all orientations. A comparable experience in all orientations allows people to maintain their usage patterns when they rotate the device. For example, if your iPad app displays images in a grid while in landscape, it’s not necessary to display the same information in a list while in portrait (although you might adjust the dimensions of the grid).
  • When possible, avoid reformatting information and rewrapping text on rotation. Strive to maintain a similar format in all orientations. Especially if people are reading text, it’s important to avoid causing them to lose their place when they rotate the device.
    If some reformatting is unavoidable, use animation to help people track the changes. For example, if you must add or remove a column of text in different orientations, you might choose to hide the movement of columns and simply fade in the new arrangement. To help you design appropriate rotation behavior, think about how you’d expect your content to behave if you were physically interacting with it in the real world.
  • Provide a unique launch image for each orientation. When each orientation has a unique launch image, people experience a smooth application start regardless of the current device orientation. In contrast with the Home screen on iPhone, the iPad Home screen supports all orientations, so people are likely to start your application in the same orientation in which they quit the previous app.

Make Targets Fingertip-Size

The screen size of iOS-based devices might vary, but the average size of a fingertip does not. Regardless of the device your app runs on, following these guidelines ensures that people can comfortably use your app.
Give tappable elements in your application a target area of about 44 x 44 points. The iPhone Calculator application is a good example of fingertip-size controls.
image: ../Art/calculator.jpg
If you create smaller controls, or if you place them too close together, people must aim carefully before they tap and they’re more likely to tap the wrong element. As a consequence, the application becomes much less enjoyable, or even impossible, to use. For example, a game that has small controls that are too close together forces people to concentrate on the interface, instead of on playing the game.

Use Subtle Animation to Communicate

Animation is a great way to communicate effectively, as long as it doesn’t get in the way of users’ tasks or slow them down. Subtle and appropriate animation can:
  • Communicate status
  • Provide useful feedback
  • Enhance the sense of direct manipulation
  • Help people visualize the results of their actions
Add animation cautiously, especially in applications that do not provide an immersive experience. In applications that are focused on serious or productive tasks, animation that seems excessive or gratuitous can obstruct application flow, decrease performance, and distract users from the task.

Make animation consistent with built-in applications when appropriate. People are accustomed to the subtle animation used in the built-in iOS applications. In fact, most people regard the smooth transitions between views, the fluid response to changes in device orientation, and the realistic flipping and scrolling as an expected part of the iOS experience. Unless you’re creating an app that enables an immersive experience, such as a game, custom animation should be comparable to the built-in animations. 

Use animation consistently throughout your app. As with other types of customization, it’s important to use custom animation consistently so that users can rely on the experience they gain with your app.

Support Gestures Appropriately

Avoid associating different actions with the standard gestures users know. For example, take care to avoid redefining the meaning of the “swipe down from the top” gesture that reveals Notification Center.
Just as important, avoid creating custom gestures to invoke the actions users already associate with the standard gestures.
Use complex gestures as shortcuts to expedite a task, not as the only way to perform a task. Although most users know the more complex standard gestures, such as swipe, or pinch open, these complex gestures are not as common.
For example, when viewing a list of messages in Mail, users delete a message by revealing and then tapping the Delete button in the preview row for the message. Users can reveal the Delete button in two different ways:
  • Tap the Edit button in the navigation bar, which reveals a delete control in each preview row. Then, tap the delete control in a specific preview row to reveal the Delete button for that message.
    This method takes an extra step, but is easily discoverable because it requires only the tap and begins with the clearly labeled Edit button.
  • Make the swipe gesture across a preview row to reveal the Delete button for that message.
    This method is faster, but it requires the user to learn and remember the more specialized swipe gesture.
Try to ensure that there is always a simple, straightforward way to perform an action, even if it means an extra tap or two. Simple gestures allow users to focus on the experience and the content, not the interaction.
In general, avoid defining new gestures. When you introduce new gestures, users must make an effort to discover and remember them. The primary exception to this recommendation is an app that enables an immersive experience, in which custom gestures can be appropriate. For example, a document-creation application that requires users to make a circular gesture to reveal the Delete button in a table row would be confusing and difficult to use. But a game might reasonably require users to make a circular gesture to spin a game piece.
Be sure the gestures you use make sense in the context of your application’s functionality and the expectations of your users. If, for example, your application enables an important task that users perform frequently and want to complete quickly, you should probably use only standard gestures. But if your application contains realistic controls that dictate a specific usage, or provides an environment that users expect to explore, custom gestures can be appropriate.

For iPad, consider using multifinger gestures. The large iPad screen provides great scope for custom multifinger gestures, including gestures made by more than one person. Although complex gestures are not appropriate for every application, they can enrich the experience in applications that people spend a lot of time in, such as games or content-creation environments. Always bear in mind that nonstandard gestures aren’t discoverable and should rarely, if ever, be the only way to perform an action.

Ask People to Save Only When Necessary

People should have confidence that their work is always preserved unless they explicitly cancel or delete it. If your application helps people create and edit documents, make sure that they do not have to take an explicit save action. iOS apps should take responsibility for saving people’s input, both periodically and when they open a different document or quit the application.

If the main function of your application is not content creation, but you allow people to switch between viewing information and editing it, it can make sense to ask them to save their changes. In this scenario, it often works well to provide an Edit button in the view that displays the information. When people tap the Edit button, you can replace it with a Save button and add a Cancel button. The transformation of the Edit button helps remind people that they’re in an editing mode and might need to save changes, and the Cancel button gives them the opportunity to exit without saving their changes. 

For iPad, save information that people enter in a popover (unless they cancel their work), because they might dismiss the popover without meaning to. 

Make Modal Tasks Occasional and Simple

When possible, minimize the number of times people must be in a modal environment to perform a task or supply a response. iOS applications should allow people to interact with them in nonlinear ways. Modality prevents this freedom by interrupting people’s workflow and forcing them to choose a particular path.
Modality is most appropriate when:
  • It’s critical to get the user’s attention.
  • A task must be completed (or explicitly abandoned) to avoid leaving the user’s data in an ambiguous state.
People appreciate being able to accomplish a self-contained subtask in a modal view, because the context shift is clear and temporary. But if the subtask is too complex, people can lose sight of the main task they suspended when they entered the modal view. This risk increases when the modal view is full screen and when it includes multiple subordinate views or states. 

Keep modal tasks fairly short and narrowly focused. You don’t want your users to experience a modal view as a mini application within your application. Be especially wary of creating a modal task that involves a hierarchy of views, because people can get lost and forget how to retrace their steps. If a modal task must contain subtasks in separate views, be sure to give users a single, clear path through the hierarchy, and avoid circularities.
Always provide an obvious and safe way to exit a modal task. People should always be able to predict the fate of their work when they dismiss a modal view. 

If the task requires a hierarchy of modal views, make sure your users understand what happens if they tap a Done button in a view that’s below the top level. Examine the task to decide whether a Done button in a lower-level view should finish only that view’s part of the task or the entire task. When possible, avoid adding Done buttons to subordinate views, because of this potential for confusion.

Start Instantly

It’s often said that people spend no more than a minute or two evaluating a new app. When you make the most of this brief period by presenting useful content immediately, you pique the interest of new users and give all users a superior experience.

Display a launch image that closely resembles the first screen of the application. This practice decreases the perceived launch time of your application.

Avoid displaying an About window or a splash screen. In general, try to avoid providing any type of startup experience that prevents people from using your application immediately.
On iPhone, specify the appropriate status bar style. In general, you want the status bar to coordinate with the rest of your application’s UI. 

Launch in the appropriate default orientation. On iPhone, the default orientation is portrait; on iPad, the default orientation is the current device orientation. If, however, you intend your app to be used only in landscape orientation, launch in landscape regardless of the current device orientation and allow users to rotate the device to landscape orientation if necessary.

Note that a landscape-only application should support both landscape orientations—that is, with the Home button on the right or on the left. If the device is already physically in a landscape orientation, a landscape-only application should launch in that orientation, unless there’s a very good reason not to. Otherwise, a landscape-only application should launch in the orientation with the Home button on the right by default.

Avoid asking people to supply setup information. Instead, follow these guidelines:
  • Focus your solution on the needs of 80 percent of your users. When you do this, the majority of users do not need to supply settings because your application is already set up to behave the way they expect. If there is functionality that only a handful of people might want, or that most people might want only once, leave it out.
  • Get as much information as possible from other sources. If you can use any of the information people supply in built-in application or device settings, query the system for these values; don’t ask people to enter them again.
  • If you must ask for setup information, prompt people to enter it within your application. Then, as soon as possible, store this information (possibly, in your application’s settings). This way, people aren’t forced to quit your app and open Settings before they get the chance to enjoy your app. If people need to make changes to this information later, they can go to your application’s settings at any time.
Delay a login requirement for long as possible. Ideally, users should be able to navigate through much of your app and understand what they can do with it before logging in. When you ask users to log in before they can begin to use your app, it can make the start-up process seem longer.
Restore the state of the app to that in use when the user last stopped using the application. People should not have to remember the steps they took to reach their previous location in your application.

Always Be Prepared to Stop

iOS applications stop when people press the Home button to open a different application or use a device feature, such as the phone. In particular, people don’t tap an application close button or select Quit from a menu. To provide a good stopping experience, an iOS application should:
  • Save user data as soon as possible and as often as reasonable because an exit or terminate notification can arrive at any time.
  • Save the current state when stopping, at the finest level of detail possible so that people don’t lose their context when they start the application again. For example, if your app displays scrolling data, save the current scroll position.

Don’t Quit Programmatically

Never quit an iOS application programmatically because people tend to interpret this as a crash. However, if external circumstances prevent your application from functioning as intended, you need to tell your users about the situation and explain what they can do about it. Depending on how severe the application malfunction is, you have two choices.
Display an attractive screen that describes the problem and suggests a correction. A screen provides feedback that reassures users that there’s nothing wrong with your application. It puts users in control, letting them decide whether they want to take corrective action and continue using your application or press the Home button and open a different application
If only some of your application's features are not working, display either a screen or an alert when people activate the feature. Display the alert only when people try to access the feature that isn’t functioning.

If Necessary, Display a License Agreement or Disclaimer

If you provide an end-user license agreement (or EULA) with your iOS application, the App Store displays it so that people can read it before they get your application.
If possible, avoid requiring users to indicate their agreement to your EULA when they first start your application. Without an agreement displayed, users can enjoy your application without delay. However, even though this is the preferred user experience, it might not be feasible in all cases. If you must display a license agreement within your application, do so in a way that harmonizes with your user interface and causes the least inconvenience to users.
If possible, provide a disclaimer within your application description or EULA. Users can then view the disclaimer in the App Store, and you can balance business requirements with user experience needs.

For iPad: Enhance Interactivity (Don’t Just Add Features)

The best iPad applications give people innovative ways to interact with content while they perform a clearly defined, finite task.
Resist the temptation to add features that are not directly related to the main task. Instead, explore ways to allow people to see more and interact more. In particular, you should not view the large iPad screen as an invitation to bring back all the functionality you might have pruned from your iPhone application.
To make your iPad application stand out, concentrate on ways to amplify the user experience, without diluting the main task with extraneous features. For example:
  • A book-reader application that allows people to read books and keep track of reading lists can provide a very enjoyable reading experience on the large screen. Instead of making people transition to another screen to manage their reading lists, the application can put the list in a popover and allow people to copy favorite passages into it. The application can also let people add bookmarks and annotations to the text, and help them trade their lists with others or compare their progress against a central repository of lists.
  • A fighter pilot game might enable a translucent heads-up display over the main view. Players can tap realistic cockpit controls to engage the enemy or locate themselves on a map overlay.
  • A soccer playing game can display a larger, more realistic playing field and more detailed characters, and allow people to manage their teams and customize the characters. It can also allow people to see information about characters without leaving the field view. Finally, it can enable a multiplayer mode in which two people can pit their teams against each other.
  • A screenwriting application might provide ways to switch between a plot view and a character view without leaving the main context. Writers can switch between these views to check details as they write in the main view.

For iPad: Reduce Full-Screen Transitions

Closely associate visual transitions with the content that’s changing. Instead of swapping in a whole new screen when some embedded information changes, try to update only the areas of the UI that need it. As a general rule, transition individual views and objects, not the screen. In most cases, flipping the entire screen is not recommended.
When you perform fewer full-screen transitions, your iPad app has greater visual stability, which helps people keep track of where they are in their task. You can use UI elements such as split view and popover to lessen the need for full-screen transitions.

For iPad: Restrain Your Information Hierarchy

Use the large iPad screen and iPad-specific UI elements to give people access to more information in one place. Although you don’t want to pack too much information into one screen, you also want to prevent people from feeling that they must visit many different screens to find what they want.
In general, focus the main screen on the primary content and provide additional information or tools in an auxiliary view, such as a popover. This gives people easy access to the functionality they need, without requiring them to leave the context of the main task.
With the large iPad screen, and UI elements such as a split view and popovers, you have alternatives to the one-level-per-screen structure of many iPhone applications. 

Use a navigation bar in the right pane of a split view to allow people to drill down into a top-level category that is persistently displayed in the left pane. A split view flattens your information hierarchy by at least one level, because two levels are always onscreen at the same time. For example, Settings displays device and application settings using a navigation bar in the right pane of a split view.
image: ../Art/split_view_flatten.jpg
Use a navigation bar in the left pane of a split view to allow people to drill down through a fairly shallow hierarchy. Then, display the most specific information (that is, the leaf nodes in the hierarchy) in the right pane. This, too, flattens your hierarchy by displaying two levels onscreen at one time. For example, Mail in landscape uses this design to display the hierarchy of accounts, mailboxes, and message lists in the left pane, and individual messages in the right pane.
image: ../Art/navbar_split_view_flatten.jpg
Use a popover to enable actions or provide tools that affect onscreen objects. A popover can display these actions and tools temporarily on top of the current screen, which means people don’t have to transition to another screen to get them. For example, Reminders uses a popover to give users an easy way to add details to a reminder item they created.
image: ../Art/popover_flatten.jpg
Use a segmented control in a toolbar to display different perspectives on the content or different information categories. In this way, you can provide access to these perspectives or categories from a single bar at the top (or the bottom) of the screen.  For example, iTunes uses a segmented control in a top-edge toolbar to provide different perspectives on the content in a category.
image: ../Art/segmented_flatten.jpg
Use a tab bar to display different information categories or, less often, different application modes. In iPad applications, a tab bar is more likely to be used as a filter or category switcher than as a mode switcher. For example, iTunes uses a tab bar to give people access to different categories of media.
image: ../Art/tab_bar_flatten.jpg
When possible, avoid using a tab bar to swap in completely different screens, because it’s best to reduce full-screen transitions on iPad.

For iPad: Consider Using Popovers for Some Modal Tasks

Popovers and modal views are similar, in the sense that people typically can’t interact with the main view while a popover or modal view is open. But a modal view is always modal, whereas a popover can be used in two different ways:
  • Modal, in which case the popover dims the screen area around it and requires an explicit dismissal. This behavior is very similar to that of a modal view, but a popover’s appearance tends to give the experience a lighter weight.
  • Nonmodal, in which case the popover does not dim the screen area around it and people can tap anywhere outside its bounds (including the control that reveals the popover) to dismiss it. This behavior makes a nonmodal popover seem like another view in the application.
In addition, a popover always has an arrow that points to the control or area the user tapped to reveal it. This visual tie-in helps people remember their previous context. It also makes a modal popover seem like a more transient state than a modal view, which takes over the screen without indicating where it came from.
If you use modal views to enable self-contained tasks in your iPhone application, you might be able to use popovers instead. To help you decide when this might be appropriate, consider these questions:
  • Does the task require more than one type of input? If so, use a popover.
    Although a keyboard can accompany either a popover or a modal view, a popover is better for displaying a picker or a list of options.
  • Does the task require people to drill down through a hierarchy of views? If so, use a popover.
    The frame of a popover is better suited to displaying multiple pages, because there is less chance people will confuse it with the main view.
  • Might people want to do something in the main view before they finish the task? If so, use a nonmodal popover.
    Because people can see the main view around a nonmodal popover and they can dismiss it by tapping in the main view, you should allow them to suspend the popover’s task and come right back to it.
  • Is the task fairly in-depth and does it represent one of the application’s main functions? If so, you might want to use a modal view.
    The greater context shift of a modal view helps people stay focused on the task until they finish it. The greater screen space of most modal view styles makes it easier for people to provide a lot of input.
    If, on the other hand, the task represents an important part of application functionality, but it is not in-depth, a modal popover can be a better choice. This is because the lighter visual weight of a popover can be more pleasant for frequently performed tasks.
  • Is the task performed only once or very infrequently, as with a setup task? If so, consider using a modal view.
    People aren’t as concerned about staying in the current context when they perform a task only once or very infrequently.
There are a number of other uses for popovers, such as to provide auxiliary tools (for complete usage guidelines, see “Popover (iPad Only)”). Also, iPad apps display action sheets inside popovers (for more information, see “Action Sheet”).

If you decide to use a modal view, be sure to read about the different presentation styles you can use (they’re described in “Modal View”). In your iPad application, you can choose the presentation style that’s best suited to the modal task you need to enable.

For iPad: Migrate Toolbar Content to the Top

If your iPhone application has a toolbar, consider moving it to the top of the screen instead of leaving it at the bottom. With the additional width of the iPad screen, you should be able to provide all of your toolbar functionality in a single toolbar at the top. This gives you more vertical space for your focused content.
For example, Mail on iPhone uses a toolbar at the bottom to give people access to the refresh, organize, trash, reply, and compose actions while they view messages.
image: ../Art/ui_taskstyleexample.jpg
Mail on iPad migrates all but one of these actions to a toolbar located above the message. The Refresh control remains at the bottom of the mailbox list.
image: ../Art/toolbar_at_top.png

No hay comentarios:

Publicar un comentario

Clima