The Wild Interface @ Campus Party 2013

We're lucky. We can now create apps, games, and media that can be consumed by almost anyone, anywhere. The language of Human Computer Interaction is expanding every week and with it the potential for new innovative interfaces. But one of the problems of creating novel interfaces is that they are novel. So how do we build stuff that is awesome, but also usable?

In this talk we'll cover what an interface really is, why we should strive to incorporate experimental interactions in anything we build, and how we just might be able to do that without pissing people off.

Also: video games!

Transcript

1. THE WILD INTERFACE Devin Hunt @ Campus Party 2013
2. Hello! I’m Devin Hunt foundercentric.com · lyst.com · @hailpixel
3. THE AGENDA • What is an interface? • Form follows Function • What is a narrative interface? • Animation as a storytelling medium
4. WHAT IS AN INTERFACE?
5. INTERFACE (n) the place at which independent and o!en unrelated systems meet and act on or communicate with each other.
7. A B
8. A B
9. A B
10. A B
11. 10010110 10101010 00101010
12. WE’RE REENTERING A WORLD OF CONSISTENT INCONSISTENCIES
17. THE PROBLEM WITH NOVEL INTERFACES IS THAT THEY ARE NOVEL It takes a lot more work to get new people onboard.
18. SO HOW CAN WE TEACH THEM ELOQUENTLY?
19. FORM FOLLOWS FUNCTION
20. FORM FOLLOWS FUNCTION An objects shape should be based on & exhibit it’s primary purpose.
21. FORM FOLLOWS FUNCTION An objects shape should be based on & exhibit it’s primary purpose.
22. Good design is as little design as possible” “ Dieter Rams
23. PERFORMANCE VERSUS PREFERENCE The designs that help people perform optimally are o!en not the same as the designs they find most desirable.
26. HIERARCHY OF NEEDS FUNCTIONALITY RELIABILITY USABILITY PROFICIENCY CREATIVITY Based on Maslow's Hierarchy of Needs Lidwell et all. Universal Principles of Design
27. HIERARCHY OF NEEDS FUNCTIONALITY RELIABILITY USABILITY PROFICIENCY CREATIVITY Lidwell et all. Universal Principles of Design
28. HIERARCHY OF NEEDS FUNCTIONALITY RELIABILITY USABILITY PROFICIENCY CREATIVITY Lidwell et all. Universal Principles of Design
29. OUR DUTY IS TO MOVE NEW USERS FROM NAIVETY TO CREATIVITY
30. TEACH THEM TO TAME YOUR WILD INTERFACE
31. THE NARRATIVE INTERFACE
32. NARRATIVE INTERFACES AFFORD DISCOVERY These systems educate the users themselves as they use them. This an interactive version of form follows function.
33. VIDEO GAMES We can learn a lot about playful discovery from video games.
34. EXAMPLE: SUPER MARIO nintendo.com
37. WHAT IF WE REBUILT THE FIRST LEVEL OF SMB AS A TUTORIAL?
38. ASIDE: A DARK ROOM adarkroom.doublespeakgames.com
39. EXAMPLE: PROCESSING processing.org
45. ATTRIBUTES OF A NARRATIVE INTERFACE • Playful • Safe to experiment • Visibility of system status • Constant introduction to new possibilities
46. IT’S ABOUT REAFFIRMING A USER EXPLORATION Once a user feels safe to explore, he can start to climb the pyramid.
47. 10 USABILITY HEURISTICS • Visibility of system status • Match between system and real world • User control and freedom • Consistency and standards • Error prevention • Recognition rather than recall • Flexibility and efficiency of use • Aesthetic and minimalist design • Help and documentation • Help users recognize, diagnose, and recover from errors http://www.nngroup.com/articles/ten-usability-heuristics/
48. ANIMATIONS TELL STORIES
53. VISIBILITY OF SYSTEM STATUS “The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.” http://www.nngroup.com/articles/ten-usability-heuristics/
54. ANIMATION INFORMS THE USER WHAT IS HAPPENING Changing an objects state gradually helps explain what change is occurring.
55. EXAMPLE: SVBTLE svbtle.com
58. EXAMPLE: OSX apple.com
61. EXAMPLE: COLOR. color.hailpixel.com
64. SO WHERE DOES THIS LEAVE US? • Language of interaction is being redefined everyday • To get users excited about new experience, they must at least grasp the basics of why they are useful • Narrative interfaces and animation are great tools to get users onboard
65. Bye! I’m Devin Hunt foundercentric.com · lyst.com · @hailpixel
66. THE WILD INTERFACE Follow me on @hailpixel