Friday, February 25, 2011

IPhone- User Interface Guidelines – Part III

In continuation to my previous post of this series (Part I & Part II), I will be concluding my discussion on the various components available for developing the user interface of your iPhone application.
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!!!