Review: LucidChart

Posted on August 22, 2011 by John Clark

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.

The Workspace

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:

Going deeper

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.

Posted in Software Review | Tagged , , , , | Leave a comment

The evolution of a homepage

Posted on July 29, 2011 by John Clark

Over the past couple of months I have received a few messages asking for real-world examples of wireframing and prototyping in action.  The difficulty has always been that much of this activity never really sees the light of day – or at least, as far as Joe Public is concerned.  In a way I think a lot of people treat their early mockups as ‘not fit for public consumption’ and are a bit wary of showing them to the masses.

A bit of background

Some of you might know that this blog isn’t all I do for a living.  I’ve earned my humble crust for a few years plying the trade of freelance web application developer for various companies, and more recently I’ve spent some time designing, developing and marketing my first product.  Well, technically a service, but that’s splitting hairs.

The product in question is Kupima, which is a web-based user testing service.  Sure, it’s not the only such service but I felt that there was room for improvement over these established user testing sites and was confident I could build a better one.  So, I set about doing it…

This article is really meant to share some of my own personal thoughts and show how my design for just a part of this new website (the homepage) would evolve over time.  It’s not complete as many ideas were rejected and deleted, but what I’ve gathered here is the ‘bloodline’ of the homepage as you see it today.  It’s not a tutorial and the chronology isn’t entirely right (too many missing steps) but nonetheless I always find glimpses into the creation of new things quite interesting and I thought that perhaps you might too…

Early days…

To begin with, I had a few vague sketches, piles of post-it notes and a sort of fuzzy idea in my head about how this might hang together.  I didn’t have any sort of design plan, and to my shame I initially approached it in a very haphazard way.
Soon, though, I got my act together and started to pick out the features that the site should have and identify a rough sitemap.  I then started to make the first significant design step in the project: wireframing.

I chose to use Balsamiq Mockups almost exclusively during the design phase. The reason for this choice was a combination of availability (I had a license, was familiar with using it and was enthusiastic about what it could do) and the speed by which it allowed me to put designs into a reproducable format.  This was quite important as sketching on paper is fine but as a design grows you find yourself having to re-do a lot of the sketches even for small changes.  As someone who changes his mind all the time about designs, the ability to move elements around quickly was also a big selling point.

The first take

I spent a bit of time looking at the parts of the site that would likely be common – in other words, the header bar, the footer and so on.  I created some template wireframes so that I had a common basis to build on (the above is a very early template although a few revisions of this were made).  Then I started making an initial take on the various pages, including the homepage:

You can see by this point there’s a basic layout without any real styling.  One of the benefits (to my mind) of an app such as Balsamiq is the way that it doesn’t lead you to get sidetracked with cosmetics.  At this stage, deciding roughly what things should be on a page and where they should go was more than enough!

This particular version shows my idea to have a video embedded on the front page, with a large call-to-action button.  I deliberated over the positioning of these elements as in many respects there were arguments for and against having the video on the left or the right.  Here’s a version with the video on the right:

One of the most powerful features of prototyping and wireframing is the relative ease by which you can compare two competing designs.  I really couldn’t make up my mind, so printed both out and stuck them on the office wall.  Over the course of the next day or two I started to realise that the second layout, using the right-hand side, was the better approach.

Crisis of confidence!

Mid-way through this process, I started to play around with some html templates to see what corners I might be able to cut.  I was about to embark down a dangerous road: that of the design being led by the availability of a template that I liked.  I spent a good couple of weeks exploring some wacky alternatives (both in wireframes and in html):

I actually rather liked this one – it was a commercial theme although in the end I abandoned it (although actually some of their styles and a couple of images remain in the Kupima site of today – why re-invent the wheel, eh?).

The next one was my attempt to try to introduce some of the stylistic influences of the commercial theme into a format compatible with my preferred right-hand image/video layout:

As you can see, wireframing was helping me flesh out ideas quickly, without tying myself up for large periods of time.  Nonetheless, I was still torn on whether a homepage video or rolling slideshow of screenshots would be best.

The concept behind the previous wireframe involved a series of screenshots with prominent calls-to-action.  I also included a ‘how it works’ section below.

I was still exploring this concept far later in the process, including this layout from as late as April 2011:

