Making Technology More Natural | Claudio Guglieri | Creative Director at Microsoft

My. Name is Claudia Leary I'm, a designer, and create vector that means I design stuff and. I also help all the designers design stuff this, is some of the work that I've done in the past but you know we're not gonna talk about this whatsoever. In the past couple of years I've been working at Microsoft and. You. Might be familiar with Microsoft for you, know all-time, hits like clipping. The first AI. Assistant. Really. Dear to the company, you know iconic, backgrounds, like the. Rolling Hills, you. Know Windows XP is definitely like brings a little, emotional. You know like you know emotional, meaning to me and. Brings me back to my childhood and, then other emotional, screens, that you know we're done in the past as well. This. One but. Totally. Emotional, for the wrong reasons. Alright, so you know I just, wanted to you know stop, myself before, I start but. You know hopefully you guys have seen some of the latest, word that has come out of Microsoft as well for. Instance like the, surface, studio. In this case or surface devices that has been coming out for the past five. Years. Other. Initiatives. Like they work done in the holographic space. Being. Hololens a good example of it and some of the windows, mr and since. That actually only. Two weeks ago, to. A more, apps called published, so again you know hopefully you guys are like in tune with that as well other, really really important, initiatives on Microsoft, is inclusive design again, not only a Microsoft right so in the whole industry to, make sure the signers you know we get over our own biases, and with, really designed products, that are meant, to you. Know mentally be used by everybody. And. Hopefully, as well you're familiar with some, of the work that we've been doing in, the fluent design side. Of sense and this is what I want to talk about today basically. Today I'm you, know the talk is called making technology more natural and I would like to share some of the original thinking, and decisions, that led, to the beginning of this design. System initially on Microsoft, and you know kinda like those decisions. That define the foundation, of it, as. It is, so, before I get started I love. This sentence because it really resonates with me especially, working on at Microsoft, you know design is never, done, you. Can never call. It a day and say you know that design system we've finished it now, we can move on I mean in a company as big as Microsoft, when you think you. Have cover all the different surfaces, of, the whole ecosystem if, you, get to that point you know at that point probably, your users, your customers will be needing. Something else you know you will need to adapt and again and, go back in time so this is a continuous, effort, that. We're working on but, the good news is is not like one person's job right, so I'm here today representing. The work of you know I will say hundreds, so even more designers. And developers pm's, engineers. Lots. Of people that have work to. Make this to make this possible so. Flowing. Design, you. Know came up till I was born due. To the need to have a universal. System, you. Know that could serve the needs of this multi, device reality, we're about to head on right or we actually already. Live. In so. If you think about you. Know the devices, that use everyday you, know in the 2d, aspects. Of it I guess, you know where we, use our computer, we use our tablets, we use I guess. You know laptops, or whatnot in the 2d, realm you also have like small devices like smart. Watches or your phone. And. Even on the other side of the I guess the the scale you, have like big screens like you, know if you're home like playing with your playstation, or your Xbox we have this eight to ten feet experience, and. Also some other devices. Like the surface hub that is gigantic yet you're really close because you're like draw, in an end that, is on the 2d saddle sense at, the same time in the past five years we got all this you, know what we call zero the.

