Summary. Current design programs allow UX professionals to generate mockups. While specific features within these programs are useful in the creation of a simple or interactive prototype, some major features are not without usability issues. This article is a review of a prototyping program that allows users to drag and drop GUI elements to create low and high fidelity designs.
User Experience professionals use design programs for a multitude of purposes, ranging from mockups to interactive prototypes. Axure is currently one of the industry design programs, which offer flexibility throughout the design process. Pencil is another such program that allows users some of the same flexibilities in designing throughout the entire development process.
Pencil is a free GUI with drag and drop features. This article discusses some of Pencil’s major features and how they impact its usability. Please note that this is NOT a complete review or a comparison to Axure.
One of the most important features for UX professionals in any design program is the canvas. Pencil is no different. It features an interactive canvas, where widgets can be added and resized along with exporting the page or entire project for collaboration with colleagues, clients, and users alike.
Users can accurately measure the distance between widgets with Pencil’s dot pad and align them with lines which appear when they are either vertically or horizontally aligned.
Figure 1 shows how users can change the size of the canvas, either to fit the content, add some padding around the edges, or to fit the screen by right clicking. By resizing, users can either focus on specific widgets or can see the entire page.
Figure 1. Resizing the canvas gives users different viewing options.
Having designers who can create designs is an important part of any UX team. However, there are other departments within the team who need to be kept up to date. Exporting is a great feature as the recipients do not need Pencil in order to view the information. UX professionals can either export a single page or the entire project as a png or other formats (i.e. PDF).
Usability Issues and Recommendations
Although users can add multiple pages to a project, the “add page” button is not easily visible. Being located tot the far right of the screen makes it difficult to see. This option should appear as a faded tab next to the current page tab or within a clickable button.
A project is evaluated on the sum of its parts; each one unique and important in its own right. When correctly combined create a great user experience. To add widgets, Pencil uses a drag and drop method and an easy way to set the widget’s location against the background (i.e. bring to front/back). The parts are the widgets and Pencil has large libraries which are categorized by the type of widget they are.
Two other features in figure 2 are the ability to choose from low (hand drawn look) and high fidelity widgets, and widgets for Smartphones and tablets.
Figure 2. Pencil offers multiple widget libraries for greater design flexibility.
Usability Issues and Recommendations
Despite the large breadth and depth of the widget libraries, resizing is not intuitive. While experimenting with Pencil, it was discovered that individual widgets cannot be resized unless they are selected with another widget.
Different prototyping software programs allow users to add interactions to specific widgets, adding a “real world” function to the design. This gives colleagues, clients, and users the ability to see the intended functions of the prototype. Figure 3 shows how Pencil allows for some interactions to be added, however, they are limited to linking to different pages and changing themes (essentially changing the status of buttons to on/off for example).
Figure 3. The only interactions for changing states is by linking widgets to other pages.
Pencil has the ability to create user flowcharts with alternative process, decision, and terminator nodes within the widget libraries as shown in figure 2. With the interactive canvas the flowcharts can grow in size and when exported will show the entire image as shown in figure 4. This feature is great as it allows users to share the designs flows with other team members to keep everyone on the same page.
Figure 4. Pencil gives users the ability to create flowcharts.
Despite Pencil’s usability issues, this free program provides designers flexibility in their projects. Designs can be created from low to high fidelity across various platforms (web, iOS, and/or Android) with an intuitive and well organized widget library. Overall, Pencil can be added to the design tool box.