HumanInterfaceGuidelines

=iPhone Human Interface Guidelines =

 Apple provides guidelines for creating interfaces on the iPhone. It's very important to have a read throught the document to understand what Apple expects from your applications design and functionality. If your finished app doesn't meet expectations in the guidelines, you can expect that your app won't be approved and you will have to back to fix things. Before you design, you should read thorugh these guidelines to ensure you create an app that goes smoothly and doesn't cause you to go through the hassle of rebuilding parts of your application.

 You can read the guidelines here: iPhone Human Interface Guidelines

Some basic iphone design ideas
 The App should open with a Launch image and should be a 320 x 240. It should be almost the same as the first screen of the application. The launch screen is not a cool intro but something that loads quick and leads into the visual appearance of the first screen.

 Buttons should highlight quickly when tapped visually and audible feedback can help as an addition

 Make it obvious how the app works

 Provide fingertip size target area

 Most frequently used item should be at the top

 Express information or content succinctly, short sharp and clear.

 Space the controls out to allow easier tapping not accidental taps on the adjacent buttons

 Branding should be subtle and not a feature of the app

 Save the users current position in the app so they can get back there later

 Iphone apps shouldn't close programmatically as it looks like a crash to the user. They should only close when the user chooses to close, ie with the iPhone home button.

 Focus your solution on the needs of 80 percent of your users. Don't spend 80% of your time developing to accomodate 20% of your users.

 Audio settings need to be reviewed depending on the meaning of them in your app. Are the sounds background and app will still be fine to work or are they integral to the application being used and must be on.

<span style="font-family: Georgia,serif;">WHAT ARE MODAL VIEWS
<span style="font-family: Georgia,serif;"> Modal View controllers are those views that overlay the view so the user need to pay attention or take action. Examples of this are the Action Sheet, the keyboard and the alert. Modal means that the user must dismiss them by tapping a button. Avoid over- using modal views as they interrupt workflow and can be annoying.

<span style="font-family: Georgia,serif;">ALERTS


 * <span style="font-family: Georgia,serif;">Don't use alerts to tell a user which button to tap, this may reveal that your design is not easy to use. If you must use an alert use the word tap (not touch, click or choose).
 * <span style="font-family: Georgia,serif;">A two button alert is often more useful and the use will need to read the message to make a choice.
 * <span style="font-family: Georgia,serif;">If two button alert, the left one is always dark and the right button is light
 * <span style="font-family: Georgia,serif;">If a one button alert the button is always light coloured.
 * <span style="font-family: Georgia,serif;">If a two button alert that proposes a risky action, the cancel button should be on the right and light colour.
 * <span style="font-family: Georgia,serif;">In a two button alert that proposes an action that people want to do, the button that cancels should be on the left and dark coloured.
 * <span style="font-family: Georgia,serif;">Your code should clearly identify the which button is the cancel button.
 * <span style="font-family: Georgia,serif;">Alert buttons should have short and logical titles. One or two words. Avoid using you, your and me as much as possible.
 * <span style="font-family: Georgia,serif;">Action sheets colours should be black or blue to match the toolbar colour you have chosen if you have one.
 * <span style="font-family: Georgia,serif;">Any destructive choices such as delete should be a red button and at the top of the action sheet.

<span style="font-family: Georgia,serif;">Table Views, Text Views and Web Views

 * <span style="font-family: Georgia,serif;">Table views are for presenting data in a single column list of multiple rows, these rows can be divided into sections. They can contain a combination of text, images and controls. Table views are most useful in productivity and sometimes in utilities.
 * <span style="font-family: Georgia,serif;">Any selections made in table view require a brief highlight to let the user know they have been received by the app.
 * <span style="font-family: Georgia,serif;">A table should display data immediately, avoid load waits, put text in immediately then load graphics, etc.
 * <span style="font-family: Georgia,serif;">A text view is a region that displays multiple lines of text and supports scrolling if text is too long. Is can also support user editing with the keyboard.
 * <span style="font-family: Georgia,serif;">A web view is a region that display rich, HTML content in your application screen.

<span style="font-family: Georgia,serif;">Activity Indicators
<span style="font-family: Georgia,serif;"> The activity indicator is the animated icon that is a the spinning circle of bars. This <span style="font-family: Georgia,serif;"> Shows the progress of a task or process that is of unknown duration. It is important to use these to reassure users that the task is not stalled but processing. If you need to display progess for a task of known duration use a progress view instead.

<span style="font-family: Georgia,serif;">Date and Time Pickers
<span style="font-family: Georgia,serif;"> These should be used to avoid the user needing to type.

