In this article, I’m using the UX prototype built in UXPin to show how you can test the feasibility and usability of your website.
I’ll talk about 10 reasons why interactive UX prototype is better than a traditional one. Also, I’ll touch upon some terminology and give insight on how you can use your UX prototype.
UX-prototype: Benefits
- Greatly reduces development resources (20-40% fewer corrections and alterations).
- Reduces the number of product versions (3rd or 4th product version can already be a beta release).
- Allows to avoid designing mistakes.
- A fast and easy way to demonstrate what the product will look like.
But, more importantly, it gives you the taste of how your website actually works.
About UX prototype
What is a UX prototype? It’s your website but without content and design. It consists of html templates, with all links in place and working. UX prototype looks like a real-life website. It has clickable logos and menu buttons, fully-fledged structure (sections, milestones, etc.), operational forms, etc.
Upload your UX prototype to the web to be able to open it in your browser, test it on different devices, share links with your team members and partners, and do all kinds of things to make sure your product is smooth and consistent.
This kind of prototype is referred to as full, accurate, interactive, and so on. Nielsen Norman Group came up with the term clickable. As for me, I prefer to call it “interactive UX prototype”, or simply “UX prototype.” I believe this term is the best at describing the purpose of this mockup, which is to get a visual overview of the future website and improve the user experience.
In this case, wireframes and visual mockups are totally useless because you can perform user testing sessions with these static assets.
UX prototype vs. traditional prototype
1) Highlights and priorities
To manage user’s attention, you can highlight specific content using:
- size of elements;
- color;
- call-to-action texts.
When testing your prototype, you can check users’ reaction to each of these highlights by running surveys. Plus, you can create a heat map for each template and count the number of clicks and conversions. By changing and adjusting highlights, you can affect the way the user navigates the website as early as design stage.
Example: See the airline tickets website in the screenshot above. The homepage features a USP, which promotes the opportunity to pay for your tickets in installments. However, if the testing shows it’s not a good solution, we’ll shift it to the lower part of the page.
2) Work area: Adaptive or fixed?
The issue of work area size (content + navigation) is of crucial importance. A prototype with properly arranged blocks will help you figure out this issue before a designer joins the process.
3) Navigation + filters, lists, etc.
Your prototype must have the same menu (i.e. with the same words) as your future website. This will help you estimate the size and visual appearance of your menu. By testing pages with filters (e.g., list of products), you’ll be able to decide which types of filters (by price, date added, popularity, etc.) to choose. Furthermore, you’ll be able to see whether switching between different filters is easy.
Pay special attention to the CTA button. This element is of paramount importance, especially for e-commerce projects. UX-prototype allows you to test and optimize the size, arrangement, and text of CTA button. All this would be impossible if you used static images.
4) Preloaders and content upload
If a form or a page features content upload (using a button or scrolling), you can add a virtual preloader or change the page after upload. This is how you can see whether it’s a good decision and whether or not you should just make a simple transition to the next page.
5) Content and website structure
Using real-life content (not all of it, of course!) significantly reduces possible changes to both design and functionality.
Your prototype must include a few pieces of news, product cards, and content pages. This way, your prototype will look like a real website while containing no more than 20-30 pages.
6) Images
It’s not uncommon that prototypes have rectangles instead of images. However, this doesn’t give you an understanding how the image affects the highlights, harmonizes with the text, and so on. But more importantly, you can’t see what size of the image (or its preview) must be used on the website.
The takeaway? In your prototype, be sure to use real images (e.g., the ones you got from the client) that haven’t been adjusted by the designer.
Ad banners are another important thing. Check the ad system standards to figure out the right size of your banners. This means you must take a real banner (or its code) and insert it into your prototype.
7) Service messages
Service messages are something many developers ignore at the prototyping stage. This is a huge mistake. The messages the system sends to the user and the way the user responds to them (cancels the order, goes back to home page, goes to help section, etc.) are the core of the user experience.
8) Forms and entry fields
When working with forms, be sure to focus on these things:
- required/optional fields;
- entry templates (text, data, digits, number of characters);
- additional elements (autocomplete, mouse hover hints);
- step-by-step structure.
By testing the prototype form, you can estimate time you need to complete it and detect potential pitfalls. If needed, you can correct the form right on the spot (e.g., make a required field an optional one).
9) Mobility
For hybrid and adaptive websites, as well as mobile apps, you can check how your website is displayed on iOS and Android. You’ll have to thoroughly test your prototype (tapping, scrolling, screen rotation, etc.) on different mobile devices and in all popular browsers. Out of all bullet points on this list, this is probably the most informative one in terms of user experience.
10) Technical features
The CMS your website or external system (integration) will be using has its differences and technical limitations. Testing a UX prototype will help CMS experts (programmers, partners) detect potential bottlenecks and features that will be difficult or outright impossible to implement.
What’s next?
Once testing is complete, you can give the prototype to designers and programmers and continue improving it as the development process is progressing.
If there are differences of opinion, it might be a good idea to create and test several prototype versions at the same time.
Prototype vs. MVP
UX prototype and minimum viable product (MVP) pursue different purposes. MVP can be a simple landing page with a request form. It’s enough for estimating a business model (buy traffic, collect requests, calculate margin, etc.). MVP can be successfully used for our airsales project. In other words, MVP doesn’t need a prototype and can be created before or at the same time as the prototype.
Alternatively, MVP can be the first product version based on the prototype but it’s definitely a long way to go.
How does UX prototyping change the role of designer and programmers?
There is no denying that such an approach to prototyping affects the role of a designer as an interface builder. At the same time, it’s important to remember that:
- It would be only right to involve a designer into the designing process. A skilled designing programmer would do no harm either.
- Designer no longer has to make multiple adjustments and corrections to the design, which frees up plenty of time for other tasks.
Because the prototype contains all the technical details, a requirements list shortens to one page.
How do I get feedback?
There is no lack of possibilities to get feedback on your UX prototype. You can ask your friends and acquaintances to test it or commission a team of professional testers. Usability lab is another option. Alternatively, you can publish your prototype to the web, insert WebVisor codes, and monitor the users’ behavior. At the same time, unlike MVP, UX prototype isn’t fit for A/B testing.
Tools for building UX prototypes
For me it’s important that I get an easy-to-use set of web pages to work with in my browser. Whether it’s Akshura, Pencil Project or some other system, it doesn’t matter. Mobile app developers are lucky to have proto.io, which is an awesome software for building a prototype wit fully-fledge functionality and design.
What projects need UX prototyping?
UX prototype works great for both small- and medium-size projects. In case with small projects, UX prototyping is even better because it requires less coordination efforts.
Big companies tend to have their own approaches to website development, using Waterpool, Agile and other techniques. In the developer community, there is unanimous opinion on which solution works the best and what is the role of a prototype.
Wrapping it up
Creating an interactive UX prototype is a compelling and time-consuming process. At the same time, it reduces the time and resources needed to build a website. Here are the key benefits of UX prototyping:
- Allows to detect problems with content, coordination, terminology, functionality, etc. at early stages.
- Gives fast feedback that allows to make corrections without a designer or programmer.
- Helps outline the key features in the interface and configuration. You end up with less forks and product versions.
But more importantly, UX prototype delivers a true user experience and drive! This is what we love about our projects.