Things to know before getting into application user interface

July 8, 2011
8 min read

Okay, What is this post about?

This post is an extract of Mobile HIG (iOS Human Interface Guidelines). I strongly recommend to read 150 pages of guidelines. But if you are in hurry you can refer this extract. This was done while working on Yahoo! Cricket iPhone Application. This article is divided in 7 sections.

  1. Device Characteristics To Keep In Mind
  2. Application Types
  3. Three Application Styles
  4. Existing Design To Application
  5. Human Interface Principles
  6. Characteristics Of Great iPhone Application
  7. Handling Common Tasks

I am not mentioning about creating a Product Definition Statement deliberately. That is an iterative process and there is no shortcut 馃檪

1. Device characteristics to keep in mind

  1. Compact Screen Size
  2. Memory is Limited
  3. People see one screen at a time
  4. People interact with one application at a time
  5. Onscreen help is minimal

Compact Screen Size: No need to include design elements that aren始t absolutely necessary, and crowding user interface elements makes your application unattractive and difficult to use.

Memory is Limited: Strive to reduce the application始s memory footprint by, make resource files as small as possible, load resource lazily and eliminate memory leaks.

People see one screen at a time: Users see single application screen at a time on an iOS-based device. iPhone application can contain as many different screens as necessary, but users access them sequentially, not simultaneously.

People interact with one application at a time: Only one application is visible in the foreground at a time. Prior to iOS 4.0 quitting application was immediately removed from memory. In iOS 4.0 application transitions to the background, where it may not may not continue running.

Onscreen help is minimal: Use standard controls correctly. Users are familiar with the standard controls they see in the built in applications, so they know how to use them in your application. Path presented through the information is logical. Provide markers, such as back buttons, that users can use to find out where they are to retrace their steps.

2. Application types

  1. An iPhone Application
  2. Web-only Content
  3. Hybrid Application

An iPhone application is quick to launch and easy to use.

Web-only Content:

Web Applications: Runs in Safari on iOS; users do not install such application, instead they go to web application始s URL.

