24 Top UX Prototyping Tools with Downloadable Comparison Table

UX Prototyping Tools

The sheer amount of choice of UX prototyping tools can be pretty overwhelming, so here’s an overview of the top 24 tools, together with a FREE downloadable pdf table so that you can easily compare them.

Download my FREE 24 UX Tools Comparison Table >

Atomic

Atomic

Atomic
Description Powerful and scalable prototyping that lets you tackle complexity with confidence. Use simple interactions or advanced animation to bring your Sketch designs to life.
Verdict Create prototypes for web and mobile. The structure is similar to Sketch in that you create Pages and Artboards, which adds a level of familiarity to Sketch users.
App type Web app
Fidelity Lo to hi
Collaboration Feedback tool available
Link atomic.io

Axure RP

Axure

Axure
Description Create simple click-through diagrams or highly functional, rich prototypes with conditional logic, dynamic content, animations, math functions, and data-driven interactions without writing a single line of code.
Verdict Powerful tool that allowing detailed interaction to be prototyped for websites and apps. A fairly steep learning curve.
App type Installable app for Mac and Win
Fidelity Lo to hi
Collaboration Feedback tool available on live prototypes via the web
Link axure.com

Balsamiq

Balsamiq
Balsamic
Description Balsamiq Mockups is a rapid wireframing tool that helps you Work Faster & Smarter. It reproduces the experience of sketching on a whiteboard, but using a computer.
Verdict Quick to learn and put together wireframe designs with ease.
App type Installable app for Mac and Win and web app
Fidelity Lo to hi
Collaboration Feedback tool available on live prototypes via the web app only
Link balsamiq.com

Easee

Easee

Description Easee is a web animation tool for designers. Create smooth animations that can be exported as CSS so that you can import them into your own web project.
Verdict Short learning curve to bring your designs to life.
App type Wab app
Fidelity Hi
Collaboration Unknown ATM
Link easee.design

Flinto

Flinto
Flinto

Description Flinto lets designers quickly make interactive prototypes of their mobile, desktop, or web apps.
Verdict Comprehensive app, allowing you to create anything from simple tap-through prototypes to comprehensive prototypes with impress interactions. Sketch images can be imported and transitions and user behaviours can be easily added.
App type Mac app and web app (Flinto Lite)
Fidelity Lo to hi
Collaboration Feedback available in the tool and shared projects
Link flinto.com

Fluid

Fluid
Fluid

Description Easier web and mobile app prototyping for people who care about products
Verdict Powerful and easy to learn. Design or upload screens and add animated interactions
App type Web app
Fidelity Hi
Collaboration Invite collaborators and stakeholders to review and comment on your prototypes
Link fluidui.com

Form

Form
Form

Description Build and customize native prototypes directly on device. Prototype with the latest material design components, touch ripples, and more.
Verdict Prototype mobile apps. Fair decent learning curve
App type Mac app
Fidelity Hi
Collaboration No feedback tool
Link relativewave.com/form/

Framer

Framer
Framer

Description Design the impossible with Framer. Start with simple code to bring your design to life. Test it on any device, iterate as you go and share easily for feedback. Pioneer new interaction patterns or create groundbreaking animation. No limits, no constraints.
Verdict A great tool for prototyping complex interaction designs and animations for mobile
App type Mac app
Fidelity Hi
Collaboration No feedback tool
Link framer.com/

Hype

Hype
Hype

Description Create beautiful HTML5 web content. Interactive web content and animations made with Tumult Hype work on desktops, smartphones and iPads. No coding required.
Verdict Uses a keyframe-based animation system, however this comes with a high learning curve. It’s a good tool for websites prototyping.
App type Mac app
Fidelity Hi
Collaboration No feedback tool
Link tumult.com/hype

Invision

Invision
Invision

Description The world’s leading prototyping, collaboration & workflow platform. Upload your design files and add animations, gestures, and transitions to transform your static screens into clickable, interactive prototypes.
Verdict Low learning curve and it is well supported int he community
App type Web app
Fidelity Hi
Collaboration Feedback tool available with user testing
Link invisionapp.com

