Designing Interaction Manners

Andrew Grimes
Hello there. Hi. I hope you’re having a great conference. I’m really happy to be able to share this with you. By the end of this session, we’ll we’re going to have thought a bit about what interaction manners are and why they’re helpful. I’ve got some practical exercises for you some worksheets that you can download and try this stuff out if you want to. So if you head over to my blog, which is APGrimes.co.uk you should be able to download those there. And, yeah, I think you’re gonna find this stuff useful, you’re going to be able to apply it in work, and I’m hopeful that you find it useful. I certainly have. To just to introduce myself. I’m Andrew Grimes. I live in a city called Bath, which is a beautiful little place near Bristol, in the southwest of England. And, yeah, so I’m beaming over to you from the southwest of England.

Andrew Grimes
Anyway, I’m a user experience specialist at Nationwide Building Society, which is like a bank, but it’s owned by its members. I’ve been there for a few years now, I’m actually coming up for four years now, I think. And before that, I worked at a user experience agency, called Nomensa. And while I was working at Nomensa, I was mentored briefly by a South African man called Jason Hobbs. And he introduced me to this idea of interaction modes, and I’ve used them a few times since then. I’ve always found really helpful. And, you know, to be honest, I’m evolving my understanding of what they are and how to use them in digital design. And I’ve actually ended up lately thinking about that manners is a better, maybe less technical sounding name to this topic, in the way that I’m interested in it. And so my article here that I published on A List Apart is all about interaction modes, but in this talk, I’m talking I’m using the name interaction manners. But for me, these are almost interchangeable and, you know, part of my sort of exploration of the topic is just thinking about a different label for it. But what are they? What are interaction manners? Good question. I’ll try and answer that now.

Andrew Grimes
So interaction manners describes something that the computer does. Okay, so it’s not something that the human does. And this is a really key point, I think, if let’s say we were to do a bunch of user experience research, but we don’t use it for the purposes of designing models of human behavior, or thinking about human behavior. Instead, we might focus on the computer behavior. So rather than creating personas, we might be creating the personality of the software that we’re working on. Rather than creating journeys, we could be crafting interaction styles that the computer is capable of. For me, interaction manners are a set of behavioral rules that the computer follows in order to be well mannered towards their human overlords, if you like. So they’re like a kept set of codes that the computer should follow for a particular situation. So when the when the human is in this particular situation with these particular needs, then fees are the precise components, tone of voice layout, particular information density, whatever that the computer should be using for that situation. And many of us were talking about good manners. So how does this relate to the theme of sensing and sense making?

Andrew Grimes
So, I think, for me anyway, I think that manners help us to make sense of things, when our contextual needs are considered. When our mental state is well catered for, then we can receive information. We can engage then. Whereas when things are misjudged, or poorly timed, or inconsiderate, and often all we can think about is the frustration that we feel. And that’s the way it is with digital interactions as well. The arrangement of poorly managed content or function elements that are just rude, those things are hard to decipher, whereas well managed interactions, things that fit us well. These are the type of interactions match our needs in a way that just feels sensible. So, and appropriate. So manners, good manners might include sort of being appropriate, right? Sothis could mean including matches to our information or needs, our comprehension needs, maybe even our emotional needs. And there’s a kind of a matching job that’s done with manners. And also considerate. So removing distractions so that sense making can happen. And lastly, you know, also good manners should be classy as well. Right? So, helping folks to make their own sense of things and not being too presumptuous about pushing a particular interpretation on folks.

Andrew Grimes
So far, so theoretical, right? This is kind of a bit too theoretical. Let me give you some examples of what I’m talking about here. This is YouTube. And but in fact, all video players offer this particular control. So you might be, you might hit this little button here, this little guy here. And when you do that, suddenly all distractions are removed and you enter this kind of watching experience. And so you’re shifting into this other interaction style, if you like, where the software is well mannered enough to respect our desire to shift into that space of immersing ourselves in the content. We don’t want any ads or recommendations until the till the watching is finished. So that’s kind of like the full screen manners, which are very different manners to your kind of browsing manners if you like.

Andrew Grimes
This is another type of manner. So once I’ve prepared all my cookware and my ingredients and I want to start cooking, then and I’m using this mealtime app. I can activate cooking mode. I hit this button here. By tapping that, then the steps are revealed in this kind of easy to follow list. So this is a design that respects my need to leave the screen often and it makes it to resume exactly where I left off, and I can see me coming back and forth to the screen, and you know, stabbing away at it with my fingers that are covered in flour and whatever. And I can, in a way this is a design that that respects my desire to have a little bit less of a focused interaction with the screen. And I’m, you know, getting busy with all the cooking, right?

