Mobile vs Desktop
-
Upload
ctco -
Category
Devices & Hardware
-
view
724 -
download
0
description
Transcript of Mobile vs Desktop
![Page 1: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/1.jpg)
Mobile vs DesktopUX and UI Design for Mobile Platforms
Friday, 17 May 13
![Page 2: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/2.jpg)
It’s simple, not obviousFriday, 17 May 13
![Page 3: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/3.jpg)
It’s simple, not obviousFriday, 17 May 13
![Page 4: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/4.jpg)
A few really basic things...
Friday, 17 May 13
![Page 5: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/5.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/6.jpg)
Some good (extreme, but good) examples.
Friday, 17 May 13
![Page 7: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/7.jpg)
And some bad examples.
Friday, 17 May 13
![Page 8: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/8.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/9.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/10.jpg)
When user taps on something, he covers pretty much everything underneath.
Friday, 17 May 13
![Page 11: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/11.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/12.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/13.jpg)
Sliding is better.
Friday, 17 May 13
![Page 14: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/14.jpg)
Friday, 17 May 13
![Page 15: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/15.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/16.jpg)
Friday, 17 May 13
![Page 17: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/17.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/18.jpg)
Friday, 17 May 13
![Page 19: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/19.jpg)
Mobile != Apps
Friday, 17 May 13
![Page 20: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/20.jpg)
Friday, 17 May 13
![Page 21: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/21.jpg)
Friday, 17 May 13
![Page 22: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/22.jpg)
Not everything should be ‘optimized for mobile’
Friday, 17 May 13
![Page 23: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/23.jpg)
Friday, 17 May 13
![Page 24: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/24.jpg)
Stuffing a web site into a really small screen is
not a good idea
Friday, 17 May 13
![Page 25: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/25.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/26.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/27.jpg)
Always think about context
Friday, 17 May 13
![Page 28: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/28.jpg)
User
Task Context
Friday, 17 May 13
![Page 29: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/29.jpg)
Friday, 17 May 13
![Page 30: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/30.jpg)
Friday, 17 May 13
![Page 31: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/31.jpg)
Users have less time to interact with mobile devices
(don’t ask too many questions)
Friday, 17 May 13
![Page 32: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/32.jpg)
Friday, 17 May 13
![Page 33: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/33.jpg)
People hate typing on mobile devices
(but they still do it)
Friday, 17 May 13
![Page 34: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/34.jpg)
Friday, 17 May 13
![Page 35: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/35.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/36.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/37.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/38.jpg)
Users are unique(but 80-20 principle is still true)
Friday, 17 May 13
![Page 39: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/39.jpg)
Friday, 17 May 13
![Page 40: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/40.jpg)
Don’t ask users what they want
(give them something and see how they react)
Friday, 17 May 13
![Page 41: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/41.jpg)
Be prepared to start from scratch
Friday, 17 May 13
![Page 42: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/42.jpg)
Research
Friday, 17 May 13
![Page 43: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/43.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/44.jpg)
Tablets are a whole new ball game(still not the same as desktop)
Friday, 17 May 13
![Page 45: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/45.jpg)
Design UX, not UI(but please do design good UI)
Friday, 17 May 13
![Page 46: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/46.jpg)
Friday, 17 May 13
![Page 47: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/47.jpg)
Skeuomorphism?Minimalism?
Skeuominimalism?(the choice is yours)
http://sachagreif.com/flat-pixels/
Friday, 17 May 13
![Page 48: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/48.jpg)
Friday, 17 May 13
![Page 49: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/49.jpg)
Friday, 17 May 13
![Page 50: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/50.jpg)
Learn, investigate, steal!mobiledesignpatterngallery.com
pttrns.cominspired-ui.com
Friday, 17 May 13
![Page 51: Mobile vs Desktop](https://reader034.fdocuments.us/reader034/viewer/2022051411/545cadd4b0af9fb32c8b4ab1/html5/thumbnails/51.jpg)
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
Friday, 17 May 13