<span style="font-family: Georgia,serif;">Detailed Disclosure Buttons
<span style="font-family: Georgia,serif;"> These are pretty much a tooltip, it lets the user know there is information available for the item highlighted or even more functionality.

<span style="font-family: Georgia,serif;">Info Buttons
<span style="font-family: Georgia,serif;"> Info buttons provide a way to reveal info or config details of an application, often on the back of a screen.

<span style="font-family: Georgia,serif;">Labels
<span style="font-family: Georgia,serif;"> A variably sized amount of static text. It is suitable for a small amount of text.

<span style="font-family: Georgia,serif;">Page Indicators
<span style="font-family: Georgia,serif;"> A pager indicator displays a dot for each currently open view in an application. The dots represent from left to right the order the in which the views were opened.

<span style="font-family: Georgia,serif;">Pickers
<span style="font-family: Georgia,serif;"> A picker is a generic version of the date and time, you can use an array to fill the picker with any desired values.

<span style="font-family: Georgia,serif;">Progress Views
<span style="font-family: Georgia,serif;"> This is a bar showing the progress a known number of steps or tasks being completed eg downloading 24 of 39. It gives the user an idea of how long the tasks will take.

<span style="font-family: Georgia,serif;">Rounded Rectangle Buttons
<span style="font-family: Georgia,serif;"> The rounded rectangle button is used in a view to perform an action. YOu must use title capitalisation on rounded buttons. Titles should be succinct, one or two words.

<span style="font-family: Georgia,serif;">Search Bars
<span style="font-family: Georgia,serif;"> The user can use this to search in your application

<span style="font-family: Georgia,serif;">Segmented Controls
<span style="font-family: Georgia,serif;"> A linear set of segments, usually 2-3 but can have up to 5. They work like tabs on a web page, displaying a different view when tapped.

<span style="font-family: Georgia,serif;">Sliders
<span style="font-family: Georgia,serif;"> A slider allows users to make adjustments to value or process. They are useful for fine grained control over values

<span style="font-family: Georgia,serif;">Text Fields
<span style="font-family: Georgia,serif;"> A text field is a rounded rectangular field that accepts user input. When the user taps return in the keyboard the tech field triggers an action.

<span style="font-family: Georgia,serif;">Using system provided buttons and controls
<span style="font-family: Georgia,serif;"> You should be using system buttons where you can as they are recognisable for there function by the iphone user and it will minimise your development time. When using these buttons it is very important to use them in accordance with there documented meanings and recommended placement and not according to your own interpretation.

<span style="font-family: Georgia,serif;">The Application Icon
<span style="font-family: Georgia,serif;"> This is the icon on the home screen that the user taps to open your app. Make it attractive and distinctive. The format of the icon should be PNG and 24 bits, 8 for R,G, B and alpha. The icon should measure 57 x 57 pixels with 90 degree corners, no shine or gloss and does not use alpha transparency.Your icon file should be named Icon.png. Iphone OS will automatically add rounded corners, drop shadow and reflective shine. Don't use a black background as your button will not stand out and will disappear into the black of the home screen. When you submit your application you must include a 512 x 512 pixel version of your application icon for display in the app store. This version should be the same as the original but subtly richer in detail. Don't simply scale up your small one.

<span style="font-family: Georgia,serif;">Small Icons
<span style="font-family: Georgia,serif;"> Every application should supply a small icon that can be used in the spotlight search bar. This should be PNG and 29 x 29 pixels. It should be name Icon-Small.png and be placed at the top level of your application.

<span style="font-family: Georgia,serif;"> Designing Your Own Icons <span style="font-family: Georgia,serif;"> When possible use the system icons for navigation bars, toolbars and tab bars. When it is an action that is not represented by existing buttons do the following: make it simple and streamlined, not mistaken for a system icon, easy to understand and widely acceptable. IT should be PNG, use pure white with alpha, no drop shadow, use anti-aliasing, if beveled it should be light from directly above. Toolbar and nave bar icons should be 20 x20 pixels. Tab bar icons 30x 30pixels. Iphone OS automatically provides different states of icons, you can't change these.

<span style="font-family: Georgia,serif;">Launch Image
<span style="font-family: Georgia,serif;"> The launch image should look like the start of your applications first window. It is not an animation or about window or branding exercise. It needs to appear that the app is ready to use, when the user taps it they get the first page of the app and it's options. This images should be a PNG of 320 x 240 pixels. Your launch image should be named Default.png