Download pdf - Prototyping saves your bacon

iOS Application Development

Prototyping saves your …


Prototyping will save your

iOS Application Developmenthttp://www.jasonmecier.com/fkevinbacon.html


Prototyping will save your

mmmm… bacon



OR



We’re building an app…


https://www.flickr.com/photos/13102974@N00/2736544035/


https://www.flickr.com/photos/officenow/2631533044/


Analysis



Time for lunch…



IT’S 2014 !!!


</rant>

Prototyping? Huh?!


Starts with an idea

What to expect?

‣ “I have this idea...”

‣ I want to build the next Angry Birds

‣ I want to build an app that does ...

‣ Client brief

‣ List of requirements

‣ Wireframes / Sketches

New paradigms

‣ Constraints‣ small size

‣ limited hardware

‣ one screen at a time

‣ one application at a time *

‣ touch input

‣ Interactions‣ gestures

‣ shake

‣ orientation

‣ audio switch, volume buttons

‣ home & power buttons

Wireframing vs. Prototypingint

erac

tivity


Building great apps

List of features

too manyfeatures?

Filter

Yes

ApplicationDefinitionStatement

Appfeatures

User journeys

Wirefames

Prototype

Application Definition Statement

“A concise, concrete declaration of the app’s main purpose and its intended audience.”

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

Solve real problems

"An app must solve a user's problem clearly and elegantly."

Eric Hope, User Experience Evangelist, Apple


Delivery methods

3 ways to deliver mobile content

‣ web app [dedicated]

‣ native app

‣ there is no 3rd way!

Strengths & weaknesses

cost

performance

native

web

hybrid


</rant>


Types of apps

Types of apps

seri

ou

snes

s

purposeserious

fun

tool entertainment

Serious toolse

rio

usn

ess

purposeserious

fun

tool entertainment

Fun toolse

rio

usn

ess

purposeserious

fun

tool entertainment

Fun entertainmentse

rio

usn

ess

purposeserious

fun

tool entertainment

Serious entertainmentse

rio

usn

ess

purposeserious

fun

tool entertainment

Utilityse

rio

usn

ess

purposeserious

fun

tool entertainment

http://h24.co/NearestBus

http://h24.co/NearestBus


An example

Features

‣ simple countdown timer ‣ with local notifications

‣ group timers in sequences ‣ pomodoro (25min + 5 min)

‣ gym training (5 mins, etc. )

ADSA simple to use countdown collection for time conscious individuals.

TypeSerious Tool


Wireframing

Wireframing

‣ identify main areas of the app

‣ identify screens

‣ identify relations between screens

‣ start from the simplest things and build up

‣ start from the main task of the app

Demo app: Timers

‣ simple countdown timer countdown

‣ CRUD for timer

‣ local notifications for when the timer is up

‣ collection of timers (i.e. sequences)

‣ CRUD for collections

Paper by FiftyThree


‣ CRUD for timer


‣ collection of timers


Sketching


‣ CRUD for timer




Sketching


‣ CRUD for timer




Sketching


‣ CRUD for timer




Sketching


‣ CRUD for timer




Sketching


‣ CRUD for timer




Sketching

‣ CRUD for timer




Sketching

‣ CRUD for timer




Sketching

‣ CRUD for timer




Sketching



‣ CRUD for collectionsSketching







Sketching

More sketchingstart

Splash screen

List of sequences

Add sequence

Sequenceedit

05:12start Timer

start

Add timer

Sketching

‣ start from the most important task

‣ identify main areas of the app

‣ identify screens

‣ identify relations between screens

!

‣ Don’t worry! You won’t get it right the first time

Wireframing tools

‣ Stencils

‣ Omnigraffle

‣ Photoshop

‣ Skala Preview

‣ Liveview

‣ Reflector

Stencils

uistencils.com

Stencils

flickr.com/photos/rosenfeldmedia/3978119393/

http://www.flickr.com/photos/seretuaccidente/

Omnigraffle

Omnigraffle

graffletopia.com

Realistic wireframes

http://www.teehanlax.com/tools/

Photoshop add-ons

Skala Preview http://bjango.com/mac/skalapreview/

Skala Preview

Liveview http://www.zambetti.com/projects/liveview/

FREE!!!

Reflector http://www.airsquirrels.com/reflector/


Prototyping

Types of prototypes

‣ Web based

‣ Visual

‣ Presentation based

Web based

‣ (almost) No technical skills required

‣ easy to communicate with the client

‣ possible offline access

‣ can run on the device

‣ but can deviate from the native experience

Visual tools

‣ Design rich

‣ Visually correct

‣ Slightly harder to communicate

‣ Might lead to confusions

Briefs

http://giveabrief.com/

Presentation based

‣ Use your existing skills

‣ The client can possibly create/amend these

‣ Offline access

‣ Easy to communicate

‣ Can run on the device

Keynote

Keynotopia

Included elements

Included elements

Gestures lukew.com/touch

http://lukew.com/touch

Keynote settings

Keynote export

Demo


Xcode

Storyboards

Storyboards

Storyboards

The good:‣ use your existing skills

‣ deploy on device

‣ wysiwyg

‣ can be built upon

The not so good:‣ must be a developer

‣ ad-hoc distribution

‣ client must have a device

‣ collaboration painful


Experimental

Pop

Whiteboard + Liveview + phone


Ruby


Collaterals

Icons

Patterns


Why prototyping?


1


2

Questions

@pardel!

[email protected]

Thank you!

@pardel!

[email protected]

Skills Matter, London, April 23, 2013 Slide .

`

Thank you!