Using Wireframes to Conceptualize New FormsΒΆ
This developer blog article was originally published on MetaCommunication’s website in May, 2010 and illustrates how wireframe mockups can be used to conceptualize and design forms in Virtual Ticket.
The original article is no longer accessible on MetaCommunication’s website, but the text has been preserved below.
At it’s most basic level, a wireframe is simply a visual guide, or mock-up, that represents the structure and the user interface elements that will make up your form. At a higher level, a wireframe can provide both a rough-draft layout of what the form will look like and can also let you determine what you want to include on the form.
Comparison of a wireframe Balsamiq mock-up and a final Virtual Ticket form.I recently wrote about some quick-start rollout strategies for getting up and running quickly and efficiently with Workgroups 2010. In this article, I’ll explore some of the benefits of using wireframes as part of your process for designing and implementing new forms.
At it’s most basic level, a wireframe is simply a visual guide, or mock-up, that represents the structure and the user interface elements that will make up your form. At a higher level, a wireframe can provide both a rough-draft layout of what the form will look like and can also let you determine what you want to include on the form: the fields, the static elements, their visual properties such as size, etc. For some people, something as simple as a diagram on the back of a napkin could be construed as a wireframe. For others, it might be a more elaborate illustration created in a drawing application, or even a document generated by a dedicated wireframing application.
In my experience - and those from the customers I’ve worked most closely with - the key to creating an effective wireframe is to create a mock-up that is detailed enough to communicate the look, elements, and behavior of your form, but not to create something that will bog you down in the minutia of the details. After all, the wireframe is intended to serve as a planning and conceptualizing tool. Some of my favorite applications for doing just that include Mockingbird and Balsamiq, but I’ve also seen effective wireframes created in Adobe Illustrator, InDesign, or QuarkXPress.
Regardless of what you use to create your wireframe mock-up, the idea of conceptualizing a form first as a wireframe document provides many benefits. For example, wireframes give you the opportunity to:
Create a Visual Mock-Up
For me, creating a mock-up of a form is one of the biggest benefits to using wireframes. It gives you a perspective on how much space fields are going to take up and how much room you’ll have before users will need to start scrolling through the form. It also lets you identify how fields will be represented on a form, and may help answer questions on whether a field should be displayed as a text entry field, a dropdown, a radio button, a checkbox, etc. It an also help determine, before designing the form, how many image thumbnails should be displayed at one time, how much space all the components will consume, and more.
Define Elements
A second significant benefit to using wireframes is that it lets you define the elements that will go on a form. By this I’m referring to the database elements themselves - the tables (Folder Types, Document Types, Groups) and the fields that will define the underlying structure of your Virtual Ticket system. Just as importantly, the wireframe gives you the opportunity to identify both the type of field that will be needed and it’s length. For example, should a particular field be of type character or memo? Should the length of the field be optimized based on the type of data that will go into it? These are all questions that a wireframe can help you identify and address before you even start developing your forms and tickets.
Obtain Buy-In
A third significant benefit - and one not to be underestimated - is the ability to easily and effectively communicate and share your ideas with the active stakeholders. Allowing others to collaborate and be a part of the process up front gives everyone the chance to contribute and be actively involved in the rollout process. This also provides everyone the opportunity to identify and resolve potential differences in perspective and opinion up front, before the form is developed.
As you can probably tell, I’m a big fan of using wireframes. When I’ve seen them used, they very often save time, increase buy-in and participation, and effectively help customers get all their ducks in a row before they start to create Folder Types, Document Types, and Forms in Virtual Ticket.
What are your thoughts? Have you used wireframes in the past, or will you do so in the future? Please share your experiences in the comments.