Andrew Grimes
So this is a similar example actually in a way that Audible’s driving manage. They show up when you hit this little feature up here, this little kind of car. And it switches to a view that allows me the ability to play and pause and do one or two other things without it being dangerous for me. So this entire top section of the screen is wherever I click. I don’t just have to click on the pause button. Anywhere I click on there, well hit play or pause. It’s not just a 50 pixel target there. And so you know, essentially it’s a design which respects my desire to drive safely and I can operate this without looking at it closely. So it’s a set of manners that respects my need to keep safe when I’m driving along.

Andrew Grimes
And it’s similar with an article page. The top of a well designed article page helps me to evaluate. So we might call this evaluating manners. You’ve got the title, the illustration, the tags, the link to the author bio. We’ve got the number of comments. We’ve got all these things that help me to decide whether I want to read the thing or not. And actually, when I scroll down, we shift into reading manners. And now I’ve just got the text and the supporting images. So you know, there’s a quite different layouts of the same thing, the article. But yeah, two different reading, two different kind of interaction manners being used as I start on the page, and then I scroll down. And this example is different from the others because I haven’t explicitly asked for this change from the software. It’s just kind of read my intent to read by scrolling down the page. And it’s offered this different sort of layout, this different kind of interaction.

Andrew Grimes
My last example here, I think it’s so far as reading manners, which is similar to the reading manners we just saw. But here, it’s kind of activated by hitting a button. So if I click on this little guy up here, I can switch to this much more sort of considerate reading experience. And to these manners could be activated consciously by hitting that button. Or, in fact, you can set this up to automate automatically be activated for me, so as soon as the Safari browser recognizes that an article is being rendered, then it can automatically switch to this view for you if you set it up that way. So it doesn’t have to be that an interaction manners would be something you would consciously choose. It could be that the software or the tool you’re using may decide for you to switch into it, a slightly different behavior that is more well mannered for the task at hand.

Andrew Grimes
And interaction manners aren’t just functional elements or layout changes. They’re also about content as well. So, tone of voice, for example, provides a massive part in any kind of interaction manners. So here we’ve got a little snippet from Nicola Fenton’s book, and you can see what how she’s kind of laying out different tones that might be appropriate to different, you know, the changing emotional state of the reader, depending on the content. Okay, but that’s all very nice. Why should we bother with interaction manners? And I think the key thing here is to stress is that every digital product or service has a personality. It has modes of behavior, whether we consciously designed them or not, and modes that are respectful of the human. Manners that are polite. These are going to help Increase adoption and retention of people, you know, coming back to our experiences, all the things we care about, because people like well mannered experiences. And this is most often a matter of matching the way that our site or app behaves with the way that our users are thinking and feeling. You might say, Well, okay, we do that already. Why? What does interaction manners give us in addition to our normal practices of you know, I’m happy with my journey mapping. I’m happy with my other practices, I’m still kind of doing that matching already.

Andrew Grimes
And so it’s a good question. But I think that there are a couple of reasons to bother with thinking about that in this way. And the first one is that, you know, there’s a kind of a reuse thing. So a single set of manners can support more than one scenario, which gives us these good things of consistency, efficiency and effectiveness. And so for example, within this story, this might be our my story which is withdraw money from ATM. Could have these three scenarios. First one, the account has sufficient funds. Second, one account doesn’t have sufficient funds. And the third one being that the card is actually disabled. And in each of these things, the ATM needs to behave in different ways. And you could imagine that withdrawing manners might show up on that first scenario, but the other two could share the alerting manners. Because ultimately, you know, in these instances, the ATM has to grab the users attention and let them know that something has gone wrong and that they need to kind of engage in a slightly different way in order to kind of successfully complete that interaction. And so yeah, so similarly, you know, Nationwide, we have to look across all of our customer journeys that need support across a wide range of products, and also, you know, digital kind of platforms. And we have a lot of common softwares that we need to support. We need pages that support evaluating, clarifying, calculating, referencing and so on. So why not create a set of rules that can apply every time we wanted to clarify. That would be efficient, and it would also enable our users to start to recognize it.

