In Part 1 of our UX prototyping software review, we took a look at hot spot-based UX design tools Marvel, InVision, and Solidify. In this post, we’ll be examining tools that allow UX designers to create rich, live wireframes and prototypes from scratch that are ready for testing.
The main advantage of full prototyping suite tools is that they allow for more robust interactions and state changes, since each element within the wireframe can be controlled individually rather than having to link to a whole new page to show changes. Obviously, the main disadvantage of this type of program is that it has a higher learning curve than the simpler hot spot based apps and if the designer (or their organization) already prefers a specific program for creating wireframes, it often can’t be integrated with the prototyping application. These programs also tend to be more expensive than hot spot based prototyping apps.
The applications we will review that fit into this category are UXPin and Justinmind.
UXPin
UXPin is a full UX design and prototyping suite developed by UX designers for UX designers. It works with a library of UI elements that can be dragged and dropped onto a canvas to design an interface. Since each element exists as a separate object, multiple events and state changes can be applied and objects can be repeated across different canvases. New features are regularly added to the program (we initially looked into UXPin a few months ago, and since then they’ve added several new features with a few more in the pipeline). UXPin seems to be integrating the best features of InVision and Solidify–live screen sharing and support for Photoshop and Sketch files were recently added and user testing is coming soon.
UXPin’s interface. The element library is on the left and includes General UI elements as well as elements from various frameworks such as Bootstrap or Foundation. Designers can set the width of their screen from a few presets in order to show responsive breakpoints. This screenshot shows the standard website view.
A high level of control is available for each element including the visual properties of the element and any interactions the designer may want to apply.
Element libraries are available for a variety of devices and frameworks.
Features:
• Extensive library of UI elements and UX patterns
• Templates for wireframes, personas, business model canvases and other deliverables
• Responsive previews
• Version control
• Photoshop and Sketch imports (with Pro account)
• Supports commenting and annotation
• Live screen sharing (with Pro Plus account)
Pros:
• Clean, user-friendly interface
• Supports other UX deliverables aside from prototypes
• Can be accessed from any browser since it’s cloud-based
• Allows for multiple events (click, hover, gesture, etc.) on a single element
• Combines the simplicity of drag and drop UI elements with the flexibility of working with layers, which is familiar to designers coming from other programs
Cons:
• Doesn’t currently support creating master elements (but apparently this feature is in the works)
• Moderate learning curve
• Support for mobile gestures is somewhat limited
Cost:
• Basic account ($15 per user per month, includes unlimited projects, storage, and revision history, advanced interactions, and export to PNG or PDF)
• Pro account ($25 per user per month, includes basic features plus export to HTML, Layers manager, password protection for shared designs, UI libraries, and 10 imports from Photoshop or Sketch)
• Pro Plus account ($40 per user per month, includes pro features plus voice calls, unlimited imports from Photoshop or Sketch, usability testing (soon), and live screen sharing)
View a sample prototype here.
Justinmind
Justinmind offers similar prototyping capabilities to UXPin, but it is desktop-based rather than browser-based. Interfaces are created through drag and drop elements from the included libraries, which contain elements for desktop and mobile UIs and are not quite as extensive as the libraries offered by UXPin.
The Justinmind Prototyper interface. The element libraries are on the left. Elements can be modified using options on the various panels at right or through the controls on top. Any interactions that have been applied can be viewed in the top right panel.
In Summary
As I mentioned in my previous post, the program you choose will depend on a number of factors: namely, the process you’re using and where prototyping and testing fits within it and the nature of the website or app you will be testing.
To the first point, a process that include wireframing and testing as two distinct phases often lends itself to the first type of tools since the designer will have a full set of screens ready to link before starting prototyping and hotspot-based tools simplify the linking process. Hotspot-based prototyping also works well with sketches, since the designer can simply take a picture of what they’ve drawn and start linking the same way they would with a JPG or PDF created in a design program.
Conversely, if wireframing and testing are occurring concurrently, a suite that allows the designer to execute the wireframes and prototype simultaneously may be preferable. It is also easier to go in and make changes with a fully integrated prototyping application based on testing feedback. With hotspot based tools, changes to the screen must be made in a separate program and then re-linked to the prototype.
For websites and apps that do not contain a lot of complex interactions of transitions, hotspot applications may work best. The more robust and complicated state changes and interactions that full prototyping tools offer work best for websites and apps that are highly interactive or involve complex user flows. It is also possible to build responsive prototypes with these tools.
The examples I mentioned are just a few of the UX prototyping tools that currently exist. UX design is a process that is continually evolving and as this process evolves, the tools available to designers evolve along with it. Each program has its own pros and cons, and what you decide to use will depend on what’s right for your project, client, and design team.
