How to choose the right UX prototyping tool

9 minutes read

Choosing the right tool for the job is important for many things in life, and it’s certainly key for rapid prototyping. But with so many UX prototyping tools out there how do you know which tool to choose? How do you know which tool is going to enable you to quickly and easily create a prototype? How do you know which tool will best help you to test out a design and to gather feedback? I’m going to run through some questions that will help you to choose the right UX prototyping tool time and time again.

Do you even need a UX prototyping tool?

The first question you should ask is whether you even need to use a UX prototyping tool to create a prototype. Very early on in the design process it can often be quicker to create a simple paper prototype. In her paper prototyping book Carolyn Snyder says that “Paper prototyping is a variation of usability testing where representative users perform realistic tasks by interacting with a paper version of the interface that is manipulated by a person ‘playing computer,’ who doesn’t explain how the interface is intended to work.” Paper prototyping is a great way to very rapidly test out a low fidelity version of design, such as a sketch design.

If you’re a web coding ninja (or aspire to be one) then instead of using a UX prototyping tool it might make more sense to create an HTML prototype instead. Using frameworks such as Bootstrap and Foundation it is now much easier to quickly create a working responsive website which not only enables you to gather feedback, but also potentially reduces the amount of work that the development team have to carry out.

What will you be prototyping?

OK, so you’ve decided that you do indeed need to use a UX prototyping tool. You therefore want to think about what it is you need to prototype. Is it a mobile app? Is it a website? Is it a desktop app? What you need to prototype will influence the sort of tool you might use.

Prototyping websites

If you need to prototype a website then you have a lot of options. You could use a responsive website builder such as Webflow or Weld. Alternative you could use a prototyping tool such as Axure or Justinmind that generate HTML based prototypes. If you already have some page mock-ups then you could use a tool such as InVision, Concept.ly or Solidify to quickly create an interactive web prototype.

Prototyping mobile apps

Whilst you can use tools such as Proto.io, Axure and Indigo studio to prototype mobile apps, if you want to create native prototypes (that run like a native app would) then you will need to use a dedicated mobile app prototyping tool such as Pixate, Form or Origami. If you’ve already got some screen mock-ups then tools such as InVision, Concept.ly and Solidify allow you to quickly create a mobile prototype and also support a lot of mobile gestures, such as swipe, pinch and drag.

Prototyping desktop apps

If you need to prototype a desktop app then your best option is generally a UI editor and prototyper such as Axure, Indigo studio, Justinmind or UXPin. These tools will generate a web based prototype, rather than a native app but this is usually good enough to get feedback. It’s also worth checking that a tool comes with libraries for Windows or iOS as this can save you a lot of time and effort.

What type of tool do you need?

UX prototyping tools come in all shapes and sizes. For the purposes of categorising different tools I’ve defined the following types.

• UI editors and prototypers – Tools that allow you to create and edit a UI, along with creating an interactive prototype. Most tools come with an extensive library of UI widgets and components and support dynamic content and interactions.
• Mock-up prototypers – Tools that allow you to create an interactive prototype from existing screens and UI element mock-ups. Mock-ups will need to have been created beforehand in a tool such as Adobe PhotoShop and then imported into the tool.
• Mobile app prototypers – Tools that allow you to create a native mobile app prototype. Like mock-up prototypers screens and UI elements will need to have been created beforehand and then imported into a tool.
• Website builders – Tools that allow you to create responsive websites using a drag and drop GUI interface.
• Presentation add-ons – Tools such as Keynotopia that provide UI component libraries for a presentation tool, such as PowerPoint, Keynote or OpenOffice.

The type of UX prototyping tool that is most suitable will depend on the type of prototype that you need (see previous question) and whether you want to create the UI using the tool, or just use it to create an interactive prototype.

How much interaction do you need?

An important question is how interactive do you need the prototype to be? Are static screens with some clickable areas sufficient, or do you need something that supports more complex interactions? Mock-up prototypers such as InVision support some interactions, such as hyperlinks and slide-ins, but if you want a truly interactive prototype then you’ll probably need a UI editor and prototyper such as Axure, or a website builder such as Webflow. Both these types of tools allow you to easily prototype UI elements, such as dropdowns, menus and accordions, along with more complex interactions such as drag and drop.

At what stage of the design process are you?

Ideally you will be creating multiple prototypes during a UX design project. For most projects there should an early low fidelity prototype (i.e. a wireframe or sketch showing relatively little detail) that can be used to test a design concept. There should then be a higher fidelity prototype to test a more iterated version of the design. The stage of the design process that you’re at will influence the type of UX prototyping tool that is best. Some tools such as Balsamiq and MockFlow are more geared towards creating early, low fidelity, more wireframe like prototypes. Other tools, such as InVision and Concept.ly are more typically used to create high fidelity prototypes from designs that have already been created in something like Adobe PhotoShop.

How much time and effort are you prepared to invest learning a new tool?