Andrew Grimes
In this tweet from Nikki Blaker a while back now, she suggested that we organize our design systems by the user purpose, not by the visual category or pattern. And I just loved this when I saw it. It really sort of resonated with me, because this is lovely linking between kind of patterns and their purpose. And essentially, these are little components which behave and interact in a certain way. They each have a set of manners. And when you’re supporting discovery, for example, these are the things that you should be using. So manners are a powerful way to organize your design system around. We don’t want bespoke components for every different moment. We want reusability of components because designing computer behaviors is really hard. And let’s just make things easier for ourselves and kind of not gonna continually redesign things. The benefit for the human is that they get consistent good manners. And the benefit for the delivery teams is that they don’t have to interpret a persona or a journey map every time. They’re not looking for Denzel discovery or Linda learning. They’re looking at a system that describes the way that the software will behave. If people are particular people types don’t want to do discovery in that particular way, then you might just, you know, allow them to choose a different set of manners for the way that they want to engage. And I’ll come back to that thought in a little bit. I think the second reason to bother with this. So imagine that you’re driving a car and you’re going, you’re moving from first gear to second gear. That’s, you know, quite small change in your user journey. And, to my mind, at least, that should be matched by a small change in the interface as well. But with bigger gear changes we should be bolder with the changes to content and layout and interactive features. So this top example here, I’m just expanding an element. I’m wanting to focus in on that top element. And I’ve expanded it,and it’s a small gear change.

Andrew Grimes
Whereas in the second example this lower example, here, I am changing everything about the page to match the user’s desire to interact in a quite different way. They’re maybe they’re moving from fifth gear, suddenly into reverse, and they’re needing to do something quite different. And so I can be much bolder about the changes visually. And you know, I’ve gone to something completely different color, I’ve got maybe a slightly more focus and this kind of modal thing that’s appeared, and the different interactive elements have appeared that sort of matches that big shift that’s going on in me, the user. So the benefit here is we get a better match with the human’s changing needs and also we consider a broader set of principles, design principles. We don’t just have one set of design principles. We might have you know as many principles sets of principles as we have interaction manners.

Andrew Grimes
Okay, so we’re gonna get into an exercise now. So this is the point where you can if you want to, you can you can hit pause. I’ll explain how to do the thing and you can download the worksheets and have a go at this maybe working in pairs if you can find someone to work with. Maybe you meet someone, maybe you’ve met someone at the conference already. And or maybe you know someone already who’s at the conference and you can both download this and give this a go.

Andrew Grimes
So it’s this exercise is all about identifying the moments in the user journey where gears shift, where the context changes significantly or insignificantly, but it changes. And essentially awareness of these moments where the gears shift is the first step, is the key step towards crafting interaction manners. So working in pairs, you would imagine that you’re conducting an interview, a user interview. One of you will be the interview. The other one would be the interviewee. And I want you to imagine that you’re halfway through and you’ve already captured a list of actions that the participant has carried out recently. I think, here we go, look, so. Let’s get into pairs, pick one of these, I think there’s three of these journeys to choose from. Delivering a pizza, maybe one. And so working in pairs, imagine you’re doing this interview, and you’ve, you’re halfway through, you’ve already captured these actions. So these yellow post its here on this thing, and there are kind of like actions that have been undertaken over time running from left to right. And so you’ve captured a kind of task flow. And now what I want you to do is imagine yourself in that situation, and you’re now going to ask a few more questions just to identify some extra details to add to the maps. You make some extra notes on the map. So I’ve got a set of questions up here. And these are questions that you might ask to discover gear shifts. So, for example, you might ask, When across all these tasks that you did, were you most focused? Okay, and when were you least focused? When were you most creatively involved in the process? But you do not need to be creatively involved at all? When did you need to collaborate with other people? When was it just important for you to act alone? And so on. There’s a bunch of questions there. And I’d left a space if you want to kind of make your own questions to think about how we can identify these gear shifts. So explore those questions. Add some more if you want to. Add some extra notes to the map here, the canvas.

