iphone——iOS Human Interface Guidelines Tip
Platform Characteristics
The Display Is Paramount, Regardless of Its Size;
Device Orientation Can Change;
Apps Respond to Gestures, Not Clicks:tap, drag, flick, swipe, double tape, pinch, touch&hold, shake;
People Interact with One App at a Time;
Preferences Are Available in Settings;
iOS-based devices and their built-in applications are intuitive and easy to use, so onscreen User Help Is Minimal;
Most iOS Apps Have a Single Window;
Two Types of Software Run in iOS:iOS apps, Web content;
Safari on iOS Provides the Web Interface;
Human Interface Principles
Aesthetic Integrity:Aesthetic integrity is not a measure of how beautiful an application is. It’s a measure of how well the appearance of the app integrates with its function.
Consistency:Consistency in the interface allows people to transfer their knowledge and skills from one application to another.To determine whether an app follows the principle of consistency, think about these questions:
Is the application consistent with iOS standards? Does it use system-provided controls, views, and icons correctly? Does it incorporate device features in a reliable way?
Is the application consistent within itself? Does text use uniform terminology and style? Do the same icons always mean the same thing? Can people predict what will happen when they perform the same action in different places? Do custom UI elements look and behave the same throughout the app?
Within reason, is the application consistent with its earlier versions? Have the terms and meanings remained the same? Are the fundamental concepts essentially unchanged?
Direct Manipulation:When people directly manipulate onscreen objects instead of using separate controls to manipulate them, they're more engaged with the task and they more readily understand the results of their actions.In an iOS application, people can experience direct manipulation when they:
Rotate or otherwise move the device to affect onscreen objects;
Use gestures to manipulate onscreen objects;
Can see that their actions have immediate, visible results;
Feedback:Feedback acknowledges people’s actions and assures them that processing is occurring. People expect immediate feedback when they operate a control, and they appreciate status updates during lengthy operations.
Metaphors:When virtual objects and actions in an application are metaphors for objects and actions in the real world, users quickly grasp how to use the app. The most appropriate metaphors suggest a usage or experience without enforcing the limitations of the real-world object or action on which they’re based.
User Control:People, not applications, should initiate and control actions. Although an application can suggest a course of action or warn about dangerous consequences, it’s usually a mistake for the app to take decision-making away from the user.
App Design Strategies
Create an Application Definition Statement
1. List All the Features You Think Users Might Like
2. Determine Who Your Users Are
3. Filter the Feature List Through the Audience Definition
4. Don’t Stop There:Use your application definition statement throughout the development process to determine the suitability of features, controls, and terminology.
As you consider whether to add a new feature, ask yourself whether it is essential to the main purpose of your app and to your target audience. If it isn’t, set it aside; it might form the basis of a different application.
As you consider the look and behavior of the UI, ask yourself whether your users appreciate a simple, streamlined style or a more overtly thematic style.
Design the App for the Device
Embrace iOS UI Paradigms
Controls should look tappable
App structure should be clean and easy to navigate
User feedback should be subtle, but clear
Ensure that Universal Apps Run Well on Both iPhone and iPad
Mold the UI of each app version to the device it runs on
Adapt art to the screen size
Preserve the primary functionality of your app, regardless of the device it runs on
Go beyond the default
Tailor Customization to the Task
The best iOS apps balance UI customization with clarity of purpose and ease of use. To achieve this balance in your app, be sure to consider customization early in the design process.
Always have a reason for customization.
As much as possible, avoid increasing the user’s cognitive burden.
Be internally consistent.
Always defer to the content.
Think twice before you redesign a standard control.
Be sure to thoroughly user-test custom UI elements.
Prototype and Iterate
Before you invest significant engineering resources into the implementation of your design, it’s a really good idea to create prototypes for user testing.
Transitioning to iOS
People use iOS-based devices very differently than they use desktop and laptop computers, and they have different expectations for the user experience. Transitioning software from a computer to an iOS-based device is rarely a straightforward port.
People often use iOS-based devices while they’re on the go, and in environments filled with distractions. Part of your job is to create a responsive, compelling experience that pulls people in and gets them to the content they care about quickly and easily.
Remember the 80-20 rule: In general, the largest percentage of users (at least 80 percent) use a very limited number of features in an app, while only a small percentage (no more than 20 percent) use all the features. iOS apps seldom need to provide all the features that only power users need.
User Experience Guidelines
Focus on the Primary Task
Analyze what’s needed in each screen.
Elevate the Content that People Care About
Minimize the number and prominence of controls to decrease their weight in the UI.
Consider subtly customizing controls so that they integrate with your app’s graphical style.
Consider fading controls after people have stopped interacting with them for a little while, and redisplaying them when people tap the screen.
Think Top Down
Put the most frequently used (usually higher level) information near the top, where it is most visible and easy to reach.
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
Make the main function of your application immediately apparent.
Be consistent with the usage paradigms of the built-in applications.
Use User-Centric Terminology
In all your text-based communication with users, use terminology you’re sure that your users understand.
Minimize the Effort Required for User Input
Balance any request for input by users with what you offer users in return.
Make it easy for users to input their choices.
Get information from iOS, when appropriate.
Downplay File-Handling Operations
Enable Collaboration and Connectedness
When appropriate, make it easy for people to interact with others and share things like their location, opinions, and high scores.
For iPad, think of ways to allow more than one person to use your app on the same device.
De-emphasize Settings
Avoid including settings in your application if you can.
Let users set the behavior they want by using configuration options in your application.
Offer configuration options in the main user interface or (in iPhone apps) on the back of a view.
Make Search Quick and Rewarding
Build indexes of your data so that you are always prepared for search.
Live-filter local data so that you can display results more quickly.
When possible, also filter remote data while users type.
Display a search bar above a list or the index in a list.
Use a tab for search only in special circumstances.
If necessary, display placeholder content right away and partial results as they become available.
Consider providing a scope bar if the data sorts naturally into different categories.
Use UI Elements Consistently
Follow the recommended usages for standard user interface elements.
For an app that enables an immersive task, such as a game, it’s reasonable to create completely custom controls.
Avoid radically changing the appearance of a control that performs a standard action.
To avoid confusing people, never use the standard buttons and icons to mean something else.
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.
Consider Adding Physicality and Realism
Think of the objects and scenes you design as opportunities to communicate with users and to express the essence of your app.
Use appropriate animation to further enhance realism in your application.
Delight People with Stunning Graphics
Consider replicating the look of high-quality or precious materials.
When appropriate, create high-resolution artwork.
Ensure that your launch images and application icon are high quality.
Remove hard-coded values that identify screen dimensions.
Handle Orientation Changes
In all orientations, maintain focus on the primary content.
Think twice before preventing your application from running in all orientations.
If your application interprets changes in device orientation as user input, you can handle rotation in app-specific ways.
Take advantage of the one-step change in orientation to perform smoother, often faster rotations.
Pay attention to accelerometer values.
On iPhone, anticipate users’ needs when you respond to a change in device orientation.
On iPad, strive to satisfy users’ expectations by being able to run in all orientations.
Make Targets Fingertip-Size
Give tappable elements in your application a target area of about 44 x 44 points.
Support Gestures Appropriately
Avoid associating different actions with the standard gestures users know.
Use complex gestures as shortcuts to expedite a task, not as the only way to perform a task.
In general, avoid defining new gestures.
For iPad, consider using multifinger gestures.
Ask People to Save Only When Necessary
People should have confidence that their work is always preserved unless they explicitly cancel or delete it.
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
Keep modal tasks fairly short and narrowly focused.
Always provide an obvious and safe way to exit a modal task.
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.
Start Instantly
Display a launch image that closely resembles the first screen of the application.
Avoid displaying an About window or a splash screen.
On iPhone, specify the appropriate status bar style.
Launch in the appropriate default orientation.
Avoid asking people to supply setup information. Instead, follow these guidelines:
Focus your solution on the needs of 80 percent of your users.
Get as much information as possible from other sources.
If you must ask for setup information, prompt people to enter it within your application.
Delay a login requirement for as long as possible.
Restore the state of the app to that in use when the user last stopped using the application.
Always Be Prepared to Stop
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.
Don’t Quit Programmatically
Display an attractive screen that describes the problem and suggests a correction.
If only some of your application's features are not working, display either a screen or an alert when people activate the feature.
For iPad: Enhance Interactivity (Don’t Just Add Features)
Resist the temptation to add features that are not directly related to the main task.
For iPad: Restrain Your Information Hierarchy
In general, focus the main screen on the primary content and provide additional information or tools in an auxiliary view, such as a popover.
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.
Use a navigation bar in the left pane of a split view to allow people to drill down through a fairly shallow hierarchy.
Use a popover to enable actions or provide tools that affect onscreen objects.
Use a segmented control in a toolbar to display different perspectives on the content or different information categories.
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 iPad: Consider Using Popovers for Some Modal Tasks
Does the task require more than one type of input? If so, use a popover.
Does the task require people to drill down through a hierarchy of views? If so, use a popover.
Might people want to do something in the main view before they finish the task? If so, use a nonmodal popover.
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.
Is the task performed only once or very infrequently, as with a setup task? If so, consider using a modal view.
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.