Please subscribe to watch this video
User Experience Design Essentials - Adobe XD UI UX Design
Daniel Walter Scott || VIDEO: 30 of 93
Hi there, in this video we're going to look at sending out our Wireframes to get some comments back. We're going to use this little option here and show you how to work this so that you can send it out to colleagues, or to the client, or to user testing. So let's go and do that now in this video.
So the first thing to get clear is that this is not going to be a user testing. What we're using our Wireframes for is to send, first of all to just one or two of my colleagues. For you, it could be anybody. A buddy who, I guess who has the vocabulary or the understanding to be able to test a Wireframe. And give you some kind of constructive feedback. So that's one part of it. And the other option is, once I've kind of gone to my colleague and they've come back with some amends, and they're like, "Hey, I thought this would happen, or this is a bit weird." Just to kind of work the bugs out so I can send it to the client for client approval. Client approval is different from user testing as in, the client's expecting a Wireframe and what I want to do is, I don't want to spend my time doing the High Fidelity, or the High Res version of this app, only to find out that's not what they wanted. So it's easy to send the Wireframes over. Wireframes are easy to make, easy to update. So it's just kind of working out that with the client and once they approve that, then I go off and make the High Fidelity mock-ups. And it's those mock-ups that I send out for user testing. That's when I get people in that are potential users for my Persona, and actually test the app.
Some people test Wireframes, that is totally fine. I don't, I don't find them that valuable, getting tests for Wireframes. It's just, I'm not too sure, like it's… it's just that I don't find value in the feedback from them. From my colleagues, yes, from the client, yes, but I think it needs to look all singing and all dancing for it to get a proper user feedback. And the other reason is that I'm quite good with making High Res. It takes me a long time, but not that long, if you know what I mean. Like, I can bang out kind of a good looking mock-up with all the images and stuff pretty quickly. It's not something I have to outsource to somebody else.
Say if you are more of the UX researcher, then totally you can get lots of value from Wireframes because the next step in getting kind of high resolution versions is a long job, but for me it's not. So we've discussed we're not doing particularly user testing but some of the rules apply like, if I get a chance, I'd rather do an in person, over the shoulder test. So I'd rather have a buddy meet me for lunch, and go through it so I can watch their reactions. It's all those kind of mannerisms that they don't really know they're doing that are quite useful for me. In person is amazing, even with a client but I find, for my kind of smaller projects that I work on, as a freelancer they're always-- I'm normally just sending these links over. Let's look at how to create these links, then we get commenting feedback from our colleagues and our client.
So to share a link, you click on that little icon and just type out a few things, like the title. This is fine, 'Instructor HQ - V1'. And you can drag an image in here. Just makes it look pretty when you're sending links to people. I've made, in your exercise files, here under 'Images' I've made a stacked version of this HQ logo. Now you'll see, I've made it square, originally I had it kind of rectangular but it ends up cropping up badly, so if you're finding yours getting cropped weirdly in the square just make sure the actual Artboard in Illustrator or Photoshop is actually square. And just have your logo inside of there. Cool! that's an ai file, seems to take anything. Nice! Other thing, 'Allow Comments', exactly what I want. This thing here is quite important, this little grayed out bit where it says 'Start At'. That's, remember the Home icon, if I go to Prototype earlier on, when I was working I set that to be Home when I was previewing on a Mobile. So that's the initial view that the people I'm sending this link to will get, which is not what I want. I want them to go straight to the Home page.
So 'Prototype' view, click on the 'Home' icon, go back into here, and it should say 'Start At Home Page'. Nice! Click on 'Create Link'. And magic, it makes a link, eventually. Now, two ways you can just email the link, that's what I tend to do. Don't click on it. So I can copy that link and just email to people, or you click 'Embed'. If you know how to work with an iPhone, you want to embed it on to your own site for some reason, you can do that, but if you want just a normal one that you can email, that's the one to go again. So you copy it. That's what it looks like when I'm logged in. I want to show you what it looks like when like, say I'm sending it to a colleague who doesn't have an Adobe ID. So they get this, the little icon, there's the naming. And what they can do, is a couple of ways of working with it. They can just toggle through this, and I can just kind of see everything as, like that. A nice way of doing it is to go full screen. Well, it's not really full screen. Just gets rid of the junk around the outside. Then they can start interacting with it, rather than—
So I might have to go back actually. Hit 'Esc' to get out. And what I'm going to do is go back to the Home and start previewing from here. So you might have to educate your friend on how to best use the Wireframe. So, I find, starting at the beginning and just clicking on the full screen gives them the best experience because then it allows them to go through and start clicking stuff. So if I click on this, I go to this next view. Now one of the things is that - it's quite helpful - if you click anywhere else, everything kind of highlights. Gets the kind of blue box around it. It just kind of helps people navigate a site. Especially a Wireframe that you might not have rigged up every button. They try to click on something and it's just not working. This kind of gives them a visual cue about what to click on. So go back to the Home page, go in again. So, we've previewed it before, but that's what it looks like. 'Esc' to get out.
Now, in terms of commenting, you can click on this. At the moment, they're not signed in so they can either click on the Sign In button here, or sign in here, or they can comment as a guest, which is beautiful. So makes people not have to go through the whole drama of signing in. If they do though, there is a nice way that Adobe have done. You can either sign in with your Adobe ID. But say that your colleague doesn't remember it or doesn't know what it is, they can sign in with social logins here, with Facebook or Google. Either way, that will allow them to add comments, or you can do it via guest which I love.
Say you get some initial feedback, and you need to update that link, there's two things you can do. You can, in here, say you have a feedback from them, and say, "Hey, this is not working," or "Why don't we think about doing this?" or "I don't imagine this will work this way." what you can do is, say you do make a change here and you're like, this button is now going to be-- you change the text in here. Go to Design view-- I'm not sure what I'm updating. But this is just, delete some text. So I've decided that that's my update and if I don't want an update, I can do two things, in here I can click 'Share Again', and there's two ways I can update the original link. So that, nothing really changes it's the same link that they've been emailed that will work, but will have this updated text. Or you can create a new link, and give it a new title.
Say it's a new link, and you're like, "Actually I want to do this new link" because it's like, you've done lots of changes and you want to call it version 2, something completely different. So you share a separate link. So you either update the link you had, or share a new one. Then you can click on 'Manage Links', if you're getting lost. And it will load up with your Adobe ID. I'll do it somewhere else, let's do it-- I'll close these two down. And click on 'Manage Links'. That opens up in here, and you can see, there's my Instructor HQ, these are the two versions that I've made. I probably should have renamed it before I created a new link. So I've got two versions 1, so I confuse everybody. But those are the two versions, you can delete the old one.
Say that you're finished that one, you don't want people to work on it anymore, you can click and in very big letters, it says 'Delete Permanently'. So I'm going to delete that one for the moment. Say you want them to test on Mobile. Say you're building an app rather than a website, just jump back into XD. To preview on a Mobile, it's not like 100% fluid. You've got two options, if they've got XD, really easy, you just show them the XD file, and they can preview like we showed, previewing on a device with the app, or what I tend to do is, I just give them this link, copy it and send them an email, paste it in, and say "Hey, open this link via your phone." Most people have their email access on their phone. They just click on the link, click on full screen, and it works perfect. Or they can copy and paste it into their mobile browser. They can also type it in, but that thing is too long. You might use a url shortener, like bitly or goo.gl, that's a nice one that shortens them down, so it's easy to type in.
Another way of sharing is, to not really share anyway. Just take your laptop with you and then just hit that little play button, and get them to work on it in here. The cool thing about that is that you can record what goes on. Can you see here? Actually this is only for Mac, you can click on this 'Record' button and actually it will start recording what the user does. So you can see, clicking on here, what they do in here. It will record by voice as well. And when you're finished, hit 'Esc'. And that will allow you to save this file like an mp-- it says it's mp4. I'm going to stick it on to our exercise files and I'll just put it in-- actually I'll just stick it on my desktop, because I'm going to bin in. So 'Instructor HQ Test - Dan'. Let's have a little look. And here's my test here, recorded and shows everything that they've been doing. So that can be a nice easy way to go and get your buddies to help out or send it to the client for them to do some testing and you can record what they do.
Remember, that record option is only available on Mac. The difference between a PC and Mac are only slight but that's one of the nice ones that Mac has and some of the plug-ins straight into the device. And if you're following along with a PC you'll notice the menu system is kind of constructively different at the top to match more of the Window system.
Last thing I want to show you is what comments look like on the other side. So this is an actual working project, right? So I have designed this, wireframed and sent it out to both colleagues and client for feedback. So I'll show you a little example of what happens when they do comment. So this is the Home page, and you can see, I've got a few comments and you can see, there's kind of two ways of adding comments, these pins, which is nice because, that there, comment actually connects to what they're pointing at because there's a lot of things on this Home page. And over here, what I can do, I can reply to it and explain something, or ask questions or I can resolve this, and say, actually, this is done. I fix whatever that problem was, and it's fine now.
Other things you can do, let's have a little look through. A few more comments, no comments, no comments. Let's have a look at some of the general ones. So this one here is a general comment for the whole page they have appended. Now, to show you what you can do, and what they can do when they are appending, when they add a comment, say you want to make a comment, they can decide on "Why do we have drop shadows?" I went a bit too overboard with this Wireframe. I added a bit too much detail to it. So I stripped it back. Like the one we're working on now. And you can just leave that there, hit 'Return' and that becomes a generic one for the whole document, or you could have added a Pin, so another one there, 'App Store Login'. I don't even know what that means, but you can drag it, and leave it there. And the cool thing about that is that it's pinned to that point, so I know, that feedback, what it does.
So that's going to be it. It's a pretty wicked little system that XD has made, and Adobe have made. I really love that they can sign in by 'guest', you're not forcing people to sign in because otherwise they end up just sending me comments back in emails, and they're like "On Page 10, the bottom right has got a green thing." And you're like, "Oh man, what are they talking about?" So this, commenting, is super cool. You already knew that, because you've just watched it. All right, I'll carry on. Let's get on to the next video where we start getting all High Fidelity.