Wireframes are the backbone of any successful web or software project. Information architects create wireframes to provide a visual schema on how pages are put and linked together without specifying a visual identity. Similar to the architectural blueprints for a building, wireframes constitute the common understanding between the client, business analyst, designers and developers.
Seeing is believing
During the concept phase, wireframes help to visualize ideas and get everybody involved. Tools such as Visio allow information architects to quickly create click-through scenarios to simulate possible interactions with the future application.
Stakeholders are busy people. They will not read lengthy functional specifications and are unlikely to page through detailed presentations. But they will look at screen mockups and storyboards. The use of wireframes is a time-saver. Instead of waiting for months before seeing actual screens, stakeholders get a sneak preview almost immediately. A client once told me after a three-day intensive workshop: This is amazing! Prior to working with you, we waited for six months to see actual pages, and when we finally did, they were not at all what we had asked for.
Reducing time = saving money
Wireframes can save you very costly rework at a much later stage in the development process. Making fundamental changes during the development phase may cost a lot, with an outcome that is often uncertain. Paper, on the other hand, is patient and cheap. Changes are easily made. In fact, good user experience design relies on an iterative process involving different team members as well as feedback from the end users.
Getting the team on one page
Early paper prototyping also helps with internal communication and productivity.
- Designers are able to quickly mock-up the visual identity and enhance the user experience without wasting time thinking about data, page flow, and business scenarios.
- Content providers can easily visualize the placement and space for their copy.
- Developers may use the prototype to give more accurate estimates for development time and to raise potential flags in terms of feasibility or performance.
During the development phase, the wireframes serve as a quick reference and reduce the chances of misinterpreting functional requirements.
Last but not least, wireframes facilitate early usability testing, which will reveal potential issues with page flow, layout, nomenclature, or functionality. As discussed previously on Agile Usability Testing, this can be done very quickly at low cost and will provide valuable insight into the users minds.