It’s an inescapable fact that more advanced UX prototyping tools with lots of very powerful features, such as Framer and Webflow are going to require more time and effort to learn and master. You need to think about how much time and effort you (and maybe your team) are willing to invest in a tool. Do you need a tool such as Balsamiq that is going to be less powerful, but that will require relatively little time to learn? Alternatively are you willing to take on a tool such as Axure with a higher learning curve, but that ultimately allows you to do more?

Web app or native app?

UX prototyping tools generally come in two different flavours. There are native Windows and Mac apps (including Keynotopia, which is really just a set of libraries for PowerPoint and Keynote) and then there are web apps. Web apps obviously run through a web browser and are nearly always charged by the month. Native apps are run like a regular program and will typically require a one-off license payment.

I personally prefer native apps because you are not dependant on a good Internet connection and performance is typically better. However because web apps are typically pay as you go they can work out cheaper and of course make it easier to chop and change your tool of choice.

Will you be collaborating on the prototype?

Design is a collaborative effort. For a project you’ll invariably be getting feedback from internal stakeholders and clients (usually whether you like it or not) and will often be working on designs with other people. It’s therefore important to consider the collaboration features supported by a tool. Many tools allow for feedback to be captured via the tool, usually in the form of annotations and comments. This can be a real life saver as it makes it much easier to gather and correlate feedback. Some tools such as Axure (Pro only), HotGloo and Justinmind also support shared team projects. This allows multiple people to work on the same prototype at the same time.

What libraries exist?

If you’re looking to use a tool to create the UI, along with an interactive prototype then you’ll want to find out what sort of UI libraries are available. Using pre-existing libraries makes it much quicker to create a prototype. Ideally there should be a library available for the platform that you need to prototype, whether it’s Web, Android, Windows Mobile, iOS, Windows or OSX.

How many other people use the tool?

The more people that use a tool the better because it will mean that the tool is likely to be frequently updated, and that there is a healthy user community out there. The more popular tools out there such as InVision, Axure and Indigo studio have a large community on-hand to help answer questions, to share templates and example prototypes and to build custom libraries.

How much are you prepared to pay?

Sorry, but as you’d expect most UX prototyping tools are not free, and even those such as InVision, MockFlow, Webflow and Weld that do have free accounts will restrict what you can do with said free account.

Powerful prototyping tools such as Axure, Indigo studio and Justinmind are usually between $300-$500 (USD). For web apps expect to pay $15-$25 (USD) a month for a standard account.

My pick of the bunch

Blimey. There’s a lot to think about isn’t there! Hopefully that has helped you to think about the best UX prototyping tool for you and your team. Below I’ve outlined what I think are the current pick of the bunch for the various tool types. You can also use the link below to see a full list of UX prototyping tools, or use one of the links at the end of the article.

Full list of UX prototyping tools

Axure RP (UI editor and prototype)

I might be a little biased, what with me being an Axure black belt and all, but I still think that Axure RP is the best UI editor and prototype out there. It’s quite expensive at $289 (USD) for a standard license but it’s very powerful and lets you quickly create both low and high fidelity interactive prototypes. There are lots of libraries out there, the Pro version supports shared projects and it now has a nice Android and iOS app for easily testing mobile prototypes.

Mockplus RP (Interactive prototype)

Mockplus RP brands itself as a fast and free online prototyping tool that makes your ideas fly. Mockplus is a great web-based prototyping tool and a good alternative to Axure RP. It has a a free version, which allows you to create 10 active projects and to invite up to 9 collaborators.

InVision (Design prototype)

InVision bills itself as the world’s leading prototyping, collaboration & workflow platform (a pretty grand statement). It not only allows you to create interactive prototypes from imported designs, but is also useful for collecting feedback, for collaborating on designs and for generally keeping tabs on a design project. InVision now even supports remote mobile user testing. You can get started with a free account which limits you to just the one project. A starter account with up to 3 projects is $15 (USD) a month. A Pro account with as many projects as you like is $25 a month.

Pixate (Mobile app prototyper)

Pixate (now owned by the mighty Google) is a powerful mobile app prototyper that is completely free. It allows you to create native mobile prototypes so what you see on the screen is as close to the real thing as possible. Like most other mobile app prototypers Pixate requires assets to be imported into Pixate, so you’ll need to have already created UI components and elements.

Webflow (Website builder)

Webflow bills itself as the best professional website builder for code-free responsive design. It allows you to build a fully responsive website using a drag and drop GUI. There are templates available to start from and a growing community of users. A free account limits you to just one site with only 2 pages. $14 (USD) a month gets you 1 site with up to 80 pages and $16 a month up to 20 sites with up to 80 pages per site.

See also

• Full list of UX prototyping tools (UX for the Masses)
• UX Design tools (UXdesign.cc)
• Designer’s Toolkit: Prototyping Tools (Cooper)
• Top 10 evaluation criteria when selecting a prototyping tool (Savah)
• Five app prototyping tools compared: Proto.io, Pixate, Origami, Framer & Form (Tes Mat)
• Three more prototyping tools compared: Principle, Flinto for Mac, and Tumult Hype (Tes Mat)

Photo credits

• Cardboard robot fight – W1N9Zr0
• 3D printer in action – Jonathan Juursema