Penn State 2012 Web Conference

Monday, June 11, 12

View Slide

TIMEOUT
Monday, June 11, 12

View Slide

Monday, June 11, 12

View Slide

>
Monday, June 11, 12

View Slide

Monday, June 11, 12

View Slide

What is the secret to
creating a great
experience?
Monday, June 11, 12

View Slide

S T E P 1
Find a book you're
interested in
Monday, June 11, 12

View Slide

S T E P 1 S T E P 2
Find a book you're
interested in
Add book to your cart
Monday, June 11, 12

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
Monday, June 11, 12

View Slide

S T E P 4
Get a download link
Monday, June 11, 12

View Slide

S T E P 4 S T E P 5
Get a download link Boot up Windows
Monday, June 11, 12

View Slide

Get a download link Boot up Windows
Download proprietary
software
Monday, June 11, 12

View Slide

S T E P 7
Install software
Monday, June 11, 12

View Slide

S T E P 7 S T E P 8
Install software Get cryptic error
Monday, June 11, 12

View Slide

Install software Get cryptic error Google cryptic error
Monday, June 11, 12

View Slide

S T E P 1 0
Learn that you need an
updated security certiﬁcate
Monday, June 11, 12

View Slide

S T E P 1 0 S T E P 1 1
Open Windows Media
Player
Monday, June 11, 12

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
Monday, June 11, 12

View Slide

S T E P 1 3
Learn that you need to update
Windows Media Player
Monday, June 11, 12

View Slide

S T E P 1 3 S T E P 1 4
Download and Install
update
Monday, June 11, 12

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
Monday, June 11, 12

View Slide

S T E P 1 6
Start up Overdrive
Media Player
Monday, June 11, 12

View Slide

S T E P 1 6 S T E P 1 7
Get another cryptic
error message
Start up Overdrive
Media Player
Monday, June 11, 12

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
Monday, June 11, 12

View Slide

S T E P 1 9
Give up on stupid
library
Monday, June 11, 12

View Slide

S T E P 1 9 S T E P 2 0
Give up on stupid
library
Open Bit torrent site
Monday, June 11, 12

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
Monday, June 11, 12

View Slide

S T E P 2 2
Enjoy your audio book
Monday, June 11, 12

View Slide

Monday, June 11, 12

View Slide

se·lect·list
[si-lekt-list]
Monday, June 11, 12

View Slide

se·lect·list
[si-lekt-list]
???
Monday, June 11, 12

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.
Monday, June 11, 12

View Slide

Monday, June 11, 12

View Slide

I CLEVELAND
Monday, June 11, 12

View Slide

Monday, June 11, 12

View Slide

They don’t care
Monday, June 11, 12

View Slide

What is the secret to
creating a great
experience?
Monday, June 11, 12

View Slide

You have to care.
Monday, June 11, 12

View Slide

Monday, June 11, 12

View Slide

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

Monday, June 11, 12

View Slide

Instapaper
Monday, June 11, 12

View Slide

Monday, June 11, 12

View Slide

2048 x 1536 1280 x 800 1024 x 600
iPad Galaxy Tab 10.1
Kindle Fire
(1024 x 768)
Monday, June 11, 12

View Slide

Monday, June 11, 12

View Slide

Platform Characteristics
Interfacing with the Hardware
Interface Design Elements
Understand Design Patterns
Best Practices
Monday, June 11, 12

View Slide

tap double tap swipe
pinch tap and hold
Monday, June 11, 12

View Slide

Interfacing with the
Hardware
Monday, June 11, 12

View Slide

Monday, June 11, 12

View Slide

iPhone Android
Monday, June 11, 12

View Slide

Interface design elements
Monday, June 11, 12

View Slide

Monday, June 11, 12

View Slide

Design Patterns
Monday, June 11, 12

View Slide

Monday, June 11, 12

View Slide

an accent like a simple one-pixel stroke may
look terrific on Android devices with a high
resolution, “then we pull out a handful of older
devices and it just looks bad.”
Hipmunk generates its Android assets at
three resolutions: 1x for older devices, 2x for
high-resolution devices, and an awkward 1.5x
resolution for other devices — a necessity to
avoid “weird artifacting,” as Campos puts it.
But some developers may skip this high level
of support for outlier devices, leading to blurry,
jaggy visuals for an unlucky few.
http://www.wired.com/gadgetlab/2012/04/easier-design-apps-ios/
Monday, June 11, 12

View Slide

Best Practices
Monday, June 11, 12

View Slide

Don’t let the UI hinder the experience
Monday, June 11, 12

View Slide

Elevate the content people care about
Monday, June 11, 12

View Slide

Know where you are
Monday, June 11, 12

View Slide

Seek ’n Spell
Monday, June 11, 12

View Slide

Monday, June 11, 12

View Slide

Avoid forcing a user to rotate the device
Monday, June 11, 12

View Slide

Avoid creating new touch gestures
Report adult content to Apple
Monday, June 11, 12

View Slide

Avoid creating new touch gestures
Monday, June 11, 12

View Slide

Avoid help
Monday, June 11, 12

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://developer.android.com/design/index.html
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://msdn.microsoft.com/en-us/library/hh202915(v=VS.92).aspx
Windows Phone 7
Monday, June 11, 12

View Slide

Monday, June 11, 12

View Slide

Thank You
colbowdesign.com
@bradcolbow
Monday, June 11, 12

View Slide

speakerdeck.com/u/bcolbow
colbowdesign.com
@bradcolbow
Monday, June 11, 12

View Slide

Penn State 2012 Web Conference

Penn State 2012 Web Conference

Brad Colbow

More Decks by Brad Colbow

Other Decks in Design

Featured

Transcript