Flat, Flat World: Depth, Meaning, and Communication in the Modern Mobile UI

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

http://mobile-review.com/articles/2010/iphone-history1-en.shtml

Patents 20070152979 20070155369 20070155434 !July 24, 2006

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

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

http://www.flickr.com/photos/askpang/3057495131

iOS 1 iOS 6

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

PHOTOGRAPHYEADWEARD MUYBRIDGE, 1880s

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

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

@lukew!http://www.youtube.com/watch?v=EUeNCzRhhDE

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

@lukew!http://www.youtube.com/watch?v=EUeNCzRhhDE

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

http://www.flickr.com/photos/askpang/3057495131

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

ME, TOO!

DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE

“ USE PLENTY OF WHITESPACE.

DEFER TO CONTENT PROVIDE CLARITY USE DEPTH TO COMMUNICATE

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

GEOMETRICITY SIMULTANEITY PASSAGE TYPOGRAPHY MOTION CONTENT NOT CHROME HONESTY

EASY TO USE ELEGANT DELIGHTFUL AUTHENTICALLY DIGITAL}

DONNA LICHAW @DLICHAW GREATNORTHELECTRIC.COM

THANK YOU.

Flat, Flat World: Depth, Meaning, and Communication in the Modern Mobile UI

Technology