Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

"Click to Continue" by Sam Otis, from Content+Design Meetup, Oct. 4, 2017


Published on

Graphical interfaces help make powerful technology intuitive and accessible. They give us super powers. Join Sam Otis, Lead Designer at Blend Interactive, as the Sioux Falls Content + Design Group joins up with Sioux Falls Design Week for a fun look at how GUIs (Graphical User Interfaces) have developed, what makes an interface good today, and what challenges the future holds.

Published in: Internet
  • Be the first to comment

  • Be the first to like this

"Click to Continue" by Sam Otis, from Content+Design Meetup, Oct. 4, 2017

  1. 1. Click to Continue INTERFACE DESIGN
  2. 2. Why do you use digital devices?
  3. 3. I use digital devices to enhance my abilities and hopefully make life better.
  4. 4. B.C. (before computers)
  5. 5. Didn’t wave their phones around at concerts.
  6. 6. They did use tools to make their lives better.
  7. 7. Then computers happened
  8. 8. ENIAC, 1946 Electronic Numerical Integrator and Computing
  9. 9. Amazing!… What does it do?
  10. 10. 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
  11. 11. OFF ON
  12. 12. Thinking inside the box How do we get in there?
  13. 13. The more naturally we can interact with digital information, the greater the potential.
  14. 14. First Mouse Douglas C. Engelbart in 1964
  15. 15. First Touch Screen E.A. Johnson in 1965
  16. 16. First VR Headset Ivan Sutherland in 1968
  17. 17. Xerox Star, 1981 First commercially produced computer with a GUI.
  18. 18. Rise of the rectangle (and the GUI)
  19. 19. A digital interface creates a connection between a human and a computer.
  20. 20. Metaphors help people understand what an element on the screen is supposed to do.
  21. 21. Can we make things easier?
  22. 22. Metaphors break down when they limit the native capabilities of the digital medium.
  23. 23. Conventions - Digital Affordances
  24. 24. 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.
  25. 25. A computer is not a mouse.
  26. 26. Click... I mean tap to continue What is the difference?
  27. 27. IBM Simon, 1992 The first touchscreen phone
  28. 28. Finger tap = mouse click Vertical swipe = scrolling with mouse What is the big deal?
  29. 29. For the first time digital elements can react directly to your touch. ● More natural for us humans ● Frees computers from physical keyboards and mice
  30. 30. iPhone, 2007
  31. 31. Mobile devices mean more contexts to design for.
  32. 32. Consider context: Even a good design might not be the right design.
  33. 33. Smaller screens and finger sized hit areas forces simplification and prioritization of the layout. ● Off-canvas menus ● Responsive and mobile first design
  34. 34. Menu
  35. 35. Feature the content: Controls should be easily available but staying out of the way.
  36. 36. Search the site
  37. 37. Search the site Search the site Search the site
  38. 38. Flat or minimal design is about clarity, not removing affordances.
  39. 39. Touch: A simple change in the way we interact with digital devices has had a profound effect on what we can do with them.
  40. 40. Blink to Continue? Interfaces come full circle. Sort of.
  41. 41. How do we get in there?
  42. 42. Virtual Reality Going all in.
  43. 43. Augmented & Mixed Reality Digital reaches out.
  44. 44. People are still trying to figure out what makes sense.
  45. 45. Oculus Rift
  46. 46. HTC Vive
  47. 47. Cardboard
  48. 48. VR is like headphones for your eyes.
  49. 49. How do you interact with content in a virtual environment?
  50. 50. Comfortable zone for interface elements in VR.
  51. 51. Distance-independent Millimeter (Google Daydream)
  52. 52. WebVR: build and experience VR in your browser.
  53. 53. But what is VR actually good for?
  54. 54. Augmented & Mixed Reality Digital reaches out.
  55. 55. ARKit from Apple
  56. 56. Am I the only one seeing this?
  57. 57. 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.
  58. 58. Click to Continue.
  59. 59. Thank you! Sam Otis | @sam_otis
  60. 60. 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
  61. 61. 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