iPhone Lunch And Learn
-
Upload
timothy-mcguckin -
Category
Technology
-
view
1.711 -
download
0
description
Transcript of iPhone Lunch And Learn
January 22, 2009
iPhone application primer
January 22, 2009 iPhone lunch & learn 2January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 2
Contents
Implementation categories
Application styles
Design process
January 22, 2009 iPhone lunch & learn 3January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 3
Implementation categories
iPhone application
Web-only content
Hybrid application
January 22, 2009 iPhone lunch & learn 4January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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)
January 22, 2009 iPhone lunch & learn 5January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 5
iPhone application examples
January 22, 2009 iPhone lunch & learn 6January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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
January 22, 2009 iPhone lunch & learn 7January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 7
Web-only content examples
January 22, 2009 iPhone lunch & learn 8January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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
January 22, 2009 iPhone lunch & learn 9January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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
January 22, 2009 iPhone lunch & learn 10January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 10
Application styles
Productivity
Utility
Immersive application
January 22, 2009 iPhone lunch & learn 11January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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
January 22, 2009 iPhone lunch & learn 12January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 12
Productivity example: Photo for iPhone
Organized hierarchically
Progressive selection
Tasks performed at lowest level
January 22, 2009 iPhone lunch & learn 13January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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
January 22, 2009 iPhone lunch & learn 14January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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
January 22, 2009 iPhone lunch & learn 15January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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)
January 22, 2009 iPhone lunch & learn 16January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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
January 22, 2009 iPhone lunch & learn 17January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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
January 22, 2009 iPhone lunch & learn 18January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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
January 22, 2009 iPhone lunch & learn 19January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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
January 22, 2009 iPhone lunch & learn 20January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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)
January 22, 2009 iPhone lunch & learn 21January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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
January 22, 2009 iPhone lunch & learn 22January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 22
Gestures
iPhone Finger Tips: http://www.youtube.com/watch?v=drxtyQUXRbo
January 22, 2009 iPhone lunch & learn 23January 22, 2009 © THINK Interactive, Inc. iPhone lunch & learn 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