Andrew Grimes
If you’re the person being interviewed, just be creative. Imagine yourself in that scenario and just make up an answer right? So it doesn’t matter. This is just for an exercise. And so if someone says When were you most focus on your device? Just read through those actions and kind of pick one that would feel like it makes sense. And if you write that down on a post it, added to the relevant bit of that page. The point of this exercise is to consider really the type of questions that can be asked to identify gear shifts. So these are example questions I’ve got here. But you might find others, one or two questions of your own, I’m sure. And please make a note of those and share them back with us. So yeah, to recap. Get into pairs, pick a journey, read it, choose who’s going to be the interviewer, who’s going to be the interviewed. Work through these questions and just add notes. Give yourself 10 minutes to do that, and then come back, right? So assuming you’ve hit pause at this point.

Andrew Grimes
And then you come back. Let’s have a little, you will have added some notes across the canvas there. And as a moment for us to think about how that went, right? So how was that? Did those questions help you to get into the moment where, to get into those moments where the interviewee, the participant really shifted gears? What are the questions that you come up with? Maybe you come up with some better questions than the ones I have down on my sheet. There are lots of other questions that can be asked and it all depends on the competing values in play for each scenario. So it depends on the project you’re on right? So this is from the appendix to Cennyd Bowles’ book, Future Ethics. This is a brilliant list of all the different values I think he could think of. And you know, if nothing else this is just a reminder of just the sheer number and complexity of the value system that surrounds us. And these are the things that pull humans in different directions, right? These are the things that cause us to require different gears, different modes of use, different, and therefore different interaction manners. So depending on your project, you know, referring to a list like this just helps you kind of go, What questions might I ask? What’s important to the humans here. And as they go through their journey, when do these things shift in importance?

Andrew Grimes
Here’s a worksheet from provided by Center for Humane Technology. And they set out these six human sensitivities that we ought to watch out for. So you can use these to create interview questions too. You’ll notice actually, that they call out sense making as a key sensitivity. So you might want to ask questions that help you to identify moments in the journey where folks want to feel, or they need to consider to learn, to express, and to feel grounded. Those those being you know, key ways to support someone to do the sense making that they need to do. So yeah, you can do this, you know, any number of questions that you can kind of generate to pick out these moments that users shift gears.

Andrew Grimes
Let me show you some examples from my work at Nationwide. And this first example, I gotta name check, James Brooke and Annie Walker, who I worked with on this recently. This was part of a project to design a case management tool for our colleagues in the back office. And we identified six sets of interaction manners in our research. And we used them to organize our design system, grouping our components into those nice purposeful sets. We also used them to generate and to create these kind of page zones. We wanted to test the idea that you could have two sets of interaction manners on one page, but maybe with a clear divide. So our thought was that you should need to scroll down or maybe look over to the right in order to switch gears between your interaction manners. So we repaired actioning with reviewing and we paired gather focus with investigating there And so on. So we found that useful and it seemed to test very well with our colleagues. Another example here, I’ve gotta name check some other brilliant designers, John Granger and Ben Simmons who I worked with on this one. So this was, these are a few of the core screens of a system that our staff used to access and change our members’ data on their accounts and their transactions and so on. And so we’ve got this kind of don’t share mode, and that’s indicated by this magenta header, this kind of red header across the top. And this is using context where the staff member shouldn’t turn the screen around. It should you know, it might be on a tablet, for example and they shouldn’t turn that around because this is you know, this this is potentially private information on this or kind of, you might have search results with other members details on.

Andrew Grimes
Once they’vevalidated that they’re speaking to the customer. There are no high level alerts on their accounts. Then the header is blue, and they shift gears into this screen sharing which is screen sharing which is basically now the main shift in gears. It’s that I bought this as your data. How can I help you with it? So they’re happy to turn the screen around at that point. And you’ll notice that there’s a lot of information on that screen. And this respects the staff member’s desire to get to the data without having to navigate menus or expand areas too much. And so yeah, much higher information density than you might be comfortable with designing for kind of, you know, customers, for example. And if they need to make a change, then the layout, manners shift again into this kind of modal form, which is this change mode where they’re taken through this guided process. And this this matches another shift in gears. Their desire to make changes to account details really super carefully. The cost of making an error can be very, very high. So they want to slow down, be guided before being returned safely to a read only world where they can click anywhere they like with much less potential to do harm.

Andrew Grimes
And here on this example, I gotta name check Candy Williams and John Granger and Rich Foggin. These are a design tool that we devised to help teams design pages for our website. The idea was that you would use these to clarify any jobs to be done that you’re working on into inappropriate mode or computer behavior by using the top bit of the card. And then you follow the bottom half of the card in terms of you know, to find the rules that need to be followed for that kind of interaction manners. So you can see really, they’re very like personas, right? But they are, they look like the same. But they’re not, they’re for the product for the website, in this case, not for the user behaviors. And so kind of an interesting tool. I hope you’ll agree. Maybe you would find this useful as well.

