Dear Developers, Design Details Matter

105
Dear Developers, Design Details Matter Juhani Lehtimäki, Fat Robot

description

DroidconSE presentation

Transcript of Dear Developers, Design Details Matter

Page 1: Dear Developers, Design Details Matter

Dear Developers,

Design Details

Matter

Juhani Lehtimäki, Fat Robot

Page 2: Dear Developers, Design Details Matter

“Users can figure it out. What’s the problem?”

“You are just nitpicking. It’s fine.”

“You just hate <insert company you like but you think I

don’t>”

http://www.androiduipatterns.com/

Page 3: Dear Developers, Design Details Matter
Page 4: Dear Developers, Design Details Matter

Design Guidelines

Design Patterns

Page 5: Dear Developers, Design Details Matter
Page 6: Dear Developers, Design Details Matter
Page 7: Dear Developers, Design Details Matter
Page 8: Dear Developers, Design Details Matter
Page 9: Dear Developers, Design Details Matter
Page 10: Dear Developers, Design Details Matter
Page 11: Dear Developers, Design Details Matter
Page 12: Dear Developers, Design Details Matter
Page 13: Dear Developers, Design Details Matter
Page 14: Dear Developers, Design Details Matter
Page 15: Dear Developers, Design Details Matter
Page 16: Dear Developers, Design Details Matter
Page 17: Dear Developers, Design Details Matter

Android Design Guidelines

Page 18: Dear Developers, Design Details Matter
Page 19: Dear Developers, Design Details Matter

Consistenc

y

Page 20: Dear Developers, Design Details Matter

Visual

Cues

Page 21: Dear Developers, Design Details Matter

Information

Hierarchyand

Actions

Page 22: Dear Developers, Design Details Matter

Find what you

are looking for

Page 23: Dear Developers, Design Details Matter

And do with it

what you

wanted to do

Page 24: Dear Developers, Design Details Matter
Page 25: Dear Developers, Design Details Matter

So, Do All Apps Need to

Look the Same Now?

Page 26: Dear Developers, Design Details Matter
Page 27: Dear Developers, Design Details Matter
Page 28: Dear Developers, Design Details Matter
Page 29: Dear Developers, Design Details Matter
Page 30: Dear Developers, Design Details Matter

A Design Pattern

A Proven, Good

Solution to a Common

problem

Page 31: Dear Developers, Design Details Matter

Action Bar

Page 32: Dear Developers, Design Details Matter

Where am I?

What can I

do?

Page 33: Dear Developers, Design Details Matter
Page 34: Dear Developers, Design Details Matter
Page 35: Dear Developers, Design Details Matter
Page 36: Dear Developers, Design Details Matter
Page 37: Dear Developers, Design Details Matter
Page 38: Dear Developers, Design Details Matter
Page 39: Dear Developers, Design Details Matter
Page 40: Dear Developers, Design Details Matter
Page 41: Dear Developers, Design Details Matter
Page 42: Dear Developers, Design Details Matter
Page 43: Dear Developers, Design Details Matter
Page 44: Dear Developers, Design Details Matter
Page 45: Dear Developers, Design Details Matter

Don’t need it?

Don’t use it!

Page 46: Dear Developers, Design Details Matter

Design patterns solves a

problem

if you don’t have the problem

don’t use the design pattern!

Page 47: Dear Developers, Design Details Matter

Up

Page 48: Dear Developers, Design Details Matter

How do I get

out of here?

Page 49: Dear Developers, Design Details Matter
Page 50: Dear Developers, Design Details Matter
Page 51: Dear Developers, Design Details Matter
Page 52: Dear Developers, Design Details Matter
Page 53: Dear Developers, Design Details Matter

Trust

Page 54: Dear Developers, Design Details Matter

Navigation

Drawer

Page 55: Dear Developers, Design Details Matter

How do I get

to somewhere

else?

Page 56: Dear Developers, Design Details Matter
Page 57: Dear Developers, Design Details Matter
Page 58: Dear Developers, Design Details Matter
Page 59: Dear Developers, Design Details Matter
Page 60: Dear Developers, Design Details Matter
Page 61: Dear Developers, Design Details Matter

:-\

Page 62: Dear Developers, Design Details Matter
Page 63: Dear Developers, Design Details Matter

?

Page 64: Dear Developers, Design Details Matter
Page 65: Dear Developers, Design Details Matter

Don’t need it?

Don’t use it!

Page 66: Dear Developers, Design Details Matter

Tabs

Page 67: Dear Developers, Design Details Matter
Page 68: Dear Developers, Design Details Matter
Page 69: Dear Developers, Design Details Matter
Page 70: Dear Developers, Design Details Matter
Page 71: Dear Developers, Design Details Matter
Page 72: Dear Developers, Design Details Matter
Page 73: Dear Developers, Design Details Matter
Page 74: Dear Developers, Design Details Matter
Page 75: Dear Developers, Design Details Matter
Page 76: Dear Developers, Design Details Matter

Transitions

Page 77: Dear Developers, Design Details Matter
Page 78: Dear Developers, Design Details Matter
Page 79: Dear Developers, Design Details Matter
Page 80: Dear Developers, Design Details Matter
Page 81: Dear Developers, Design Details Matter
Page 82: Dear Developers, Design Details Matter
Page 83: Dear Developers, Design Details Matter

L

Page 84: Dear Developers, Design Details Matter
Page 85: Dear Developers, Design Details Matter
Page 86: Dear Developers, Design Details Matter
Page 87: Dear Developers, Design Details Matter
Page 88: Dear Developers, Design Details Matter

Innovation and the

Mature Android

Platform

Page 89: Dear Developers, Design Details Matter

Community driven

innovation

Page 90: Dear Developers, Design Details Matter

Taylor Ling, June 15, 2012

http://androiduiux.com/2012/06/15/side-navigation-ui-pattern-in-android/

Page 91: Dear Developers, Design Details Matter

http://developer.android.com/design/patterns/navigation-

drawer.html

Page 92: Dear Developers, Design Details Matter
Page 93: Dear Developers, Design Details Matter

Commercial innovation

Page 94: Dear Developers, Design Details Matter
Page 95: Dear Developers, Design Details Matter
Page 96: Dear Developers, Design Details Matter
Page 97: Dear Developers, Design Details Matter
Page 98: Dear Developers, Design Details Matter
Page 99: Dear Developers, Design Details Matter

UX design is Nitpicking

for a Good Reason

Page 100: Dear Developers, Design Details Matter

“This is different”

“Do I use this differently?”

Page 101: Dear Developers, Design Details Matter

Learn Once

Use Everywhere

Page 102: Dear Developers, Design Details Matter

Gestures Are Hidden

but Awesome

Page 103: Dear Developers, Design Details Matter

Reinventing the Wheel

vs.

Innovation

Page 104: Dear Developers, Design Details Matter

Break rules & guidelines only

if you have a good reason to

do so

Page 105: Dear Developers, Design Details Matter

Cheers!

+JuhaniLehtimäki

www.fatrobot.io

www.androiduipatterns.com