Optimized webpages/ Compatible webpages: Webpages that are optimized for Safari in iOS display and operate as designed (with the exception of any elements that rely on unsupported technologies such as plug-ins, Flash and Java.

Hybrid Application: Hybrid application is a native iPhone application that provides most of its structure and functionality through a web viewing area.
A hybrid application should behave and appear like a native iPhone application; it should not draw attention to the fact that it depends on web resources.

3. Three application styles

  1. Productivity Applications
  2. Utility Applications
  3. Immersive Applications

Productivity Applications: Based on organization and manipulation if detailed information. People use such application to accomplish important tasks. User experience is focused on the task, so people can quickly find what they need, easily perform the necessary action, complete the task and move on to something else. Like e-mail, Photos

Utility Applications:聽A utility application performs a simple task that requires minimum of user input.
People open a utility application to see a quick summery of information or to perform a simple task on a limited number of objects. People use utility applications to check the status of something or to look something up so they want to be able to spot the information they始re interested in quickly and easily.
Typically, each view in a utility application provides the same organization of data and depth of detail, but can be served by a different source. The user interaction model for a utility application is very simple: Users open the application to scan the summery of information and optionally, change the configuration or source of that information. Users tap the familiar Info button in the lower right corner of the main view to see the back. After making adjustments, users tap the Done button to return to the front of the main view. These options are part of functioning of the application. Not a group of preference style settings.
Yahoo! Weather Application

Immersive Applications: Enhances other types of tasks, provides unique environment, don始t display large amount of text-based information. These are graphic rich, full screen environment. Bubble level application and games

4. When we have existing design on computer

Apply the 80-20 rule to the design of your application. Estimate that the largest percentage of users will use a very limited number of features in an application, while only a small percentage will use all the features.

5. Human interface principles: creating a great user interface

A great user interface follows human interface design principles that are based on the way people-users-think and work, not on the capabilities of the device.

  1. Metaphors
  2. Direct Manipulation
  3. See and Point
  4. Feedback
  5. User Controls
  6. Aesthetic Integrity

Metaphors: As you design your application, be aware of the metaphors that exist in iOS, and do not redefine them. At the same time examine the task your application performs to see if there are natural metaphors you can use.
Bear in mind, though, that始s it始s better to use standard controls and actions than to stretch a real world object or action just to fit your applications user interface. Unless the metaphors you choose are likely to be recognized by most of your users, including them will increase confusion instead of decrease it.

Direct Manipulation: Objects on the screen remain visible while user performs actions on them. The result of user始s action is immediately apparent.

See and Point: Presenting choices to the user, instead of asking for more open-ended input, allows them to concentrate on accomplishing tasks with your application, instead of remembering how to operate it.

Feedback: Application should show elapsing progress and, if appropriate, display an explanatory message.

User Controls: Allow users, not your application to initiate and control action.

Aesthetic Integrity: An application that appears cluttered or illogical is hard to understand and use. Aesthetic integrity is not a measure of how beautiful your application is. It始s a measure of how well your application integrates with its functions.

6. Incorporate characteristics of great iPhone applications

Build in Simplicity and Ease of Use: iOS users are probably doing other things while they simultaneously use your application.

Follow these guidelines to build in simplicity and ease of use.

  1. Make it obvious how to use your application.
  2. Concentrate frequently used, high-level information near the top of the screen.
  3. Minimize text input.
  4. Express essential information succinctly.
  5. Provide a fingertip-size target area for all trappable elements.

Make it obvious: The main function of your application should be immediately apparent. You can make it so by minimizing the number of controls from which users have to choose and labeling them clearly so users understand exactly what they do.

Think Top Down: People can tap the screen of an iOS-based device with their fingers or their thumbs. When they use a finger, people tend to hold the device in their non dominant hand and tap with a finger of the dominant hand. When they use thumbs, people either hold the device in one hand and tap with that thumb, or hold the device between their hands and tan with both thumbs. Whichever method people use, the top of the screen is most visible to them. Because of this usage pattern, you should design your application始s user interface so that the most frequently used information is near the top, where it is most visible and accessible. As the user scans the screen top to bottom, the information displayed should progress from general to specific and form high level to low level.

Minimize Required Input: Inputting information takes user始s time and attention, whether they tap controls or use the keyboard.

Express Information Succinctly: When your interface text is short and direct, users can absorb it quickly and easily. Therefore identify the most important information, express it concisely and display it prominently so users don始t have to read too many words to find what they are looking for or to figure out what to do next.

Provide Finegrtip-Size Targets: Minimum target size is 44 X 44 pixels.

Focus on the Primary Task: An iPhone application that establishes and maintains focus on its primary functionality is satisfying and enjoyable to use.

Communicate Effectively: Communication and feedback are as important in iPhone applications as they are in desktop computer applications. Animation is great way to communicate effectively.

Support Gestures Appropriately: Users tap a button to select it and flick or drag to scroll a long list. iPhone users understand these gestures because the built-in application use them consistently. Swipe or pinch open, are also used consistently in the built- applications, but they are less common. In general these gestures are used as shortcuts to expedite a task, not as the only way to perform a task. e.g Mailbox in iPhone.

Gestures and actions
Courtesy: Apple Mobile HIG

Incorporate Branding Elements Cautiously: Branding is most effective when it is subtle and understated. Can be achieved by custom colour scheme in views and controls.

7. Handling common tasks

  • Starting
  • Stopping
  • Accommodating Multitasking
  • Use local notifications sparingly
  • Hosting Ads
  • Managing Setting or Configuration options
  • Enabling Local and Push Notifications
  • Handling Orientation Changes
  • Providing Choices
  • Providing a License Agreement or a Disclaimer

Starting: Restore state from the last time your application ran. People should not have to remember steps they look to reach their previous location in your application.

Stopping: Save the current state when stopping, at the finest level of detail possible. If your application displays scroll data, save the current scroll position.

Accommodating Multitasking: Be prepared for interruptions, and be ready to resume. Make sure that your UI can handle the double-high status bar.

Use local notifications sparingly: In case of running in the background (fetching data), suspended or not running at all. Avoid pestering peoples with too many notifications.

Hosting Ads: As much as possible, display banner ads in both orientations.

Managing Setting or Configuration options: Should be available within application itself. Best example Yahoo! Weather Application.

Enabling Local and Push Notifications: Two ways to do so Updating the badge on your application始s home screen icon. Displaying an alert.

Handling Orientation Changes: Users often rotate their devices to landscape to see more. Use one-step orientation change process to perform smoother and faster rotations.

Providing Choices: List, Pickers and Switch Controls.

Providing a License Agreement or a Disclaimer: Display such information when user first starts the application. Make it available in App Store as well. W Check it.

found lately. site owners to talk about It is nice to see people

Comments are closed.