Critical Pages and Q&A

[00:00:01]
>> Now, if you're really tight on time and budget, then you can skip the wireframing bit and just use whatever you did in notion. But actually, it's really worth to start visualizing it a little bit more so people can see how the content is gonna be placed on the page.

[00:00:16]
Now we're starting to explore some of the structure, and layout, and flow of the actual individual pages. And Greyscale wireframes are a great opportunity to organize your content, test your layout, establish your page flow without necessarily getting drawn into those conversations about aesthetics. What color blue it is or whatever.

[00:00:39]
So that's why I like wireframing. I don't wireframe every page of a website. I wouldn't wireframe necessarily every page of an app or state of an app. It kinda depends what's appropriate in an individual situation. So the typical things on, let's say a website I would wireframe is things like the homepage, any key landing pages, kind of standard text page.

[00:01:07]
But I also will tend to if we're getting into a lot of kind of functionality and interaction. I will tend to wireframe those because that's gonna make it a lot easier for a developer that's has to pick it up if they can see exactly how it's gonna work and operate.

[00:01:25]
So things like forms, ecommerce checkouts, account management, app functionality, etc. So those are the kinds of things that I tend to wireframe. So far I've kind of talked about the process of creating content, but I'm talked a lot about how we can integrate this clients and our stakeholders into that process, which is a really important part of the whole process.

[00:01:54]
So, there's a couple of little exercises that I do. And I'm not talking really about content creators here, I'm not talking about the people that gonna write the final content. I'm talking about everybody else that has an opinion [LAUGH] on what should be in this app or website.

[00:02:11]
So it's a couple of things I do. One little exercise I do is called the user attention point exercise. I've got a link to this and I'll do this. You know those scenarios where people kind of just keep stuffing more and more content or more and more functionality into any particular page, right?

[00:02:30]
And it becomes this big problem cuz everybody just wants to have one more thing, just one more thing, right? We just got to put this disclaimer text here, or we've just got to put this error message, or this announcement, or we've got this event coming up, and we need to meet and before you know it, it ends up this kind of hot mess.

[00:02:49]
[LAUGH] So the user attention point exercises the way of dealing with this. So what I basically do is I get all of those different stakeholders that have all got opinions about what should go on this, whatever it be, let's say a homepage for now. And I basically get them to brainstorm everything that needs to go on this.

[00:03:07]
Absolutely every element, from the drop down menus to the privacy policy to everything that's gone on the page. And they normally come up with a pretty damn long list, right? So I let them get it all out of their system. And seeing all those things side by side instantly makes them go, that's a lot of things.

[00:03:27]
And then I introduced the idea that users only have limited attention. And there's actually a really good Times article that says, we've got about eight seconds to grab someone's attention using a particular website, or app, or whatever. And I say, okay, so we know we've got about eight seconds to communicate the key information on this particular page, let's be optimistic and say, people can look at three elements in a second, right?

[00:04:05]
But that is the equivalent of 24 points of user attention, make sense? So now you spend your 24 points of user attention, they'll have more than 24 elements written down for a start, so that immediately they've got to start removing things. But here's the killer catch, right? You might want somebody to look at some elements more than others on the page, right?

[00:04:31]
So you want people to pay more attention to your strapline than your privacy policy, right? So you have to give it more user attention points. So, basically, you could give all 24 just your strapline and have nothing else on the page if you wanted to. Or you can give one point to everything, but then your privacy policy is gonna appear as important as your strapline.

[00:04:56]
So they have to reach a middle ground. So you get to get them to go away and do this exercises they go through, and they make some attempts to spread the points around, but not a lot. It's like two points here, one point here, one point here, two points here, etc.

[00:05:12]
So they narrow it down a little bit, but they don't quite get it normally in the first go. And then when they've done, you congratulate them, you thank them for getting rid of so many elements that they've removed from their list, but you probably haven't gone far enough.

[00:05:27]
Let me show you. And I bring up the Google homepage and say the Yahoo homepage, right, and you say, which is better of the two? And they will go with Google, Google's really easy you to use, it's really simple. Where they spend like 15, 16, 17 points on the search box alone, while Yahoo have spread out all over the place and there's far too much going on the page.