Justinmind

Justinmind
JustinMind

Description Justinmind provides the best solution to prototype web and mobile apps. You can define apps for Web, iOS, and Android in a few clicks, without writing a single line of code.
Verdict Can create sophisticated prototypes with great tools, however there is fairly decent learning curve. The Free version is very limiting.
App type Installable app for Mac and Win
Fidelity Lo to hi
Collaboration Present your prototype and invite stakeholders to give feedback
Link justinmind.com

Keynotopia

Keynotopia
Keynotopia

Description Keynotopia transforms Keynote and PowerPoint into the best rapid prototyping tools for creating mobile, web and desktop app mockups
Verdict Low learning curve
App type Requires Keynote, Powerpoint or OpenOffice
Fidelity Lo to hi
Collaboration No feedback tool provided
Link keynotopia.com

Marvel

Marvelapp
Marvel

Description Simple design, prototyping and collaboration. Create screens directly in Marvel or add your images from Sketch or Photoshop, then add gestures and transitions.
Verdict Create prototypes for the iPhone, iPad, Desktop, Apple TV, Apple Watch and Andrpoid
App type Web app
Fidelity Hi
Collaboration Clients and colleagues can comment directly on each screen or drop annotations
Link marvelapp.com

MockFlow

Mockflow
Mockflow

Description MockFlow is an online design suite providing collaborative web services for creative designers and usability engineers
Verdict A good tool for wireframing websites. A fair learning curve.
App type Web app
Fidelity Lo
Collaboration Feedback tool available
Link mockflow.com

Mockingbird

Mockingbird
Mockingbird

Description Mock up an application and show what’s important: the idea, the information, the interaction
Verdict A good tool for wireframing websites
App type Web app
Fidelity Lo
Collaboration Clients and teammates can edit wireframes with you in real time
Link gomockingbird.com

Mockplus

Mockplus
Mockplus

Description Fast interaction, fast design, fast previewing and fast learn. No code or technical expertise required. Prototype design is easier than ever.
Verdict Great for websites and mobile apps. Fair learning curve
App type Installable app for Mac and Win
Fidelity Lo to hi
Collaboration No feedback tool
Link mockplus.com

Origami

Origami
Origami

Description Explore, iterate, and test your ideas. A new tool for designing modern interfaces. Copy anything from Sketch and paste native layers into Origami Studio. Then quickly adjust, add behavior and animate any layer property without going back.
Verdict Perfect for creating sophisticated mobile prototypes with realistic animations and interactions
App type Mac app
Fidelity Hi
Collaboration No feedback tool
Link origami.design

Principle

Principle
Principle

Description Principle makes it easy to design animated and interactive user interfaces. Whether you’re designing the flow of a multi-screen app, or new interactions and animations, Principle lets you create designs that look and feel amazing.
Verdict Quick to learn
App type Mac app
Fidelity Hi
Collaboration No feedback tool
Link principleformac.com

Proto.io

Proto.io
Proto.io

Description Create fully-interactive high-fidelity prototypes that look and work exactly like your app should. No coding required.
Verdict Easy to make a quick mock-up using the extensive library of ui elements and nice transitions are available. Quite a high learning curve.
App type Web app with players for iOS and Android
Fidelity Lo to hi
Collaboration Reviewer accounts are available for clients to give feedback
Link proto.io

UXpin

UXpin
Unpin

Description Speedy wireframing. Seamless transition from wireframes to mockups & prototypes. Fully collaborative across the entire UX design process.
Verdict Great for websites and mobile apps. Supported by a large community and extensive libraries.
App type Web app
Fidelity Lo to hi
Collaboration Easily to share prototypes with stakeholders and gather feedback
Link uxpin.com

Vectr

Vectr
Vectr

Description Vectr is a free graphics software used to create vector graphics easily and intuitively. It’s a simple yet powerful web and desktop cross-platform tool to bring your designs into reality.
Verdict Prototypes can be designed on the web or desktop app for Win and Mac and are kept in sync. Not as feature rich as other apps atm, however this will change.
App type Installable app for Mac and Win
Fidelity Lo to hi
Collaboration Collaboration is on the roadmap
Link vectr.com