The most notable things here are that I had started to think in terms of how the site was going to sell itself – see the pricing bubble, a concept which would push the competitive pricing to the forefront:

One of the more difficult things I was finding was how to choose what things would be visible on the homepage and what things could be moved to other pages.  I really struggled with this, and even now (post launch) I am still not certain that I have this right.  At least it’s reasonably easy to make changes, and if I get it wrong nobody gets hurt or upset…

The front-running contender by early spring was the layout as follows:

As I was now comfortable with the ‘text on the left, media on the right’ layout, I started to flesh out how this might look.  In fact, as I write this I’m surprised just how closely the homepage of today looks to this late wireframe.  Sure, there are some differences – mainly aesthetic – and of course there are different words and navigation, but it’s broadly the same design.

Aesthetic considerations

Now, I’m no graphic designer, but I do know my way around Photoshop and so I have, through persistance, managed to get a fairly reasonable look to the site (to my eyes anyway).  To make it a bit different from the competition, I decided to inject some personality into the design by using the superb Leo Blanchette orange people designs to lift the pages.  Yes, if you’re being critical you might say that the cartoon look might distract some people, but I feel that most business sites lack personality (with notable exceptions such as MailChimp) and I was quite pleased to be able to steer this one in a different direction from most.

I had fun compositing the little people together into groups as required, and I was quite pleased with the end result.  A good few people have commented favourably on the visuals and I have to give credit to Leo for his outstanding work.  Also, while I remember, I must thank Ross Sneddon for his great logo design.  Anyway, I digress….

Going live!

Launch in early June 2011 was interesting.  As I’ve explained before, I don’t have a team of people working with me so I had to do pretty much all of the work myself.  From coming up with a design, to getting it to work, to choosing colours, to building the pages, designing the middle-tier and the database layers, to writing the marketing blurb and actually running the website.  As anyone who’s done anything similar will know, this really spreads you thin.  I’d committed to a June launch and I had to make some compromises in order to hit that date.

One such compromise was that the site actually launched without a video for new users to view.  I won’t go into the details of creating the video presentation, but suffice to say that whilst I was impressed with what I could get Keynote to do, it’s far from a marketing classic.  I had to delay this for a week after launch just in order to get the site out the door.

This also meant some compromises in aesthetics.  Here’s a fairly recent (mid July) screenshot of the site:

I always felt that there was just a bit too much text and that it lacked something.  It felt a bit, well, ‘bitty’.  It needed something to draw it all together and so after spending a few hours looking at other homepages to try to get some idea about what works and what doesn’t, I decided that it needed a background and a text-trim.  So, at time of writing here’s where the homepage has ended up:

So, all-in-all, it’s been a fascinating journey for me – and I hope that it’s been an interesting read for anyone considering using wireframing as a way to come up with a homepage design.  Sure, you’ll take wrong turns along the way but it’s quite nice to look back and follow the blood-line of your design, its DNA if you will.

 

 

 

Posted in Good Design, Prototyping | Tagged , , , , , , | Leave a comment

Interview with Peldi from Balsamiq

Posted on July 14, 2011 by John Clark

Few companies have created more interest in recent times than Balsamiq, a young company headed by the charismatic and like-able Peldi.  Their first product, Balsamiq Mockups, has grown to be the wireframing tool of choice for a great many professionals around the world.

More recently, work is nearing completion on myBalsamiq, a cloud-based, collaborative sister product to Balsamiq Mockups, and a product which is creating a bit of a buzz out there in prototyping land.

Because people are, of course, much more interesting than software, we thought we’d take some time to put a few questions to Peldi about the Balsamiq road-map and his thoughts on running a successful software company.



Question
You’ve seen great success with the app version of Balsamiq Mockups.  What were your motivations for moving it to the cloud?

First of all thank you John for the interview and congrats on creating softwareprototyping.net. I don’t think myBalsamiq, our web app, is about moving Mockups from the Desktop to the cloud, but rather augmenting our offering with yet another version (myBalsamiq will be our 7th), to fit how people like to work.

Question
Given that you have a large installed user base with the ‘app’ version Balsamiq Mockups, how do you plan to get these users to move ‘up’ to myBalsamiq?