Devices. That don't necessarily have, a display, right you don't the, output, of them is not a displayed you interact with them some. Of them using your voice like think, about Alexa Google home and some of those are just like you, know buttons, right like the damn, awesome button thingy or the surface tile. So that, is under 0d and then you go to all, the way to 3 d and at that point you have like hololens, you have VR. Devices immersive. Technologies. All these devices they all have like different inputs the way we interact with them is totally different you have like a voice for, most of them actually touch. Some, of them use keyboard, and a mouse and more than you can use a pen sometimes, you use a game control sometimes. You use your. Gaze if you're like on on M R or VR you use your gestures, or you use a different type of controller all, this, you, know we need to account for and at, the same time as I said before the output, is always different depending. On the device this output, that you're gonna get is totally, different so. Fluent. We. Identified, the need basically, for a consistent. And sure system that will work across all these crazy, ecosystem, that, you know you could actually analyze in terms of input, senses and devices for. A couple of audiences. In one handful developers, so they could actually rely. On one language that you know can be translated to all these different platforms. But also designers. Or sorry users, actually, misunderstood, but users. You. Know create, something that they could relate to. Not, because it's cool but, just because it feels like the logical, conclusion to. The problem that we're trying to solve and, get. In to the logical conclusion we, believe or, I definitely, believe that the logical conclusion of technology, is to be experienced, as, much as possible as we experience, reality right. So. Without in mind with the the team's started thinking like ok how can we bring. Technology closer. To. Reality and, even. More you, know how can we make technology a bit, more natural. So I, said. Before this is not a matter of aesthetics. Whatsoever. It's not about what is the latest, Pantone, whatever, color of the year is not about XYZ, gradient. Is not about dropping a shadow all this stuff is irrelevant, you know when you're trying to solve a problem that is so unique it would, be actually almost, like. Selling the promise on the selling the craft of a designer if you, know the result would be something like this and I, think what's more important, being really tactical, is that, a company, the size of Microsoft, or Google any of these guys it, moves, so slow because, again it has like many many different surfaces they need to tackle that if you focus, too much on current trends for. Sure whenever your product gets out you're, gonna be dated so, it would basically make, you something that a company. That is following all, trends, and it wouldn't make much sense. All. Right so ultimately. It's not about trends, we want people to use what they know from the real world when, they're using the computer and this is no. Different from you know leveraging, the believes or like, the the theory behind the natural user interface. Paradigm. From Bill Buxton right we believe that by, exploding, the skills that users. Have acquired, through a lifetime of performing, in the world you know everything, that you do and you learn from you. Know throughout your life by, leveraging, that on a digital interface we'll, be able to reduce, the cognitive load and distractions, that takes to perform you. Know in. An efficient, way in a new in a new interface.

So With, that in mind I would like to walk you through three different examples, that have, inspired the team to, actually bridge, this gap. Between, reality and technology right I'm, gonna be talking about death and color materials. And then, sound, so. When it comes to death and color something that inspired a team quite a lot is basically. How we perceive, the real world and you. Know what parts of that spatial. Understanding what. Properties, of that special understanding could. Be leveraged, in an interface, in, a way that again it will facilitate. Basically. They use to our users so if, you think about the real world in the real world, the. Higher field the urges that surround you is defined, by certain properties, think, about scale. Think, about the, promotion, the perceive motion or, even contextual, cues if you look at this shot you, know I was clearly aiming, to get my wife and my kid but. You, know probably you should be paying attention to this, guy you're about to bump into right, oh you. Know maybe you should even be be. Paying more attention to, the traffic light that, is telling you that you can cross the crosswalk. Safely, right all this has, different, values in this case the contextual, value seems, pretty pretty important, if, we bring this down to something closer to workstation. Or stone a 3d real environment, the hierarchy of these objects at this point is not determined, by a fire, of properties, is mostly determined by distance, just, by looking at this picture you could definitely say. That the things are closer to the subject and, those that they're using more often therefore. Again you know the closest is indicating, the importance, of it versus, the scenes are the the things are in the background they're, more of a prop in this case. So, if, we bring this even. Closer to, you. Know the for better worse this, legacy. Of computing, that we've been trained to navigate, in the last 30 years right, this. Kind of like metaphor. Desktop, metaphor so, it bring if we bring the reality closer to that idea, the. Certain things that you, know work and don't work but, certain, properties, I feel they're really really interesting, you know for once you have a endesa perspective, they say scaling that you see there's a light source that is hard to see on this picture so. Bringing, this back even closer right. So. In the real world again, distance. Means scale and depa feel further. Something, is showing you this morning you will see it and depending, on the lens I guess or how you're looking at it you, will get certain distortion, distortion well. That is kind of cool for like you know Minority, Report and, you know sci-fi, films, it. Doesn't really work when you're trying to get things done it doesn't really work in a multitasking. Environment right, so if we take that out of the equation and, now there's no scale. Or, on. A matrix of water. You. There's, no skill or, they fulfill in.

