Designing the iPhone UI

App Alpha Writer has been featured on App store multiple times and other apps from the same brand have been featured on Apple commercials. I worked on Alpha Writer app.

Apple's iPhone and iPad has really revolutionized the mobile and laptop industry. Designing the UI for this slick interface has been a pleasure - it is a great mix of being logical and creative - intuitive yet different! This blog post is about the basic UI design principles based on Apple's Human Interface Guidelines for the iPhone.

This blog is by no means a comprehensive source for all the information, but a quick checklist for anyone who knows something it and whats to use it in their app.

The first few basic questions you need to ask is -

1. What are the main features – should they be on main menu screen or in tab bar?
2. What is the app style: (a)Productivity (Eg. Mail/ Photos) – Hierarchical, less frequent setting changes (low customization) (b) Utility (Eg. Weather) - flattened lists, frequent setting changes, more visuals, summary of information

   (c) Immersive (Eg. Games) – visually rich

3. Will the app be better in portrait or landscape?

Once these basics are take care of the general humal interface principles come into play:

1. Use metaphors (model according to real world) - People can identify with this easily
2. See and point (present options rather than get data entry) - People will make less errors and find this more convenient
3. Feedback (every user action should give feedback – audio/ visual) - So that they know that they are doing what they actually want to do
4. User control (get confirmation before destructive action ) - Very imp to highlight this

The next thing to consider is the actual design:

1. Put frequently used info on top
2. Make it obvious - use appropriate colors and size
3. Gestures to be included – Tap, Drag, Flick, Swipe (table view to reveal delete button), Double tap (zoom in and out), pinch and zoom, Touch and hold, Shake - understand each of their significance and use appropriately
4. Add realism
5. Use sounds
6. What kind of data entry points to use - keyboards/ numberpads/ scroll wheels

The iPad UI should highly leverage the fact that the screen is bigger than the iPhone and users don't like to leave one screen to go to the other. Specific things to consider for iPad:

1. Reduce full screen transitions
2. Use flattened navigation
3. Use popovers for modal and nonmodal tasks
4. Put tool bar content on the top

Next week I will discuss the specific elements like Elements, Content views, alerts, etc.