top 5.5 design mistakes in iphone apps

106
Top 5½ iPhone app design mistakes Jeremy Olson - @jerols skookum.com - @skookum Saturday, October 16, 2010

Upload: jeremy-olson

Post on 22-Jan-2018

16.266 views

Category:

Design


0 download

TRANSCRIPT

Page 1: Top 5.5 Design Mistakes in iPhone Apps

Top 5½ iPhone app design mistakes

Jeremy Olson - @jerolsskookum.com - @skookum

Saturday, October 16, 2010

Page 2: Top 5.5 Design Mistakes in iPhone Apps

About you?

Saturday, October 16, 2010

Page 3: Top 5.5 Design Mistakes in iPhone Apps

About me, me, me, me!(nap time)

Saturday, October 16, 2010

Page 4: Top 5.5 Design Mistakes in iPhone Apps

Designer/Developer/Marketer at

Saturday, October 16, 2010

Page 5: Top 5.5 Design Mistakes in iPhone Apps

p.s. I like radial gradients

Saturday, October 16, 2010

Page 6: Top 5.5 Design Mistakes in iPhone Apps

Creator of

GradesSaturday, October 16, 2010

Page 7: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 8: Top 5.5 Design Mistakes in iPhone Apps

Launch!

Saturday, October 16, 2010

Page 9: Top 5.5 Design Mistakes in iPhone Apps

Launch!

Saturday, October 16, 2010

Page 10: Top 5.5 Design Mistakes in iPhone Apps

Launch!

Saturday, October 16, 2010

Page 11: Top 5.5 Design Mistakes in iPhone Apps

Launch!

Saturday, October 16, 2010

Page 12: Top 5.5 Design Mistakes in iPhone Apps

Launch!

Saturday, October 16, 2010

Page 13: Top 5.5 Design Mistakes in iPhone Apps

Launch!

Saturday, October 16, 2010

Page 14: Top 5.5 Design Mistakes in iPhone Apps

Launch!

Saturday, October 16, 2010

Page 15: Top 5.5 Design Mistakes in iPhone Apps

Launch!

Saturday, October 16, 2010

Page 16: Top 5.5 Design Mistakes in iPhone Apps

Launch!

Saturday, October 16, 2010

Page 17: Top 5.5 Design Mistakes in iPhone Apps

Launch!FTW!

Saturday, October 16, 2010

Page 18: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 19: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 20: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 21: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 22: Top 5.5 Design Mistakes in iPhone Apps

How?

Saturday, October 16, 2010

Page 23: Top 5.5 Design Mistakes in iPhone Apps

Great Idea

Saturday, October 16, 2010

Page 24: Top 5.5 Design Mistakes in iPhone Apps

Great Idea

+

Saturday, October 16, 2010

Page 25: Top 5.5 Design Mistakes in iPhone Apps

Great Idea

+Great

Marketing

Saturday, October 16, 2010

Page 26: Top 5.5 Design Mistakes in iPhone Apps

Great Idea

+Great

Marketing+

Saturday, October 16, 2010

Page 27: Top 5.5 Design Mistakes in iPhone Apps

Great Design.

Saturday, October 16, 2010

Page 28: Top 5.5 Design Mistakes in iPhone Apps

Well, that’s unfortunate

Saturday, October 16, 2010

Page 29: Top 5.5 Design Mistakes in iPhone Apps

But.

Saturday, October 16, 2010

Page 30: Top 5.5 Design Mistakes in iPhone Apps

Design can be learned.

Saturday, October 16, 2010

Page 31: Top 5.5 Design Mistakes in iPhone Apps

David BarnardSaturday, October 16, 2010

Page 32: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 33: Top 5.5 Design Mistakes in iPhone Apps

Vikas and Jeff

Saturday, October 16, 2010

Page 34: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 35: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 36: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 37: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 38: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 39: Top 5.5 Design Mistakes in iPhone Apps

Even “designers” have stuff to learn

Saturday, October 16, 2010

Page 40: Top 5.5 Design Mistakes in iPhone Apps

So let’s see what we can learn.

Saturday, October 16, 2010

Page 41: Top 5.5 Design Mistakes in iPhone Apps

Top 5½ iPhone app design mistakes

Saturday, October 16, 2010

Page 42: Top 5.5 Design Mistakes in iPhone Apps

1.

Saturday, October 16, 2010

Page 43: Top 5.5 Design Mistakes in iPhone Apps

Not matching user mental models expectations

Saturday, October 16, 2010

Page 44: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 45: Top 5.5 Design Mistakes in iPhone Apps

“A mental model is an explanation of someone's thought process about how something works in the

real world.”

Saturday, October 16, 2010

Page 46: Top 5.5 Design Mistakes in iPhone Apps

“A mental model is an explanation of someone's thought process about how something works in the

real world.”

-Not Donald Norman

Saturday, October 16, 2010

Page 47: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 48: Top 5.5 Design Mistakes in iPhone Apps

RedLaser 1

Saturday, October 16, 2010

Page 49: Top 5.5 Design Mistakes in iPhone Apps

RedLaser 1

Saturday, October 16, 2010

Page 50: Top 5.5 Design Mistakes in iPhone Apps

RedLaser 1 RedLaser 2

Saturday, October 16, 2010

Page 51: Top 5.5 Design Mistakes in iPhone Apps

2.

Saturday, October 16, 2010

Page 52: Top 5.5 Design Mistakes in iPhone Apps

Information Overload

Saturday, October 16, 2010

