DESIGNING FOR IOS

iOS uses the following themes: Deference. UI helps users understand

and interact with the content, but never competes with it.

Clarity. Text is legible, icons precise and lucid, enhancements subtle and focused on functionality.

Depth. Visual layers heighten users’ interest and understanding. Source:

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/index.html#//apple_ref/doc/uid/TP40006556

http://ivomynttinen.com/blog/the-ios-7-design-cheat-sheet/

Heavier UI, competes with content

Guides to follow

Strip away UI to expose app’s core functionality and relevance.

Use iOS themes to inform UI design and user experience (UX).

Embellish with care and never needlessly.

Content and functionality drive design decisions.

User’s content is at the core of UI.

Defer to Content

Take advantage of whole screen. Let content extend to edges of screen. Convey the most important information.

Defer to Content

Reconsider visual indicators of physicality and realism. Focus on content and let UI play supporting role.

Subtle controls

Content draws focus

Focus on content and let UI play a supporting role

Defer to Content

Let translucent elements hint at content behind them. Translucent element blurs only content behind it.Doesn’t blur the rest of screen.

Provide Clarity

Provide clarity - to ensure content is paramount.

Make most important content and functions clear and easy to use.

Provide Clarity: Negative Space Use negative or white space

Area of page not occupied by content. Space between specific items on page.

Negative space does not have to be white.

Makes important content and functionality noticeable and easier to understand.

Makes app look more focused and efficient.

Source: http://sixrevisions.com/web_design/negative-space-in-webpage-layouts-a-guide/

Provide Clarity

• Use negative or white space - area of page not occupied by content.

• Space between specific items on page.

Items equally spaced and aligned.

Provide Clarity: Space between specific items on page.

Items unequally spaced and aligned.

Items equally spaced and aligned.

Help users understand |GRIDS

Divide screen up based on the following guide:

User should be able to glance around and point to different areas of the screen and say:

1. What is the section?2. What topic am I in?/ Where am I?3. What are the major sections (local navigation)4. Things I can do.5. Content to be studied.6. Getting Help or support resources.7. Navigation to get to the rest of the program.8. How do I get out?

1. Divide page/screen into rows and columns

2. Identify elements that are common throughout

3. Essential and common elements are made to fit within the grid

4. Group related elements together

5. Create sample and get feedback.

• Gives a coherent visual structure.

• Reduces clutter and provides users visual cues to follow.

Help users understand

Grids

Grids

Provide Clarity

Let color simplify UI. Key color highlights important state and

subtly indicates interactivity.

Provide Clarity

Let color simplify UI. Color gives app a consistent visual

theme.

Provide Clarity: borderless buttons ios7 all bar buttons are borderless. Content areas, a borderless button uses

context, color, and a call-to-action title to indicate interactivity.

When appropriate, content-area button can display a thin border or tinted background.

Use Depth to Communicate Displays content in

distinct layers: convey hierarchy and

position, and help users understand

relationships among onscreen objects.

iOS App Anatomy

The UI elements - four broad categories:

Bars. Contextual information, tell users where they are and controls to help users navigate.

Content views. App-specific content and enable behaviors such as scrolling.

Controls. Controls perform actions or display information.

Temporary views. Appear briefly to give users important information or additional choices and functionality.

Start Instantly

People spend less than minute evaluating app.

Present useful content immediately. Focus on needs of 80% of your users. Delay login requirement for as long

as possible.

Always Be Prepared to Stop An iOS app never displays a Close or

Quit option.

Layout

Make it easy to interact with content and controls by giving element ample spacing.

Give tappable controls a hit target of about 44 x 44 points.

Layout

Elevate important content or functionality.

Place principal items in the upper half of the screen and—in left-to-right cultures—near the left side of the screen:

More Important

Less Important

Layout

Use visual weight to show relative importance of onscreen elements.

Large items catch eye and appear more important.

Larger items are easier to tap, makes them especially useful in apps.

Layout

Use alignment to: ease scanning, communicate groupings or hierarchy

Users must understand primary content at default size. No scroll horizontally to read important

text, or zoom to see primary images. Avoid inconsistent appearances in

your UI

Navigation

Implement navigation without calling attention to itself.

Three main styles of navigation Hierarchical Flat Content- or experience-driven

Navigation

Hierarchical information structure: users navigate by making one choice per screen until they reach their destination

Navigation

Flat information structure, users navigate directly from one primary category to another because all primary categories are accessible from the main screen.

Navigation

Content- or experience-driven information structure, navigation is defined by the content or experience.

Users navigate through a book by moving from one page to the next.