If a picture’s worth a thousand words, a prototype is worth a thousand pictures
By Andy Hall, Associate Director at Transform UK
Enterprise Software Experience and Visualisation:
From Concept Sketch to Interactive Prototype
I’m always striving to be more and more effective, streamline processes and thoroughly embed agile in the way we work. Over the last couple of years I’ve experienced a move away from the ‘traditional’ experience design approaches of static design flow to more interactive experiences through prototypes very early on within projects.
‘If a picture is worth a thousand words, then a prototype is worth a thousand pictures.’
The benefits:
- It’s rapid
- Clarifies ideas
- Synthesises team workflow
- Creates a streamlined communication process
- Reduces meeting times
- Allows everyone to be involved
- Provides a feedback channel
- Filters out unworkable ideas quickly
I found that prototyping early on and sharing different iterations of ideas with clients can massively accelerate the design process. Clients really do want to see prototypes early on, they want to see ideas brought to life and get a ‘real’ feel for an application. Trying to prototype with working code does take time and doesn’t allow as much flexibility in trying things out. It’s much quicker and easier for designers to put ideas together and not be precious about losing ideas that might not work.
With this in mind the choice of prototyping tool was critical to how streamlined I could be. I wanted to move away from statics and clickthrough designs to a prototype that demonstrated the overall experience with dynamic interactions, transitions and animations. I wanted to integrate visualisation api’s, show more permission based workflows and content/data without any coding skills. I felt it was important to have our researchers and designers co-designing with stakeholders and users directly and rapidly. So I wanted to directly prototype ideas on the fly very quickly so we could get a focused way forward, eliminate unworkable ideas and try out new ways of thinking.
There is an ocean of prototyping tools out there. There isn’t just one tool that stands out, they all have strengths and weaknesses. It all depends on the nature of the project, the process being used and how the client likes to work. But still designers are left wondering how to choose the best one, and simply fall back on familiar methods which may not be as efficient. Ultimately, the goal is to pick up a tool that will support swift iterations, so you need to be sure to select one that does this with ease, is quick to pick-up and lets designers focus on what they do best: design.
There have been a number of projects where I have trialed various prototyping tools. Here’s the main ones I have looked at:
1. Invision
2. Axure
3. Justinmind
4. Marvel
5. Proto.io
In reviewing these I looked at a number of attributes:
Time to get going:
How long it took me to create the prototype once the tool was up and running
Collaboration and feedback:
How easy was it to share the prototype and get stakeholder/user feedback.
Appropriateness for application design:
Where we able to emulate enterprise software convincingly
Component library support:
Were there sufficient libraries of reusable components available out of the box.
Transitions/animations:
Quality of features for adding animated behaviours to screen transitions and individual elements within a screen.
Realness:
How close to the ‘real’ end product can the prototype get. Is it convincing?
Evaluating the prototypes (the task)
I had some initial concept marker sketches (4 screens in total) and one high fidelity Adobe Illustrator file for branding and style. I wanted to emulate the high fidelity design in the prototype software ideally, so new screens and flows could be created in the prototype without having to maintain a separate static illustrator file of UIs.
The aim
To go from concept sketch to a convincing interactive prototype as rapidly as possible.
- INVISION
InVision allows designers to create interactive mockups quickly and effectively. Its great a tool for bringing to life designs created in other tools such as Adobe Illustrator, Photoshop or Sketch. It really isn’t a prototyping tool that allows you to create designs directly within the app. It really feels more of a clickthrough prototyping tool with a few transitions rather than other more dynamic prototyping tools that give better a better representation of in screen experiences.
Advantages
- Very quick to pick up and set up. It’s well suited to using hi-fidelity pngs and creating exceptionally quick ‘clickthroughs’
- Simple and intuitive to add new screens, create hotspots and link up
- It has a good sharing and commenting system for collecting feedback
- Deploys simply and directly onto devices for testing
- Simple web display of prototype
- In depth support documentation
Disadvantages
- No options for adding animation to individual elements or transition effects to links
- No support for gesture based interaction
- Feels very static and lacks the ability to create more dynamic inscreen
- All screens/UI elements and mock-ups must be imported
- No libraries available
Cost
Free -1 active project
Starter -3 active projects = $15 per month
Pro — unlimited projects = $25 per month
Team — unlimited projects, 5 users = $100 per month
Enterprise — unlimited projects, advanced features come with a free trial
The task outcome
It became clear very early on that creating the interfaces from within the app wasn’t possible. It was easy to get something up and running quickly but it was only as convincing as a clickthrough and you needed the UI’s designed somewhere else.
Rating for this task: 2 (out of 5)
2. AXURE
Axure has been around for 14 years and is popular amongst many. It is a comprehensive prototyping tool in terms of functionality and this does make it slightly daunting to the first time user. It can create simple clickthroughs all the way through to more interactive prototypes. It gives you the ability to produce comprehensive documentation which is a function you’re unlikely to use if you’re a lean ux’er. I’ve found Axure quite challenging to master when producing more complex interactions and does need staying power along with some coding skills. Generally I’ve found it a time consuming app to get to grips with and if you need to get going fast might not be the best option.
Advantages
- Good training, support documentation and large user community
- Fine-grain controls for adding interactivity to individual elements.
- Good workflow and collaboration features
- Built-in library of components
Disadvantages
- Not easy to get up and running quickly
- No device-specific templates or features
- Not ideal if designs have been produced in other software and is suited more to in-app UI creation
- Quite time consuming for mobile design and enterprise applications
Cost
Trial — 30 days
Pro — $29/month,
Team — $49/moth,
Enterprise — $99/month
The task outcome
I had high hopes for Axure to complete this task well. The major problem here is the learning curve. If you’ve got time great but if you’re up against it I feel there are other tools that will be kinder to you.
Rating: 3 (out of 5)
3. JUSTINMIND
Justinmind is about 8 years old and really impressed me. If you are looking for an all-in-one prototyping tool, look no further. It’s similar to Axure in a lot of ways but with a much more manageable learning curve and just feels better for designers. You can prototype feature-rich mobile apps, websites, web products and/or enterprise applications quickly and easily. You can import designs or create them within the platform itself. Justinmind has an extensive library of pre-existing components.
Their support section is packed with helpful videos and team collaboration and feedback is easy to setup. Multiple members can simultaneously interact with the same prototype. You can quickly differentiate various types of edits since your team’s location-specific comments are distinguished by colour.
Advantages
- Very quick to get up and running and intuitive to add components via drag + drop
- Device-specific templates and features
- Fine-grain controls for adding interactivity to individual elements
- Easy to collaborate and provide feedback
- Can integrate graphing api’s easily (e.g. google charts)
- Has the ability to add animation and transitions to individual
Disadvantages
- Publishing and managing prototypes can be confusing
- Does seem to have a few bugs which render things incorrectly
- Hotspots flash if you accidentally click in the wrong area
Cost
Free — 30 days trial
Pro — $19 per month
Enterprise — $49 per month
The task outcome
I got up to speed really well. It’s an intuitive app, has some good basic libraries and there are lots of tutorials and support online. This tool is well suited to application design and can construct/render UI’s really well from within the app.
Rating: 4 (out of 5)
4. MARVEL
A browser-based prototyping tool that is simple to use. It feels similar to Invision in that it’s a good tool if you have designed all of your screens in other software. Marvel doesn’t some editing capabilities or drawing tools found in other tools but it does have some basic controls like background colour changes and image resizing. There are 17 different device templates to choose from and it’s an intuitive tool that allows you to create simple prototypes from existing designs quickly. Marvel has good support with FAQs, video and written tutorials, as well as a regularly updated blog. There is a big user group that regularly share prototype designs to help inspire others.
Advantages
- Easy to learn, good for novice prototypers
- Quick and intuitive to add screens and create hotspots
- Options for adding simple animations to page transitions
- Good support network
- Ideal for prototypes with existing screen designs
Disadvantages
- Transitions and animations are limited (no timing controls)
- No integrated client feedback
- No ability to create screens from within the tool
- Not suited to creating more complex prototypes
Cost
Free — 2 projects only
Pro — $12 per month/unlimited
Plus — $15 per month/unlimited
Company — $36 per month/unlimited
The task outcome
A similar experience to that of Invision. Fairly easy to pick up but won’t give you the more complex interactions and not really suited to UI creation within the tool. It’s a good choice for creating quick clickthroughs based on existing screens.
Rating: 2 (out of 5)
5. PROTO.IO
Proto.io has a decent set of ready-made templates which certain interactions built in. This enables a quick start for simple projects that have a very simple framework. The app doesn’t seem to spawn a lot of unnecessary windows which can be a little annoying. Due to the app being browser based you can pick up where you left off no matter where you are but make sure you have a decent connection. Proto.io maintains links to external assets so if anything is updated outside in other software it gets updated within the app. Sharing the prototype with collaborators is simple and feedback can be given directly on the page.
Advantages
- A good selection of libraries to get you going
- Component driven rather than screen driven
- Good training and support documentation
- Allows a timer to be integrated into screen transitions and animations
Disadvantages
- Not easy for the first time user and takes time to get up to speed
- The tool may have too many features for some project’s needs
- Screen trends to flash white as a new content loads
- Animated behaviours can have glitches and don’t always work consistently
Cost
Freelance — $24
Start up — $40
Agency — $80
Corporate — $160
The task outcome
A little more difficult to get going when compared to similar tools like justinmind. Other than that very similar and one of the better tools for creating realisting prototypes. This is a tool I really want to get to grips with and hopefully some of the minor glitches will get ironed out.
Rating: 3 (out of 5)
Conclusion
I’ve looked at only 5 common prototyping tools which I’m personally familiar with. There are a multitude of different options that all have pros and cons. It all depends on what you’re prototyping and what your end goal is. It’s very difficult to pick out just one and although I do generally favour Justinmind. For prototypes that are simple clickthroughs I’d go with Invision. It’s best to try out a few yourself and see how you fair. At the start of every project I ask myself a few things before going for the usual comfortable option of a tool I’m totally familiar with:
– What am I prototyping?
– How much time do I have?
– How complex are the concepts?
– How real to the final product does it need to be?
– What type of collaboration and feedback is needed?
– How do the developers coding the final product want to work?
Also ask yourself whether you want to create the UI using the tool, or just use it to create an interactive click through where static screens have been created using other software. In my opinion it very much depends on the complexity of the project plus using prototyping software with good libraries expedites the whole process.
