notch-blue

Evolving Our Toolbox: Wireframes

By:
March 14, 2017

To some people within our industry, wireframes have become an obsolete tool associated with a bygone era.

We share the excitement to embrace new methodologies and shed extraneous processes — and we too have grappled with the limitations of traditional wireframes. But, we’re not quite ready to abandon the simplicity and clarity of wireframes just yet.

In this article, we will share how we’ve been evolving our approach to wireframes in order to adapt their well-proven usefulness for today’s highly interactive applications.

Context Independent

Part of what sets our company apart is our ability to solve complex user experience problems, regardless of context.

We’ve solved UX problems in a vast variety of contexts, including benefits enrollment, retirement portals, financial portals, trucking fleet management software, humidification consoles, and ATM management – just to name a handful.

The interfaces vary widely. We customize our process to fit the client and user objectives. But we’ve always relied on wireframes as a vital step to create a bridge from early stage ideation (whether sketching, working sessions, etc.) to the specific structure and hierarchy of the interface.

The language of wireframes is universal and independent of context. Simple, black and white blueprints for how a user interface will look and behave provide enough information that clients can sound the alarm if we are going in the wrong direction.

But equally important, wireframes help clients focus on the usability of a system before they focus on the aesthetics. Separating their concerns on these topics is more efficient and fosters better communication and greater success.

Wireframes and Stakeholders

Wireframes can be especially valuable in gaining alignment from multiple stakeholders across a sprawling organization.

In our experience, an early set of wireframes can provide the core client team something to circulate – both for collecting feedback and for showing progress.

The fact wireframes are just black and white diagrams is actually an advantage at this stage. The reduced fidelity helps core client teams keep stakeholders focused on what matters – the structure of the system, the content and functionality, and how those things support key business and user objectives.

Circulating a very early prototype can inadvertently shift stakeholder focus away from core objectives and towards subjective preferences (photography, colors, fonts, etc) or missing functionality.

When Traditional Wireframes Fall Short

Despite all their virtues, wireframes are not magic. With modern responsive web sites, native apps and web apps – the same old approach of ‘one wireframe per page’ does not communicate enough information.

After all, the experience of using an application is self-directed and interactive, not perfectly ordered and static. Each screen has many states that affect one another based on the actions the users takes.

When it comes to communicating interactivity, motion, or multiple states of components – static wireframes can be woefully inadequate.

We’ve grappled with this issue for a long time and have admittedly stumbled a few times. It seems like there are new products and tools on the market every day to help solve it. We’ve tried many of them – and remain unconvinced that any tool can resolve this complexity.

Our Answer: Interactive Wireframes

We are small, nimble and we’re all senior-level UX consultants with particular strengths. Our small size and depth of experience sets us apart from most other companies in our industry.

We finally decided to abandon out-of-the-box tools and turn instead to one of the most reliable and flexible tools we have: HTML.

We’ve developed a re-usable library of HTML layouts and components that allows us to create detailed, interactive wireframes in the browser. It’s not quite a prototype, yet more than a traditional wireframe.

The results have been encouraging. We are able to communicate the user’s journey more clearly, detail out motion and state-based interactivity and so on.

At the same time, we can keep that vital aspect of wireframes in the mix – clients and stakeholders stay one level removed from thinking about aesthetics since it still looks like a wireframe.

Best of all, we retain complete control to customize the experience exactly how we envision it, since we have several skilled front-end coders. In fact, after client approval the wireframes can be re-used as a spring board for an HTML prototype.

If you have questions about how you can improve your website or web application, please get in touch with us to start a conversation.

By Tony Johnson
Senior Front-end Developer

Tony has spent well over a decade building interactive applications. He collaborates in the full life cycle of projects – bringing a unique blend of technical savvy, creativity and strategic thinking to our user experience consulting services.

View Tony's Bio

notch-white

Let us know your name and email address and we’ll send you our newsletter.


First Name

Last Name

Email Address

 

 

Thank you!