[This is the english translation of the german article Wireframe-Tools]

Motivation: Reaching UI agility

One of the main goals of agile development is to improve the reaction to changes. Changing UI is expensive in term of time and resources. Indeed, UI changes do not only impact the UI layer, but may also require not planned features and architectural changes. To avoid too late changes, we propose, to our customers, prototypes of applications, tangible regarding interactions and UI design. Those prototypes are developed early in the development process, and so open discussion about the final UI.

To support us during those development, we have looked into tools satisfying our needs (quick development, support all the possible interactions, understandable results) as well as our customer’s needs. This blog posts presents two tools we’re using for this purpose: Axure RP and Balsamiq.

What are wireframes?

Wireframing is done during conceptual design of an application (before starting the real development phase). They can be drawn with pen on paper or  software tools. Planned functions of the applications can thus be made tangible and visualized, as well as how they can be used and accessed. These functions and/or interface elements can be represented as outlines or detailed images. The main advantage’s about wireframing is to reify the UI concretely avoiding misleading and wrong interpretations. It is the pivot language that developers, customers and project managers can understand.

Starting the wireframing process

For a schematic view, flowcharts were created. These give us stepwise perspectives to the project. Then paper and pen were used for the first drawings. Afterwards these ideas were transferred into wireframes (using Balsamiq and AXURE) and the wireframes were implemented into prototypes. After completing and reviewing the wireframes, the specifications were created describing the application interface in detail. Specifications will help the developer to transfer the ideas of the designer e.g. positioning and interactions into the realization of the product.

We tried the programs AXURE RP and Balsamiq to support wireframing for our Content-Management-System and for a customer application. The test results are described in the rest of this post.

The results with AXURE

Flowcharts, Wireframes, Prototypes and Specifications can be realized with AXURE RP.

We created wireframes with AXURE based on the use cases for our in-house Content-Management-System. The wireframes could be enhanced with images or special layout elements created with Adobe Photoshop exhibiting final UI aspects. It can also be pure interaction elements as buttons or pull-down menus. Handling recurrent templates is done using masters. Dragging and dropping these masters to a page facilitate reuse.

After the creation of wireframes, a HTML prototype can be generated. Therewith the customer can try out the look-and-feel of the application concept. If the designer put in detailed element descriptions they can be read by the customer throughout testing the prototype. With those descriptions, specifications can be automatically generated. This specification can help the designer to document its concept and will also give support to the developers to better understand the final interactions.

It depends of the customers characteristics how detailed the wireframes have to be made and how important the design aspect has to be. Some clients do think by using a clickable prototype, that the program is already finished. They can’t distinguish between prototype and real application. Therefore it is really important to communicate about the project status between prototype and application. This impression will be supported by AXURE’s presentation of the prototypes: They included the project page tree on the left hand of the browser. So the look and feel will indicate the progress.

Accurate and detailed prototypes can be created as well. They can imitate the design of an existing application by using screenshots. Events such as mouse enter, mouse leave and mouse click events can be emulated with AXURE. But for a good looking slide event the user has to create a lot of element settings. Creating these events is time-consuming.

New GUI elements can be imported as libraries. The AXURE community publishes a few of them e.g. Social Widget Libraries, Touch Screen Hand Gestures Stencils and iPhone elements.

The AXURE key points are:

+ large palette of interactions
+ support specifications
+ can look like final UI
– time expensive
– slow learning curve

The results with Balsamiq

We tested the plugin version of Balsamiq for Atlassian JIRA. The default graphical look and feel (pen-like) of the wireframes had pleased us. A lot of elements are available by default and grouped in main categories easing the utilization of the tool.They can be easily dragged and dropped to the editing area. Some elements can be enriched with additional graphical elements (which are already implemented in the program) e. g. a scrollbar for a browser window or an image for the cover flow. Existing content for elements as tables facilitate the creating of wireframes.

It’s not yet possible to link elements within multiple wireframes in version v1.6.6.7 of Balsamiq for Atlassian JIRA. Although no interactions can be generated. The outputs are pure images. However the handmade-like result allows focusing on the key aspects of the UI.

A text representation of a wireframe can be exported. If there are images included in that wireframe, they have to be existent on the importing system.

The plugin version is very handy in cooperation with developers. Several wireframes can be created and attached to a JIRA  issue by the designer. The developer can also put some remarks on the wireframe, so that the designer sees the annotations or can as well change the wireframe to give feedback, if some functions are not possible to implement. A weak point for that plugin is that a session time out won’t save the wireframe draft. However Balsamiq allows focusing on the UI key elements and supporting discussions with the development team.

The Balsamiq key points are:

+ easy to understand and to use
+ enable quick developing phase (especially with customers)
+ nice pen-like look and feel
– no linking or interactions (if you use the Atlassian JIRA plugin)

Comparison

Attributes	AXURE (stand alone)	Balsamiq (plugin for JIRA)
Grouping of elements	Yes	Yes
Locking of elements	Yes	Yes
Multiple Screens in one file	Yes	No
Template masters	Yes	No, unique files. (see also note 1)
New UI Elements	Yes, easy to generate and import new and own libraries	No
Interaction emulation	Not easy to understand but good online documentation.	No linking in the plugin version for JIRA
Export function	Yes: HTML, BMP, JPEG, GIF, PNG, MS Word Document for specification	PNG (generated by saving the wireframe)
Import function	Image import, RP File, from clipboard	XML structure, PNG import for images
Prototype	Yes, HTML (clickable with interactions)	Not a clickable prototype, only a group of images.
Libraries (external)	Yes	No
Libraries (own/selfmade)	Yes	No (only some controls from the community, but no libraries)
Sketchy elements	Yes, but less than in Balsamiq. But creating own elements is easy.	Yes, more and sophisticated
Annotations/Descriptions for elements and pages	Yes	Yes (will be on the image afterwards)
Presentation function	Yes, with annotations.	Yes, without annotations.
Handling	Not easy regarding learning curve.	Easy
Complexity of functions	High	Low

Note 1: The tricky png import to imitate a master behaviour won’t work with JIRA, because the file names are given automatically. Reopen a ui mockup will loose the image link.

Conclusion

AXURE gives us a good impression of its benefit although all functions are not easy to find without a manual, and handling it efficiently requires a lot of training and experience. It is the right tool for complex wireframing but you will need time to get to know the features. You can create mouse events, change typo, include screenshots to let the wireframes look similar to an application and so on. The automated and quick generation of prototypes with only a few clicks is really a nice feature. Also AXURE will support you with an automatically generated Styleguide if you specified the used elements. So choose AXURE if you need a complex HTML prototype showing mouse events and you have to create several master screens.

Balsamiq can be used for a quick wireframe development especially together with customers, managers and developers. Changes are quickly made and the output can be tested right away with some target groups. Using the standalone version of Balsamiq enhances the wireframing result because then you can create wireframes that are linked together. Using Balsamiq is easy as a pie, so install it and use it right away. If you are looking for a simple tool which is easy to use and you want it to integrate into your existing JIRA or Confluence project management systems, then choose Balsamiq. Cooperation is easy and efficiently achieved.

We are mainly using the program Balsamiq for wireframing. We can create fastly the screens for our developers and they can implement them immediately. It provides a great way to do short iteration of the UI. So look out for your design requirements and then decide on the right tool.

Links

Axure: http://www.axure.com/

Balsamiq: http://www.balsamiq.com/