17 best UX design tools: top UX websites and apps for designers
If you’re on the look out for UX design tools to make your life easier, look no further. Whether for an app or a website, on your mac, your PC or phone, we explore 17 amazing UX tools you should have for 2016.
User experience (UX) design is all about the user feeling good, and giving them a valuable, easy-to-use and pleasant-to-use tool. With good UX design should come happier users, and with happier users should come more traffic.
Unsurprisingly, there are an overwhelming number of prototyping tools out there, and finding the best can be mind-boggling. We’ve picked out our favourite UX tools for early wireframing and sitemaps, as well as more polished prototyping and design, and finally for user research and A/B testing.
Whether you have a complex, overwhelming system that needs a spruce up, are running a start-up without the resources to hire employees dedicated to UX, or simply want to improve the UX of your personal website or app, these tools will make it easier and quicker to achieve great UX design results.
Best UX design tools for flow charts, diagrams and site maps: Gliffy
Gliffy allows you to create flowcharts, wireframes, UML diagrams, sitemaps and more – and at a low cost, with no download necessary. It really lets you create any kind of diagram, which can be a great way to organise your thoughts and ideas, whether you want to share them with developers or just with yourself.
Best UX design tools for flow charts, diagrams and site maps: OmniGraffle
Stop reading if you own nothing from Apple, as OmniGraffle is specifically for Mac and iOS users - and you have to buy both versions of the app separately, which ups the cost of the already expensive OmniGraffle if you want it on two devices.
For this extra cost comes a great, feature-rich way to visually represent ideas, tasks and activities. It is a powerful diagramming and wireframing tool, but still easy to use.
Best UX design tools for flow charts, diagrams and site maps: Visio
Microsoft’s Visio creates diagrams quickly and easily – and can be linked to many other Microsoft services, such as Excel. You can also share your creations through a browser with Office 365 or SharePoint.
Visio’s simple, easy-to-navigate layout offers plenty of shapes, graphics and lines – though it does not offer pre-made templates, which would be useful for wireframing.
Best UX design tools for wireframes and prototypes: Adobe XD
Adobe XD (which stands for experience design) is a new, niche programme which boasts that it covers most, if not all, of the UX design process from early designs and wireframes to interactive prototypes, design to real world testing - all of which you can easily switch between.
It is simple to use and – as it’s so new – still has room to include even more features, such as A/B tracking. Right now, though, it is a great design and prototyping tool.
Best UX design tools for wireframes and prototypes: Axure
With a steeper price comes a more comprehensive wireframing and prototyping service laid out on a simple drag-and-drop canvas. It extends far beyond wireframing, also allowing the creation of interactive prototypes, unlike Visio with which it shares a similar interface.
Best UX design tools for wireframes and prototypes: Proto.io
For a web app, Proto.io is surprisingly powerful. It has many functions to build mobile apps, but can therefore be a bit overwhelming to use as everything (everything) works by dragging and dropping.
It is easy to share projects with clients, quickly create previews as there is a library of UI elements, and use multiple screens for a single project, as well as connect between those screens (in other words, it is not just layer-based, but page-based).
Of course, as a web application, you can only use it with an internet connection (which is not great stuck in an airport with expensive, or no, wifi). But Proto.io also offers a Proto.io Player app, for both iOS and Android, to test your prototypes on the actual device they’ll be used on.
Best UX design tools for wireframes and prototypes: Photoshop
The great thing about Photoshop for UX is that, well, you probably already have it. You probably know it well. You probably have a long, rich – and possibly tumultuous – history with it. But is it that suited to UX design? After all, it was made as a photo editor, not a UX design tool. But the good people at Photoshop are looking to the future - and that future is UX - by releasing plenty of extensions aimed at UX.
Still, Photoshop doesn't quite live up toits UX-specific competitors. But, with details such as animation, fonts and colour all included, Photoshop is better for the later stages of UX design - the high quality mock-ups, which is what it's made for and what it's good at.
Best UX design tools for wireframes and prototypes: Pixate
Pixate is the “most powerful prototyping platform on the planet” (according to their website). Well, they would say that – and now Pixate is part of Google, may have increasing justification to (we can thank Google for Pixate being now being free). But for now we can at least very comfortably agree that this very nifty tool is worth taking a look at if you haven't already.
Test out complex interactions and animations quickly, easily and without having to get bogged down in code. As it connects to iOS and Android devices, any project changes happen in real time - though this can't be done on the computer, Pixate's flagship service has always revolved around mobile interaction design.
Pixate cloud is probably must-have if you’re in a team of heavy Pixate users, allowing you to review the latest prototypes anywhere. Unlike competitors such as InVision, Pixate does not currently connect with Photoshop or Sketch.
Best UX design tools for wireframes and prototypes: Sketch
Simple, efficient and well loved, Sketch is a very big player in the design world, with some even weaning themselves off Photoshop completely for it.
As it’s tailored to design gorgeous UX interfaces through quick and easy-to-learn wire-framing tools, some people believe Sketch is superior to Photoshop when it comes to UX design. Its ability to create different layers for every new object means you can be more creative with navigation and combinations.
Best UX design tools for wireframes and prototypes: UX Pin
You can create responsive, clickable prototypes on your browser, as well as quick-to-create wireframes and some great options for usability testing with a Pro+ account. You can share prototypes easily with others and teams can work easily together to create iterations and wireframes in real time.
Best UX design tools for wireframes and prototypes: InVision
InVision offers some pretty powerful prototyping tools, allowing you to quickly and easily create interactive mock-ups of our designs in a way that actually reflects a real web experience. It also offers mobile prototyping with gestures, and you can also launch user testing from an iPhone, including screen recordings, videos and audio of users testing your prototypes.
It really stands out due to collaboration features, where team members or clients can comment directly on your designs. ‘Boards’ allow you to group together your ideas and chat about them. You can also start a design meeting from InVision or Photoshop.
Best UX design tools for wireframes and prototypes: Marvel
Marvel is web-based app (no need to do any downloading) that has a very shallow learning curve. With an upgraded account, you can make your project a collaborative one. Choose from lots of different prototype frames, from an Apple Watch to an iPhone 6.
All Marvel’s features are simple and easy to use – such as gestures, layering images and user testing - and you can download images from other programs, such as Sketch and Photoshop. It also offers a Sketch plugin, which is great if you do lots of app design work in Sketch and want to nick some of the cool features from Marvel, such as the range of gestures and image layering.
Best UX design tools for user research: UserTesting
It makes some people tick – and others’ eyes roll – but user research really is crucial to the UX design process (‘user’ is in the name of the thing, after all). And with UserTesting, you get to really see and hear what users think – and fast, with results promised within an hour.
What claims to be “the world’s most popular user research platform” (clearly it did its UX homework for its own website) offers videos and metrics of your target audience actually using your website or app – as UserTesting has access to over a million people.
With its Basic plan, you can create your own tests; its Pro plan offers the luxury of UserTesting handling the tests for you, as well as help from UserTesting’s user research experts.
Best UX design tools for user research: Verify
Verify allows you to test new concepts with users and get fast feedback. You can set-up surveys – of which there are 8 versions (I didn’t know surveys came in so many forms either) - for users quickly and easily. Dependent on the time of day and pool of users, you might start getting feedback immediately.
Best UX design tools for user research: UsabilityTools
UsabilityTools has a pretty impressive tool belt. Tools such as surveys, card sorting, feedback boxes and scenario-based testing allow you to connect with your user. It also offers click heatmaps and A/B testing – which allow you to monitor your users’ behaviour without them knowing it.
Install UsabilityTools’ code to play back how users interact with your website or web app – so you can actually see what happens rather than try to interpret a graph or chart.
Best UX design tools for A/B testing: Optimizely
A/B testing tells you what users prefer by testing two options on a pool of users. But it is surprisingly hard to get right, thanks to interfering factors such as the type of user and time of day.
Across apps and websites, Optimizely handles those fiddly details for you with its comprehensive, well-reviewed service. For example, you can discover the weather where users are, and then tailor your service.
It is also easy to implement and its code-free visual editor means it is accessible to those less fluent in coding. Nor does it assume a deep understanding of statistics, with a great results page where you can track goals.
Best UX design tools for A/B testing: Visual Website Optimizer
Visual Website Optimizer offers A/B testing, multivariate testing and split URL testing (but no multi-page testing), as well as analytics easy-to-access reports, personalisation and new tools such as visitor heatmaps and clickmaps.
All of this ease-of-use makes it slightly more suited to beginner A/B testers than Optimizely, which has a slight edge when it comes to pros as it offers multi-page testing and has more options for running behavioural tests in its Enterprise plan.