Designing for iOS

1. Designing for iOS

3. 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/

4. Heavier UI, competes with content

5. 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.

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

7. Defer to Content Reconsider visual indicators of physicality and realism. • Focus on content and let UI play supporting role. Content draws focus Subtle controls

8. Focus on content and let UI play a supporting role

9. 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.

10. Provide Clarity • Provide clarity - to ensure content is paramount. • Make most important content and functions clear and easy to use.

11. 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/

12. 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.

13. Provide Clarity: Space between specific items on page. Items unequally spaced and aligned. Items equally spaced and aligned.

14. 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: • What is the section? • What topic am I in?/ Where am I? • What are the major sections (local navigation) • Things I can do. • Content to be studied. • Getting Help or support resources. • Navigation to get to the rest of the program. • How do I get out?

16. Divide page/screen into rows and columns • Identify elements that are common throughout • Essential and common elements are made to fit within the grid • Group related elements together • Create sample and get feedback. • Gives a coherent visual structure. • Reduces clutter and provides users visual cues to follow.

17. Help users understand

18. Grids

19. Grids

20. Provide Clarity • Let color simplify UI. • Key color highlights important state and subtly indicates interactivity.

21. Provide Clarity • Let color simplify UI. • Color gives app a consistent visual theme.

22. 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.

23. Use Depth to Communicate • Displays content in distinct layers: • convey hierarchy and position, and • help users understand relationships among onscreen objects.

24. 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.

25. 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.

26. Always Be Prepared to Stop • An iOS app never displays a Close or Quit option.

27. 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.

28. 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

29. 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.

30. 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

31. Navigation Implement navigation without calling attention to itself. • Three main styles of navigation • Hierarchical • Flat • Content- or experience-driven

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

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

34. 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.