I don’t really plan to move anyone anywhere…we like to give people options so that they use the one that suits their needs better.

If someone is a Desktop customer and wants to also benefit from myBalsamiq, we have a feature in the web app where you can enter your existing license information and we’ll add 50% of that value as a subscription credit for the web app. So if you bought a 5-pack for $379, we’ll credit your myBalsamiq site $189.50 towards any myBalsamiq plan.

It goes the other way too: if you sign up for myBalsamiq, you’re able to purchase the Desktop version for $40/user, roughly 50% off the full price.

Basically we envision a world in which people use both apps, and they sync seamlessly between them. We have a bunch of code to write to make that happen smoothly, but even in v.1 with project upload and download, the two versions play nicely together.


Question
You’ve added a lot of the features that previously had to be done manually, such as versioning and project workspace management.  Was the decision to include these features made based on feedback from the Balsamiq community or were they just ‘eureka’ moments from the team?

We did have a couple of eureka moments here and there, but most of what we do is heavily influenced by our wonderful community.

Question
Balsamiq always strikes me as the most ‘purist’ of the wireframing tools.  For instance, it doesn’t try to reproduce the look of the web, beyond the ‘sketchy’ style. Do you feel any pressure from the competition to offer a ‘more authentic’ web look?

No. I believe an authentic look is absoutely counterproductive at the early stage of a design, it’s a distraction.

Question
MyBalsamiq is clearly a big step in a new direction for Balsamiq – will you be continuing the development of the existing ‘app’ version?

Absolutely! We don’t see it as a big step, and the mockup editor, the core of our offering, is still 90% shared between all of our versions. We will certainly keep improving it, we have lots and lots to do still!

Question
What do you think marked Balsamiq out for success, when there are at least several other competitors who haven’t had the same level of success or recognition?

From day one I wrote on our website that we like to compete on usability and customer service. If someone else offers a product that is easier to use and offers better customer support than we do, they deserve to win.Some competitors fail to realize that features are not the only reason people buy software from you. Coding is by far the easiest part of our job.

Question
It’s clear to me from reading your blog that the team dynamic and sense of family is really important to the continuing success story of Balsamiq.  Is this something you actively chose to do or did it just happen naturally?

I think it just happened. Or to put it another way, I wouldn’t know how to run a company any other way. The people I look up to are those small, often family-run businesses who do great work and provide great service to their customers, generation after generation. I always joke that I’m trying to build a little top-quality Italian restaurant on the web.

Question
What advice would you give to anyone starting out today (as an entrepreneur)?

Heh. That’s a great question to ask, but a hard one to answer for me. I’ve only been an entrepreneur for 3 years, well below the 10,000 hours needed to be good at it. I don’t feel like my advice is worth much at the moment. Ask me again in 7 years? :)

Question
And do you have any things you wish you’d done differently (or not done)?

Making mistakes is an integral part of being human, they can’t be avoided.

One thing I do not do is to dwell on them. The formula I like is to recognize the mistake, learn from it, fix it and move on quickly. Over-thinking “what should I have done differently in the past” is not a good use of my time, I’m too busy with building my future! ;)

Notes
MyBalsamiq is due to be launched later this year.  It brings cloud-based collaboration, versioning and project management features to help support the modern trend for distributed design teams.  We’ll be reviewing myBalsamiq as soon as Peldi gives us the nod of approval :)

Posted in Interview | Tagged , , , , , , , | Leave a comment

How I solved the A-in-a-box problem

Posted on July 11, 2011 by John Clark

Today a strange thing happened.  I was checking out the Kupima site and all of a sudden the fonts went weird.  Some (but not all) of the fonts were appearing as a capital A in a box.  Which of course was not the plan.

This was, by all accounts, a weird one indeed.  A quick search on the web suggested that the problem was probably not any particular website but something to do with the font library in OSX.  Thus, I dutifully loaded up the FontBook app:


Tip: it lives in the Applications folder in OSX, or you can use Spotlight to find it by pressing cmd-space and then typing font book.

