[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
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
It’s not yet possible to link elements within multiple wireframes in version v184.108.40.206 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 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)
|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 (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.
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.