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