Webflow

Webflow
Webflow

Description Build dynamic, responsive websites without writing code. Launch with a click, and enjoy the fastest, most reliable hosting on the web. Or export clean, semantic code to hand off to your devs.
Verdict Webflow gives you the power to build websites your way — visually — while producing clean, standards-compliant HTML, CSS, and JavaScript that developers will love. The down side being a high learning curve.
App type Web app
Fidelity Hi
Collaboration Shared projects (Team version only), no feedback through tool
Link webflow.com

Xcode

Xcode
Xcode

Description Xcode 8 includes everything you need to create amazing apps for iPhone, iPad, Mac, Apple Watch, and Apple TV.
Verdict Perfect for cutting down on redundant work and misunderstandings when designing and developing mobile apps. Software engineers can immediately iterate the work of a designer. A pretty steep learning curve.
App type Mac app
Fidelity Hi
Collaboration No feedback tool
Link developer.apple.com/xcode/

XD

XD
XD

Description Go from idea to prototype faster with Experience Design CC, the first all-in-one cross-platform tool for designing and prototyping websites and mobile apps.
Verdict Easy to use and powerful
App type Installable app for Mac and Win
Fidelity Hi
Collaboration Feedback tool available
Link adobe.com/uk/products/experience-design.html

Get your FREE UX Prototyping Tools Comparison Table

A handy comparison table of the top 24 UX Prototyping tools to help you make a choice.

Download my FREE 24 UX Tools Comparison Table >

UX Prototyping Tools Comparison Table

Need help prototyping?

Our in house team of UX Design and Research Experts have unrivalled experienced with mobile prototyping design and research – our experience goes right back to the first ever smartphone don’t you know 😉

Email us now for your complimentary initial consultation.

Inspiration: Mockplus

Baby duck syndrome: Why users hate change and what you can do about it

How many times have you heard people complaining because the updated version of Facebook is awful? Every time there’s a change, it all kicks off again… everyone becomes angry and adamant they’ll never use Facebook again but then they get used to the change and forget all about it until next time. There’s even been a timeline created of all the Facebook backlashes.

Facebook is just one example we can all relate to, but there are many across the internet including many ecommerce websites and apps. But why is it that people are so reluctant to changes within websites, software and apps? This reluctance that users have towards change is called ‘Baby duck syndrome’.

Baby duck syndrome

But what do baby ducks have to do with users behaviour?

Well, the name comes from psychology and ethology (the study of animal behaviour). Konrad Lorenz, studied animal behaviour and he observed how new born ducks that leave their nest early, instinctively bond and ‘imprint’ with the first moving object they see (in Konrad’s case this happened to be him).

The same thing happens to people when they’re online. Users get used to and learn how to interact with a website or software in a certain way, this can take some time to do so they’ve also invested effort into doing this. Once they are familiar with the platform and like it, they struggle to change their habits. In general, people perceive the familiar as easier and more efficient and the unfamiliar less so; they have a tendency to “imprint” in the first system they learn, then judge other systems by their similarity to the first. Changes to the existing system will be perceived as less easy to use (even if they do actually make it easier) because they require some learning and therefore effort on the users behalf to get used to the new functionality.

This is not isolated to the digital environment either. In the offline world people are also reluctant to change – they feel safer when they can maintain a routine and an instinctive inner strength motivates them to stick with what they’ve learnt, with what they know, because it feels safer for them.

When a radical change is made to something already viewed as useful, but does not fundamentally change the experience, people rebel – and they rebel quickly.

The dilemma for ux designers and product owners

So, your dilemma is this… if you keep the same interface, users will be happy and feel comfortable, but the risk is that you end up stuck with an interface that doesn’t change with the times and gets stuck in the past. It may well have issues to do with the UI and interaction that need to adapt to improve the user experience. However, if you change it significantly, even if it’s for the better, your users are likely to rebel against the change and deem the previous version as better (even if you’ve tested and proved that it was actually worse).

