High Fidelity Prototyping

[00:00:00]
>> And then eventually we'll kind of move on to more high fidelity. So this is really where I wanna start kind of doing a little bit more in depth testing. I wanna kind of get into it and a little bit more detail. And like I said, these eventually can become functional specifications for your developer, which is great.

[00:00:19]
So your options there are your clickable prototype, which is a kind of good enough prototype. I think a lot of people, especially when they're designing apps, they kind of wanna do every kind of interaction and animation and everything that goes into that prototype, right? And they try and create it all in Figma.

[00:00:42]
Well, I understand that and I don't disapprove of that. I think it is perfectly fine, but sometimes it's kind of overkill and it's better off to kind of just do a basic clickable version. And then you can kind of brief the developer on what fancy animations you want and all of that kind of stuff rather than try and recreate it in Figma.

[00:01:09]
In part because Figma's pretty weak when it comes to clickable prototypes or interactive prototypes, should I say. It's buggy. Is it just me that finds it buggy? It's fine with basic, go from this screen to this screen, but once you start having overlays and modals, and things are animated and stuff like that, it often gets messy.

[00:01:32]
And you can waste a lot of time faffing around trying to get this to work when it would have been probably more sensible to say to the developer putting note in the Figma file saying, I'd like it to do this, please. I don't know whether the developers would agree, they might wanna actually see it, but that's my kind of feeling over it.

[00:01:50]
Quiet, hands go up, you beat, you won just by a fraction of a second, go for it.
>> Well, what about just doing a special element? So like if you need a specific interaction, you don't need to include it on a page but actually, if you're prototyping single element, then it's less buggy.

[00:02:05]
>> Yeah, is right. Yeah, I mean, sometimes you can do that. And that's a kind of nice middle ground if you can get away with just doing it in places. Also, of course, the other thing you can do is, if you show one example of an interaction on one part of the app doesn't mean you have to recreate it absolutely everywhere.

[00:02:26]
One example is often enough. So there are kind of ways around it. But yeah, sorry.
>> I'm curious about blocks and modules.
>> Yes.
>> Do you have a preference of what to call them? I hear a variety of different-
>> I'm gonna come on to that later.

[00:02:43]
So yeah, I'm gonna talk about some of the different elements and when you use them because that's a big part of it. So we're gonna talk about design systems. And part of problem with design systems is you focus very much on what these things look like, not necessarily when you should use them.

[00:03:00]
And that's just as important, but we'll come to that in a minute. So why do I like clickable prototypes? Well, it's a chance to start messing around with the aesthetics when you start doing a high fidelity clickable prototype. And stakeholders can see how the brand has been applied to the interface.

[00:03:18]
And also you can use, do some testing around aesthetics and the context that provides. Again, I talk about testing aesthetics in the user research and testing one, so I won't get into that too much here. Then, of course, with a clickable prototype you can do navigational testing, so you can test whether users are able to successfully navigate the interface and hierarchical testing as well, whether they can find the most important page elements on an individual page.

[00:03:50]
So I'm talking about the hierarchy within an individual screen because it's easy to miss pieces of functionality and that kind of stuff. And I will touch a little bit on prototyping in a minute, but there are some great prototyping tools out there that you might wanna check out.

[00:04:05]
Listen is one that I find is great for certain tests, and I'll tell you about those later. Maze is another I really like that, again, aren't too expensive. So they work really well and they're great for doing testing clickable prototypes. If you wanna go full blown, great, do a fully interactive prototype, and you've got the time and resources to be able to do it by all means, recreate as much of the finest experience as you possibly can and want to.

[00:04:37]
Including animations and the ability to interact with interface elements, I'm less worried about the animations but being able to show how different interactive elements work is pretty useful in a lot of cases. So these create a much more realistic experience and a basic clickable prototype. They act as a great specifications for developers, don't require developers to question you all the time about what you meant by this or how you want it meant it to work.

[00:05:08]
And a really big one is there a great sales tool, a really slick prototype, really console people. And when stakeholders all over or even if you you're looking at potential investors and stuff like that. Like I said, I don't think Figma is particularly good at those rich interactive prototypes.

[00:05:28]
There are loads of other tools around where you can import your Figma file directly into it and then create the interactions in there. Just in mind, is one that I like to look at I love the fact every time I mention a product that always gets written down.

[00:05:44]
You ignore my advice, but you're right down when I suggest a good app. [LAUGH] So yeah, that's really my approach to prototyping. I pick the right type of prototype for the right situation and go from there.
>> So you're taking your Figma files?
>> Yes.
>> Then putting it into there, you're not creating it all from scratch just in mind?

[00:06:10]
>> I wouldn't personally, because I like Figma and I know it, but I recognize its weaknesses. I think you can. I'd have to remember, but I think you can build, you you can't-
>> You're taking me to add all the different interactions.
>> Yeah, that's how I work.

[00:06:25]
So I'd go Figma for the flat screens, import into just in mind and finish all the interactions there. But you could build the whole thing in just in mind if you wanted to, right? It is your choice cuz one of the big things for me, and it's like, why has Figma not put this in?

[00:06:45]
You can't do data entry. You can't type into a text field, right? And even if that information isn't being saved or doing anywhere, it's a big part of a user flow in an application is data entry. And you can't do it within prototyping in Figma.