GO MOBILE-FIRSTget IA, usability and UX bonus points

Jelle Desramaults, IA day 2012Netlash, Ghent

These are the slides for my 12 minute presentation at IA day 2012. Just A quick introduction to the mobile-first concept. I added these notes at the bottom so you can follow along on slideshare.

HELLOJelle Desramaults

Freelance design studiogorilla

My name is Jelle Desramaults. I run a freelance design studio called Gorilla. I design websites and web applications. I keep a keen eye on the mobile space. I work and live in Ghent, Belgium.

My website

This is my studio’s website. http://gorilla-webdesign.be

aME

This is me.At Build 2011 (http://buildconf.com) by the way. Build rocks!

MARCEL

This is my son. Marcel.Thought I’d score some bonus oohs from the ladies with this slide.

@jdesramaults@jelled A-U-L-T-S

follow me

I’m @jdesramaults on twitter. Difficult name, I know. Longest twitter handle ever.@jelled was already taken so I chose the next logical thing. Sorry ‘bout that :)

@lukew

Luke Wroblewski

B-L-E-W-S-K-I

follow him!

Another guy with a difficult name. He had more luck with his twitter handle.Follow him, read him, watch him.

Luke Wroblewski has been talking about mobile-first for a couple of years.He wrote a book about it in 2011. Published by A Book Apart. Read it!

Jelle Desramaults@jdesramaults@lukew

?A small, simple idea.Design for mobile first, expand that experience

to the desktop

So what is mobile-first? It’s a simple idea with big implications.The idea: digital products should be designed for mobile first. Not the other way around.

Google

Luke Wrobleski isn’t the only one thinking and working mobile-first.Some big players are adapting this way of working.

Facebook

Adobe

better than desktop experience

joe hewitt, former design lead facebook

Jelle Desramaults@jdesramaults@lukewNow is the time

NOW IS THE TIME

yeah right, so was last year

The ubiquitous mobile web has been boldly predicted for some years now but I think it’s safe to say that it has finally arrived. Even in little old Belgium.

this was boldly predicted for Q4 2012, but happend 2 years early (end 2010)

Smartphones passed PC shipments in Q4 2010

CONTEXTIS BLURRING

desktop use vs. mobile use is blurring

An important thing to realise is this: the difference in the way we use desktop versus mobile is blurring.

DESKTOPCONTEXT

(this used to be)

fast connectioncomfortably seatedgood hardware

indoors

MOBILECONTEXT

(this used to be)

on-the-gooutside

crappy connection

NEW CONTEXTon-the-gostill true

but

This is the new “mobile” context. We still use our smartphone On-the-go but we are also using them alongside our tablets,desktop PCs laptops. A lot of sofas in the world look like the one in the bottom picture (iPhone, iPad, MacBook while watching TV).

ANYWHEREANYTIME

(iphone, see?)

SMARTPHONE USE

76%WAITING IN LINE

62%WATCHING TV

80%DOWNTIME

76%IN STORES

39%TAKING A POOP

This is how and where we use our smartphone nowadays. On the move, waiting in line or out shopping but also while we’re watching TV or during downtime. 39% enjoys a quick game of angry birds while pooping (UH!).

THIS USED TO BE THE WEBtill about 2007

Up until 2007-ish we built our digital products for this device.Befor 2007 smartphones weren’t so great and network connection was crappy (and very expensive).

THIS IS THE WEB5 yearslater

In 2007 Apple came out with the first iPhone. In the 5 following years things changed… a lot.Network connectivity (and pricing) improved and a plethora of capable mobile devices started to appear.

TOMORROW’S WEB?

? ??? ???????

??

? ???? ?? ?

??

who knows?

Nobody knows what tomorrow will bring but designing digital products for the desktop computer might become a continually backward way of doing things. It makes more sense to design for the smallest screens first.

RESPONSIVE WEB DESIGN

feels clumsy not so great after all

short-sighted

COOL!

But…

The forward-thinking web designer has been designing responsive web sites for about a year now. Cool! A big step in the right direction. However we are finding that this way of working feels a bit clumsy and that the user experience doesn’t always scale down well.

MOBILE-FIRST

feels ”right” progressivefuture friendly

This feels a lot better. Start from mobile and progressively enhance the user experience for larger screens. Feels better and feels like a safer—future friendly—bet in these rapidly changing times.

JACKPOT!

4 BONUS POINTSfor you lovely IAs, usability experts and UX designers

POINT 1 DESIGN FOR

A SMALL SCREENWhen you loose 80% of your screen you are

forced to focus on the stuff that matters

laser focus

70+ links?

Take Flickr for example. Over the course of the last years the desktop website has grown into a behemoth with a multitude of fly-out menu’s containing more that 70 links.

Compare that to Flick’s mobile website. I count 10 links. What changed? Smaller screen size forced Flickr to focus on the things that matter most to their users.

On a lot of websites the actual content—you know, that thing users visit the site for—is hard to find.Only 20% of the screen is filled with content.

80% of the screen is filled with… well, bullshit.Bonus point #1: going mobile first will cut the crap.

POINT 2 DESIGN FOR

THE BIG THUMBGoing big for mobile

= better usability for desktop

Bonus point #2: using big touch targets for the mobile version of your digital product means a more usable desktop product. Bigger is better.

big thumblittle links

Thumbs are clumsy devices compared to our mouse pointers.You need to accommodate for these big meat sticks.

44px/pt

44px/pt

TOUCH TARGET SIZE

A comfortable touch target size is something around 44px by 44px. This is taken from Apple’s iOS human interface design guidelines by the way.

POINT 3 DESIGN FOR

ONE EYEPartial attention

So keep it simple, keep it usable

Bonus point #3: mobile users give you partial attention. Design a simple and focused user experience. Again, what’s good for mobile works well on desktop too.

focused design! check the guides

All the big players (Apple, Microsoft, Google) have designer guidelines for a good mobile experience. These guidelines are solid universal UX design principles. Good for mobile and good for desktop.

GOOD DESIGN ADVICE

A few guidelines taken from Apple’s iOS Human Interface guidelines. Good design guidelines, period.

Elevate the content that people care about

Give people a logical path to follow

Make usage easy and obvious

…

POINT 4 DESIGN FOR

CRAPPY CONNECTIONSNot everyone’s on WIFI or 3G

Fast for mobile = lightning fast for desktopFast UX = better UX

Bonus point #4: going mobile-first forces you to keep things lightweight and fast. A fast mobile product is a very fast desktop product. A faster UX is a better UX.

PROPS

http://lukew.com/presos

http://bradfrostweb.com/blog/web/for-a-future-friendly-web

I stole it all from these guys. Maximum respect!

That’s it! A big shout out to Luke Wroblewski and Brad Frost. These guys are amazing! Read their stuff, watch their presentations. I basically copy/pasted most of their stuff and slapped it up with some Gorilla visual style. Thanks guys!

THANKS!@jdesramaults

jelle@gorilla-webdesign.be

http://gorilla-webdesign.be

Thanks for watching. I hope you liked it. I’d love to hear from you! Shout out on twitter or e-mail me with your questions and remarks.