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.
Luke Wrobleski isn’t the only one thinking and working mobile-first.Some big players are adapting this way of working.
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
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.