Page 53: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 54: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 55: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 56: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 57: Top 5.5 Design Mistakes in iPhone Apps

But wait, there’s a manual!

Saturday, October 16, 2010

Page 58: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 59: Top 5.5 Design Mistakes in iPhone Apps

Tips so you won’t be “that guy”

Saturday, October 16, 2010

Page 60: Top 5.5 Design Mistakes in iPhone Apps

Tips so you won’t be “that guy”

• Obliterate unessential features

Saturday, October 16, 2010

Page 61: Top 5.5 Design Mistakes in iPhone Apps

Tips so you won’t be “that guy”

• Obliterate unessential features

• Break your interface up into logical screens

Saturday, October 16, 2010

Page 62: Top 5.5 Design Mistakes in iPhone Apps

Tips so you won’t be “that guy”

• Obliterate unessential features

• Break your interface up into logical screens

• On each screen show only what is essential for that particular screen

Saturday, October 16, 2010

Page 63: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 64: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 65: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 66: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 67: Top 5.5 Design Mistakes in iPhone Apps

3.

Saturday, October 16, 2010

Page 68: Top 5.5 Design Mistakes in iPhone Apps

Overdoing it

Saturday, October 16, 2010

Page 69: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 70: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 71: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 72: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 73: Top 5.5 Design Mistakes in iPhone Apps

Keep it simple, stupid.

Saturday, October 16, 2010

Page 74: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 75: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 76: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 77: Top 5.5 Design Mistakes in iPhone Apps

4.

Saturday, October 16, 2010

Page 78: Top 5.5 Design Mistakes in iPhone Apps

Breaking Conventions

Saturday, October 16, 2010

Page 79: Top 5.5 Design Mistakes in iPhone Apps

Don’t break a ruleunless you understand why it exists.

Saturday, October 16, 2010

Page 80: Top 5.5 Design Mistakes in iPhone Apps

Buttons

Saturday, October 16, 2010

Page 81: Top 5.5 Design Mistakes in iPhone Apps

Buttons

Saturday, October 16, 2010

Page 82: Top 5.5 Design Mistakes in iPhone Apps

Animation

Saturday, October 16, 2010

Page 83: Top 5.5 Design Mistakes in iPhone Apps

Animation

Saturday, October 16, 2010

Page 84: Top 5.5 Design Mistakes in iPhone Apps

Interactions

Saturday, October 16, 2010

Page 85: Top 5.5 Design Mistakes in iPhone Apps

Interactions

Saturday, October 16, 2010

Page 86: Top 5.5 Design Mistakes in iPhone Apps

5.

Saturday, October 16, 2010

Page 87: Top 5.5 Design Mistakes in iPhone Apps

Basic Graphic Design Flaws

Saturday, October 16, 2010

Page 88: Top 5.5 Design Mistakes in iPhone Apps

4 Principles

Saturday, October 16, 2010

Page 89: Top 5.5 Design Mistakes in iPhone Apps

4 PrinciplesHello HelloContrast :

Saturday, October 16, 2010

Page 90: Top 5.5 Design Mistakes in iPhone Apps

4 PrinciplesHello HelloContrast :

-Color is

-Just one way

-To Repeat

-Color is

2. Just one way

*To RepeatRepetition :

Saturday, October 16, 2010

Page 91: Top 5.5 Design Mistakes in iPhone Apps

4 PrinciplesHello HelloContrast :

-Color is

-Just one way

-To Repeat

-Color is

2. Just one way

*To RepeatRepetition :

Alignment :

Saturday, October 16, 2010

Page 92: Top 5.5 Design Mistakes in iPhone Apps

4 PrinciplesHello HelloContrast :

-Color is

-Just one way

-To Repeat

-Color is

2. Just one way

*To RepeatRepetition :

Alignment :

Here is some text that can be edited

Edit Delete

< Back

Here is some text that can be edited

Edit

Delete

< Back

Proximity:

Saturday, October 16, 2010

Page 93: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 94: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 95: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 96: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 97: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 98: Top 5.5 Design Mistakes in iPhone Apps

5 1/2

Saturday, October 16, 2010

Page 99: Top 5.5 Design Mistakes in iPhone Apps

User Testing

Saturday, October 16, 2010

Page 100: Top 5.5 Design Mistakes in iPhone Apps

And much, more more...

Saturday, October 16, 2010

Page 101: Top 5.5 Design Mistakes in iPhone Apps

Free things you can do for starters.

1. Read Apple’s Human Interface Guidelines (HIG) - developer.apple.com/iphone

2. Watch Apple’s WWDC session videos relating to design & building successful apps: developer.apple.com/videos/

3. Browse the app store every week - always check out the apps Apple features and think about why Apple might have featured them

Saturday, October 16, 2010

Page 102: Top 5.5 Design Mistakes in iPhone Apps

Honorable Mentions

Saturday, October 16, 2010

Page 103: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 104: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 105: Top 5.5 Design Mistakes in iPhone Apps

Saturday, October 16, 2010

Page 106: Top 5.5 Design Mistakes in iPhone Apps

Top 5½ iPhone app design mistakes

• The Design of Every Day Things, Don Norman

• The Non Designers Design Book, Robin Williams

• Tapworthy, Josh Clark

• App Savvy, Ken Yarmosh (pre-order, it’s really good)

• My Company: @skookum - skookum.com

• Jeremy Olson (that’s me): @jerols - tapity.com

• My app: @gradesapp - gradesapp.com

• Catch the article later on: UXMag.com

Saturday, October 16, 2010