The Formation and we change the camera from perspective to orthographic. Suddenly. We remove those things right and. Well, still. You, know we. Still have those objects in a 3d environment, it, suddenly you don't have the scaling factor you don't have the blurriness, factor, so it feels way way closer to what will be like a traditional, interface. Yet, the fact that it's in a 3d environment the, father is a a light, source it starts, like bringing these certain qualities, that we think are really important, so. If for instance. Today's. Representation. Of a noise, right, and all these like windows, overlapping, each other looks, closer to this by. Putting these elements, on a 3d environment and, having a real light source we, could be or we could get something a bit, closer to this idea which, again it's a wider variety of smarter shadows that hopefully. On the UX other things will help people, you. Know navigate the system faster and be more efficient, and again you see in this example with no UI what server so is it's, almost like hard to. Hard. To foresee, what the results would be but, when testing this with real UI it actually came out really well. Another. Effect that we within, it's interesting is this thing called atmospheric. Perspective so. Again everything that you perceive in in the real world every, single object. Or every single yeah. Object, in a scene basically, it's, getting, some of the colors the dominant colors for the environment, and they color that those objects, kind of like get is. Determined. By the distance, from. The subject so, for instance if you take a picture of these rolling hills you, can see how the, elements are further from you I get in this kind of desaturate, and the, saturation, this. Is something that we see in the real world but we actually have seen it quite, a lot in fine arts over time so, if we win this closer to our, idea of a desktop interface the first thing that we need is a program let's, put that end. And then, again, we analyze the dominant color and, it. Brings us closer to something. Like, this. So again little, by little we're, actually adding, nuances that, help, communicate, a better hierarchy, and of course if you change the background it will change with the background so, depending on the color it would actually go I can. Forth changing, the. Week you. Know and again, those are just examples of how we're looking at again how, can we communicate. Hierarchy. A special hierarchy, and help our users navigate, the system better, by. Putting objects in a 3d environment and, this is a little bit of a mashup just showing again how we're looking at different apps how. Basically. Elevation. And extrusion. Works in a different way when you're trying to like you, know bring not only shadows, but also bounce lights and.

