"Click to Continue" by Sam Otis, from Content+Design Meetup, Oct. 4, 2017
0 likes682 views
The document discusses the evolution of interface design, highlighting the significance of affordances and metaphors in user interactions with digital devices. It traces the history of key innovations, such as the mouse and touchscreen, emphasizing the transition to mobile and virtual reality environments. The conclusion outlines principles for effective design, balancing user control, simplicity, and contextual relevance.
"Click to Continue" by Sam Otis, from Content+Design Meetup, Oct. 4, 2017
- 1. Click to Continue INTERFACE DESIGN
- 3. Why do you use digital devices?
- 4. I use digital devices to enhance my abilities and hopefully make life better.
- 7. Didn’t wave their phones around at concerts.
- 8. They did use tools to make their lives better.
- 10. ENIAC, 1946 Electronic Numerical Integrator and Computing
- 11. Amazing! ...um… What does it do?
- 14. Affordances are an object’s properties that show the possible actions users can take with it, thereby suggesting how they may interact with that object. Coined by Psychologist James Gibson in 1977
- 15. OFF ON
- 16. Thinking inside the box How do we get in there?
- 17. The more naturally we can interact with digital information, the greater the potential.
- 18. First Mouse Douglas C. Engelbart in 1964
- 19. First Touch Screen E.A. Johnson in 1965
- 20. First VR Headset Ivan Sutherland in 1968
- 21. Xerox Star, 1981 First commercially produced computer with a GUI.
- 22. Rise of the rectangle (and the GUI)
- 23. A digital interface creates a connection between a human and a computer.
- 25. Metaphors help people understand what an element on the screen is supposed to do.
- 26. Can we make things easier?
- 28. Metaphors break down when they limit the native capabilities of the digital medium.
- 31. Conventions - Digital Affordances
- 38. Conventions become how things are expected to work. That helps people understand things quickly and intuitively, but also limits our thinking to a narrow set of patterns.
- 39. A computer is not a mouse.
- 40. Click... I mean tap to continue What is the difference?
- 41. IBM Simon, 1992 The first touchscreen phone
- 42. Finger tap = mouse click Vertical swipe = scrolling with mouse What is the big deal?
- 43. For the first time digital elements can react directly to your touch. ● More natural for us humans ● Frees computers from physical keyboards and mice
- 44. iPhone, 2007
- 46. Mobile devices mean more contexts to design for.
- 49. Consider context: Even a good design might not be the right design.
- 50. Smaller screens and finger sized hit areas forces simplification and prioritization of the layout. ● Off-canvas menus ● Responsive and mobile first design
- 51. Menu
- 53. Feature the content: Controls should be easily available but staying out of the way.
- 56. Search the site
- 57. Search the site Search the site Search the site
- 58. Flat or minimal design is about clarity, not removing affordances.
- 60. Touch: A simple change in the way we interact with digital devices has had a profound effect on what we can do with them.
- 61. Blink to Continue? Interfaces come full circle. Sort of.
- 62. How do we get in there?
- 63. Virtual Reality Going all in.
- 64. Augmented & Mixed Reality Digital reaches out.
- 65. People are still trying to figure out what makes sense.
- 66. Oculus Rift
- 67. HTC Vive
- 68. Cardboard
- 69. VR is like headphones for your eyes.
- 71. How do you interact with content in a virtual environment?
- 76. Comfortable zone for interface elements in VR.
- 82. WebVR: build and experience VR in your browser. https://webvr.info/
- 83. But what is VR actually good for?
- 85. Augmented & Mixed Reality Digital reaches out.
- 89. ARKit from Apple
- 91. Am I the only one seeing this?
- 98. We used metaphors from the physical world to help us make sense of digital information. Now digital is reaching out to enhance the physical world.
- 100. Thank you! Sam Otis | @sam_otis
- 101. Credits/Resources: Inventing the Medium - Janet M. Murray Design for the Mind - Victor S. Yocco The Humane Representation of Thought - Bret Victor VR Interface Design - Michael Alger Understanding Context - Andrew Hinton Approaching a Truly Natural Interface - Tyler Waite Buffalo Vision - Ben Vance
- 102. Super amazing GUI design guide (for the future)! Balance metaphor and magic ● Leverage conventions and maintain digital affordances Consider context ● Invested user or casual interaction Give users superpowers ● Balance simplicity and power features ● Anticipate user intent but don’t take away control Help the computer speak human ● Provide multiple ways to do things ● Forgiving inputs with helpful feedback for errors or delays