Anyway, what it seemed to be is that some of the installed fonts had become a bit confused.  An identity crisis, of sorts.  I had duplicate fonts and others with ‘issues’.  The solution (in my case) was to highlight all fonts, right click and choose to ‘Validate’ the fonts.  Lo and behold, there were around twenty (!) in total that weren’t as they ought to have been.  And this on a new machine(ish); less than seven months old anyway.

With my list of ‘invalid’ fonts, I selected all and chose to remove the duplicate or invalid fonts.  This made things initially go from bad to worse, from frying pan to fire, so to speak.  However, this was simply existing applications getting even more confused as I’d effectively pulled the typographic rug out from under their little app feet.  Silly me.

Restarting the apps seems (so far, fingers crossed) to have solved this problem entirely.  I guess a full reboot would be a better bet but I hate rebooting my Macs – they tend to be on for weeks if not months at a time so I try to defer any reboots to ‘necessary’ things like system updates.

Hopefully this might help someone out there should they ever encounter anything similar on their Macs.  It’s a strange thing to have happen, and I’m still a bit puzzled why it targeted the fonts that it did (which, as it happens, weren’t even the root of the problem) but there you have it.

Posted in Uncategorized | Tagged , , , , , , | Leave a comment

App Sketcher License Giveaway

Posted on July 6, 2011 by John Clark

We’re delighted to tell you that we’ve got a few App Sketcher licenses to give away to our readers.  These licenses are each worth $79 which amazingly also includes updates for life.  Can’t say fairer than that.

To make it a bit more interesting, though, we’d like to turn it into a little bit of a competition.  Simply visit the App Sketcher website, have a good look around and then come back here and suggest a catchy slogan.  We’ll leave it up to Feng at Appwork to decide which ones he likes the best, and the lucky winners will receive their licenses.

If you haven’t already read it, please also check out our review of App Sketcher to get a flavour of just how useful a tool it is.

Update 13th July: this competition is now closed, and the lucky winners have now been notified.  I still reckon you want to check out App Sketcher even if you weren’t selected as a winner as it’s a great tool.

Posted in Promotion | Tagged , , , , , , , | 7 Comments

The user experience iceberg

Posted on July 4, 2011 by John Clark

Thought you all might like this.  Nothing to do with me, but it’s kinda cool and demonstrates visibly why we should all pay attention not only to the aesthetics (which are the visible bit everyone can see) but also the majority of the ‘iceberg’ which consists of effective design, information architecture, good and clear objectives and requirements combines with a solid understanding of the needs and motivations of users:

The User Experience Iceberg

What’s really neat about this is that the visual metaphor can be understood by anybody.  And that’s about as good as communication gets!

Posted in Good Design, Uncategorized | Tagged , , , , | Leave a comment

Review: App Sketcher

Posted on July 4, 2011 by John Clark

In the past year or so the number of exciting new wire-framing and prototyping tools has exploded. Some of them, like Balsamiq, have carved a niche and generated an almost cult-like following amongst their fans. Others have made nary a dent and so it’s always interesting to see new entrants into this hotly contested market.

App Sketcher is one such product. Its creator, Feng Chen, aimed to create a tool to ‘quickly model web application flow and interactions’ which was ‘simple enough for non-programmers to use’.

App Sketcher has recently emerged from a successful beta programme during which Feng listened closely to user feedback and suggestions so that he could fine-tune App Sketcher in a way that gave it a distinct identity and place amongst the throng of prototyping tools around today.

Priced at $79 (around £50) it’s squarely in competition with tools such as Balsamiq, and it seems only fair to look at how the two compare. Of course, they’re different in their approach but share a number of similarities and I’d reckon that most people in this market would probably look to compare the two and make their own mind up – which is the approach I’ll take.

App Sketcher appears at first glance to have more in common with tools such as Axure RP Pro or JustProto, given its more conventional interface. On the left side there are the usual elements which can be dragged directly onto the tabbed workspace. Unlike JustProto, which runs as a rather clever web-application within the browser, or Axure RP Pro, which is a stand-alone application, App Sketcher takes the Adobe Air approach. This is becoming more common – it’s the way Balsamiq does it too, incidentally – and although it closes off the use of the software on things like the Apple iPad, it’s an acceptable compromise between heavy-weight installed applications and web-based apps.