Keeping your product updated is important, but so is keeping your users happy and providing them with an interface that’s easy and pleasant to use. Angry users and social media aren’t a good combination!

How to make changes with minimal upset to users

  • People need to feel reassured and supported. You need to provide assistance and to guide them through the transition phase.
  • Be there for your users, support and explain the nature of the changes, reassure them about how to do it. Don’t make your users feel forced or imposed, let the interface communicate with them rather than instructing them to make the change.

If you take the risk to make changes to your website, app or software and if you are ready to upset you users, you should also be 100% sure that the changes you are introducing worth the risk.

  • Conduct user testing. Observe users using the new version of your website or software, take note of the feedback and keep the change process open and in continuous progression.
  • Lessen any fear of the change by making your users aware that these changes have been tested with them already and that you’re making the change for their benefit. Explain why.
  • Instead of changing everything at once, make a series of small incremental changes. This is what Facebook do now and for most users small changes go totally unnoticed, despite them leading to the same end result eventually.
  • Interact and listen to your users, tweeting, facebooking, reading forums and taking in their concerns and expectations.
  • Test your interface to gather concrete proof that your users will understand the improvement and finally embrace it.

Need help or advice?

Are you considering making changes to your website and are concerned about how your customers will react? We recommend

Other posts you may find interesting:

What is User Testing?
5 user tests every Product Manager should commission

Keep It Usable beat hundreds of entrants to the DADI awards

DADI Awards Usability Finalist

We’re excited to announce that we’ve made it as a finalist in the DADI Awards Usability category for our redesign of KOOTH.com.

Katy Thomson of The Drum told us:

We received over 550 entries this year so getting through to this stage really is a huge achievement. Your work has impressed the panel! You should be very proud of you and your team’s hard work.

For those of you who may be unfamiliar with KOOTH, it’s the UKs most successful online mental health platform for young people. KOOTH.com provides online counselling to 10,000 young people with potentially life-threatening issues such as self harm and suicide through to everyday worries at school or home.

Like many pieces of software, it had been designed originally by experts, in mental health and IT. They had a very successful online service and were clearly incredibly knowledgeable and passionate about their service. They care greatly for their end users and recognise the importance of an easy to use  and visually engaging platform, so, having heard of Keep It Usable and our reputation, they commissioned us to redesign KOOTH to make it easier to use not just for young people, but also for their counsellors.

3 Kooth Home Signed out

So far, the team have had lots of positive feedback from young people so this is a huge step in increasing the appeal KOOTH has with the target audience as well as increasing engagement with the platform to encourage return use and word-of-mouth referrals.

The results have been phenomenal.

The KOOTH team have also had lots more enquiries and contract wins following the redesign. Feedback from customers and potential customers has been incredibly positive. As well as the UX and visual redesign, KOOTH now incorporates advanced reporting tools that make commissioners lives much easier so they now have the confidence that young people will use the platform and they can easily see the impact and results for their region.

Of course, there’s a huge monetary return on their investment in UX for the KOOTH team. The time saved with the redesigned chat views provides much added value to service users and commissioners based on increased efficiency and effectiveness. The increased appeal to young people should see increased word-of-mouth referrals and increased return use. With the KOOTH team, we wanted to advance the current site to create a place that felt even more young person friendly and remove any existing usability concerns. With new combined chat and case note views, the young person gets even more quality counsellor time. We envisage that with the redesigned and streamlined backend (in collaboration with the team), that less money will be spent on re-training and supporting counsellors in how to use the system.

KOOTH has always been an amazing service for young people, but together, with our combined expertise, we’ve refreshed KOOTH to maintain it’s position as the leader in online mental health for young people and set a very high benchmark.

World Mental Health Day 2013

World Mental Health Day

Today is world mental health day and it is a crucial day to raise awareness of mental health and wellbeing issues that can effect anyone at anytime.

We’ve been heavily involved in mental health for the last few years. It’s an area where having a good, simple user experience designed by specialist ux psychology designers is absolutely crucial. When someone is distressed, frustrated, stressed, angry, confused, the last thing they need is an interface that worsens their current mental state.

Qwell

