mobile vs desktop

51
Mobile vs Desktop UX and UI Design for Mobile Platforms Friday, 17 May 13

Upload: ctco

Post on 07-Nov-2014

724 views

Category:

Devices & Hardware


0 download

DESCRIPTION

 

TRANSCRIPT

Page 1: Mobile vs Desktop

Mobile vs DesktopUX and UI Design for Mobile Platforms

Friday, 17 May 13

Page 2: Mobile vs Desktop

It’s simple, not obviousFriday, 17 May 13

Page 3: Mobile vs Desktop

It’s simple, not obviousFriday, 17 May 13

Page 4: Mobile vs Desktop

A few really basic things...

Friday, 17 May 13

Page 5: Mobile vs Desktop

Mobile devices have smaller screens

(Duh!)

You can’t start designing your application with the same premise as you did before. Start from a blank slate.

And I mean physical screen size, not number of pixels. Number of pixels nowadays means nada.

Friday, 17 May 13

Page 6: Mobile vs Desktop

Some good (extreme, but good) examples.

Friday, 17 May 13

Page 7: Mobile vs Desktop

And some bad examples.

Friday, 17 May 13

Page 8: Mobile vs Desktop

There’s a theory, that airplanes cockpits are made this complex intentionally, so that stupid people can’t fly a plane. But you want everyone to use your app, right?

Friday, 17 May 13

Page 9: Mobile vs Desktop

Fingers are not mouse cursors

( - still not a finger)

Fingers are fat, and it’s difficult to target small buttons.

Bigger buttons, bigger menus.

But it’s not ok to just resize controls.

Fingers also come attached to a hand.

Friday, 17 May 13

Page 10: Mobile vs Desktop

When user taps on something, he covers pretty much everything underneath.

Friday, 17 May 13

Page 11: Mobile vs Desktop

Touch screens give no feedback

(at least for now)

User has to always look at the screen when interacting with it when tapping.

You can’t feel button edges, you also don’t feel if it’s pressed or not.

Vibration and sounds can’t be a reliable method of feedback.

Friday, 17 May 13

Page 12: Mobile vs Desktop

Forget about clicking

Clicking is for mice. On mobiles users tap. And swipe, and pinch, and slide.

Buttons suck on touch interfaces. As long as you think in buttons you are not going to provide a better user experience to your users.

Friday, 17 May 13

Page 13: Mobile vs Desktop

Sliding is better.

Friday, 17 May 13

Page 14: Mobile vs Desktop

Friday, 17 May 13

Page 15: Mobile vs Desktop

Innovative doesn’t always mean good

Don’t over-engineer what you do. Some things are meant to be simple, stupid and boring.

Friday, 17 May 13

Page 16: Mobile vs Desktop

Friday, 17 May 13

Page 17: Mobile vs Desktop

Apps are not web sites

Don’t design them like one. Better make a website instead.

Friday, 17 May 13

Page 18: Mobile vs Desktop

Friday, 17 May 13

Page 19: Mobile vs Desktop

Mobile != Apps

Friday, 17 May 13

Page 20: Mobile vs Desktop

Friday, 17 May 13

Page 21: Mobile vs Desktop

Friday, 17 May 13

Page 22: Mobile vs Desktop

Not everything should be ‘optimized for mobile’

Friday, 17 May 13

Page 23: Mobile vs Desktop

Friday, 17 May 13

Page 24: Mobile vs Desktop

Stuffing a web site into a really small screen is

not a good idea

Friday, 17 May 13

Page 25: Mobile vs Desktop

Don’t create an app if it’s the same as a web site

(no value = useless)

Friday, 17 May 13

Page 26: Mobile vs Desktop

No bookmarks, no back button, no tabs - it’s a worse user experience than in a regular browser.

Friday, 17 May 13

Page 27: Mobile vs Desktop

Always think about context

Friday, 17 May 13

Page 28: Mobile vs Desktop

User

Task Context

Friday, 17 May 13

Page 29: Mobile vs Desktop

Friday, 17 May 13

Page 30: Mobile vs Desktop

Friday, 17 May 13

Page 31: Mobile vs Desktop

Users have less time to interact with mobile devices

(don’t ask too many questions)

Friday, 17 May 13

Page 32: Mobile vs Desktop

Friday, 17 May 13

Page 33: Mobile vs Desktop

People hate typing on mobile devices

(but they still do it)

Friday, 17 May 13

Page 34: Mobile vs Desktop

Friday, 17 May 13

Page 35: Mobile vs Desktop

Develop for offline(mobile != always online)

Cache data, preload UI if it’s loading from backend, allow to continue work

Friday, 17 May 13

Page 36: Mobile vs Desktop

Responsive(your new favorite word)

(if it’s not already)

People are used to wait when opening a website or clicking on a link. But the same people will hate your app if they have to wait when they open something.

Friday, 17 May 13

Page 37: Mobile vs Desktop

Fool a user and he will be happier for it(Apple do that, why shouldn’t you?)

Friday, 17 May 13

Page 38: Mobile vs Desktop

Users are unique(but 80-20 principle is still true)

Friday, 17 May 13

Page 39: Mobile vs Desktop

Friday, 17 May 13

Page 40: Mobile vs Desktop

Don’t ask users what they want

(give them something and see how they react)

Friday, 17 May 13

Page 41: Mobile vs Desktop

Be prepared to start from scratch

Friday, 17 May 13

Page 42: Mobile vs Desktop

Research

Friday, 17 May 13

Page 43: Mobile vs Desktop

49%

36%

15%

http://uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

72% 28%

90% 10%

Friday, 17 May 13

Page 44: Mobile vs Desktop

Tablets are a whole new ball game(still not the same as desktop)

Friday, 17 May 13

Page 45: Mobile vs Desktop

Design UX, not UI(but please do design good UI)

Friday, 17 May 13

Page 46: Mobile vs Desktop

Friday, 17 May 13

Page 47: Mobile vs Desktop

Skeuomorphism?Minimalism?

Skeuominimalism?(the choice is yours)

http://sachagreif.com/flat-pixels/

Friday, 17 May 13

Page 48: Mobile vs Desktop

Friday, 17 May 13

Page 49: Mobile vs Desktop

Friday, 17 May 13

Page 50: Mobile vs Desktop

Learn, investigate, steal!mobiledesignpatterngallery.com

pttrns.cominspired-ui.com

Friday, 17 May 13

Page 51: Mobile vs Desktop

Quick Recap• Simple things are not

necessarily obvious

• Keep in mind platform differences

• Don’t create things that don’t add value

• Forget about ‘mouse UI’ paradigms

• Remember context

• Design UX, not a UI

• Think about users, not features

• Always look at how others do it

• Be prepared to change everything

[email protected]

Friday, 17 May 13