{"id":5170,"date":"2017-01-06T17:35:33","date_gmt":"2017-01-06T17:35:33","guid":{"rendered":"https:\/\/marvel7077.wpengine.com\/?p=5170"},"modified":"2017-01-06T17:45:39","modified_gmt":"2017-01-06T17:45:39","slug":"the-world-is-our-interface","status":"publish","type":"post","link":"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/","title":{"rendered":"The World is our Interface"},"content":{"rendered":"<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We are in an exciting age of design: Welcome to a new era in history where our bodies, heaters, cars, bedrooms, streets and well\u200a\u2014\u200ajust about everything is beginning to become an interface.<\/p>\n<div id='gallery-1' class='gallery galleryid-5170 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Google\u2019s-Project-Soli.gif'><img loading=\"lazy\" decoding=\"async\" width=\"1336\" height=\"745\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Google\u2019s-Project-Soli.gif\" class=\"attachment-full size-full\" alt=\"googles-project-soli\" aria-describedby=\"gallery-1-5171\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-5171'>\n\t\t\t\tGoogle\u2019s Project Soli is developing a new interaction sensor using radar technology.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Just about everything is beginning to become an interface.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">This article will present a number of exciting technologies and various interfaces to interact with them, as well as take a historical perspective on interactions with man-made objects that have evolved with us to where we are. For simplicity\u2019s sake, I like to group human interaction with the environment and technology into 4 ages:<\/p>\n<ol class=\"pageWrap pageWrap--s list list--ordered marginBottom-l lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">\n<li>The age of tools<\/li>\n<li>The age of the machine<\/li>\n<li>The age of software<\/li>\n<li>The age of the self<\/li>\n<\/ol>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The age of tools<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>We used primitive objects and symbols to communicate<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Humans began communicating with symbolic representations carved into any surface. Hieroglyphics were one of the initial ways that humans started communicating and it was highly symbolic. This symbolism would later develop into <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.khanacademy.org\/computing\/computer-science\/informationtheory\/info-theory\/v\/language-of-coins-2-8-proto-writing\" target=\"_blank\">art, writing, documentation and story-telling<\/a>. We can even argue that we have come full circle and are using the symbols on our keyboards to communicate subtleties in communication beyond words. <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/emojipedia.org\/taco\/\" target=\"_blank\">Even if they are silly<\/a>.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The tools that we were using to communicate became more and more sophisticated, resulting in things still widely used today like pens.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The age of machines<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>When hardware was the interface<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The industrial revolution placed greater emphasis on productivity, as well as the ability to produce objects at scale at low costs. Welcome to the age of the machine, where we built objects at scale to help our lives become simpler.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Welcome to the age of the machine, where we built objects at scale to help our lives become simpler.\"<\/p><\/span><\/blockquote>\n<div id='gallery-2' class='gallery galleryid-5170 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Typewriter.gif'><img loading=\"lazy\" decoding=\"async\" width=\"1268\" height=\"856\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Typewriter.gif\" class=\"attachment-full size-full\" alt=\"typewriter\" aria-describedby=\"gallery-2-5173\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-2-5173'>\n\t\t\t\tTypewriters were one of the machines we learned to use to make us more productive.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">One example of how we began to increase our productivity is seen in the creation of the typewriter, which was designed in 1868 by Christopher Latham Sholes. We begun tapping physical keys to make words, still using our hands, but with help from the typewriter as a replacement of the pen. It helped create a consistent and effective format that could be easily adopted as well as save us time.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The drawback, however, was that we needed to learn how to type. We were mass producing machines and the power shifted to them. Despite designing the hardware as the interface, we as humans had to adopt to learn how to use the machines. This is symbolic of a lot of the machines that were created at this time.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"Despite designing the hardware as the interface, we as humans had to adopt to learn how to use the machines.\"<\/p><\/span><\/blockquote>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The age of software<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>Learned skills from using hardware become metaphors to teach us how to use software<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">When software needed an interface, designers looked to adopted hardware and learned behaviour to make it easy for us to learn how to use the software. For example we looked back to the typewriter to learn how to type on a screen.<\/p>\n<div id='gallery-3' class='gallery galleryid-5170 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Keyboard.gif'><img loading=\"lazy\" decoding=\"async\" width=\"1357\" height=\"595\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Keyboard.gif\" class=\"attachment-full size-full\" alt=\"keyboard\" aria-describedby=\"gallery-3-5174\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-3-5174'>\n\t\t\t\tThe keyboard still looks like a typewriter and typing became a learned human skill that many of us cannot live without.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The typewriter was used to inspire the keyboard to make it easier for us to know what to do. We had already learned to type, so the next natural progression was to see this to begin interacting with screens.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Later we see this same transition in software, with our smartphone keypads looking like mini versions of the very same keyboards and typewriters. Adorable and useful. As we began to touch, we began to define a completely new way of interacting with out environment.<\/p>\n<div id='gallery-4' class='gallery galleryid-5170 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Hardware-to-software-evolution.png'><img loading=\"lazy\" decoding=\"async\" width=\"1400\" height=\"785\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Hardware-to-software-evolution.png\" class=\"attachment-full size-full\" alt=\"hardware-to-software-evolution\" srcset=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Hardware-to-software-evolution.png 1400w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Hardware-to-software-evolution-600x336.png 600w, https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Hardware-to-software-evolution-768x431.png 768w\" sizes=\"auto, (max-width: 1400px) 100vw, 1400px\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Touch is human-centric<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>On why touch worked<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">With the rise of the smartphone, we taught ourselves all kinds of funny gestures for the novelty and to be able to use it\u200a\u2014\u200aand\u200a\u2014\u200aof course because it was really cool to be able to all kinds of fun and even <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.lifehack.org\/articles\/technology\/20-secret-ios-shortcuts-and-gestures-you-probably-dont-know.html\" target=\"_blank\">secret stuff<\/a> with our hands. <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/developer.apple.com\/ios\/human-interface-guidelines\/overview\/design-principles\/\" target=\"_blank\">We learned the difference between a pinch and a tap and a long tap<\/a> and invented more gestures than we can keep up with.<\/p>\n<div id='gallery-5' class='gallery galleryid-5170 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/multi-touch.gif'><img loading=\"lazy\" decoding=\"async\" width=\"1219\" height=\"681\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/multi-touch.gif\" class=\"attachment-full size-full\" alt=\"multi-touch\" aria-describedby=\"gallery-5-5176\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-5-5176'>\n\t\t\t\tMulti-touch as shown on a smartphone, where expanding and contracting the fingers allow the user to zoom in and out.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We started expanding and contracting as a way of zooming in and out. This behaviour became so natural that I have witnessed grown men try and zoom in on physical maps.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Touch works because it is intuitive. You see babies working tablet devices faster than their grandparents these days, simply because we are born to explore things with our fingers. It\u2019s innate and reminds us of back where we started during the beginning of communication.<\/p>\n<div id='gallery-6' class='gallery galleryid-5170 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/child-with-tablet.gif'><img loading=\"lazy\" decoding=\"async\" width=\"1219\" height=\"679\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/child-with-tablet.gif\" class=\"attachment-full size-full\" alt=\"child-with-tablet\" aria-describedby=\"gallery-6-5177\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-6-5177'>\n\t\t\t\tChildren playing with a tablet with speed and ease\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Touch came with a price<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>And the user experience often suffered<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We might have become like children in a candy shop. Wanting to touch everything in sight and along the way, we made up some pretty obscure gestures and made it nearly impossible to find stuff.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">That\u2019s because we hid stuff.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/jamesarcher.me\/hamburger-menu\" target=\"_blank\">hid a lot of the main user interface features<\/a>. A major part of the problem was competition between Android and iOS, where initially iOS lead the way and significantly reduced their <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/f.fastcompany.net\/multisite_files\/fastcompany\/imagecache\/inline-xlarge\/inline\/2015\/11\/3053406-inline-figure-1.jpg\" target=\"_blank\">Human Interaction Guidelines<\/a>. The simplicity looked beautiful, but we were just hiding the ugly or complicated stuff for later and often made interfaces more difficult to use. Android emulated a lot of the worst things Apple implemented and it really wasn\u2019t really until Material Design was introduced that there were even consistencies in Android design at all. The myriad of device sizes didn\u2019t exactly help either.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">We also forgot about consistency.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">A swipe on iOS can mean to read an email, delete an email, archive an email, or playfully connecting with my next Tinder match, depending on the app and the context. As designers, we cling to <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/uxarchive.com\/tasks\/onboarding\" target=\"_blank\">extensive onboarding sequences<\/a> just to show users what to do.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Touch only works on big screens<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now we have new devices and they have such small screens that touch becomes difficult. Designers of these devices re-introduce hardware centric features humans struggle with.<\/p>\n<div id='gallery-7' class='gallery galleryid-5170 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Apple-watch.gif'><img loading=\"lazy\" decoding=\"async\" width=\"1523\" height=\"781\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Apple-watch.gif\" class=\"attachment-full size-full\" alt=\"apple-watch\" \/><\/a>\n\t\t\t<\/dt><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Even if your fingers are finer and more dextrous than mine, I still smile at the thought of poking around on our wrists.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">You cannot navigate such a complex things as the internet from a hardware centric feature such as the Digital Crown. It is a real-world spin-off from known watch adjusting behaviour, but it is time consuming as well as fiddly.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">The age of the self<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>The old metaphor comes full circle\u200a\u2014\u200athe next iteration<\/em><\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now that the time has come, how do we design experiences and products in a world where any environment is interactive?<\/p>\n<div id='gallery-8' class='gallery galleryid-5170 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Apple-pencil.gif'><img loading=\"lazy\" decoding=\"async\" width=\"1684\" height=\"856\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Apple-pencil.gif\" class=\"attachment-full size-full\" alt=\"apple-pencil\" aria-describedby=\"gallery-8-5179\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-8-5179'>\n\t\t\t\tThe Apple Pencil writing on an iPad Pro. An example of human-centric behaviour with high technology.\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The next iteration partly illustrates us coming full-circle, with the Apple Pencil being a piece of technology, both hard- and software which is helping us write again, similar to where we once started: a simple tool and a surface.<\/p>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"\u2026we are now getting to a point that technology is so advanced that we can \u201cunlearn\u201d how to use it\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">It just so happens that this simple tool is a not so simple <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.apple.com\/apple-pencil\/\" target=\"_blank\">Apple Pencil<\/a> and the surface happens to be a pretty advanced iPad Pro. Specifications aside, what is exciting here is that we are now getting to a point that technology is so advanced that we can \u201cunlearn\u201d how to use it.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">The Apple Pencil is human centric because it takes 2 things that we are already familiar with: an actual pencil and an iPad, meaning that we don\u2019t need to learn anything in order to be able to use it (unless we need a reminder of how to write with a pencil again).<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><span class=\"long-quote\">How can we design products to facilitate innate behaviours, rather than design products that force us to learn new skills? How can we become more human centric in our design philosophy?<\/span><\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Moving beyond touch<\/h2>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Not only did small screens instigate designers and technologists to explore others ways of interacting with technology, new use cases and contexts inspired us to start thinking of different ways that we could use technology.<\/p>\n<div id='gallery-9' class='gallery galleryid-5170 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Siri.gif'><img loading=\"lazy\" decoding=\"async\" width=\"1219\" height=\"679\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Siri.gif\" class=\"attachment-full size-full\" alt=\"siri\" aria-describedby=\"gallery-9-5180\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-9-5180'>\n\t\t\t\tHey, Siri\n\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Voice commands, for example, work great while driving or cooking, but may cause a couple of stares while asking Siri where the nearest erotic massage parlour is on the train commute home.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Voice is a way that we can interact with technology around us. It can be both passive and interactive. The great thing about voice is obviously that we don\u2019t need any hands for that\u200a\u2014\u200ahowever there are limitations such as context which mean that it is not always going to be the most intuitive. Voice recognition has also not really been good enough to be trusted until very recently, but now we are at a time that voice recognition is eerily good.<\/p>\n<h2 class=\"pageWrap pageWrap--s marginTop-xl marginBottom-l c-black lineHeight-xl fontSize-xl fontWeight-5 breakPointM-lineHeight-xxl breakPointM-fontSize-xxl\" style=\"margin-left: auto; margin-right: auto;\">Like touching. But without touching<\/h2>\n<blockquote class=\"pageWrap pageWrap--s position-relative marginTopBottom-l breakPointM-marginTopBottom-xl\"><div class=\"blog-quote-before position-absolute bg-marvel\"><\/div><div class=\"tweet-quote blog-quote-after position-absolute bg-marvel cursor-pointer transitionDuration-l transitionProperty-all transitionTimingFunction-cv-easeOutCircular scaleUp--hover zi-weak\"><svg class=\"fill-white opacity-0 pointerEvents-none position-absolute pinCenter transitionProperty-all transitionTimingFunction-easeInOut\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"20\" viewBox=\"0 0 24 20\"><path d=\"M24,2.37a9.64,9.64,0,0,1-2.83.79A5,5,0,0,0,23.34.37a9.72,9.72,0,0,1-3.13,1.23A4.86,4.86,0,0,0,16.62,0a5,5,0,0,0-4.8,6.2A13.87,13.87,0,0,1,1.67.92,5.13,5.13,0,0,0,3.19,7.67,4.81,4.81,0,0,1,1,7a5,5,0,0,0,3.95,5,4.82,4.82,0,0,1-2.22.09,4.94,4.94,0,0,0,4.6,3.51A9.72,9.72,0,0,1,0,17.73,13.69,13.69,0,0,0,7.55,20c9.14,0,14.31-7.92,14-15A10.17,10.17,0,0,0,24,2.37Z\"\/><\/svg><\/div><p class=\"blog-quote position-relative textAlign-center c-marvel\"><span class=\"blog-quote-text transitionDuration-l transitionProperty-all transitionTimingFunction-easeInOut\">\"The future of interaction design is limited only by our range of gestures.\"<\/p><\/span><\/blockquote>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><a class=\"link link--blue fontWeight-4\"href=\"https:\/\/www.google.com\/atap\/project-soli\/\" target=\"_blank\">Project Soli<\/a> is a tiny radar that can turn basically any piece of hardware into an interactive device, controlled by delicate gestures. It\u2019s from the <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.theverge.com\/a\/sundars-google\/atap-lab-regina-dugan-google-io-2015\" target=\"_blank\">Advanced Technologies and Projects (ATAP Lab)<\/a> at Google and has helps make the world our interface.<\/p>\n<div id='gallery-10' class='gallery galleryid-5170 gallery-columns-1 gallery-size-full'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Project-Soli-Gestures.gif'><img loading=\"lazy\" decoding=\"async\" width=\"1775\" height=\"882\" src=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/Project-Soli-Gestures.gif\" class=\"attachment-full size-full\" alt=\"project-soli-gestures\" aria-describedby=\"gallery-10-5181\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-10-5181'>\n\t\t\t\tGesture samples for Project Soli\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\">Now that Project Soli is open for a <a class=\"link link--blue fontWeight-4\"href=\"http:\/\/www.theverge.com\/2015\/8\/26\/9211433\/google-begins-sending-project-soli-applications\" target=\"_blank\">select group of developers<\/a> to work on, the future of interaction design is limited only by our range of gestures.<\/p>\n<p class=\"pageWrap pageWrap--s marginBottom-m paddingBottom-s c-slate lineHeight-l fontSize-l fontWeight-3 breakPointM-fontSize-xl breakPointM-lineHeight-xl\"><em>This post was originally published on <a class=\"link link--blue fontWeight-4\"href=\"https:\/\/medium.com\/the-future-interface\/the-world-is-our-interface-efae5ba9f6e5#.3tj31bpaa\" target=\"_blank\">Danielle's Medium profile<\/a>. <\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are in an exciting age of design: Welcome to a new era in history where our bodies, heaters, cars, bedrooms, streets and well\u200a\u2014\u200ajust about everything is beginning to become an interface. &#8220;Just about everything is beginning to become an interface.&#8221; This article will present a number of exciting technologies and various interfaces to interact with them, as well as&#8230; <a class=\"link link--blue fontWeight-4\" href=\"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/\">Read More &#65515;<\/a><\/p>\n","protected":false},"author":77,"featured_media":5189,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5170","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-viewpoint"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v15.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The World is our Interface\" \/>\n<meta property=\"og:description\" content=\"We are in an exciting age of design: Welcome to a new era in history where our bodies, heaters, cars, bedrooms, streets and well\u200a\u2014\u200ajust about everything is beginning to become an interface. &quot;Just about everything is beginning to become an interface.&quot; This article will present a number of exciting technologies and various interfaces to interact with them, as well as... Read More &#65515;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/\" \/>\n<meta property=\"og:site_name\" content=\"Marvel Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/marvelapp\" \/>\n<meta property=\"article:published_time\" content=\"2017-01-06T17:35:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-06T17:45:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/World-Interface-.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1725\" \/>\n\t<meta property=\"og:image:height\" content=\"1033\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:site\" content=\"@marvelapp\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"6 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\",\"name\":\"Marvel\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/marvelapp\",\"https:\/\/www.instagram.com\/marvelapp\/\",\"https:\/\/www.linkedin.com\/company\/marvel-app\/\",\"https:\/\/twitter.com\/marvelapp\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2018\/06\/Logo-Light.png\",\"width\":1605,\"height\":1130,\"caption\":\"Marvel\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\",\"url\":\"https:\/\/marvelapp.com\/blog\/\",\"name\":\"Marvel Blog\",\"description\":\"Ideas and words on user experience, design, collaboration and more\",\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/marvelapp.com\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-GB\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/#primaryimage\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/marvelapp.com\/wp-content\/uploads\/2017\/01\/World-Interface-.jpg\",\"width\":1725,\"height\":1033,\"caption\":\"world-interface\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/#webpage\",\"url\":\"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/\",\"name\":\"The World is our Interface\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/#primaryimage\"},\"datePublished\":\"2017-01-06T17:35:33+00:00\",\"dateModified\":\"2017-01-06T17:45:39+00:00\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/#webpage\"},\"author\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/64cfc61b1ac1301fa6997cdbc5e3c734\"},\"headline\":\"The World is our Interface\",\"datePublished\":\"2017-01-06T17:35:33+00:00\",\"dateModified\":\"2017-01-06T17:45:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/#primaryimage\"},\"articleSection\":\"Viewpoint\",\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/marvelapp.com\/blog\/the-world-is-our-interface\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#\/schema\/person\/64cfc61b1ac1301fa6997cdbc5e3c734\",\"name\":\"Danielle Reid\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/marvelapp.com\/blog\/#personlogo\",\"inLanguage\":\"en-GB\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9450a2632be18fa5150ed658f473e3b07a7cb361ae2af57f833d1854cdba6192?s=96&d=mm&r=g\",\"caption\":\"Danielle Reid\"},\"description\":\"I help companies &amp; designers create great products. Director of Design, @Toptal. Co-Founded @capsulefm &amp; @steriome. Follow me on Twitter.\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/5170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/users\/77"}],"replies":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/comments?post=5170"}],"version-history":[{"count":0,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/posts\/5170\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media\/5189"}],"wp:attachment":[{"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/media?parent=5170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/categories?post=5170"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marvelapp.com\/blog\/wp-json\/wp\/v2\/tags?post=5170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}