Qwell Counselling - Mental health software application for adults

Qwell is a software application that we designed for Xenzone. The engaging user centred has ease of use at the forefront.
Aimed at adults, Qwell provides a safe, reassuring online therapy environment run by fully trained counsellors.

Read the Qwell Case Study >

Kooth

Following a successful launch of Qwell, we were invited to redesign the hugely successful Kooth. Kooth is an award winning online counselling platform for young people. It is commissioned throughout the UK and has helped tens of thousands of young people.

At the start of the project, we held workshops and focus groups with young people in schools and it was clear that the design of Kooth wasn’t engaging with the target audience. They knew what they liked, what they needed, what was cool and so with their input we designed a much more youthful, fun, simple, engaging platform that met with both their requirements and the clients.

Excitedly, our redesign of Kooth will be launched later this month. We can’t wait to show it to you and tell you all about it, so be sure to check back soon!

A day of eye tracking at the Expo

Eye tracking is amazing, insightful, state of the art technology that enables you to literally see through people’s eyes. It’s most often used to increase sales on e-commerce websites, software or products but can also be used to measure the effectiveness of marketing campaigns before they launch.

If you’ve never used eye tracking to gain insights into consumer behaviour then you really are missing a whole section of vital information to improve your user experience and conversion.

We recently exhibited at Salford Business Expo where we held live, interactive eye tracking demos using our website eye tracking unit. The unit looks like a standard computer monitor however inside are hidden cameras that track the users’ eye movements, mapping them onto what’s being tested so we can see in real time precisely where they’re looking.

One of our live eye tracking demos

Website eye tracking demo

 

We have several types of eye tracking units from a portable pair of glasses to large Monitors, that we use to test a whole range of things:

Digital – Websites, software, touch interfaces, mobile apps, tablet apps

Products and hardware ergonomics – Mobile phones, machinery, remote controls

Marketing – Adverts in magazines, digital adverts online, billboards

Packaging / out of the box experience – Does your packaging attract the customer? Measure and compare your out-of-the box experience.

Shopping customer experience – How do customers shop in your store? What draws their attention? Does your product / brand stand out against competitor products?

On a very basic level we’re observing and analysing human behaviour with digital and product platforms, our aim being to improve the interaction by making it feel intuitive, easy and enjoyable. If you can achieve this people are 87% more likely to buy from you, they’ll buy more, come back more frequently and will be 3 times more likely to recommend you.

We were impressed by their focus on what actually works, rather than just what looks nice on a mock up

Visitors to our stand at the expo were clearly fascinated and amazed when we replayed their eye tracking videos back to them, discussing with them why certain elements of the website being tested caught their attention and why other things that should have in theory caught their attention didn’t. User behaviour is unpredictable and differs between types of people, so for design to work to sell your product or service and not just look pretty, it needs to be user centred.

Just like a shop front, if people aren’t drawn in through the door by seeing something that appeals to them or if they can’t work out how to get through the door, they’ll walk on by and stop at your competitor instead.

We run and analyse all our eye tracking research so we do all the hard work for you, delivering the insights you need to sell more of your products or services.

We had a brilliant day at the expo, educating the people of Salford and Manchester to the benefits of user experience and eye tracking and we hope at the very least that they start to think more about the people using their website or product. As opposed to designing something that just looks nice, our designs actually work to bring you more sales (as well as looking nice too of course!).

An example of our mobile and tablet eye tracking unit setup

Mobile and tablet eye tracking setup

Keepitusable work with broadcaster on accessible development techniques

is your tablet app easy to use?

User experience design and user research agency Keepitusable, experts at creating highly usable and accessible interfaces, have been working with the BBC on the use of accessible development techniques.

Ricardo Ortega, co-founder of Keepitusable, said: “The tablet and smartphone markets are now growing faster than PCs. People expect applications to be easy-to-use more than ever before. Those companies that invest in great apps that engage their customers will be the ones that excel in the next few years.

Creating a great user experience is incredibly difficult because human beings are complicated and unpredictable. Software and websites are often very comprehensive, so creating something that is simple to use and intuitive is ironically complex.