[00:05:52]
And it's like this light bulb moment for stakeholders where they go, yeah, we've not focused enough. And you get to redo the exercise and they'll make all the hard decisions for you and remove all this clutter from the website without you having to argue with them, right? You've just created the environment for them to learn to do it themselves, and immediately now they feel engaged with the content.

[00:06:18]
They are better educated about the content, and so it means that they're less likely to reject the design because you're just reflecting back what they agreed. So that's a really good one. And then I've already talked about defining content blocks. And once you've decided what needs to appear on the page, then you can start working with clients around the different content blocks.

[00:06:38]
You don't need to worry about the exact wording at this stage, but rather focusing on key messaging. And if you engage them a little bit with that, they feel like I've contributed there as well, and so then you just wanna frame it up really. But I really would highly encourage people when it comes to the wireframe to pick the right tool for the job.

[00:06:59]
I see so many people jumping into Figma or Sketch to do wireframing. It takes far, far too long. And you end up getting stuck into designing screen elements and what should it look like and all the rest of it. And it's too early for that stuff, right? And you'll be too precious over the design, and when you show it to the client, they won't like it, and then you've spent long time creating it, don't do that.

[00:07:28]
So there's a couple of tools that I tend to prefer. This Balsamiq, which is a tool that's been around forever. Brilliant for really quickly throwing together wireframes, are very lightweight, quick to put together. My latest favorite is Whimsical, which does very similar thing. Really lets you mock up pages, just drag elements in, and you can put pages together very quickly.

[00:07:53]
Or if you are absolutely set on using figma or sketch, then use a wireframing template. My favourite is this one called form for envision where it's got ready made components. You literally just drag in and assemble the page and put in your own content. So really quick and nasty, these are supposed to be because they're a discussion point, they're to include the client in the process, show them something early, get them engaged, get them focusing on the content and the structure rather than getting distracted.

[00:08:29]
Before we move on to kind of testing these wireframes, any questions around that process of going from content to wireframing? Because I'm aware that it's quite a lot there. And by the way, when it comes to questions, I include, yeah, buts in that as well. Yeah, but pool that may work in this situation.

[00:08:52]
But in my situation, I'm quite happy to talk about some of those as well. So yes, go for it.
>> At what point do we go from discovery to prototype?
>> That's a really good question actually. Yeah, when the money and time runs out, it's probably [LAUGH]. Yeah, there is no definitive answer to something like that and it is a judgment call.

[00:09:20]
For me, I think you get diminishing returns at certain point. You could carry on doing user research and competitive analysis forever, but normally before that, there is a pressure organizationally to move the project on. So a discovery phase is almost always as long as you can get away with rather than it being, okay, we need to now make a conscious decision to move on.

[00:09:46]
If you are in a position of making a conscious decision to move on, then a lucky you. But I think that moment for me would be when you feel confident that you've learned enough to be able to create a wireframe, that's the honest answer. So you need to have a clear understanding of what the questions, objections, and tasks are.

[00:10:12]
You need to have a clear understanding of who your audience is, what the ultimate goal is. You need to have an understanding of any constraints on the project, any broader context of the project such as competition, etc. But once you've got that, you're good to go really. Any other questions?

[00:10:32]
>> And which of the four phases are we in right now?
>> We're talking about with the content and the wireframes. This would be prototyping, very much in the middle of prototype. I'm sorry, that wasn't clear. Yeah, we're now out the discovery phase. With the questions, objections, and tasks, just getting that initial list together, that might, you could do that in the discovery phase.

[00:10:56]
It's kind of fluid. It's up to you really. I will often have an initial stab at it in discovery just to give me a sense of what we're gonna be prototyping. But as soon as I've got that initial bullet point list, I wouldn't do any more on content until we start prototyping personally.

[00:11:15]
But it's up to you to some extent, make it your own, I don't think you're gonna do harm if you wanna do it earlier.