One of the real attractions of App Sketcher is that, unlike Balsamiq, it aims to cover both the simple-wireframing and the more complex interactive prototype angles. This is, however, a tricky path to take as there’s a real danger of being okay at both but excelling at neither. To test this out, I set myself a little challenge.

Game, Set, Match?

Now, I’ve had a week and a bit of hard design work behind me so I wasn’t in the mood to think too much. I decided I’d simply see how much work there would be to ‘copy’ an existing web-page. As Wimbledon is, well, wimble-done for another year (better luck next time, Andy ;-) and because I once lived within a few minutes walk from the infamous grounds, I decided to use Google Maps showing SW19 as my example. Firstly, here’s how it looks, hot off the Google Maps page:

…and here’s my attempt. It took me maybe 15 minutes to do this, and some of that time was simply me climbing the (relatively shallow) learning curve:

It’s even possible to add in some rudimentary functionality, such as popup alerts or navigation:

I then had a look at the other features that App Sketcher can offer. What’s quite intriguing to me is the level of functionality that comes ‘out of the box’, so to speak.

For instance, I created the following mockup in around 5 minutes from start to finish. Which includes a working accordion control and tabs:

I am really quite startled at how easy this was to do and in some ways it moves the bar forward to bridging the gap between quick wireframe design and detailed interactive prototype design. I haven’t actually included it as part of the review but one with a single click of a button you can actually get your prototype to render (properly) in a browser.

Whether this actually matters is of debatable value – it’s easy for people to get bogged-down with constant cosmetic distraction – but at least it is there should you want it.  It would certainly have benefits for demonstration, but there is always a risk that clients start treating your prototype as the ‘first version’ of the actual system…

Sure, it’s not totally perfect but it is more than good enough to leave me suitably impressed. In fact, the html that it generates ain’t too shabby either – I think there is a lot of jquery wizardry going on behind the scenes and it all hangs together with a surprising amount of polish.

The choice between wireframe and interactive prototype

As some of you long-time readers might recall, I’m always keen on people choosing the right tool for the job. Last week I wrote at length about the uphill struggle that faces some people trying to do this sort of stuff using Excel and I’ve mentioned the perils of trying this in PowerPoint in the past too. Prototyping tools tend to fall into one of two main camps (if we exclude the crazy use of totally inappropriate tools such as Excel and PowerPoint for one moment): wireframing and interactive prototyping tools. Balsamiq is a wireframing tool and Axure RP Pro is an interactive prototyping tool. You can create a great sketch of a design in minutes using Balsamiq but to make it dance and look like a real web application isn’t where it’s at. Conversely, Axure is a bit of a sledgehammer to crack the wireframe nut, but it excels at the fiddly interactive stuff.

It’s important to choose the right kind of tool which will help you – and this normally depends on the stage of a project you are currently at. What’s really interesting about App Sketcher is that it appears to be able to offer both, at a very compelling price-point, and with a pretty flat learning curve.

I’m not always the best person to assess how easy these tools are to use as I’ve used a lot of them both professionally and through my own personal interest, but App Sketcher really does seem to be a rare combination of ease-of-use with capability.

Capability? Well, if you want your app to look ‘sketchy’, all you need to do is to choose the appropriate theme:

…look familiar? Or how about something with a bit of sunshine?

The perfect solution?

Afraid not – no software is, and expecting perfection is always a folly. Along the way I did encounter a few glitches but to be honest I had to really dig to find anything bad to say about App Sketcher – it is a really good, solid little app.

To be sure, it is difficult adjusting items on a black background – the cursor doesn’t change to a light colour so I had to move things, adjust, then move back. Another thing was the way that multiple selection of elements appeared to work; when I had more than one element selected (of different types – in this case an image and a hyperlink) I couldn’t move them using the keyboard. Which is a nuisance as I think that high-fidelity prototyping often requires precise placement of elements. I also found it a bit difficult at times to move some of the more complex elements using the mouse – there is a facility to switch between the parent container and the individual sub-parts of a complex element but I found some difficulty with this.

The difficulty of writing reviews like this is where to draw the line. There are many, many other features in App Sketcher that I’d like to talk about. Such as the SlideShare and YouTube elements, or the ability to show dynamic views off the back of a mouse-click. Just take it from me, App Sketcher rocks!