The importance of accessibility is often an undervalued part of the user experience. For companies such as broadcasters, their audience range can be incredibly varied, accessing services from many devices. So ensuring good usability and access for assistive technology is vital.

Businesses, such as e-commerce, often see accessibility as unnecessary or are uncertain of the benefits it can bring. But focussing on accessibility for your tablet or mobile app, website or software means a lot more visitors will be able to become customers.

In a few years the number of mobile devices will DWARF the number of PCs

This article was published in Creative times.

How Ergonomics and Human Factors can help you

Jaguar Land Rover

“We struggle to find good human factors people”

Jaguar Land Rover

Ergonomics and human factors specialists are very rare in the UK, so our team is incredibly unique. And good human factors specialists in particular are very difficult to find. Even a large iconic brand such as Jaguar Land Rover struggles.

Science

The added value Ergonomists provide include an insight into the more scientific aspects of human-machine interaction and physical aspects of hardware and workflow. Although more widely known for office layouts and designing work environments, Ergonomists often work directly with Designers to ensure products meet International Standards for human-centred design.

Hardware and software flow

Often within companies, hardware and software are designed by completely different departments which can result in a lack of flow between interacting with the device hardware and software for the end user. The ergonomist can bridge this gap, helping to create a seamless flow between hardware and software interaction. Ergonomists can recommend what hardware buttons are required to work with the interface, the size, type, and position they should be placed for ease-of-use, colour and grouping categories, the naming that should be used to be the easiest to understand and what force should be required to access them.

Prototype Testing

It is possible to test very early hardware and software concept prototypes via an expert usability evaluation (expert review) or even with users, much like a usability test, giving you vital feedback at an early enough stage to make cost-effective changes before it’s too late.

Mobile Phone Prototype

Testing the interaction between a mobile phone hardware prototype and software simulation.

Implications for touchscreen interaction

As touchscreens become more prevalent and are used by millions of people, the need for good user-centred designs becomes vitally important.

As opposed to standard interface design, touchscreens, in particular large screens, can require a great deal of physical interaction between human and hardware. If you aren’t careful, the user can end up suffering from a range of repetitive strain injuries or at the very least may just feel uncomfortable using your product rather than the pleasant feeling you want them to associate with your brand.

Frequency of use matters

Problems can occur when your software or product is used by someone on a daily basis. The more frequent the interaction, the higher the chance of encountering health problems.

This could be a mobile phone, a machine interface that someone has to use as part of their job, computer games, etc. The obvious knock-on effect for business is a poorly designed product that causes user dissatisfaction, health problems and bad PR.

Shopping centre touchscreens have less frequency of interaction so require incredibly high ease of use.

Shopping centre touchscreen design

Trafford centre touchscreen

Implications for businesses on employees

For businesses whose employees are using the software, the likely outcomes are a dissatisfied, unmotivated workforce, poor productivity, increased error rates resulting in tasks taking much longer, increased absence and lower morale.

Implications for software and product companies

For software or product companies, the outcomes will likely be dissatisfied customers, poor reviews, increased returns, increased calls to customer services, less return customers and bad publicity which in turn leads to a lowering of the customers perception of your brand.

How we can help

Unlike other user experience and usability agencies out there, did you know we have a fully fledged Ergonomist here at Keepitusable? We also have many years experience of designing and usability testing for touch:

  • We have one of the first ever mobile touch interface designers. He was busy designing smartphone mobile touch interfaces as far back as Ericsson and before the term ‘user experience’ even existed.
  • We have carried out a huge amount of usability testing and user research with touch devices, in particular, mobile.
  • We have created prototypes and conducted research with users to determine touch hit area sizes and to investigate things like environmental effects and multitasking.
  • We have a dedicated in-house ergonomist and human factors expert which enables us to not only focus on the interface but also the hardware, position type and shape of buttons, physical aspects of interaction, posture, user dexterity, etc.

Related posts you may find interesting

human-machine-interface-human-factorsCase study: Touch screen human machine interface design

ux design human factors and ergonomics for a premium factory food sorting machine touch screen interface.