This. Last one and again. If, you have those holes in a 3d environment you know how will that work so, we, believe that by using visual. Effects that match the real world we're. Going to be able to reduce. The complexity, that takes to digest, you know a new interface and basically the, time that it takes to understand. A new environment, because, even, though you know we look at M R and we're like really fascinated, by M R and V R we're, gonna go through at least 5 to 10 years of broken. Experiences. Where you're gonna be working on your desktop machine you're gonna go to meeting you gonna put your your, ml device or your device and then you gonna come back so how can we actually do all these elements together we, think this could help already. The second thing that I want to talk about is materials. In the, real world and this is crazy to me. This communicates, so much even, the chairs you guys have sitting on right now you, know the fact that you can touch it and it fills in a certain way it feels more inviting than you, know if let's say the the chairs will be made of metal right, so, all those properties that we perceive in the real world we've seen this a lot of volume and actually, trying to bring those out to, a digital environment so. As I said every single manufacturer, object, has materials. And you know specific, design the shape that communicates, intent, yeah just by looking at them you know what you're supposed to do I mean this is so powerful that you could actually turn, off the lights it's not just like Explorium. Browsing with your hand and understand. Right away what you're trying to do if, we. Take a look at you know how we have interpreted this over. Time. On. A digital. Environment is. Suddenly, not you, know not as powerful right, like we've gone from extreme. Minimalistic. Constraining approach of the syrups autographic user interface you like evolve that, new. Level of detail over time to a point where he went for skeuomorphic, and then there was a crazy reaction to a skimmer film and we went all the way back to super flat and only. Now we kind of like getting, out of it through like what I would call like volumetric. Or dimensional, design even. Though we have explore all this it feels. Like we haven't even scratched. The surface of everything, we can do with, materials, in the real world again the fact that you can touch something and you can understand, the intent of the object so. With. That in mind the team actually started working on you. Know certain explorations, with materials, in the office and you know they were asking questions like you know what truly defines the, color of an object like, how much of that definition, is based on the object versus, the illumination, versus the environment versus. How the object, relates to to, others in the composition, right, of. Those properties, how, is an object actually changing. Some of those properties when you, overlap it with one, or another and what you know what could we actually leverage, from a user perspective there, or how. Even like certain objects, if you actually put them on 3d suddenly. Like start playing with stock the story in your perception of the object. And finally this was this exercise was pretty relevant because we're, exploring, again how, different, the properties, of an object are perceived if you actually see the object in isolation, or if you see a stack of them again. We're thinking about like really high productivity, environments. Where everybody. Has like tons of windows, open right how could we help in that environment we, realize that for materials to communicate, as much as they do in. The real world in a digital environment we, needed to take care of two things the first is how materials, look the, way they're presented and, you. Know with this in mind we've so we have explored a bunch of different executions, right a bunch. Of different ideas of you know what materials, could look like in a digital environment not, trying to fall into this queue morph it bucket but. Trying to get over that you know not trying to like copy a certain aesthetic just. Trying to understand. How. Could that be helpful to the user and you, know again finally. That the goal is basically. To take these materials and to, link them is something that a user can actually understand, and almost user has a massive memory thing right like if you can link any of these materials to a UX affordance I feel solidly supernatural, I think. That will mean that we're doing it right but again. This is a moment in time and exercise that we're doing and. Only. I think our customers over time will be able to to, prove if we're right or wrong the.

Second Thing is not only how they look but how, they feel now, how do they feel when they interact with environment or, when you interact with them and, the. Point that I'm trying to make is that our, perception, of a material is partially, defined by the look of it but only when you touch it only when you actually see. The material moving. With let's say reacting, to the light or reacting to the background you fully able to understand, all the properties, of that. Material or, in, this case first that's only when you hover only. When you interact with it suddenly we start with really more properties, and again, this is just one example but, there's, really a lot of stuff that we could do this, other exploration, for instance it's about how. Do we basically reduce. The. Clutter, that, every single interface has these days because, we need to communicate so many affordances, we need to tell the user how to do so many things. Sometimes, is a bit too too much right, there's too much detail around user. Interface, that takes, you from the, the, content, that you should be focusing on so, here we're trying to like understand, not only not. Limiting ourselves to things like on hover, on click, on release and all that old-school stuff but, you know maybe trying to understand intent and what if we could do something on approach. So we think the. Materials, are extremely. Important how we interact with the world and the more we can leverage them in an authentic digital, way you, know the more we're going to help our users transition. Into 3d environments. All right so the third thing that I'd like to talk about is, you. Know the role of sound, sound. It's. Interesting because it's an extremely, important. Part of a design system of how we perceive and interact with the world but, normally it's overlooked, after, the look and the behavior, of it right, nobody. You know you don't hear many people working. On the same system and actually setting some principles, for not, only the use of sound but the nature of the sound are you using so. In the real world, in. Sound communicates so much right it helps, you navigate your, environment, it defines, this almost, like a special, hierarchy, it lets you know where you are it actually helps you anticipate. Events if you're about to get run, over by your car you will hear the sound you hope to you. Know you will hear suffers hopefully. Sound, is also extremely, important, to how, we communicate with the world how. We communicate, with others and, yeah.

