iPhone Lunch And Learn

1,137 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,137
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

iPhone Lunch And Learn

  1. 1. iPhone application primer
  2. 2. Contents <ul><li>Implementation categories </li></ul><ul><li>Application styles </li></ul><ul><li>Design process </li></ul>
  3. 3. Implementation categories <ul><li>iPhone application </li></ul><ul><li>Web-only content </li></ul><ul><li>Hybrid application </li></ul>
  4. 4. iPhone application <ul><li>Resembles built-in application </li></ul><ul><li>Downloaded from the iTunes App Store </li></ul><ul><li>Take advantage of the iPhone OS </li></ul><ul><li>Variable cost ($0 – ?) </li></ul><ul><li>Objective C, Cocoa dev environment </li></ul><ul><li>Can use all iPhone dev frameworks </li></ul><ul><li>1+ month approval process (or more) </li></ul>
  5. 5. iPhone application examples
  6. 6. Web-only content <ul><li>Three types, all viewed through the iPhone Safari web browser </li></ul><ul><ul><li>Web apps, optimized web pages, compatible pages </li></ul></ul><ul><li>Web apps provide solution to a task and form to certain display guidelines </li></ul><ul><li>Optimized web pages for safari on iPhone display correctly scale content; often designed to detect when it is being viewed on iPhone. </li></ul><ul><li>Compatible web pages </li></ul><ul><li>Users do not install on device – use HTTP </li></ul><ul><li>Custom icon adds way to display on iPhone home screen as a web clip, giving appearance of an app </li></ul><ul><li>No approval process needed </li></ul>
  7. 7. Web-only content examples
  8. 8. Hybrid application <ul><li>Installable application that combines features of native apps and web pages </li></ul><ul><li>Gives users access to web content using component - webview </li></ul><ul><li>Tends to contain standard iPhone UI elements </li></ul><ul><li>Should appear and behave like a built in app – web sources should be visually seamless </li></ul><ul><li>Installable app, so it follows the 1+ month approval process </li></ul>
  9. 9. Hybrid application styles <ul><li>Uses native iPhone app for menu, location finder and about BofA </li></ul><ul><li>Uses webview to display secure web app seamlessly </li></ul><ul><li>Appears to work as one application </li></ul>Web content
  10. 10. Application styles <ul><li>Productivity </li></ul><ul><li>Utility </li></ul><ul><li>Immersive application </li></ul>
  11. 11. Productivity <ul><li>Enables tasks based on the organization and manipulation of detailed information </li></ul><ul><li>UE keeps the user focused on the task </li></ul><ul><li>User finds what they need, easily performs necessary action, completes the task and moves on to something else </li></ul><ul><li>UI model: list views, manipulation of lists, information drilldown, perform tasks </li></ul><ul><li>Example: Photo </li></ul>
  12. 12. Productivity example: Photo for iPhone <ul><li>Organized hierarchically </li></ul><ul><li>Progressive selection </li></ul><ul><li>Tasks performed at lowest level </li></ul>
  13. 13. Utility applications <ul><li>Performs a simple task that requires minimum of user input. </li></ul><ul><li>Often quick summary of info; perform simple tasks on only a few objects </li></ul><ul><li>Enhance information without overshadowing it. </li></ul><ul><li>UI Model: simple, standard views and controls. </li></ul><ul><li>Typically flattened lists – no drilldown or hierarchy </li></ul><ul><li>Typically each view contains same organization of data, depth of detail – served from different source. </li></ul><ul><li>Example: Weather app </li></ul>
  14. 14. Utility application example <ul><li>Quick summary of Information </li></ul><ul><li>Easy-to-scan summary </li></ul><ul><li>Enhances information without overshadowing it </li></ul><ul><li>Same treatment on multiple sources of information </li></ul><ul><li>No drill down </li></ul>
  15. 15. Immersive application <ul><li>Full-screen, visually rich environment – games, media-rich content, complex or simple tasks </li></ul><ul><li>Typically doesn’t display large amounts of text based information </li></ul><ul><li>Rewards users for their attention </li></ul><ul><li>Tends to hide much of the device’s UI – users custom UI to strengthen sense of immersion </li></ul><ul><li>Ex: Spore Origins (complex); Bubble Level (simple) </li></ul>
  16. 16. Immersive application examples <ul><li>Full-screen, visually rich </li></ul><ul><li>Custom UI to strengthen sense of immersion </li></ul><ul><li>Users expect seeking and discover to be part of the experience </li></ul><ul><li>Non-standard controls is often appropriate </li></ul>
  17. 17. Design process (these really aren’t a process - they are guidelines) <ul><li>Start with clear product strategy </li></ul><ul><li>Incorporate characteristics of great iPhone apps </li></ul><ul><li>Support gestures appropriately </li></ul><ul><li>Incorporate branding elements cautiously </li></ul>
  18. 18. Product strategy <ul><li>Define the user audience and their needs </li></ul><ul><li>Determine what needs to fill and how they align with business objectives </li></ul><ul><li>Develop clear value proposition for the user </li></ul><ul><li>Test every feature and design decision against the user value proposition </li></ul>
  19. 19. Great iPhone app characteristics - Simplicity and ease of use <ul><li>Make it obvious </li></ul><ul><ul><li>Fewer controls, larger controls, clear labeling; simplify (ex: stopwatch) </li></ul></ul><ul><li>Think “top down” </li></ul><ul><ul><li>Usage patterns dictate top of screen is reserved for frequently used, higher level information – bottom half can be covered by fingers, thumbs, hand </li></ul></ul><ul><li>Minimize required input </li></ul><ul><ul><li>Inputs take time and attention; viewers/pickers better than text field inputs; give them something in return </li></ul></ul><ul><li>Express information succinctly </li></ul><ul><ul><li>Condensed headline style (short and direct); should read at a glance </li></ul></ul>
  20. 20. Great iPhone app characteristics, continued <ul><li>Provide fingertip-size targets (44x44 min) </li></ul><ul><ul><li>Don’t bunch elements too close together; fewer is better; provide adequate margins and padding; make it easy for the on-the-go user (ex: Calculator) </li></ul></ul><ul><li>Focus on the primary task </li></ul><ul><ul><li>Stay focused on product strategy and make sure every feature and UI element support it (ex: calendar) </li></ul></ul><ul><li>Communicate effectively </li></ul><ul><ul><li>Communication and feedback; subtle refined animation is good visual feedback; text based communication should be user-centric terminology (avoid tech jargon); (ex: connecting to a wi-fi network in settings on iPhone) </li></ul></ul>
  21. 21. Support gestures appropriately <ul><li>Tapping, flicking, pinching to navigate, read web content and use applications </li></ul><ul><li>Some operations difficult to replicate and should be avoided: text selection, drag-drop, cut-copy-paste </li></ul><ul><li>Avoid defining new gestures </li></ul><ul><li>Gestures should be consistent with iPhone based gestures (tap, drag, flick, swipe, double tap, pinch open, pinch close, touch and hold) </li></ul><ul><li>Exception would be something like a game that uses a pinch-rotate to rotate a game piece </li></ul>
  22. 22. Gestures <ul><li>iPhone Finger Tips: http://www.youtube.com/watch?v=drxtyQUXRbo </li></ul>
  23. 23. Use of branding elements <ul><li>Most effective when subtle and understated </li></ul><ul><li>Incorporate brand colors or images in a refined, unobtrusive way </li></ul><ul><li>Balance eye-appeal with brand recognition </li></ul><ul><li>Home screen icon should focus on brand </li></ul>

×