Prototyping is the process where you produce an initial model of your website, app or other product to test the principles and concepts upon which it is based.
This article was initially posted in May 2018. As you can imagine, in a world where technology moves at break-neck speeds, a lot can happen overnight, never mind a few years.
The systems we use to create, design, test, and build our digital operations, communications, and playgrounds, is evolving as fast as our online needs, so with that in mind, we took another look at UX prototyping to build a clearer picture of where we’ve arrived in 2022.
UX Prototyping is, without question, about fine-tuning, about understanding needs, and about spotting issues and resolutions before we get to a point where fixing those problems would be significantly more troublesome and expensive.
The other essential element of UX Prototyping is communication—communication between stakeholders, users, designers, developers, and test subjects. Prototyping allows discussions and understanding that delivers objective and constructive analysis.
The question we feel compelled to ask during this introduction to the field is, “Is your chosen UX Prototype method the right tool for the job?” and is both a question of method and the software used to carry it out.
The UX Prototype Basics
This can be a very basic representation of the idea or quite a sophisticated, functional mock-up depending on what you are seeking to achieve with the prototype and what you are likely to use it for.
This can range from testing out your concept on actual potential users to getting buy-in from management or owners to providing a link between designers and developers. These are all valid reasons to prototype but they might require different degrees of realisation to be useful in achieving the objective.
There are three levels of prototype that you can use:
- Rapid, sketched paper prototypes;
- Lo-fi, monochromatic wireframes;
- High-fidelity, clickable mockups.
1. Rapid, sketched paper prototypes
These are a rough schematic of a site produced on paper showing the relationships between the various elements. These are typically used early on in the design and development for validating the fundamental, underlying concepts and testing the logic of the design. Basic flaws in reasoning, layout, comprehension and structure can be flushed out using this method.
2. Lo-fi, monochromatic wireframes
When you are satisfied that the fundamentals and basics of the concept are sound you can progress onto more sophisticated prototyping models such as lo-fi monochromatic wireframes. These are computer-based models but very stripped down, almost skeletal in their lack of detail so there is nothing to distract from the primary purpose which is to test out the working structure, architecture and functionality. Having this laid out barely without any real design or content helps to understand the working relationships within the elements and whether they work logically – and practically – to deliver outcomes to the user.
3. High-fidelity, clickable mockups
This is the more advanced phase of the prototyping process. It will require some effort and expense so you need to have made sure that any major wrinkles have been located and removed before getting to this stage (one of the main points of prototyping being to avoid making expensive mistakes, especially late in the development process).
This mock-up will probably contain most, if not all, of the features of the actual site – though not worked up to the level of detail or design of the final version. It will be an interactive, clickable model that emulates the site in its most important elements and allows users to test functionality and features in a real environment. Any issues or comments that are derived from this activity can be taken as direct and pertinent to the finished product itself so it is a useful process both in terms of accuracy and relevance when it comes to incorporating the feedback into the final product model.
Why UX prototyping is so valuable to research
There’s so much to learn from UX prototyping.
It’s great for onboarding a new project, updating or upgrading existing products, feeding back progress, testing new ideas or alternatives. In fact, there’s an almost infinitely long list of advantages to prove why the practice is such a prominent part of the design process.
Prototypes allow deliberation before the final design and build parts of the process get underway. However, with the latest sophisticated tools, there’s an option to skip the wireframe part of the process and jump straight into a more complex and polished prototype.
Sometimes your users need to see a more representational picture; and sometimes, it’s a distraction
Here’s where making the choice becomes complicated. Skipping wireframing and heading straight to a hi-fidelity presentation can be advantageous or problematic.
Stripped out simplified wireframe prototypes give stakeholders and test subjects a distraction-free version of the project to consider. Yet, sadly, that doesn’t always come across. Wireframes demand a lot from our imagination, whether we want users to imagine a final page or not.
For some, brand colours, logos, images, and animations take the focus away from what they should be concentrating on. However, placeholders, dummy copy, repeated sample images, and labels can be just as distracting as the real thing if the user hasn’t got a clear idea of their role.
In some cases, it’s sample data, images, layout, or even branding that drives the operator’s decisions so that a wireframe could be missing essential components relevant to the prototype discussion.
The final content is highly likely to influence user decisions, so when it comes to prototyping, UX design can easily become a ‘chicken or the egg’ situation. So, which is right or wrong? It boils down to each individual project.
When should your research include UX prototyping?
The UX design thinking process follows five steps:
- Empathise
- Define
- Ideate
- Prototype
- Test
However, moving backwards and forwards through those sections is essential to end up at your most efficient and proven version. It’s not a linear process. Each stage introduces points for discussion, which could force you to re-evaluate over and over. Prototyping will often send you back to the idea stage, saving time and money on wasted resources before moving into testing.
Choosing the most suitable method for each situation is defined by the problems, potential solutions, your user interviews, and what you need to move forward. Sometimes that decision will be obvious; at other times, well, maybe not quite so much.
What kind of test assets can be created?
With the latest applications, prototyping can produce almost anything you need. However, that depends on the package you use and its limitations. Each package offers varying USPs, so ensuring the one you choose covers everything you need.
Let’s take a moment to talk about Figma
We spoke about a few prototyping tools in a previous article about the benefits of prototyping, most of which are still in operation.
Figma is one of the latest design packages creating a big stir in UI and UX design. While we’re not going to preach to anyone on the merits of its full range of capabilities in this article, we do want to give it a special mention, as it’s breaking new ground with its collaborative measures, communication facilities, and prototyping ease and options.
Using Figma will reduce, if not remove, the need for many third-party processes, with straightforward prototyping implementations that feel like the real thing. Figma allows the designer to create a simple wireframe or complex animated prototypes, so moving between lo-fi and hi-fi options becomes a simplified process.
Figma is a step ahead when it comes to collaboration. Taking full advantage of being cloud-based, you can bring in as many or as few contributors as you want, each working together on the same project in real-time and communicating through familiar tools as they do. Operators can comment on-page or via a Slack discussion, a communication channel we’re all well aware of and already comfortable with.
Commenting and feedback are immediate and driven by what each partner sees on screen. Not only that, but each user can view the build as it happens, utilising other users’ views in observation mode—all worry-free with a complete version history backing up all the essential stages and instances.
Figma certainly looks like the future of UX design and prototyping; it’s only a matter of time before its competitors start to introduce the same steps forward and new features into their products.
Which UX prototyping method is the best fit for your project?
Variety is the spice of life, and in the UX design world, that’s as true a statement as anywhere else. Each project or stage within a project brings unique requirements and problems. Delivering the simplest way to understand each process requires experience making those ideal prototyping choices.
If you’re confident that you understand the process well enough to make that call, then that’s great news; we’re ready to hear from you and help you along your journey. On the other hand, if you’re not quite sure which your best option may be, we’re happy to help you with that and get you moving.
Developing websites, apps and other electronic products can be a very expensive exercise, so it is important that this type of testing is incorporated throughout the development process. Prototyping is an important tool in ensuring a smooth transition from concept to final product. If you would like to know more about this technique, why not ring us on +44(0)800 0246247 or email us at hello@ux247.com
[…] Click to see full answer […]
[…] UX prototyping methods [Link] […]