Wireframing

If I ask you what you want, what would you say?

Generally when asked people what they want, they reply with what they have but faster and shinier!

John McNeece, a cruise ship designer, said “There is a problem trying to figure out what people want by canvassing them. I mean, if Henry Ford canvassed people on whether or not he should build a motor car, they’d probably tell him what they really wanted was a faster horse.”

If you give people a blank canvas and as therm what they want, they will ask for faster horses and not the motor car.

One way to overcome the “faster horse” syndrome is to use a straw-man proposal. A straw-man proposal is a brainstormed simple draft proposal intended to generate discussion of its disadvantages and to provoke the generation of new and better proposals.

When creating services and tools one way to create a straw-man proposal is to quickly mock up a prototype using wire framing tools.

Within Jisc’s R&D team, Futures, we use a range of wire-framing tools to enable us to quickly create an app, website, tool or dashboard. It makes it easier as it strips the product down the functions ignoring design, style and branding. This allows us to focus on the functions and test user interactivity.

This allows us to create straw-man proposals that we can test with members and users and see how things could work. This is often better than just writing the process down.

The simplest tool is good old pen and paper, and you will know from previous posts that I quite like pen and paper.

There are other tools, one which can be used (which many people are familiar with) is Powerpoint. This has interactivity built in and can be used for creating wireframe tools, one challenge is to avoid adding in design, styling and clipart!

In a previous project we did use Wireframe.cc

Wireframe.cc offers a clutter-free environment instead of countless toolbars and icons that we all know from other tools and apps. You can now focus on your ideas and easily sketch them before they fade away.

What’s nice about this tool, is that it strips away all the clutter and focuses on the process and function of what you’re trying to design.

mockup-1

Another tool we have used is Invision, but this is more useful in the later design processes, but can be used for wire framing.

There are various apps in Adobe’s Creative Cloud suite that can be used including InDesign and Photoshop. Adobe have recently released XD (Experience Design).

Design and prototype websites and mobile apps with Adobe Experience Design CC (Beta), the first all-in-one solution for UX designers.

xd-riverflow2-720x522

These tools (and there are others) allow you prototype services and test them with users. Do they work? Do they help people? Are these services needed and are they useful?

In a future post we may demonstrate some working wireframes we have been working on.

Leave a Reply

Your email address will not be published. Required fields are marked *