Andrew Grimes
And there’s another example. This leads us nicely actually to the next exercise. So this an exercise where you can try out creating an interaction mode or a set of interaction manners, as I’m now deciding to call it. If you’ll allow yourself just 10 minutes for this maybe working with the same person you were working with before if you’ve got time to do this. And if not, I’m going to walk you through it anyway. So go back to your, you’re delivering a pizza, or whatever task flow you you chose to work on. And, obviously, what you might do next with it is you do a lot more interviews, right, you wouldn’t just do one interview, and you might create a distillation a task map that distort the stills, all of your core interview data into one map. The next thing to do the third thing to do would be to draw some lines to identify where the major shifts are. For now, just go with like two lines or three lines, you only really want to come up with a couple of groups. to name the moments in between. So what you’re doing really as you’re naming the the groups have actions in between each line. And my tip here is that we found it useful to use words ending in IMG. And it’s also useful to add the word mode or interaction manners at the end of there to, to kind of clarify what it is you’re talking about, you’re talking about what the computer’s doing, rather than what the users doing.

Andrew Grimes
And here’s the sheet that you need to fill out as part of the second exercise. So for 10 minutes to spend a bit of time just getting one of your your set of interaction manners, pick out the moment, maybe where the gears shifted the most from that previous exercise, and you name it there and that top bit and in this left hand section, oh yeah, that’s my tip again, use words ending an IMG and the word modal manners at the end. In this, this section, you can kind of fill that out, you’ve more or less just using your interview notes. If you’ve done the first exercise, this should be easy for you to just kind of go well when the humans doing these things. And the action should be you know, you know, the focus should be this the action should be taken in this way. This is the level of collaboration that would be involved and so on. And then there’s no Well, if that’s what the human is doing, this is what the product or service should be doing in terms of the content layout, interactive elements that we want them. We want to kind of describe describe the software behavior that does this nice match with how the users approaching things. Okay? So, sometimes when I’m doing this, I get kind of cheat sheet. So there’s a gg as well, which has got some just examples of things that you might want to consider in terms of content, rules, layout, interactive features, I’ve kind of added some additional prompts here for you to consider. Okay, cool. Well, I’m getting close to the end here. Now to sort of wrap things up. I’m hopeful that that all of that gave you an idea of how to go about designing interaction manners. To summarize very briefly, so the way that you do this is to identify interaction manners, you first have to pay really careful attention. To the questions that help identify when humans shift gears. So you know, in your interview quest in your in your user interviews, in your research questions, you’re looking for things that help to identify the moments where people shift in their gears, something I want to interact in a totally different way I need to go and do something else I need to go collaborate, I need to slow down and think about this, you know, how, when are those moments when we’re going you know, we’re shifting through those gears, which means, essentially paying careful attention to when different values come into play. And from there, you need to create a set of manners that can apply to each gear shift, thinking about whether maybe it was a small shifting gears or a larger one. As you define manners, remember that these are rules for the software to follow. So content, layout, functional behaviors, that the term the software is doing the the digital thing is In order to match what the human is kind of experiencing interaction manners should help us to design appropriately, considerably and to stay classy, matching the right manager the right moment. And they should help us to design more measurably making our content more single mindedly purposeful. And finally, they should also help us to deliver our brand promise, they might help us to template the way that we do things differently. So there we go. That’s a thank you for watching right to the end.

Andrew Grimes
I’d love to hear from you. If you have any questions, or if you’ve got any thoughts to add. Or if you just fancy saying hi, I’d be up for that. We’re all kind of in lockdown at the moment. That would be nice. If you fancy reaching out and saying hi. You want to chat. I’ve never been to an online conference before. I’m sure lots of people must be in the same boat as me but obviously when you present in this way, you’ve got no idea what’s landing and what it’s not. So please do give me some feedback if you have time. And let me know what you found useful. Or if you have any stairs you’d like to give me maybe you’ve got some interesting articles that you’ve read that a similar field similar to this, and you want to kind of steer me in that direction I’d be. I’d be up for up that up for a chat. So yeah, I’ll leave it there. Thank you very much. Enjoy your conference. Okay. Cheers, guys.

Transcribed by https://otter.ai