A simpler and faster alternative to wireframes

I recently explained why wireframes can hurt your project. My point was that in a lot of cases, you can save time by designing in Photoshop straight away or using a HTML prototype to flesh out your app. But some people rightly pointed out that wireframes were a better tool for sharing information in a way that’s approachable to people without design or coding skills.

Although that’s a good point, in my opinion there’s a better, faster, and easier way to accomplish that goal: prioritized lists.

Wireframes: an evil force of destruction and despair?

Goals and elements

It’s an extremely simple technique, and you don’t need any special kind of software to do it. You can do it inside a plain old email, and here’s how it works. For each page, make a list of all of that page’s goals and elements.

A goal is the reason that page exists in the first place. For a homepage, it could be something like “make people sign up”. For a support page, it could be “make it easy for people to contact us”, or maybe “route people through the right support channels so they don’t need to contact us”. You goal list should generally have between 1 and 3 items. Any more than that and it means your page lacks purpose and will not be effective.

And an element is simply anything that appears on the page: buttons, navigations, taglines, forms, etc. Your element list should include between 5 and 10 items, depending on how thorough you want to be. For example, it’s usually not very useful to list every single navigation element as separate items, and you can also omit basic elements that already have a fixed location like the logo or footer.

A call-to-action button on Zendesk.com

Once you have your two lists, sort everything in three buckets: Most Important, Important, and Secondary. Your “Most Important” bucket should not have more than 1 to 3 items, otherwise it’s a symptom of an unfocused page. Your “Important” bucket will usually have about 4-5 items, and the “Secondary” bucket simply contains all the other stuff.

Focusing on content

The advantages of this technique over traditional wireframes are two-fold: first, it’s quicker and simpler to do. But the other big advantage is that it encourages people to think in terms of goals and content rather than layout. Removing the layout from the equation completely means that all design decisions will belong to the designer when it comes time to create a Photoshop mock-up or a HTML prototype, and those decisions will be much more meaningful at that stage.

An example: Zendesk.com

Since the easiest way to learn is by studying a concrete example, let’s pick a site (for example, the great Zendesk.com by the fine folks at the Cuban Council) and apply this technique retroactively.

The Zendesk.com homepage

Goals

Get people to try the service

Elements

Most Important

“Try it free” button
Tagline

Important

Main navigation (home, pricing, customers, your)
“What is Zendesk” paragraph
Companies using Zendesk

Secondary

Secondary navigation (contact us, resources, login)
“Close your customer loop”
“Register for live webinar”
“Your guide to selecting help desk software”

That’s it! Of course, coming up with that list in the first place takes some time and effort, but it’s still a fairly quick process compared to whipping up a wireframe.

You’ll notice I left out some elements. For example I didn’t mention the homepage screenshots illustration at all. That’s because this kind of graphics is there to support your message, but it’s usually not the message itself. At this stage of the process, you probably won’t know what will work best yet, and that kind of decision is best left to your designer.

I hope you’ll get a chance to try this technique for your next project, and be sure to let me know how it worked for you.

Pingback: Tweets that mention A simpler and faster alternative to wireframes | Attack Of Design -- Topsy.com

Helen says:

Sketching and wireframing straight in WordPress or Flash nowadays depending on project. Better, faster, flexible… styleswitchers for iterations and so on. Wireframe-software is just another thing in the way. Mostly.

Saddam Azad says:

I use prioritized lists as a perquisite for wireframes. It helps me deliver more focused wireframes for presentation purposes.

I don’t think this technique is an “alternative” to wireframes, as it is better used in conjunction with wireframes.

Cat Lady says:

February 15, 2011 at 7:03 pm

I totally agree! Although, I have cheated and skipped the wireframe – it helps to have frameworks so it’s not a disaster if you do skip the wireframe…

Jenius says:

February 23, 2011 at 1:39 am

I also agree here. I do lists first, then wireframe, then design. And like cat lady said, I did at one point skip wireframes, but they are so quick and an easy way to ensure that everyone is on the same page with regards to macro level site elements that I think it’s worth the 5 or so minutes it takes me.

Jeremy says:

March 8, 2011 at 4:55 pm

This post may have a point for small sites like the author used as an example, but wireframes are the quickest and most efficient way to flesh out the details of possible use case scenarios for larger projects. Prioritized lists don’t enable developers and clients to take get visual walkthroughs of the user experience and account for all possible flows.

Many of my clients have provided “detailed” prioritized lists in the past. All of them have been delighted by the opportunity to collaboratively brainstorm over the resultant wireframes with our team, discover issues they hadn’t thought of, and work through several revisions until the entire picture makes sense.

Starting a large development project with prioritized notes alone is like trying to complete a puzzle that has a description on the box without any pictures.

Bob Koon says:

Good article. Thank you for posting.

What you’re describing is a very good technique, and one that should be followed. However, as Saddam pointed out, I don’t believe it’s a replacement for wireframes. Rather, it’s the step(s) to take before wireframing and layout design begins; it’s a way to streamline the wireframing process.

Sacha says:

February 16, 2011 at 3:31 am

Good point. I guess I should be more specific: prioritized lists can replace wireframes as a way to gather requirements and frame the content. Wireframes can still be used afterwards to flesh out the design (unless, like me, you prefer to skip them altogether and start in Photoshop straight away. See my previous post).

Matthew Harpin says:

Nice Article Sacha,

The ZenDesk example is great… pretty much what I was getting at in my comment on your previous article.

Nice blog too Sacha!

Forrest Tanaka says:

Thank you! Wire-framing never worked for me, and I felt a little bit of guilt about that. Your method is pretty similar to what I do, though I think yours is more organized; I’ll try that on the next site. Also, I use Notebook from Circus Ponies which lets you link concepts to other pages with a click, so it works a little bit like a real site (I don’t have any relationship with Circus Ponies aside from purchasing Notebook).

Jussi Pasanen says:

Hi Sacha, thanks for sharing this interesting technique! It reminds me of Dan Brown’s “Page Description Diagrams” as explained on Boxes and Arrows and Konigi:

With this approach, the diagram represented the two main issues: priority and content.

Has anyone seen or used PDD’s in their projects? How did you go with them?

Sacha says:

March 1, 2011 at 12:38 am

Very good articles. I think PDD’s are more or less the same thing as prioritized list, except they look a little more detailed.

I also agree with Dan Brown’s assessment of wireframes, by the way.

Steve Rydz says:

This certainly is a novel approach and also very similar to the one I take when I start my projects however wireframes to still play an important part in my design process.

I don’t tend to make gray box diagrams anymore unless the client really insists on it but tend to work more with sketches.

So it’s really quite a simple but effective process, list the important and necessary elements of the page, define what order they should appear in and then sketch out roughly where they need to be placed and how much weight each element is given.

From there the visual design is relatively straight forward as long as you have a clear idea of the aesthetic direction you are taking.

Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.76)-Speckyboy Design Magazine | Speckyboy Design Magazine

Pingback: Alternative to Wireframes: Prioritized Lists.

Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.76) | Preukson