Posted in Prototyping, Software Review | Tagged , , , , , , , | 3 Comments

The abuse of Excel in prototyping

Posted on June 28, 2011 by John Clark

I received a nice comment from a fellow called Mahesh who has posted an interesting article on his blog about prototyping using Microsoft Excel.  Now, I don’t actually know Mahesh but anyone who writes about prototyping is a friend in my book.  Even if we don’t agree on a few points :)

My initial thoughts on using Excel in the past basically went something like this: “Using Excel for prototyping is hard work and is a little bit like cutting food with a spoon.”  Hence the image above…

Now, we’ve seen signs of Microsoft abuse in the past, such as the ritual abuse of PowerPoint, and we’ve covered off a few really affordable and powerful prototyping tools such as JustProto and Balsamiq, so any argument that dedicated software is too expensive is just bunkum.   In fact, the benefits of prototyping are so numerous that you’ll claw back the cost of any software quickly and (in a fairly short time) it’ll start to pay for itself.

Mahesh writes: “Excel is an excellent tool for prototyping, creating the logos, creating buttons and many other basic stuff. In fact you could also use excel as a small db, and write some macros to create working prototype of your ideas.”

Woah! There be dragons. Or at least the road to madness.  I once worked in a large (now somewhat crest-fallen) bank which managed to run a basic CMS using Excel for their intranet.  The line between genius and madness is a fine one, and that team took a few steps over it, decided what they saw was good, and stayed there.  Crazy.  Let me say that again: Crazy.

I’m a strong believer in using the proper tools for the job.  You wouldn’t expect a plumber to fix your boiler with a claw-hammer.  One of the defining characteristics of professionalism is to use the correct tools for the job, and Excel ain’t that tool.  It’s not even close.  Although damned nifty for doing your accounts.

The Implicit Struggle Of The Corporate Proletariat

(I wonder if that’s the first time someone’s approached Excel criticism in a software prototyping blog using a Marxist construct? Hmmmm… ;-)

The reason, I believe, that Excel is abused as a prototyping tool is generally the oppressive regime of the corporate gatekeepers; the bureaucratic bouncers of the IT software politic.  Yes, folks, let’s face it – even though the cost of a bit of software might be trivial, getting it approved and installed on your desktop is often a political struggle to say the least.  Which is why Excel, ubiquitous resident of the corporate software build, pops a tentative hand up and whispers, “you know, I might be able to help“.  Before you know it, entire information infrastructures are balanced precariously on the threads of, um, a spreadsheet.

Workers Rise Up. Or Toe The Line…

So, you’re working for a faceless corporate entity and you’ve given in to the oppressive regime.  What choice have you?  Well, other than the total insanity of PowerPoint, or the delusion of Paint, there’s normally not a whole lot going on on the corporate desktop.  Excel’s about as good as you’ll get, unless you’re brave enough to try to put a purchase order through The System.

But… is it any good?

Mahesh has probably put a lot of work into his Excel prototype. Indeed, it looks pretty neat:

…but I’m willing to wager  that it took a long time and involved a lot of frustration to create.  Just because it’s a Tuesday, and I’ve not messed around with Balsamiq for, oh, at least three days, I thought I’d do a very quick mockup of the same page and time myself:

My version, created using Balsamiq Mockups:

The important thing to note here is that whilst the two are visually a bit different, they are (in wire-framing terms) equivalent.  And I would assume that neither are intended to aesthetically resemble a finished product.  At least I hope so!  That is, of course, where either approach falls down somewhat – but at this stage of the game to get caught up on the aesthetics would be a mistake.

And the time?  Well, it took me approximately ten minutes from deciding to do this, opening Balsamiq, creating the Balsamiq version, exporting it to an image file and uploading it here.  I bet it took substantially longer to do it in Excel, and supposing the customer wanted to change the layout so that we had a nice picture of the individual?  Very, very quick to do in Balsamiq:

In Excel, this would have involved a world of pain; inserting rows, copying content, adjusting borders.  I’d guess it’d take at least an hour if not longer.  My mods above took three minutes, including finding the kitten :)

And the point?

