Making the most of wireframes

This is the sixth post in a series that takes a look at information architecture (IA) best practices in higher education. Each post focuses on a specific best practice. In this post we’ll discuss usability testing.

For those new to information architecture, it is the practice of organizing information, in this case websites and the content found within them, to make it understandable and findable. Information can be messy and IA tries to make sense of it.

What is a wireframe?

A wireframe is the skeleton of your website—the underlying foundation on which content and design are applied. A wireframe includes:

  • All the pages on your site with rationales for why they are there
  • Labels for those pages
  • How pages connect with one another
  • Notes about content required on each page as well as source content notes

They also include information about any custom interactions that may be on the website. These would be special pieces that require additional programming. For example, a degree list, a timeline, a gallery, etc.

Why are wireframes important?

The wireframe helps everyone visualize the website and get a sense of scope. It’s much easier to understand what pages need to be written and designed when you can actually see them.

It also helps everyone visualize how people will move through your website. Because a wireframe has some basic functionality people can navigate and interact with it.

And that interactivity allows for usability testing of the wireframe. We recommend usability testing to see if people are moving through the website in the ways you imagined. Testing is important because you can check your work before you go too far in any one direction. You can read my post on usability testing for more details.

Tips for reviewing wireframes

As an IA I love looking at wireframes, but I’ve come to realize that isn’t the case for most people. Instead of treating a wireframe review as a tedious chore, use these tips to change your perspective and get the most out of it.

Navigate the site as your audience would

Use the wireframe to try to find the information they would be looking for. What is your experience like? Do the labels make sense? What about the content notes?

Read the content notes as though you were the main audience

Does the topic of the page makes sense with the page label? Are the notes missing anything a user would expect to find on a page? Do the notes mention content that isn’t relevant to your users?

Don’t forget about source content

Notes about source content are easy to overlook. As the owner of website’s content, make sure you review them. This is where you’ll see which pages are being combined and how the new site compares to the old site. It’s also a good time to take a look at the source content itself to make sure it is correct.

A great time for discussion

This is the time to dig in, review the site from your audience’s perspective, and ask questions. If you put the effort into evaluating the structure of the website at the wireframe stage you’ll encounter fewer surprises and changes later in the project.

Join us and #RaisetheFlag

The IU flag flies in front of Assembly Hall

For the past 16 months, Team Social has been brewing up something special that will reach every IU campus, and it is just about time to release it into the world.

You’ve probably seen everyone from the Chicago Cubs to IU Bloomington Athletics using the phrase “Raise the Flag” recently at games.

IU Communications, in tandem with IU Athletics and dozens of other partners across the system are taking that campaign beyond Athletics and proving the promise of an IU education can work anywhere.

We’re flooding the market with more than 3,300 IU- and IUPUI-branded flags, asking recipients to display photos of themselves with their swag to social media with the hashtag #RaiseTheFlag.

Meanwhile, Team Social will aggregate the images into one beautiful online mosaic—raisetheflag.iu.edu, which will go live later this month—showing that IU Nation truly is everywhere, from Bloomington to Budapest and Kokomo to Kathmandu.

This effort will be what we’re calling a “slow burn,” with flags going out in waves and posts trickling in over several months, starting later this month and going up until mid-August. We anticipate a small bump in activity around Spring Break and a bigger peak over the summer from students on study abroad trips and internships.

Interested in joining the movement?

We have a limited amount of flags left for units requesting batches of 10 or less but also have a deal in place with a vendor to supply additional flags for an affordable price, should any group be interested in buying more. To learn more, you can contact me at kkarol@iu.edu.

Naturally, if you already have your own flags, join in on the conversation on social—especially on Twitter and Instagram—by posting photos as soon as you are available to do so.

Who’s ready to break the Internet?