workshop - mobile health apps - erik van der zijden

41
1 Make mobile app design suck less And develop great apps along the way

Upload: doctors-20-you-june-4-5-2015

Post on 18-Dec-2014

559 views

Category:

Health & Medicine


3 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Workshop - Mobile Health Apps - Erik van der Zijden

1

Make mobile app design

suck less And develop great apps along the way

Page 2: Workshop - Mobile Health Apps - Erik van der Zijden

Multimedia

Marketing

Techno geek

Martial Arts

MBA

BSc

Pharma

Digital Media

Intervet (MSD)

1972

Video

Mobile

Triumph

Spitfire

Yara

Medical

Biology

Floor

Eline

Enterprise 2.0

Erik van der Zijden Entreprenerd

Design

Apps

Page 3: Workshop - Mobile Health Apps - Erik van der Zijden

Reinventing

communication with tools

that change the world

One app, one life. At least

Page 4: Workshop - Mobile Health Apps - Erik van der Zijden

4

Page 5: Workshop - Mobile Health Apps - Erik van der Zijden

5

design noun

a plan or drawing produced to show the look and function or

workings of a building, garment, or other object before it is built

or made.

the art or action of conceiving of and producing such a plan or

drawing.

Page 6: Workshop - Mobile Health Apps - Erik van der Zijden

6

design noun

a plan or drawing produced to show the look and function or

workings of a building, garment, or other object before it is built

or made.

the art or action of conceiving of and producing such a plan or

drawing.

Page 7: Workshop - Mobile Health Apps - Erik van der Zijden

7 7

Page 8: Workshop - Mobile Health Apps - Erik van der Zijden

8

Print ... is designing for the

Web ... is designing for the

Mobile ... is designing for the

Page 9: Workshop - Mobile Health Apps - Erik van der Zijden

9

Interaction

design

Touching

Graphical

design

Seeing

Page 10: Workshop - Mobile Health Apps - Erik van der Zijden

10

Some examples

Page 11: Workshop - Mobile Health Apps - Erik van der Zijden

11

Dislaimer

I mean no harm. All examples, good and bad ones, have been found

and chosen randomly.

If I picked yours to show as a ‘bad’ example: I apologize. Fix it.

If I picked yours to show as a ‘good’ example: You may thank me later.

Page 12: Workshop - Mobile Health Apps - Erik van der Zijden

12

Graphs

Page 13: Workshop - Mobile Health Apps - Erik van der Zijden

13

Graphs

Page 14: Workshop - Mobile Health Apps - Erik van der Zijden

14

Calculators

Page 15: Workshop - Mobile Health Apps - Erik van der Zijden

15

User

interface

Page 16: Workshop - Mobile Health Apps - Erik van der Zijden

16

Colors &

background

Page 17: Workshop - Mobile Health Apps - Erik van der Zijden

17

Mobile Development Process

Discover

the idea

Functional

Design

Graphical

Design Development QA

App Store

Submission Marketing Updating

Page 18: Workshop - Mobile Health Apps - Erik van der Zijden

18

Mobile Development Process

Discover

the idea

Functional

Design

Graphical

Design Development QA

App Store

Submission Marketing Updating

Page 19: Workshop - Mobile Health Apps - Erik van der Zijden

19

You might build this:

Land

Fly

..when users really need this:

Page 20: Workshop - Mobile Health Apps - Erik van der Zijden

20

Functional

Design Wireframing

Page 21: Workshop - Mobile Health Apps - Erik van der Zijden

21

Functional

Design Wireframing

Page 22: Workshop - Mobile Health Apps - Erik van der Zijden

22

Functional

Design Functional Design

Page 23: Workshop - Mobile Health Apps - Erik van der Zijden

23

Icons, screens Graphical

Design

Functional

Design

Page 24: Workshop - Mobile Health Apps - Erik van der Zijden

24

User testing Graphical

Design

Functional

Design

Page 25: Workshop - Mobile Health Apps - Erik van der Zijden

25

Some

Design Best practices

Page 26: Workshop - Mobile Health Apps - Erik van der Zijden

26

Do not reinvent the wheel 1

Page 27: Workshop - Mobile Health Apps - Erik van der Zijden

27

Human Interface Guidelines

Aesthetic Integrity • Consistency • Direct Manipulation •

Feedback • Metaphors • User Control

Page 28: Workshop - Mobile Health Apps - Erik van der Zijden

28

User Interface Guidelines

Page 29: Workshop - Mobile Health Apps - Erik van der Zijden

29

Sharpen your pencils 2

Page 30: Workshop - Mobile Health Apps - Erik van der Zijden

30 30

Sharpen your pencils 2

Page 31: Workshop - Mobile Health Apps - Erik van der Zijden

31

Don’t make me think 3

Page 32: Workshop - Mobile Health Apps - Erik van der Zijden

32

Land

Fly

Page 33: Workshop - Mobile Health Apps - Erik van der Zijden

33

Colorize correctly 4

Page 34: Workshop - Mobile Health Apps - Erik van der Zijden

34

Colorize correctly 4

Page 35: Workshop - Mobile Health Apps - Erik van der Zijden

35

Colorize correctly 4

Page 36: Workshop - Mobile Health Apps - Erik van der Zijden

36

Go easy on the graphs 5

or

Page 37: Workshop - Mobile Health Apps - Erik van der Zijden

37

The ‘rules of thumb’ 6

Page 38: Workshop - Mobile Health Apps - Erik van der Zijden

38

Funny Fonts 7

Never, ever use Comic Sans. Promise.

Page 39: Workshop - Mobile Health Apps - Erik van der Zijden

39

Design for your audience 8

Page 40: Workshop - Mobile Health Apps - Erik van der Zijden

40

Keep It Simple, Stupid