flat, flat world: depth, meaning, and communication in the modern mobile ui
DESCRIPTION
Confused by flat design? So is Apple. Since the announcement of iOS 7, "flatness" in mobile user interfaces has been a hot topic of conversation. Conversations have spanned from usability to aesthetics, from praise to skepticism. The problem is that since flatness is not and never was just an aesthetic innovation, we are having the wrong conversation. In other words, yes, Apple got it all wrong. In this talk, we'll learn about the evolution of the modern mobile OS, why and how flatness arose as a solution to what is now a century-old problem of visual representation in the age of technological reproduction. Through this journey, you will learn how and why to design interfaces for touch that are easy to use, elegant, and delightful.TRANSCRIPT
FLAT, FLAT WORLD DEPTH, MEANING, AND COMMUNICATION IN THE MODERN MOBILE UI
DONNA LICHAW | @DLICHAW | GREATNORTHELECTRIC.COM
2FLAT, FLAT WORLD | @DLICHAW
ATTACK OF THE SKEUMORPHS A BRIEF HISTORY OF THE IOS
JANUARY 9, 2007 APPLE ANNOUNCES THE FIRST IPHONE
NOKIA 1600 TOP SELLING PHONE IN 2006 150 MILLION SOLD
FLAT, FLAT WORLD | @DLICHAW
FLAT, FLAT WORLD | @DLICHAW
http://mobile-review.com/articles/2010/iphone-history1-en.shtml
Patents 20070152979 20070155369 20070155434 !July 24, 2006
FLAT, FLAT WORLD | @DLICHAW
FLAT, FLAT WORLD | @DLICHAW
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
SKEUMORPHISM
1986 Chrysler LeBaron Town & Country Station Wagon
London Omnibus, 1898
1940 Pontiac Special Series 25 Woodie
“ 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
iOS 1 iOS 6
IOS 7
APPLE'S IOS 7 BRINGS JACK TO TEARS
http://www.youtube.com/watch?v=JTpXVv-DaBQ
FLAT, FLAT WORLD A BRIEF HISTORY OF MODERN ART
Georges Braque, The Clarinet, 1913
THE ACADEMY
FLAT, FLAT WORLD | @DLICHAW
PHOTOGRAPHYEADWEARD MUYBRIDGE, 1880s
FLAT, FLAT WORLD | @DLICHAW
MONT SAINTE-VICTOIRE PAUL CÉZANNE, 1906
NUDE DESCENDING A STAIRCASE MARCEL DUCHAMP, 1912
THE CLARINET GEORGES BRAQUE, 1913
CUBISM
GEOMETRICITY SIMULTANEITY PASSAGE
Georges Braque, The Clarinet, 1913
PAINTERLY REALISM OF A FOOTBALL PLAYER — COLOR MASSES IN THE 4TH DIMENSION
KAZIMIR MALEVICH, 1915
SUPREMATISM
INTERNATIONAL STYLEFLAT, FLAT WORLD | @DLICHAW
METRO
TYPOGRAPHY MOTION CONTENT NOT CHROME HONESTY
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
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
PAWAN SINHA: HOW BRAINS LEARN TO SEE
Pawan Sinha on how brains learn to see
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
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
36
ME, TOO!
FLAT, FLAT WORLD | @DLICHAW
DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE
DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE
DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE
“ USE PLENTY OF WHITESPACE.
DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE
FLAT, FLAT WORLD | @DLICHAW
PASTICHE
“DESIGN IS NOT JUST WHAT IT LOOKS LIKE AND FEELS LIKE. DESIGN IS HOW IT WORKS.
!
– STEVE JOBS
http://www.businessinsider.com/facebook-paper-2014-1 FLAT, FLAT WORLD | @DLICHAW
usertesting.com/blog/2014/02/07/six-ux-lessons-learned-from-the-new-facebook-app-paper/
http://www.youtube.com/watch?v=PmxYFtL6z0U
FLAT, FLAT WORLD | @DLICHAW
GEOMETRICITY SIMULTANEITY PASSAGE TYPOGRAPHY MOTION CONTENT NOT CHROME HONESTY
EASY TO USE ELEGANT DELIGHTFUL AUTHENTICALLY DIGITAL}
FLAT, FLAT WORLD | @DLICHAW
DONNA LICHAW @DLICHAW GREATNORTHELECTRIC.COM
THANK YOU.