Pencil by Evolus - Review of a Wireframing Tool

Most UX designers I know are always questing for the next best wireframing tool. It's not like Balsamiq, Fireworks, Axure of whatever are bad; but UX designers, as a whole, spend an awful lot of time creating wireframes. Programmers: it's like the time you invest in learning a great editor or IDE. Yeah, the real work is done in our heads but creating an electronic representation is a core part of augmenting our work.

I tried Evolus' Pencil a while ago and liked it but saw that it had significant limitations at the time. I've had reason to revisit it recently as a part of my new job at Analytics SEO, and put it to work on a new project of redefining our core payment flow.

Pencil itself is open source and based around XUL, Mozilla's UI interface toolkit. This lies behind Firefox and other Mozilla products so it's been well tested in the wild. But unlike programming where open source tools have a strong position, this is not true in the UX world where proprietary software and standards are common. The major exceptions are probably Fireworks (which saves to PNG, an open standard) and anything saving PDFs. This has caused problems in real projects, like when half of my team had upgraded to 6.5 of Axure, the other half were on 6.0 and the client was on 5.5. Yes, there were ways around this, but the different standards for each version made extra for me.

Pencil can be used in one of two different ways: either a downloadable executable (the latest version is only for Windows and Mac OS X) or run it within Firefox. The latter way is how to run the latest version on Linux. This review comes from the standalone version on Windows and Mac OS X and the Firefox-based one on Linux.

Pencil begins with a nice open frame. It doesn't tell you a lot or lead you in too much. This can be good if a designer is willing to explore but might leave less adventurous / more pressed ones less impressed.

Pencil uses the concept of paper and web: the background is given in various paper sizes and common web page sizes including custom sizes which can be defined in pixels. Having both is useful and after all, why be coy about defining a canvas in pixels when we're doing web design?

The canvas on a page can have a definable grid but this grid will not sit on top of objects but always under. Some might find that limiting: it depends. Personally, I like it above if possible but it's not a killer.

Each piece of work can handle many pages. Each page can be differently sized. The file format is "Pencil Documents" and I'm unsure if it's an open standard. I would guess so because it's XML of some kind. Each page can be named and it's a reasonable way to document all of a workflow's wireframes with each page in a separate tab.

Pencil comes with a useful range of shapes including stuff like flowcharts and GUI widgets. You're all set to go on basic projects if you wish. Pencil, however, does have a community of people willing to contribute new shape libraries and some are quite useful. These include 'Sketchy GUI' (competition for Balsamiq) and some rather useful touchscreen images to communicate different forms of hand interaction.

Shapes can be defined by mouse or precisely including width, height, x-position, y-position and angle. Angle is useful, particularly with text - are you listening Axure? Only joking - I know that rotate text is available in 5.5 but it felt like a long wait to get here.

Everyday operation

I found it fairly easy to set up a base template for my company's interface. This would be used for minor changes, though we have a complete redesign of the IA under way right now which might well change things. This template can be used easily as the base for a load of other pages.

There were a couple of problems. I found that on the stand-alone Windows version at least, clicking on a Pencil file to open it showed a completely empty document. This was worrying because I'd spent hours creating it. Looking at it using a text editor showed there to be information alright. The solution was to open Pencil then go through the menu: File -> Open... and so on. The file opened fine.

One other oddity is that when you have several pages in a document, selecting all (either via the menu or control-A) selects all elements in all pages. This doesn't work in line with other systems. If you open a spreadsheet and enter data into several worksheets, using 'Select all' only selects everything on the current worksheet.

The grid works but I miss the fine control of Adobe's Illustrator. When I first used Pencil, I thought it was a minor point but it wasn't until it was missing that I realised how much I rely upon a well-formed grid to get layout pixel-perfect.

These are some issues that occurred to me when using Pencil for a large site re-design of Analytics SEO's main application. The results themselves, I'm quite pleased with: the process wasn't painless and a few issues were outstanding. They are not insurmountable and could be tackled.

A grouped object not showing the arrange option in the contextual menu

1. I could not find a way to arrange grouped objects. In order to change the arrangement, I had to ungroup, re-arrange the lot, then re-group. Curiously, if I select a grouped object and something else, I can then change the arrangement. My ideal would be to just allow arrangement like any other object. 
2. Direct opening often shows an empty document. This is worrying because I thought it had deleted hours of work when I went back to it. As it was, opening from within the program got everything back okay.
3. Select All selected all objects on all pages. Be mindful when you're deleting a page or even just moving all objects in one page - you might be moving a lot more. The normal operation for select all is just for one page (e.g., select all in a tabbed browser selects only the current tab's content, not all content in all tabs; Speadsheets only select the current worksheet not all content in all worksheets).
4. Treats the enter key  as finishing editing a widget which makes entering new rows into a table tricky. Balsamiq has a nice solution here of using the enter key to create a new line and uses a click outside to complete editing. I understand this is somewhat inconsistent when compared with how Balsamiq treats text input / text field where the enter key completes editing but at least I can enter new lines easily where possible.
5. Cursor keys finish editing rather than moving the cursor left to right sometimes. It's possible to re-position using the mouse which is less precise, slower and more difficult if the text is partly obscured by the editing widget. I'd like to use the cursor keys to navigate the content rather than having to position with the mouse.



Text partially covered by a formatting widget. Using arrow keys doesn't navigate the content either: it ends editing.

6. Editing widget partially covers text being edited. This was only in the Firefox-based version. I'm not sure if it's a XUL issue or not.
7. Objects sometimes refuse to re-size. Closing and reloading the file doesn't work either. My solution is to copy and delete the old one but this often requires re-arranging the object's order.
8. When resizing or replacing an object using the 'Location and size' control, tab moves between graphical objects rather than between fields. It also doesn't submit the value. Enter does submit but doesn't move fields. Ideally, this widget would be treated like a form: tab goes between the fields and submits changed values, enter just enters a value and closes the widget unless it's permanently displayed.
9. The position and size fields are very useful to have on-screen all the time: Some Adobe products let users display them permanently (e.g., Fireworks) and this would be a really useful feature.
10. Moving an object's arrangement seems to require using a context-sensitive sub-menu: no keyboard shortcut is apparent. This is very slow when an object needs to be moved lots. A quick keystroke to move up / down would be much quicker for changing arrangement.

Overall, I've enjoyed using Pencil and it shows real promise, particularly as a competitor to Adobe's Fireworks or Axure. Open Source has yet to come up with something as capable as Fireworks (and no, it's not just a weakened Photoshop - you can create states and export to clickable prototypes). This alone makes it very exciting for me. The outstanding issues, however, make me feel that it's not quite ready yet for prime-time wireframing though it could well be there soon.