Prototyping iOS AppsTom Bowden

Tokyo, November 2015

Defining a Prototype• A prototype is an initial model of an object built to test a

design. The word comes from a Greek word for “primitive form”. (UXL Encyclopedia of Science, 2015)

• Prototypes are not meant to be perfect versions of the designed products. The process results in a prototype that is not exactly what the final design will contain, but that is close enough to let the designers see if it will work or not.

• ‘Testing the design’ is built into the meaning of a prototype.

1/18

Why Prototype Apps?• Get your ideas into app ‘form’ quickly

• Get feedback from others (‘test the design’)

• Be able to improve (‘iterate’) quickly

• Test several ideas without investing too much time or money. Develop the business strategy in parallel.

• Not be worried about throwing out the entire prototype and starting again, since little time and money invested

2/18

‘Lean’ ApproachCentral to the Lean Startup approach is Validated Learning:

“Startups exist not just to make stuff, make money, or even serve customers. They exist to learn how to build a sustainable business. This learning can be validated scientifically by running frequent experiments that allow entrepreneurs to test each element of their vision.”

(The Lean Startup, Eric Ries, 2011)

3/18

Who Should Prototype?• Everyone: Over the last 12 months, app prototyping has

become accessible to anyone who wants to make an app

Designers – Engineers – People on Business-Side

• Engineers: even though you have the ability to make the actual app, take a step back and prototype first – your product will be better if you do so

• Business-People: you have no more excuses not to be able to make a simple prototype in order to better convey your app ideas and get buy-in

4/18

There are now dozens of prototyping tools on the market:

Prototyping Tools

Proto.io

Pixate

Origami

Avocado

Framer

Flinto

InVision

Keynote

POP Fluid UI

Briefs

Form

Mockup.ioMarvel

Balsamiq

Keynotopia

Prott AxureRP

Indigo Studio

Principle5/18

Page-based

In a page-based tool, you lay out different screens, and then you make hotspots or buttons to connect them together.

You tap a button or hotspot somewhere on one screen to go to another screen.

Types of Prototyping ToolsLayer-based

Each layer on a page can be made tappable, swipe-able, and draggable, with animations if desired.

Usually used for single-page designs, since there are generally fewer options to create the entire flow of an app.

Code-based

Use code (text-based or visual-node-based) to give you more control than layer-based prototypes.

Again, usually used for single page micro-interactions, otherwise you might as well build the actual app.

6/18

Which Tool is Best?In my humble opinion: Principle for Mac.

• It offers both page-based and layer-based advantages.

• It is possible to lay out the entire flow of the app, and also create micro-interactions on a page.

• It is easy to learn how to use Principle, and it is easy to share Principle prototypes.

• The Preview window shows the results of changes live.

• It is also relatively inexpensive (US$ 99).7/18

Screenshot of Principle

8/18

Output of Principle

9/18

Creating a Scrollable View in Principle

10/18

Creating a Horizontal Scroll View in Principle

11/18

Page Views and “Drivers” in Principle

12/18

Drivers in PrincipleDrivers connect properties to each other using keyframes. Drivers work within an artboard.

Drivers work on the following properties of a layer or group of layers, based on their X or Y position:

• X

• Y

• Width

• Height

• Scale

• Angle

• Opacity

• Radius

• Stroke Width

13/18

Animation View in PrincipleThe Animate timeline is used to customize animations between artboards.

14/18

Full Prototype in Principle

15/18

Weak Points of Principle• Cannot access sensors of the mobile device

• Can only work with static images

• No way to group together related artboards, so you need many artboards in order to prototype an entire app

• No simple way of extracting layer coordinates and animation timings from the app to communicate with engineers

16/18

Some Tips• For pixel-perfect designs, use Sketch 3 with Principle. They work very well

together.

• Design @1x (i.e. design in ‘points’), not @2x.

• Start design based on the physical device you have for live testing. E.g. if you have a 4.7-inch iPhone for testing, start your designs based on that.

• Later, mock up designs for multiple device sizes (iPhone 4-inch, 4.7-inch, 5.5-inch, iPad).

• Make use of the many UI templates available on the net for free.

• Use Lookback for recording user tests on the device (note: requires a jailbroken device).

17/18

Thank You for Listening!

tom@eventacular.net

http://eventacular.net

Now: Q&A18/18