Well, if I succeed in one thing today I’d like to be able to persuade some of you to take off the foil hat and really think carefully about whether Excel really is saving you any time or money at all.  In the case of software prototyping, you’ll spend far longer to produce a rather awkward, fragile prototype which will take ages to amend.  At this stage of any software design/development, what we want is responsiveness – and Excel falls dramatically short.

 

Posted in Prototyping, Software Review | Tagged , , , , , , | 5 Comments

JustProto giveaway

Posted on June 23, 2011 by John Clark

Hey everyone, following our review of JustProto earlier this week, we’re delighted to say that the kind folks at JustProto have given us three free year-long subscriptions to give away to readers of this blog.  Simply make a comment and re-tweet and the first three people to do so will be sent instructions.  Of course, we’d love it if you did those things anyway (and helped us spread the word about prototyping) :-)

Each prize is worth over £150 and is first-come, first-served…

What are you waiting for?

UPDATE: All three free licenses have now been claimed.  However, even if you didn’t read this in time, I’d like to say that JustProto is well worth the small monthly fee so you should still check it out.

Posted in Promotion, Prototyping | Tagged , , , , | 7 Comments

Review: JustProto

Posted on June 21, 2011 by John Clark

JustProto is a compelling alternative to conventional prototyping solutions.  Designed to be collaborative from the start, it’s a pretty clever web application which runs on most modern browsers, although they recommend Firefox 3.5 or later.

There are three packages on offer, but for the purposes of this review I went for the entry-level package which would normally set you back £13 per month (roughly $20US).  That gives you up to three users, ten projects and more than enough storage to create some pretty huge prototypes.  There is also a free, single project plan but I believe that the price-point of JustProto seems pretty fair so unless you’re really on a budget, the paid-for versions make more sense.

The registration process was straightforward – a 30 day trial on all packages is offered, giving you plenty of time to try JustProto out and decide if it’s the option for you.  What you get is your own subdomain under the justproto.com domain, which is handy.  It’s also possible to configure your own domain to map to this subdomain should that be important to you or your company.  I didn’t play with this aspect, but I’d say that’s a useful feature.

Getting Started

Once you’ve logged in you’ll see a control panel as follows.

I wasn’t entirely sure what the box on the top-right hand side was meant to do – it looked like it might perhaps contain an applet so I went to a different browser to see if perhaps it was a quirk of Google Chrome.  Turns out I was right – the logo uploader applet seems to have problems under Chrome on OSX.  Not to worry, I can live with this.

Creating a new project is pretty straightforward – what is interesting is the fact that since this is a collaborative prototyping tool, you can have multiple users assigned to your projects.

There’s a handy little popup to allow you to assign people to your project, subject to the limitations on collaborators (which depends on the plan you are on).  I didn’t investigate too far here as I was trying JustProto as a single designer, so I’ll gloss over the collaborative element in this review.

Having saved your new project, you then enter the main workspace, which is quite similar in layout to that used in Axure RP Pro if you’re familiar with it.  I have to say that I was very impressed with what JustProto have achieved in what is still a web application.  It looks – and feels – just like an installed application, which is no mean trick to achieve.  I’m not entirely sure what JustProto is written in (viewing the source didn’t really tell me much) so I will assume that there’s some JQuery black-magic going on behind the scenes.  Of course, this won’t concern you too much as a user provided it all works, which is the acid test…

Creating a Prototype

I decided that I’d create a mock-up of a simple website get me acquainted with the ways of JustProto.  So, the first challenge was to find out how it all works.

On the right of the workspace there are a series of elements that you drag onto the main ‘workbench’ and then modify.  There is a good range of element types to allow you to create a fairly ‘rich’ interactive prototype.  This contrasts quite well with a wire-framing tool such as Balsamiq, in which the emphasis is on rough approximations of websites (without being concerned about functionality or cosmetics).  I can see a strong argument to use both; starting with Balsamiq (to flesh out a concept and play with layouts) and then refine into a specific design and ‘breathe life’ into the prototype.  Which, of course, can then be used to sell the concept to business stakeholders, users, investors, your parents…

