You know that saying about waiting for ages for a bus to arrive and then three turn up at the same time? Well, something similar seems to be happening in the world of online wireframing.
Recently we were very impressed with App Sketcher, a truly powerful yet surprisingly approachable tool whose feature set should worry the big boys such as Axure RP Pro. So, you can imagine my excitement when I chanced across yet another impressive-looking tool called LucidChart.
LucidChart is an html5-based web application which isn’t just suitable for wireframing; you can use it to do pretty much anything you might previously have turned to Microsoft Visio to do. This makes it quite unusual in its scope, and a very intriguing tool indeed.
As a true cloud-based app, there’s nothing to install and in fact there’s a free trial of all account types so there’s little risk. Of course, being an html5 web application, it won’t run on archaic or downscale browsers (such as Internet Explorer 7 or earlier) although it did seem to run fine on Internet Explorer 8, and of course on decent modern browsers it behaved just as it ought to.
When you first start using LucidChart, you are presented with a clean workspace somewhat reminiscent of Visio, with palettes to the left hand side and a grid-based canvas on which you can place shapes. I’d reckon most any seasoned computer user would be able to figure out what was what easily.
In use, it’s easy to forget that this isn’t a desktop application, given its comprehensive toolbars and desktop-app like features…
As I want to concentrate on how LucidChart works for the prototyping professional, it’s important to note that to use it for wireframing you’ll need to choose which shape sets you want to use – and the obvious ones are the UI Mockups and perhaps iPhone sets.
This is achieved by clicking on a ‘Manage Library’ button located in the bottom left-hand corner. Really straightforward although it would be nice to have it selected by default (but then, I am biased ;-).
This library contains a pretty impressive selection of widgets, although I must admit that I did wonder about whether it was possible to add my own (or a third party) set; this would be handy especially if the web community started to create and share new shapes/widgets much as I’ve seen for Balsamiq.
How it works
As you’d expect, it’s very similar to the competition in as much as it’s a drag-and-drop interface for selecting and placing an element followed by configuration and customisation.
When I review prototyping and wireframing tools I always like to have some sort of objective in mind, so today I want to create a Twitter-like mockup.
The first task is usually dragging a main container widget across – in LucidChart’s case there are a selection of different containers including a browser window, conventional form container, popup dialog and so forth. This is quite useful, and I was quite pleased to see that each general type of UI element was categorised appropriately. This makes it easier to find what you’re looking for.
Here’s something I knocked together in around five minutes or so:
I had some difficulties at first in finding where I had to go to add an extra tab. It seems that the way to do this is by selecting the tab outline and then using the + and – buttons on the context-sensitive formatting toolbar:
Of course, none of what I’ve just done is particularly ground-breaking; in fact, compared to an installable tool like Balsamiq, it did take me a little while longer to create this particular basic mockup. Admittedly, this might be due to the fact that I’ve been using Balsamiq for almost two years now and am very familiar with how it all works, but I have to say that true web applications do represent something of a compromise, no matter how slick the UI. Partly this is just the nature of running in a browser, but equally it could be the fact that unlike desktop applications, there is often variation in the feedback that one gets from the actual operation of the UI elements.
During the course of my LucidChart review, I did find myself on occasion scrolling all over the place by accident, as with my machine it appears that the scrolling is a bit too sensitive. On the other hand, that could be just the fact I was using a slightly temperamental trackpad. I also found occasional difficulty in selecting the element in the right way so that I could (say) edit its text – but these are minor things and I am sure that, given some more time, I’d quickly become accustomed to the this.
Collaboration is the key
The thing that excites me most about LucidChart is the fact that multiple team-mates can edit the same wireframe at the same time. This is a complete revelation. Now, due to time constraints I wasn’t able to get a second person to work on my sample, so I started up a different browser and tried the link.
At the top of the page there is a sharing link that can be sent to co-workers who can then simply muck-in with the wireframing. As easy as that!
In the past I’ve seen a few different types of application do something similar – and it can be a strange experience to be honest, though with some restraint between team members it can be incredibly liberating. We’re not talking about rudimentary ‘locking’ and ‘refresh’ style collaboration – no, far from it. If your colleague is working on your wireframe and moves a button, you see that button move more or less immediately.
It’s as if there’s a ghost in the machine
The implications and uses of real-time multi-user collaboration
This style of collaboration can really break down conventional workflow barriers if you’re working as part of a distributed team. As your work is saved in the cloud, it’s possible to access it from any location (provided you have an internet connection and an html5 compatible browser):
For example, I’m currently doing some design and development work for a large financial client. The team I’m a part of consists of myself and a manager in one office, a business analyst in another and a developer in yet another office. We’re working through requirements specification and technical design (which includes wireframes) and the physically separate locations thing is creating its own set of problems.
A tool like this, deployed team-wide, would mean that we could be bouncing design ideas and concepts off each other in real-time, supported perhaps by Skype calls. Of course, in that particular example corporate bureaucracy and inflexibility in terms of ‘third party software’ (which deviates from a very limited and draconian standard build) means that there’s next to no chance to introduce such a tool. Which is a big shame really.
On that subject, it’s worth mentioning one pitfall for using this in larger companies: the cloud-based file storage. I know from experience that storing anything work-related off-site is met with the most extreme resistance in most large companies, but perhaps over time such companies will begin to realise that working in the cloud doesn’t just imply a new buzzword to wheel out in PowerPoint presentations.
Companies need to walk the walk as well as talk the talk when it comes to adopting the opportunities that cloud computing offers. Anyway, minor rant over…
Getting back to LucidChart’s collaborative nature, it’s worth acknowledging that many UX practitioners around the world are working on distributed project teams and LucidChart could be the perfect solution for many, at a really attractive price (from around $25/month for a team package, or $9.95/month for a Professional package).
Is it for you?
With so much choice out there, it’s always going to be difficult to definitively choose one tool. However, if you are working in collaboration with others, the real-time multi-user operation of LucidChart, combined with its capability and polish, make it a very compelling choice indeed.