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.
Tweets that mention A simpler and faster alternative to wireframes | Attack Of Design -- Topsy.com
[...] This post was mentioned on Twitter by Adeline Yaw, louhong, HN Firehose, Sacha Greif, Newsery 3 and others. Newsery 3 said: A simpler and faster alternative to wireframes – http://bit.ly/fP2FFV – [Hacker News FH] [...]