Within the workbench you can also organise the various elements in your prototype and do the normal things, such as change their properties (either by adjusting them directly, such as for position or size, or by using the property pane to change things like opacity, colour and the like).  I did find that, after years of using non-web-based prototyping tools such as Axure, I am accustomed to right-clicking on elements and this is one area that unfortunately the limitations of the medium created some difficulty – right clicks within Chrome, for example, result in the Chrome popup window rather than any context-sensitive menus for JustProto itself.  It wouldn’t be fair to criticism JustProto for this, however, as it’s a limitation that apples to all web-applications but I felt that because the interface is just so, well, slick, I kept forgetting that it was a web-app at all.

Navigation Support

Being an interactive-prototyping tool, navigation is supported.  It’s quite easy to create menus of different types which actually work.  The menu editor allows you to create flat or nested menus easily, and it’s fairly intuitive and actually better than the way that Axure does it in my opinion.

Small Frustrations

As mentioned previously, it’s often easy to forget you’re actually using a web-application; I found myself occasionally hitting delete to remove an element but finding the browser navigating back to the previous page instead.  I’m not sure if it would be possible to fix this in the javascript but it would be nice if it didn’t do this.  A similar difficulty presented itself when I wanted to make a copy of an element – I simply couldn’t see how to do this at first, then realise that I needed to use an icon on the workbench toolbar:

As it happens, there are shortcuts that can be used, but for some reason they didn’t work for me.  I am sure this is probably something peculiar to my own setup, though.  Edit: after a bit I tried this again and it now works.  I can’t explain this, but the main thing is that it does work.

The Design Experience

In practice I found JustProto to be pretty slick, although the prototype I generated (using the export to html facility) was very clunky in appearance.  I don’t necessarily think that this is a bad thing – with some effort and care I am sure you can make an authentic-looking web prototype in JustProto – although at times I found fine-tuning the appearance to be somewhat fiddly.  I think this was largely down to the way that multiple-selection works, which in my case would trip me up from time to time when I realised that for some reason the previously selected element would remain selected despite my clicking on another.  I’m sure that this is something that the user would learn to live with over time but it did slow me down.

I was also a little confused about where JustProto actually fits into the array of prototyping tools available today.  It’s certainly more fully-featured than Balsamiq and the like, but also considerably slower to use.  On the other hand, it doesn’t appear to offer quite the richness of Axure RP Pro, but then that is a £500+ installable application whereas JustProto is a highly affordable web-application.  The question in my mind is not so much where the application ‘lives’ – desktop or cloud, I am not too concerned – but what kind of prototyping it aims to support.  In my mind it’s an Axure-Lite (in the cloud) rather than a Balsamiq-Pro.  I can see its appeal to Balsamiq users looking for a more fully-featured tool than Axure users looking for an alternative.

Comparing JustProto to Balsamiq

This was never going to be easy; Balsamiq is quite the poster-child of the wire-framing world.  Easy to use, affordable and reliable, it is one of those rare tools that simply ‘gets out of the way’, giving the user a clear path to express their ideas in the quickest way.  Being a ‘sketch’ tool, it doesn’t concern itself with the aesthetic (beyond layout and functional form) and so is a great tool for exploring ideas and alternatives.  JustProto is a slower tool to use but does offer something more closely resembling ‘real life’.  With JustProto you can create a semi-functional html version of your prototype and there’s a sense of ‘integration’ into a project that you don’t really get with Balsamiq.

Comparing JustProto to Axure RP Pro

I found JustProto to be an interesting and quite compelling alternative to Axure, albeit without some of the more advanced features in that tool.  For example, Axure would seem to have a greater control of events and actually modifying the properties of elements at ‘runtime’.  However, JustProto is a fraction of the price and you can easily forgive the fact that it doesn’t go quite as far as Axure.  My worry would be that Axure lets you build richer interactive prototypes than are possible with JustProto, which seems to be in the middle-ground between Axure and Balsamiq in what it offers.

Summary

JustProto is a fine achievement, marrying what would seem to be a near desktop-app like interface to a powerful and collaborative cloud-based prototyping engine.  What it might lack in comparison to established desktop tools such as Axure are more than made up for by its temptingly low price.  It might just be all the ‘interactive prototyping’ tool you ever need.

Posted in Prototyping, Software Review | Tagged , , , , , , , | 2 Comments