It's the Little Things - Codemash

Thursday, January 12, 12

View Slide

TIMEOUT

View Slide

My website
Industry magazines
Long informative comics

View Slide

What brings me here
today is my day job.
As I was having this
terrible experience with
the library I was just
starting in on my first

View Slide

HTML

View Slide

>
In order to have a successful digital
magazine it had to be better in some
way to its print counterpart.

View Slide

If you look at digital music or books you
can make the argument that digital is
better because you can carry around
thousands of them with ease.

View Slide

There were 2 things that we needed to
understand.
The first is we had to know the
differences between these platforms
(iPad, Android, Windows Phone,
Blackberry)
The second is that we had to understand
how to make a great user experience
across platforms.

View Slide

What is the secret to
creating a great
experience?

View Slide

S T E P 1
Find a book you're
interested in

View Slide

S T E P 1 S T E P 2
Find a book you're
interested in
Add book to your cart

View Slide

S T E P 1 S T E P 2 S T E P 3
Find a book you're
interested in
Add book to your cart
Login and Check out
your book

View Slide

S T E P 4
Get a download link

View Slide

S T E P 4 S T E P 5
Get a download link Boot up Windows

View Slide

Get a download link Boot up Windows
Download proprietary
software

View Slide

S T E P 7
Install software

View Slide

S T E P 7 S T E P 8
Install software Get cryptic error

View Slide

Install software Get cryptic error Google cryptic error

View Slide

S T E P 1 0
Learn that you need an
updated security certiﬁcate

View Slide

S T E P 1 0 S T E P 1 1
Open Windows Media
Player

View Slide

S T E P 1 0 S T E P 1 1 S T E P 1 2
Download new security
certiﬁcate
Open Windows Media
Player

View Slide

S T E P 1 3
Learn that you need to update
Windows Media Player

View Slide

S T E P 1 3 S T E P 1 4
Download and Install
update

View Slide

S T E P 1 3 S T E P 1 4 S T E P 1 5
Download and Install
update
Reboot Windows

View Slide

S T E P 1 6
Start up Overdrive
Media Player

View Slide

S T E P 1 6 S T E P 1 7
Get another cryptic
error message
Start up Overdrive
Media Player

View Slide

S T E P 1 6 S T E P 1 7 S T E P 1 8
Get another cryptic
error message
Insert profanity
Start up Overdrive
Media Player

View Slide

S T E P 1 9
Give up on stupid
library

View Slide

S T E P 1 9 S T E P 2 0
Give up on stupid
library
Open Bit torrent site

View Slide

S T E P 1 9 S T E P 2 0
Give up on stupid
library
Open Bit torrent site
S T E P 2 1
Click download

View Slide

S T E P 2 2
Enjoy your audio book

View Slide


View Slide

se·lect·list
[si-lekt-list]

View Slide

se·lect·list
[si-lekt-list]
???

View Slide

Nit-picking
[nit-pi-king]
Nitpicking is the act of removing nits
(the eggs of lice, generally head lice)
from the host's hair.

View Slide


View Slide

I CLEVELAND

View Slide


View Slide

They don’t care

View Slide

What is the secret to
creating a great
experience?

View Slide

You have to care.

View Slide


View Slide

Username or Email
class="text-input" id="login" name="login" tabindex="1"
type="text" value="" />


View Slide


View Slide

Instapaper

View Slide


View Slide

1024 x 768 1280 x 800 1024 x 600
iPad Motorola Xoom
Kindle Fire

View Slide


View Slide

Platform Characteristics
Interfacing with the Hardware
Interface Design Elements
Understand Design Patterns
Best Practices

View Slide

tap double tap swipe
pinch tap and hold

View Slide

Interfacing with the
Hardware

View Slide


View Slide

iPhone Android

View Slide


View Slide

Interface design elements

View Slide


View Slide

Design Patterns

View Slide


View Slide

Best Practices

View Slide

Don’t let the UI hinder the experience

View Slide

Elevate the content people care about

View Slide

Know where you are

View Slide

Seek ’n Spell

View Slide


View Slide

Avoid forcing a user to rotate the device

View Slide

Avoid creating new touch gestures
Report adult content to Apple

View Slide

Avoid creating new touch gestures

View Slide

Avoid help

View Slide

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/Introduction/Introduction.html
Apple iOS
http://developer.android.com/guide/practices/ui_guidelines/index.html
http://www.mutualmobile.com/2011/android-design-guidelines-version-1-1-honeycomb/
Android
http://docs.blackberry.com/en/developers/deliverables/17965/index.jsp?name=UI+Guidelines+-+BlackBerry
+Smartphones6.0&language=English&userType=21&category=Java+Development+Guidelines&subCategory=
BlackBerry
http://go.microsoft.com/fwlink/?LinkID=183218
Windows Phone 7
https://developer.palm.com/content/api/design/mojo/hi-guidelines.html
HP- Palm webOS

View Slide


View Slide

Thank You
colbowdesign.com
@bradcolbow

View Slide

It's the Little Things - Codemash

It's the Little Things - Codemash

Brad Colbow

More Decks by Brad Colbow

Other Decks in Design

Featured

Transcript