– Robin Klein Schiphorst

The Experience The key to cross-platform design

My name is

Robin Klein Schiphorst

User interface & experience designer Mobile | Responsive | Consulting www.robinkleinschiphorst.nl !

Current location Holland, recently lived in Norway for 1,5 years

Agenda

• Current situation

• How to get started

• Design tips & tricks

• Good examples what to do and what not

• Summary

Designing an ExperienceIn the digital jungle

Forget about devices

source: http://bradfrostweb.com/

Forget about platform

But.. but..

We change phone every 1 to 2 yearsYour brand doesn’t.

Iphone wins on time & money spend on apps.

“ winning, for us, has never been about making the most. ”

- D11 Conference, Apple CEO Tim Cook

Users don’t careIf i change phone, should i relearn to use the app?

Let’s stop.

Take a step back.

Noise..

So..

What does this mean.

We should aim for✓ A means for the user accomplice his/her goal ✓ Create an enjoyable experience ✓ A good foundation to build on ✓ Visual layer to make the use a breeze ✓ Making a task easier.

It’s not a design competition

- Look amazing - Doing new & intuitive things

Don’t skip

Research and testing

Remember

easy and enjoyable

getting started

A clear idea, vision & goals.

Think in opportunities

Location Situation

Usability Functionality

Write down all idea’s, features & wishes

Organise your idea’s so you have a clear overview

Create a flow chart

Create a list of targeted devices What is the difference between them

iPad Air - mini iPhone 4 - 5

Galaxy Note Galaxy S4

Fluid & mobile first improve with break points

Start wireframing on paper gives you more time to think

Design tips & tricks makes working easier

Design tips & tricks

✓ Go vector or at least retina

✓ Create structure with folders

✓ Name your layers

✓ Use layer colours to highlight status

✓ Use smart objects

✓ Make a folder with all elements

✓ Use notes in your psd

Animate you interaction ideas

Source: The float label form interaction by Matt D Smith

You go from this.

You go from this.to this.

Examples of cross platformThe good and the bad

Create a solid brand identity

✓ Logo ✓ Icon ✓ Label

Common elements/feeling

when something just works amazing.

Its a great feeling

Common elements, but why the strange difference?

Iphone Android Blackberry

Bad choice on menu position on android

Iphone Android

Create a solid experience cross-platform

It’s in the details.

Popular mobile design patterns should be shared cross-platform

It doesn’t matter on which platform it was first used.

Interactions

Interactions

Default behaviour to show menu

Swipe from right to left

One interaction

Default behaviour is check or delete

New option Setting a value Variation

Finido & Mail Pilot app

✓ Good use of screen space in combination with interaction

✓ Different types of navigation

✓ Customisable navigation

✓ Smart touch gestures

✓ Respecting your time: Continue while tweet is being send

✓ Great use of sounds

✓ Simple navigation

✓ Touch & hold:The heavy user navigation

User moments

Handle (unexpected) moments Very important

Create an emotional connection

When you take care of the moments clients will love you.

• Forget device & os

• Create a clear concept

• Start with flowcharts & wireframes

• Solid brand identity

• Solid uniform experience

• Icons should be communicate the same message

• Find touch interactions to compliment experience

• Start with a small range first, like tablet 7 to 9 inch

• Mobile first

• Fluid first

• Enhance with break points

• Use device specific features to enhance experience

• Create structured and clean design files

• Create a ui collection

Summary remember

We are giving two courses in March on!mobile app design & development.!!

Learn about the compleet proces of a great app in detail from start to launch in the app stores.!!

We appreciate if you can help share the news with college’s and friends.

Course info: www.interactivetribe.com

Going into detail with our course

Thank you all!For you interest.

Email robin@interactivetribe.com!

Twitter @eyenoxmedia

It’s time for the break