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


Implementation categories

iPhone application

Web-only content

Hybrid application


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)


iPhone application examples


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


Web-only content examples


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


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


Application styles

Productivity

Utility

Immersive application


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


Productivity example: Photo for iPhone

Organized hierarchically

Progressive selection

Tasks performed at lowest level


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


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


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)


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


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


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


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


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)


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


Gestures

iPhone Finger Tips: http://www.youtube.com/watch?v=drxtyQUXRbo


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

iPhone Lunch And Learn

Technology

Transcript of iPhone Lunch And Learn