Table Views, Text Views and Web Views:

• Table View: It displays information in single column multiple rows format.  Rows can be divided into sections or groups. Each row can contain image, text and controls. Each row or cell can be style in different ways like plain, grouped, subtitle etc.

  Table views are normally used for:

  • Selecting Options: As multiple select dropdown is not available
  • Navigating Hierarchical Information: Mainly in productive type of application
  • Viewing Conceptually Grouped Information.
  • Looking-up Indexed Information: Rows are indexed from a-z. The index key is displayed at right hand edge.

  Table view elements:

  • Disclosure Indicator: User taps anywhere in the row to see next level in the hierarchy or associated choices
  • Detail Disclosure Button: User taps this element to see meta data about list item
  • Switch Control: Presents user with two mutually exclusive choices like yes/no or on/off. At any given time only one choice is displayed.

  Some other elements are Delete button, Row insert button and Row reorder control button.

• Text Views: It displays multiple line of text and supports scrolling when text overflow occurs. It can be made editable. You have control over font, color and alignment but it applies to entire text.
• Web Views: It’s specifically used for displaying html contents.  If you want variable font, color or alignment within a view’s text then you can use web view instead of text view.

Application Controls:

• Activity Indicator: Shows progress of a task having unknown duration
• Progress View: Shows progress of a task having known duration
• Detail Disclosure Button: Gives metadata/additional information about something
• Info Button: Provides a way to show configuration information about an application
• Label: Variable sized static text
• Page Indicator: Displays a dot for each currently open view
• Picker: Single select dropdown. User spins the wheel (or wheels) of a picker to select desired value.
• Rounded rectangle button: Button to perform an action
• Segmented Control: Linear set of segments, each segment functions as a button
• Text Field: To accepts user input
• Search Bar: Accepts text input from user which can be use for search
• Slider: Allows user to make adjustments to a value or process within allowed values.

System Provided Buttons and Icons:

IPhone OS provides standard buttons for navigation bar, toolbar and icons for tab bar to promote consistent look and feel.
E.g. Buttons like done, edit, cancel, refresh, trash etc.

It decreases your development time plus it brings stability to your application in case tomorrow Apple decides to change the appearance of standard icons and buttons.

Creating Custom Icons and Images:
For all icons and images PNG (32 bits) format is recommended. Each application mainly needs an

• Application icon size: 57X57 (without alpha transparency)
• App Store icon size: 512X512

The guidelines document provides detailed information which you should check before creating graphics for your application.

I hope this series helps you create various publications for your iPhone. Do remember to share your experiences too.

Happy iPhone development!!!

The post IPhone- User Interface Guidelines – Part III first appeared on The Upside Learning Blog.

Application Window: Each IPhone application contains an application window. It is at the top of the application hierarchy. Every other control resides within the application window.

Views: Provides content regions. There are different types of views available like tableview, textview, webview. Each view has a distinct set of functionality. An application window contains more than one view.

Controls: These are graphics object with which a user can interact with. A view can contain multiple controls. There are some controls which belong to specific view only (e.g. disclosure indicator in table view) while some controls can be used in variety of views.

Screen: It is a logical entity whose instance you cannot create programmatically like a window, view or control. You can visualize it as a state in your application. Each screen contains combination of views and controls.

Using views and controls in application screen:

Each view and control provides some level of customization at look and behavior level. Always try to use standard views and controls with their default look and behavior as user is familiar with it, except in the case of immersive application type. In an immersive application you can create customize controls to form a unique environment and discovering that environment is a part of user experience.

Bars:
Bars are views that are placed either at the top or bottom of the screen. They have defined appearance and behavior.

• Status Bar: It appears at the top of screen. It gives device and carrier specific information to user like signal strength, carrier name, battery charge, current network connection. You can customize its appearance and to some extent its behavior. You can hide the status bar (may be in immersive application) but you should seriously consider this design decision as user expects it to be always available.
• Navigation Bar: It appears just below the status bar. It displays the title of the current view, controls to act on current view and navigational controls. Navigation bars are specifically used in productive applications as they arrange information in a hierarchy.
• Toolbar: It appears at the bottom edge of the screen. It contains buttons to manage the current context/view. It should not be used to switch between different modes or tasks of an application. It can contain five buttons with each having 44*44 hit area.
• Tab Bar: It appears at the bottom edge of the screen. It is used to mange tasks or modes in an application. Each tab bar contains tabs having image and text. In case there are more than five tabs, iPhone OS displays four of them with additional “More” tab. Tapping the more tab displays additional tabs available in a separate screen. It can contain edit button to configure tab bar to display most often used tabs. Each tab can contain a badge to give additional information to user in a nonintrusive way.