How We actually communicate with even machines at this point right beyond. The specific. You. Know sound of words every. Spoken language, has like musical. Patterns and that. Melody, and rhythm that comes from the musical pattern actually, has an emotional meaning, that has the power to create a connection, so. This, is this is really interesting because the, sound team started working on this idea right they wanted to analyze, the speech contour, of a set of different languages to try, to synthesize you, know what could become a, universal. Pattern that could be meaningful to everybody, you know besides the culture, or the language they speak they. They, thought that if we could actually get. To a point where. You. Know our sounds, are not relying on your understanding or your culture you. Know background that could be really powerful we could be talking to a global, audience and basically. The, theory was that. If. We can define the foundation, of our you, know sound system, based on the emotional patterns and the. Connection that we have with others we'll, be able to reinforce this connection between our world and our digital environment, and more importantly, we'll be able to talk to a global audience so, I want to walk you through a few different examples of, what this means and how they got there right so this is first as the sound of a reminder. And to, create the son of a reminder they, basically selected, this sentence ready to go and. They, got a bunch of people to say that same sentence, with the same meaning in many different languages so, these are a few see, this is how it sounds in English ready, to go. Japanese. Yo edict ah. Mandarin, Halima. Spanish. Estas, lista and finally. All together. So, hopefully you were able to like identify. The melody, and the pattern. And, this, is basically the sound a contour, they that came out of it. Ready. To go and this, is how it sounds on a PC. That's. Just one example right I have a few others this. Is first as new message and obviously it's new message right so. You have English new, message, French. Nouvelle. Massage. Russian. No, vapor Sonya and this is a contour that came out of it. And, this. Is a PC sound with the trouble just a little bit. Again. Other examples, I'm not gonna go through all of them but this there, are few more so, emails, on is message, for you message for you. Then. We have background. Works everything is good and. Foreground. Alerts, please. Look now. Alright. So these are just a few examples to, all this exists, already in Windows right but, this. Is an example of how we're trying to bridge this. Gap between. Our, real. World how we communicate, with others that emotional, connection and you. Know our digital, environment, we actually spend quite a lot of time every day we. Believe that patterns, say they control the sound intent assess I was able to talk to a global audience, by, tapping into that emotional. Connection we have with others. All, right so we, went through three different things right we talked about deaf, we understood how objects, are basically set.

On A 3d environment and, how could we actually leverage, that understanding, you know digital interfaces, we, talked about materials, how the world, is so rich yet, it feels that we are not even touching the, surface of everything, that we can do without, falling into the cheesiest queue morphic set of things and we, talked about sound, sound. Is about creating. And reinforcing that, emotional, connection we have with others, and again, what is it that we could bring back to technology to make it more natural, so. Just, to wrap it up I guess you know couple of like takeaways. The first one is as, I said before flowing. Design is is an attempt to make technology more natural, right by, tapping into the innate human engagement we all have with, the real world not, in a cheesy way but in an authentic and. Digital, way and the. Second one getting back to the point of you, know the, the. Whole, thing with trance is that you, realize that design. Trends are really, irrelevant when, you're trying to solve users. Problems, right and in. My you know in my opinion that the notion of a trend on design it's, already a flaw in the craft because it implies that you, know we might be overseeing, the real problems we're trying to solve it, almost says that we could come. Up with a cookie, cutter cookie. Cutter solution, to every single problem just because it's trendy or is fashionable. And. That is not really the most effective way to do our job so. Just. To wrap it up again this is a moment in time it, snapshot in a long journey I like to think about design Sprint's as you know an exercise that helps you understand, and you know focus, and scope the. Work that you're trying to do but ultimately, to. Work on something like this is closer to a marathon so. You. Guys have invited to the journey in any capacity that you can join I hope this was inspiring, to you, know basically approach, your job in a slightly different way hopefully, something, that feels a bit more human and that's, that's what I have thank you so much. You.

2018-05-31 16:05

Other news