Beyond Flat Surface Computing: Challenges of Depth-Aware ...
Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI
-
Upload
future-insights -
Category
Internet
-
view
387 -
download
2
description
Transcript of Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI
![Page 1: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/1.jpg)
FLAT, FLAT WORLD DEPTH, MEANING, AND COMMUNICATION IN THE MODERN MOBILE UI
DONNA LICHAW | @DLICHAW | GREATNORTHELECTRIC.COM
![Page 2: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/2.jpg)
2FLAT, FLAT WORLD | @DLICHAW
![Page 3: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/3.jpg)
ATTACK OF THE SKEUMORPHS A BRIEF HISTORY OF THE IOS
![Page 4: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/4.jpg)
JANUARY 9, 2007 APPLE ANNOUNCES THE FIRST IPHONE
![Page 5: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/5.jpg)
NOKIA 1600 TOP SELLING PHONE IN 2006 150 MILLION SOLD
FLAT, FLAT WORLD | @DLICHAW
![Page 6: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/6.jpg)
FLAT, FLAT WORLD | @DLICHAW
![Page 7: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/7.jpg)
http://mobile-review.com/articles/2010/iphone-history1-en.shtml
Patents 20070152979 20070155369 20070155434 !July 24, 2006
FLAT, FLAT WORLD | @DLICHAW
![Page 8: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/8.jpg)
FLAT, FLAT WORLD | @DLICHAW
![Page 9: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/9.jpg)
Consider Adding Physicality and Realism Sometimes, the more true to life your app looks and behaves, the easier it is for people to understand how it works and the more they enjoy using it. – Apple Human Interface Guidelines
FLAT, FLAT WORLD | @DLICHAW
![Page 10: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/10.jpg)
SKEUMORPHISM
![Page 11: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/11.jpg)
1986 Chrysler LeBaron Town & Country Station Wagon
London Omnibus, 1898
1940 Pontiac Special Series 25 Woodie
![Page 12: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/12.jpg)
“ I assumed that the iPhone's touch screen would be harder to use, and simply be "better" only because it offered more screen real estate. I was wrong; its touch screen is far easier and more comfortable to type on than the tiny physical keys of the Treo. !
– PC MAG IPHONE REVIEW SERIES: IPHONE VS. PALM TREO 650
![Page 14: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/14.jpg)
iOS 1 iOS 6
![Page 15: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/15.jpg)
IOS 7
![Page 16: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/16.jpg)
APPLE'S IOS 7 BRINGS JACK TO TEARS
http://www.youtube.com/watch?v=JTpXVv-DaBQ
![Page 17: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/17.jpg)
FLAT, FLAT WORLD A BRIEF HISTORY OF MODERN ART
Georges Braque, The Clarinet, 1913
![Page 18: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/18.jpg)
THE ACADEMY
FLAT, FLAT WORLD | @DLICHAW
![Page 19: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/19.jpg)
PHOTOGRAPHYEADWEARD MUYBRIDGE, 1880s
FLAT, FLAT WORLD | @DLICHAW
![Page 20: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/20.jpg)
MONT SAINTE-VICTOIRE PAUL CÉZANNE, 1906
NUDE DESCENDING A STAIRCASE MARCEL DUCHAMP, 1912
THE CLARINET GEORGES BRAQUE, 1913
CUBISM
![Page 21: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/21.jpg)
GEOMETRICITY SIMULTANEITY PASSAGE
![Page 22: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/22.jpg)
Georges Braque, The Clarinet, 1913
PAINTERLY REALISM OF A FOOTBALL PLAYER — COLOR MASSES IN THE 4TH DIMENSION
KAZIMIR MALEVICH, 1915
SUPREMATISM
![Page 23: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/23.jpg)
INTERNATIONAL STYLEFLAT, FLAT WORLD | @DLICHAW
![Page 24: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/24.jpg)
METRO
![Page 25: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/25.jpg)
![Page 26: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/26.jpg)
TYPOGRAPHY MOTION CONTENT NOT CHROME HONESTY
![Page 27: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/27.jpg)
TYPOGRAPHY “Type is beautiful. Not only is it attractive to the eye, but it can also be functional. The right balance of weight and positioning can create a visual hierarchy. Additionally, well placed type can help lead you to more content.”
MOTION CONTENT NOT CHROME
![Page 29: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/29.jpg)
MOTION “is what brings the interface to life. Transitions are just as important as graphical design. By developing a consistent set of motions or animations, a system is created that provides context for usability, extra dimension and depth and improves the perceived performance of the whole interface.”
CONTENT OVER CHROME
TYPOGRAPHY
![Page 30: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/30.jpg)
PAWAN SINHA: HOW BRAINS LEARN TO SEE
![Page 31: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/31.jpg)
Pawan Sinha on how brains learn to see
![Page 33: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/33.jpg)
CONTENT NOT CHROME “By removing all notions of extra chrome in the UI, the content becomes the main focus. This is especially relevant due to the smaller screen size and gesture-based interactions.”
HONESTY
MOTION
![Page 35: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/35.jpg)
HONESTY “Design explicitly for the form factor of a hand held device using touch, a high resolution screen and simplified and expedited forms of interaction. In other words, be ‘authentically digital’.”
CONTENT NOT CHROME
![Page 36: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/36.jpg)
36
ME, TOO!
FLAT, FLAT WORLD | @DLICHAW
![Page 37: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/37.jpg)
DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE
![Page 38: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/38.jpg)
DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE
![Page 39: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/39.jpg)
![Page 40: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/40.jpg)
DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE
![Page 41: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/41.jpg)
“ USE PLENTY OF WHITESPACE.
![Page 42: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/42.jpg)
![Page 43: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/43.jpg)
DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE
![Page 44: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/44.jpg)
FLAT, FLAT WORLD | @DLICHAW
![Page 45: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/45.jpg)
![Page 46: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/46.jpg)
![Page 47: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/47.jpg)
PASTICHE
![Page 48: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/48.jpg)
“DESIGN IS NOT JUST WHAT IT LOOKS LIKE AND FEELS LIKE. DESIGN IS HOW IT WORKS.
!
– STEVE JOBS
![Page 49: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/49.jpg)
http://www.businessinsider.com/facebook-paper-2014-1 FLAT, FLAT WORLD | @DLICHAW
![Page 50: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/50.jpg)
usertesting.com/blog/2014/02/07/six-ux-lessons-learned-from-the-new-facebook-app-paper/
![Page 51: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/51.jpg)
http://www.youtube.com/watch?v=PmxYFtL6z0U
![Page 52: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/52.jpg)
FLAT, FLAT WORLD | @DLICHAW
![Page 53: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/53.jpg)
GEOMETRICITY SIMULTANEITY PASSAGE TYPOGRAPHY MOTION CONTENT NOT CHROME HONESTY
EASY TO USE ELEGANT DELIGHTFUL AUTHENTICALLY DIGITAL}
FLAT, FLAT WORLD | @DLICHAW
![Page 54: Flat, Flat World: Depth, Meaning, and Communications in the Mobile UI](https://reader034.fdocuments.net/reader034/viewer/2022052618/554ba082b4c905b3618b4a0e/html5/thumbnails/54.jpg)
DONNA LICHAW @DLICHAW GREATNORTHELECTRIC.COM
THANK YOU.