Modal Views:

They are analogous to alerts in JavaScript i.e. unless you dismiss them you cannot move forward. They are normally used to give some critical information to user which user is not expecting or additional choices or functionality to be offered. But it is important to avoid overusing them as they break the normal flow of user.

• Alert: Give important information to user which may affect their use of the application. Its timing of arrival is unexpected. It contains text and buttons. It should have maximum to buttons.
• Action Sheet: Give additional choices to user corresponding to current action. It always opens from the bottom of the screen and hovers over current view. It displays multiple buttons from which user selects appropriate one. It normally contains more than two buttons.
• Modal Views: Provide extensive functionality corresponding to current task. It always opens from the bottom of the screen and covers entire view. It displays combination of controls and accepts multiple user inputs.

I would soon be posting the concluding part of this series, so stay tuned.

The post IPhone- User Interface Guidelines – Part II first appeared on The Upside Learning Blog.

The document is divided into two parts:

• Planning Your iPhone Software Product: Covers types of applications, fundamental human interface design principles and the iPhone OS environment.
• Designing the User Interface of Your iPhone Application: Covers available components to develop IPhone application interfaces.

This blog post intends to summarize both parts in separate posts. This is the first.

Planning Your iPhone Software Product

1. 1. Types of application: Based on implementation method
      • IPhone application: Native application, build completely in Objective C. User needs to download it from the App store and install it on the iPhone. It can use all the native features of the device provided the API is available in SDK.
      • Web-only Content: Build using HTML. It runs in safari browser. The application is deployed on some other server and not on actual IPhone device. It can use limited native features of iPhone device provided you build your application using HTML5
      • Hybrid application: Combination of Objective C and HTML. It primarily uses UIWebView component to render html content. User needs to download it from App store and install it on iPhone. It can use all native features of IPhone device provided the API is available in SDK. You can also use varied available frameworks to build this kind of application. One of the applications we developed falls into this category – get more information about it here.
   2. Types of application: Based on application style(visual and behavioral)
      • Productivity Applications: primarily deals with managing information. The user interface is simple and uses standard components available. It primarily uses UITableView control to display information in list form. E.g. Mail
      • Utility applications: primarily deals with checking quick summary of information or performing quick task. In this style, same information is presented using different views. It frequently requires configuration changes which you manage using info button available on main view. The user interface is simple and uses standard components available. E.g. The Weather application
      • Immersive applications: Offers a visually rich environment to user. The user interface experience may not be standard as in other styles. Game falls in this category. We have developed a soccer quiz application (available free on App Store) in this style. You can get more information about it here.

It is not necessary that each application should fall in one of these categories. An application can be combination of multiple styles depending on functionality and information you want to present to user.

1. 1. Fundamental human interface design principles
      • Metaphors: Map your application’s entities i.e. class/object/method to real world.  E.g. Folders
      • Direct manipulation: Managing the application’s object directly using Multi-Touch interface/gestures as opposed to keyboard or mouse.
      • See and Point: Using list form to get user input instead of asking user to input data in text area.
      • Feedback: Provide feedback for each action. Proper feedback enhances application’s usability. Animation can also be used for giving feedback.
      • User Control: Allow user to initiate and control actions. Keep actions simple so that user can remember them. Whenever possible, use standard controls and behaviors.
      • Aesthetic integrity: it defines how well your user interface integrates with your application’s functionality. An application having a visually rich but illogical interface is hard to understand and use.

Principles are primarily based on how user thinks and works.

1. IPhone OS environment:
   • Screen size is compact: It is a challenge to design an interface for small screen size. Keep the focus on displaying important functionalities.
   • Memory is limited: As the iPhone OS does not include swap space, you must avoid allocating more memory than is available on the device.
   • People See One Screen at a Time
   • People Interact with One Application at a Time: Only one application can run at a time i.e. multitasking is not possible. Note: A recent update has just made multitasking available on certain devices running iPhone OS 4.0.
   • Onscreen User Help is Minimal: Mobile users don’t have time to go through help manual or context help and a developer also doesn’t want to devote space and memory for help contents. So use standard controls and behaviors a user is familiar with to minimize onscreen help.

More in my follow-up post, coming soon.

The post IPhone- User Interface Guidelines- Part I first appeared on The Upside Learning Blog.