Picture this scenario: You, the instructional designer, are talking to a client about a new eLearning project. She describes an activity. You start to write down what she’s saying, but you stop yourself. Instead, you sketch out a series of screens. You sketch the same content as it would appear on a desktop screen (horizontal) and on a tablet or smartphone held vertically. She quickly realizes that she needs less text and a different graphic.
Guild Master Nick Floro is a passionate advocate of this method of scoping out a project. It’s called “wireframing,” and (he claims) it works even if you have zero artistic talent. “Wireframing is a great way to prepare the stakeholder and your team for what needs to be created. It allows you to test a concept and analyze what is possible,” Floro said.
A wireframe focuses on how space is allocated to different types of content: text, images, menus, buttons. It illustrates intended functionality and behaviors. A series of wireframe sketches can show the navigation and relationships between pages or how a single page will look on different devices—a laptop, a tablet, and a smartphone, for example.
In an earlier interview, Floro described the process like
this: “If you write down those notes in bullets, it looks good, and
you’re repeating it back to them [the client]. But if you sketch the idea, and
they’re saying that they want a picture, but they don’t have an idea what the [quiz]
question is. It might be two words or three paragraphs. Because you don’t have
the data when you start to sketch, you show them: You have some squiggly lines
representing a short question and some squiggly lines representing a long
question. They are able to visualize what will happen if I deliver this to a
phone vs. a tablet vs. a computer. How much real estate do we have
to
work with?”
Figure 1: Wireframes show how space is allotted
In a nutshell, wireframing is sketching, rather than using words, to outline a project, imagine its screens and layouts, and see the eLearning begin to take shape. Especially now, when most eLearning has to work on multiple devices, it is essential to visualize the same content on different-sized screens and to imagine the horizontal as well as vertical layouts. A wireframe is easier to adapt and change than a prototype, so it’s a low-risk place to start conceptualizing an eLearning project. It’s easy to review the design with a client—and to tweak, update, or toss and start over—before too much time, effort, or budget is burned on development.
A caveat: Wireframes are relatively simple. Some clients will not fully understand the concept or functionality they illustrate. Even so, wireframes are an excellent first step in the design and development process.
You can sketch the wireframe by hand, use a template (one that shows the different screen sizes and orientations, for example), or use a tool. “There are so many tools today to get started, from PowerPoint or Keynote to Marvel App to InVision to Proto.io to Adobe Experience Design,” Floro said.
From the wireframe or sketch, the next step is a prototype—a working model of the bare-bones product. (See “MVP Is the Key to Agile Project Management” for more on prototyping.) Floro says that sketching aids in communication—all the parties can tell if they are imagining the product the same way. He even created an online resource to help IDs get started.
“Look at using it [wireframing] to start to gather audience feedback and input, where you can walk them through the concept and then ask them what works, what doesn’t, what would be helpful,” Floro said. “Use that to quickly iterate and build the next version. Once everyone is on the same page, move into building a working prototype, gather feedback, iterate—and then move into development.”