UX Prototyping has come a long way over recent years. Traditionally, planning or prototyping for websites was done with or wireframes. Both will give you a good roadmap, but neither are interactive as more advanced methods that exist today.
Prototyping itself isn’t a new concept. Inventors almost always create a prototype before the final product is launched. This gives the inventor, and testers, a chance to try the product in rough form and see what works and what doesn’t. They can then refine it until it’s ready for wide release. The same can be said for UX design.
By creating a prototype of a web page, application, or desktop software, you can find out if the user experience you’re trying to design will actually work in the real world. What you may find is that button placement is frustrating, color schemes don’t gel, and the process to navigate to the end goal is too convoluted. Great ideas in boardrooms don’t always translate to great experiences.
Prototypes Can Be Simple or Complex
is a great way to visualize things, but revising things or trying to make them interactive was pretty annoying or impossible. This method is used today for jotting down quick things – or showing flow on a whiteboard, but software is the preferred method.
sketch led to the wireframe – a slightly more formal, yet simple, way of prototyping. It’s basically a visual representation of page layout. Things like selection and visuals are often not included in the early phases. A wireframe can be as simple as blocks on a page.
Wireframes can be done on paper or drawn up digitally. Usually, they’re fairly static, but recent software as allowed them to get a little more complicated – and even partially interactive. They can also show various states of a page. For example, what it will look like when a menu drops down, or a video overlay plays.
It’s important not to get hung up on details here. There’s plenty of time for that later. There’s no rule that says you can’t use elements you’re considering for the final design in the wireframe. If you know your color or button shape, feel free to use it. However, don’t worry too much about the finer details of the design at this point.
Once you know what type of prototype you’re looking to build, you can get on with the act of actually designing it.
Building the Prototype Layout
title? If it’s a button, what’s the button do? You don’t have to use the final wording, here are the top websites for writing that can help with that, but have some indication of what’s happening.
Here are the questions you need to ask yourself when making this layout:
What is the goal? You want the user to do something on your site – what is it? Define your end goal, and make sure your UX prototype leads them in that direction.
Does it make sense? When you look over your prototype, does the sequence of events meet common sense guidelines? You may need to show the prototype to others that are seeing it for the first time for the best feedback.
Don’t be afraid to revise if every component doesn’t answer those questions – that’s the point of a wireframe!
You can go through many stages of prototyping. From a simple sketch to interactive wireframes, to almost fully functioning design mocks – before getting to the final product. Or you could jump from a paper sketch to coding. It’s completely up to you how advanced you want prototyping to be.
Prototyping should work out most of the bugs so that the coding process is mostly just finalizing things. This again will depend on what you’re doing, and how big the project is.
Remember, a UX prototype is just a plan. Its whole purpose is to make the user that will experience your design have the most pleasant process possible. Keep that goal in mind when putting your prototype together, and you’ll be much further ahead when the final product is ready to launch!
This blog is listed under Development & Implementations Community