How to Design Mobile First and the KISSS principle

HOW TO DESIGN

MOBILE FIRSTand the KISSS principle

/ Olga Voskoboinikova @dVosk

1/3 of internet users connect only via mobile.84% use smartphones at home.

74% use their phones while waiting in line.

MOBILE IS UBIQUITOUSYou can’t do responsive web design without

designing for touch and mobile first.

DESIGNING FOR TOUCHFingers are not precise pointing devices.

Minimum touch target size + space between touch targets.

How big the touch targets have to be?

Average human finger pad: 10–14mm.Average human finger tip: 8–10mm.Millimeters work across ≠ pixel densities.

Plus, larger targets are easier to reach.Even for a mouse pointer.

There's more to touch than to a hover

Wroblewski's Touch Gesture Reference Guide

THERE IS NO HOVER“While content can be our top priority, let’s not forget

that our designs and interactions, hovers included, can havea great positive impact on how visitors experience our site.

Hover wisely, friends.”Dynamic tool tips and help: could be something that appears on page load and then fades away.

RECOMMENDED TOOLSUX designer’s standard answer:

“It depends”

What are you designing?

Sketch

It's like Adobe, but for screens.

Pros:

It's plain simpleVector based

Cons:

Static screensNo element behavior

Axure

Interactive wireframe & mockup tool.Similar to Justinmind or UXPin.

Pros:

Considers RWDFor large/long projects

Cons:

Steep learning curveOutdated UI scheme

InVision

Wireframe & mockup presentation tool.Similar to Marvel or Pop.

Pros:

Easly to useFast building screen flows

Cons:

Interactivity is hiddenScreens built in another app

Framer, Origami, Pixate, Proto.io, …Mobile First – sometimes only – prototyping tools.

Pros:

Mobile first mindsetMicrointeractions

Cons:

Focus on AppsDon't consider RWD

HTML5

Couldn't be closer to the end user experience.

Pros:

Real browser renderingTest and iterate faster

Cons:

Not a WYSIWYG approachYou have to learn code

“The Tool Rule: It's not about the tools.”

Stephen Hay @ UXLx

DESIGNER, MEET THE BROWSER(S)

Learn HTML+CSS

Where to start

Get your hands dirty

Browser console

CodecademyShay Howe's

CodePen

“Your visitors don’t give a sh¡t if your site is responsive.”

WHAT CUSTOMERS DO CARE:When your site takes 20 seconds to load.When they can’t get done what they need to get done.When interactions are awkward and broken.

THINKhow to make the UI smarter.

Does the user need to select a CC type when it can beidentified from the first characters of its number?Do you need a Zip Code when the location can bedetected with a puch of a button?Etc.

It can get very creative!

— KISSS —

KEEP IT SIMPLE,STRUCTURED &

SCALABLE

KISSS #1Keep it Simple, Structured & Scalable

SIMPLIFY THINGS DOWNYou can’t have UI that makes people think.Think on what we’re doing for whom.Minimize the amount of choices available.

BE ALWAYS CRITICAL“We have a ton of power at our fingertips.

However, with this power, we each have to ask ourselves:just because I can do something, should I?”

Jenn Lukas

“Throw out 80% that’s on your screen…

Everything else here just needs to pixelate and die”Luke Wroblewski

WHAT REALLY MATTERS?Small screen space forces you to focus.

Prioritize on what matters most on your website.

What do users do with/on your website?

KISSS #2Keep it Simple, Structured & Scalable

STRUCTURE YOUR CONTENTAnd also,

Atomify your designsBuild a pattern libraryDefine flexible layout systems

KISSS #3Keep it Simple, Structured & Scalable

PERFORMANCEis not just for developers

Performance and speed have a long term impact.

“Speed is more important than aesthetics.”

Bruce Lawson

Users want something fast and easy to use.They don’t usually resize the browser…

Optimizing performance leads to a much better mobile experience than adapting the layout.

Performance really matters.Optimize for performance.

http://radar.oreilly.com/2015/06/devops-developers-designers-ux-metrics-velocity.html

“Sometimes you'll make choices that favor performance;other times, you'll make choices that favor aesthetics.

The key is using all the information available to youto make the right decision for you and your site.”

Lara Callender Hogan @ Designing for Performance

How to make it happen.

http://radar.oreilly.com/2015/06/devops-developers-designers-ux-metrics-velocity.html

THIS IS JUST THE START“Better experiences mean more conversions, more

engagement and a better chance the user will walk away witha positive feeling about your brand, service or product. Sure,my client’s desktop site rendered just fine on smartphones,but creating a focused experience made all the difference.Creating contextually-aware experiences is good business.”

Bruce Lawson