iPhone UI Patterns

iPhone Application development is becoming a hotcake in market with everyone trying to design and develop an iPhone application for their business needs to reach widest range of customer base.

When I entered into the iPhone app development area, I did lot of research to find out the kind of UI patterns available for iPhone applications, because most of the apps which I found were a plain vanilla flavor and as a newbie I was not aware of the different patterns which actually could work with the smart devices. Anyways thanks to couple of books which I read and couple of apps which I reviewed, it really helped me understand the iPhone UI patterns, as well as helped me implement and design some really new patterns for iphone. Lets discuss the patterns

1) Application Menu (also called App Menu) : The way we have a menu in websites or desktop applications, which helps us navigate, we can have an application menu in iPhone which functions the same way and can help us navigate from one page to another. These are some of the App Menu patterns which we can use in iPhone apps.

By default the app menu support maximum of 5 links. What if you have more than 5 links which you have in your app? How will you show it? It’s very simple.  In the app menu, there is an icon with 3 dots which implies more. If an app has more than 5 links, we can use more as the fifth menu, this in turn can navigate us to the next level/page with list of other navigation.

2) Titlebar:  As the name imples, it is a titlebar. This can be used as a navigation as well as for displaying only titles of the page.

3) Segmented List : This is the most extensively used pattern in iPhone for displaying data both static and dynamic. This pattern can be helpful when displaying news, article list, product list etc.

4) Modal Dialog: Like any other modal dialog, iPhone also support Modal dialogs. We can use the pre-built in dialogs.

5) Accordions: Accordion stacked view is also supported by iPhone apps and can be used if we have to show lot of data in a page without much scrolling. This pattern can be useful when we need to show user a product details with feaures, price, functionality etc or can be useful when trying to show the comparison results.

6) Callouts: If we want to show some extra details about any product, without navigating to new page, we can use a callout kind of pattern.

7) Tab Navigation: Works similar to a tabbed stack in web pages or web applications.

8 ) Icon Navigation: Icon navigation can be used in place of normal segmented or listview kind of approach to make the app look visually appealing.

9) Image Strip: This pattern can be used when we need to show some set of images in a strip fashion. This can support multiple images can be navigated in a sliding kind of pattern.

10) Photo Gallery: This pattern is useful when we need to show a list of images.

Here’s the list of some commonly used iPhone pattern. Together these patterns can really make any app user friendly in terms of usability and user experience  and visually appealing.

Advertisement