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.

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.

5. B.C.
(before computers)

7. Didn’t wave their phones
around at concerts.

8. They did use tools to make their lives better.

9. Then computers happened

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.

77. Distance-independent Millimeter
(Google Daydream)

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.

99. Click to Continue.

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