Subscribe to Optaros RSS feed"What do you mean, when you click here, that that portion of the screen will refresh with new information, highlight, and then a notification will appear, verifying that a change has occurred? -- I need to see it..."
This is an example of a common question that members of the UX team will hear from business stakeholders during a Blueprint Phase. The increase of richer applications, embedded Flash, Media, social participation, and AJAX-based interactions and their respective design patterns, have triggered an evolution in wireframing to help answer these questions.
Taking good ol' fashioned, page-centric wireframes to new levels has become a hot button pursuit of particular interest to designers and information architects since the boon of 2.0 and all its accompanying buzzwords exploded onto the scene and into the consciousness of companies in 2004.
Each User Experience professional has a favorite way to do it, some more effective than others. To start, nothing beats the power of sketching on a whiteboard, or using a tool such as Visio to capture the initially gathered layout requirements. After all, page structure standards such as masthead, footer, and 1, 2, 3, or more column bodies are not rocket science. The next step of defining the elements within is when the real fun happens.
Two approaches that have emerged as particularly effective to communicate all this "in between" are "high-fidelity wireframing," and "interactive wireframe" prototyping. Let's dissect each, and explore a quick example of a tool that can be used:
High-Fidelity Wireframing
High- Fidelity Wireframing provides clients with a non-colored, non-designed information architecture-focused visual presentation of the use case flows. These wireframes are designed to communicate the screen template layout, information architecture, content placement, and general design patterns (e.g., simple animations that demonstrate what is meant by: “when ‘x’ is clicked, ‘y highlights’ and then ‘z will appear’.”).
An effective tool for HF Wireframing? PowerPoint - Yes, you read right - PowerPoint. Most offices have it, it can template common layout elements, it's easy to use, and design interactions can be demonstrated via the animation functionality provided.
Interactive Wireframe Prototyping
Interactive Wireframe Prototypes provide a rough functional version of an application. These rapid prototypes serve as tools for aligning stakeholders, for usability testing, and for streamlining the development process, resulting in a more evolved and refined version of the product to bring to market.
How can this be done, cost-effectively? Inline with Optaros' Assembly Methodology, (OptAM), utilizing the latest front end technologies (XHTML, CSS grids, and JavaScript libraries such as Prototype.js and Script.aculo.us) makes the prototyping process as efficient and cost-effective as possible. Frameworks can be set up that may feel lifting at first during the setup, but will yield great results in the end, and may even result in usable, semantic markup for development.
Bottom line - there is no one standard approach, or tool, nor will there ever be. One surefire way to know if the approach worked, though, is to see how the wireframe satisfies the following: "Was it scalable, and repeatable without much effort?," and most importantly, did the business stakeholder and users say, "Yes - I get it..."