Requirements in Pictures
If you’re involved with creating product requirements, especially for software, you may need to provide some form of visual representation of the features you’re working on. While it is possible to define the functionality in terms of Use Cases and supplementary flow diagrams, comprehension is going to be significantly enhanced with some pictures illustrating a form of user interface.
These can be simple modifications to existing product screens or a complete wireframe sequence for new capabilities. In addition, it’s becoming increasingly important to begin testing both your product concept and possible solutions with real users before you write one line of code, even in Agile.
As product managers, program managers, and business analysts, most of us do not have dedicated UX designers to provide mockup support. There are, however, a number of software tools available to help you quickly and easily mockup your concept, with some even being FREE. Here’s a roundup of some of those products and a discussion of their uses.
Types of Mockups
A mockup is representation of the system you intend to build. For physical products, it is usually a full-scale model that captures the key elements of the design and often the aesthetic look. It’s not usually very functional. For software, there are several different levels of mockups that you can put together, depending on your need. Maybe you’re trying to sell a new concept to management, or maybe you’re just trying to get your point across to development. The mockups you provide may feed into other folks in your org who formalize them into the actual design, or maybe your mockup becomes the spec for the design. Types of mockups include screen captures, storyboards, wireframes and prototypes.
Screen Capture & Modify
The most typical scenario for product requirements is modifying an existing system. In this case, it’s usually quite easy to capture an image of the screen where you want to make changes, and then use an image editor to manually tweak it, such as adding another text field, selection box, or whatever. Creating this information helps to provide an indication of where on the screen the change will take place and some idea of the change. You can do this for any number of existing screens that are getting modified or even for new screens you’re adding.
Storyboards
Storyboards illustrate a flow between various screens and the major actions per screen. It originated in filmmaking to provide an overview of the major scenes before filming. One software example would be to use screen captures of an existing system from above, add the new elements to each of the screens for the new requirements, and then put them together in a sequence to show how a user would flow through the new functionality. A simple presentation of the flow can be illustrated by clicking through each screen with the mouse. Storyboards can also be created from scratch with simple screens of boxes and text and put together in a flow. A low-tech version would simply be paper drawings for each screen and then put together in a sequence to show the flow. This can be used for early testing of a concept to validate the existence of a real user problem and viable solution. Here’s an example storyboard:
Figure 1 - Storyboard Example (adapted from wireframesketcher.com)
Wireframes
|
Wireframes are similar to storyboards, in that they show flow, but are much more comprehensive and begin the actual design of the user interface. These include the position of content on screens and the flow from screen to screen for various user selections. A complete set of wireframes for a new system can number in the dozens of pages. The drawings are intended to be low fidelity, meaning that colors, graphics and look-and-feel of the site are not included, so that the focus can be on functionality, data elements, positions and navigation flow. |
Figure 2 - Wireframe Example (from gliffy.com)
|
They can also be made to look like hand sketches to reinforce that they are only an early iteration step and not complete. Once a set of wireframes are created, a visual designer can then add the pretty stuff and branding as an overlay onto the wireframe set.
Prototypes
|
A prototype is intended to be run as a simulation of a real system. If a set of wireframes can be run in an automated fashion and show the navigation flow as different selections are made, then this would be a prototype. One major differentiator of a prototype is that it can sometimes simulate detailed actions and flow, including error conditions. A prototype can be used to do real user testing for concept validation or usability. It can also be the product specification. Like wireframes, prototypes can be low fidelity without the visual design, or it can be a 100% pixel-perfect, high fidelity representation of the final system. For major new systems that represent a significant investment and level of risk, a high fidelity prototype is a relatively quick and low cost insurance policy to use for testing before plunking down a large commitment. |
Figure 3 - Hi-Fidelity Prototype Example (from irise.com) |
Use of Flash for prototyping has become very popular in recent years, but requires some training to implement them and can take several weeks to develop. The tools discussed here allow a prototype to be developed without Flash.
Some Popular Examples
The following are some examples of popular solutions at varying capabilities and price points. A full detailed matrix of solutions is included at the end of the article.
Basic Tools
As mentioned above, you may only need to do simple screen captures and light image editing to deliver mockups for your requirements. This is totally doable without getting any new software. The simplest solution is just using your Windows computer PrintScreen key (PrtSC) and then pasting the result in Windows Paint or to edit the image or to use the tools to add text boxes, buttons, etc. Another screen capture program is available in Windows 7 called Snipping Tool, and which allows you to grab a defined portion of your screen into the clipboard to paste into the editing tool.
More sophisticated and powerful commercial programs are SnagIt and Photoshop. SnagIt is a screen capture program that also includes annotation, special effects and ability to combine multiple images. It also has a lightweight internet sharing capability. Adobe Photoshop is the de-facto standard for editing images. It’s probably serious overkill for this application, both in complexity and cost, but if you already have it and know how to use it, why not. A free one is Paint.net. There are hundreds of other image editing packages, including online versions, and many will do what you need.
Drawing & Diagramming Tools
Chances are pretty high you already have a suite of apps that enable you to produce fairly robust low-fidelity wireframes and storyboards. It’s called Microsoft Office, and specifically PowerPoint. While Word and Excel provide drawing tools, they are a bit more cumbersome to use. PowerPoint allows you to create any basic diagram, including UI and flow diagrams. It provides an automatic capability of being able to click through sequential screens as part of a presentation. It also has the ability to do hyperlinking between pages based on clicking on buttons to illustrate some specific flows. You can export the whole sequence to a PDF doc that preserves the hyperlinks. For Mac users, check out Keynote. And, of course, there’s Google Docs, though it may be more limited.
What these lacking are some built-in symbols that are user interface-specific, such as pull-downs and buttons, so you have to build your own. Never fear as enterprising individuals post free libraries of pre-built UI elements specifically for PowerPoint. Here are Sketch versions for a desktop or an iPhone and you can search the web for many more.
Another popular diagramming tool is Microsoft Visio and which includes some UI elements specifically for building user interfaces. Like PowerPoint, it has the ability to link between pages and create flows. While the diagramming tools for all types of drawings are easier to use, the overall package somehow seems a little more work than PowerPoint. Plus the templates contain the look-and-feel from 10 years ago and feel very “engineering-ish”. Also like PowerPoint, you can find updated templates on the web to help you here. If you’re a Mac user, then Omnigraffle is a top choice and includes a large stencil library from the user community, including mobile versions.
There are some online competitors to Visio that can create nice diagrams, in addition to providing team sharing and collaboration. A few of these are Creately and gliffy.
Wireframing Tools
These tools are designed specifically to enable you to whip together a fast, low-fidelity design and show it off or collaborate with others. These tools have drag-and-drop capability of existing elements, and ability to string together several screens in a click-through prototype.
| The king of the pile here is Balsamiq. The entire wireframe is provided in a hand-sketched look purposely to focus the discussion on the high level elements, such as a pull-down versus checkboxes, and screen location. It can output the screens in PNG format, or provide a click-through PDF doc. An online version is currently in beta. |
Figure 4 - Balsamiq Example (from balsamiq.com) |
Other competitors in this space provide similar capabilities, in addition to potentially offering more sophisticated user interactions, the ability to spit out a full UI spec document, project management, versioning and online collaboration. Some of these include iPLOTZ, GoMockingBird, and pidoco. A couple of free versions are Pencil and Lumzy and many of the others include free trials.
High-Fidelity Simulators
The distinction between this group of products and the previous wireframing group may be subtle and overlapping, but in general these tools allow for pixel perfect renderings of the final product and include the ability to simulate complex interaction logic. Many also support starting with a low-fidelity version and evolving it, while others only work in a high fidelity mode. Prices in the group have the largest span, ranging from a low of $99 to an eye-popping $6,995.
|
One of the more popular tools in this group is Axure and which provides the most complete set of features for several stages of development and user testing among all of the products. Other popular tools are GUI Design Studio, iRise, and ForeUI. Another popular set of tools appearing in this group are the traditional website development tools, especially from Adobe. These include Dreamweaver, Fireworks, and Flash Catalyst. |
Figure 5 - Axure Example (from axure.com) |
While the concept of a “quick” prototype may be a big exaggeration if you’re not familiar with the tools, Fireworks appears to have some good prototyping templates to get you started. Another option is Microsoft’s Expression Blend Sketchflow, specifically for creating wireframes.
Wrap-up
There you have it. For the complete list of tools included in this article and many more, Go to this link 
. This is an image format of a spreadsheet. For a more readable version with hyperlinks to the companies, download the PDF attachment below. The list is not intended to be comprehensive, but gets you started.
With tools like these available - some for free - there’s no excuse for anyone not to be a UX designer. Just kidding. The point of providing some form of UI mockups is to increase the comprehension of the requirements you’re providing into the Development team. They also can be used to help sell your idea for new concepts. You should not expect that the mockups you provide are what will actually be delivered in the product, and especially for a new UI.
If you’re not yet using mockups to complement your other requirements, give it try. In the best case, the Developers will thank you and you’ll be able to validate your requirements before any code is written. In the worst case, you’ll step on someone’s toes or create some sort of commotion about how your company does user experience design. Maybe then you could justify hiring a real UX person to help drive better designs into your product and they can then use these tools.
The idea for this article originated from a LinkedIn group discussion asking “What tools are good for creating GUI design input by a non engineer?”. Nearly 80 responses were received over several months suggesting many of the tools you find here.
The Importance of Wireframes in Web Design & 9 Tools
Wireframe Definition & List of Vendors
Wireframe Madness – A Face-off of Free Wireframing Tools
| File | Description | File size |
|---|---|---|
 Roundup_40+_UI_Mockup_Tools.pdf | 1726 kB |