Prototyping
is a pre-development method for integrating all the
elements that must go into your website so you have the
most effective and efficient conversion
"machine" possible. And there's no doubt about
it - taking the time to do all the fussing up front,
before you carve anything in stone, saves you lots of time
and money later in the game. Sound like something you'd go
for? Then stick around!
There
are three critical components in the planning stage of
your web project. First, you wireframe your entire
site,
creating a text-based model that establishes the flow of
your specific logical and business functions by
identifying all the entry and exit points your
users will experience on every page of your site (see (Wire)Frame
Yourself).
Once you've completed the wireframing, you are ready to
move to storyboarding, where you begin to define the look
and feel and specific content of your site (see Behind
the Scenes: E-commerce Secrets from Hollywood?).
As storyboarding moves forward, you are ready to turn to
prototyping.
A
prototype is a “model” of your finished site. When it’s
finished, it should be indistinguishable from the final
delivered project, with the exception that it has not been
coded and is not fully functional. Actually, it's a lot
like putting on a play. Long before the curtain officially
rises, the director and producer have cast the show,
choreographed it, rehearsed it repeatedly, and finally
held the dress rehearsal.
Think
of your website as such a play. Your opportunity to
prevent an “opening night" disaster comes during
the prototyping phase. This is when all the participants
who have an interest in the project can continue to
influence the final outcome, at a time when the costs of
making changes are relatively inexpensive.
We
mentioned how all too often the final project gets
developed and delivered and suddenly the client (hey, that’s
you!) has questions like “Well, can’t you make it do
this?” “That’s nice, but I’d rather have this show
up in blue rather than red” or “Uh … that’s not
what we expected!!!” These sorts of objections and
comments only occur because the prototype was left
incomplete (or didn’t even exist!) before the hard-core
development (programming, database design) was done. And
at this late stage, it costs big bucks to fix these
problems.
The
solution is to employ - and completely finish! -
prototyping first. Your goal is to establish a final
frozen prototype that is indistinguishable from what the
final product will do. If you do the pre-development
correctly, when it comes to debuting your project
officially, you should find the unveiling rather boring.
Why? Because you will have seen it all before! And because
you have signed off on the final frozen prototype, there
should be no surprises.
How
can you achieve such a positive and cost-effective
outcome? The key is in realizing that the prototype stage
“evolves” in a way the earlier stages of wireframing
and storyboarding do not. Prototyping of a static web site
(what is often called “brochure-ware” on the web) can
often occur in tandem with storyboarding. You may have
seen this in action: some designers will demonstrate the
“look-and-feel” of design and layout elements, while
in the active window content area they insert a whole
bunch of pig Latin text (or 17 million blah blah blahs, my
personal favorite). Why? Because at that moment the idea
is to focus the website owner on the user interface rather
than the content. But as the storyboard begins to take
shape, the prototyping continues to evolve as content is
solidified. Here, especially in a dynamic site or
application, it is vitally important to continue
reiterating each and every piece of the application so the
appearance of the prototype becomes more and more what you
want to see in the final project.
As
you progress, you will note your concerns shifting from
user interface issues to more content-driven topics:
"Ok, great … this is where we get the results of a
search form the user filled out. But what exactly
will be displayed on the screen?" If you’ve done
the previous pre-development steps correctly, you already
will have sorted out the look-and-feel issues, so now you
just need to produce a screen shot that mimics exactly
what you want to see in the finished product. You do this
for each and every screen your users will see. Addressing problems now is guaranteed to be a lot cheaper
than ignoring them or simply overlooking them and then
having to fix them in the hard-core development phase,
when much more expensive people are on the payroll and a
change to one area may require changes to many other
areas.
John
asked that I make a point of mentioning two neat ideas
he's been using recently1.
The first is the notion that you evolve towards a frozen
prototype using “development notes” that you manage on
a screenshot-by-screenshot basis (this can be done easily
if you are developing a web-based application, since these
notes, which relate only to their associated pages, would
appear at the bottom of each and every page). This helps
keep a record of change requests as they occur. Doing this
provides a vital history of how things have evolved. And
you know you are truly done when the entire list is
checked off.
The
second idea is this: once the final prototype is complete,
you make sure all the decision-makers who have a say in
the end product sign-off on the prototype, freezing the
format. After this point, you don't allow any further
changes, and they can’t argue they weren’t informed or
involved.
If
you’re the client, you might want to consider writing
these points into a development agreement, such that any
changes after a prototype is frozen occur at the option
and expense of the developers. Pity the poor project
manager faced with $500/hour change requests that he might
have got for a fraction of the price had he just taken the
time to finish the prototype!
John
says every time he's seen this process implemented, the
result has been delivery of the final product in weeks
rather than months, months rather than quarters. And
often, quite delightfully, under-budget! (Is he my
wireframing hero or my prototyping hero? Decisions,
decisions!)
So
… what are you waiting for? Start prototyping!!
---
1
John tells me these ideas originated with fellow Cold
Fusion guru Hal Helms.
|
Hey
Everyone,
My good friend Roy William's Magical
Worlds of the Wizard of Ads: Tools and
Techniques for Profitable Persuasion
officially became a Wall Street Journal Bestseller
last Friday. I just finished my preview copy and I
recommend it highly (it's a wonderful preview to
the Wizard Academy). Get
yours today and enjoy some of the
Wizard's magic.
The
GROK
|
When Content Isn't King
A
while ago, when heavyweights like Forrester
Research
proclaimed content the single biggest motivation in
getting people to log onto the Internet as well as
return to a website, folks started jumping on The
Content Bandwagon. After the initial rush to pad sites
with tons of content, folks are finally starting to examine
both the role and the value of content a lot more
critically.
Now
that we’ve got some experience and some data, what we
know is this: Not all content is created equal.
There are times when content is at best pointless, at
worst actually destructive to conversion rates, and in
any case most definitely not King (or even Prince).
According
to a UCLA study, the Internet now beats out radio,
television and magazines as an information resource
(only newspapers - by a tiny margin - and books ranked
higher)1. People do come to the Internet
to get content. But don't go thinking just because
people go online for content, they want that content
from your site or that providing it automatically will
help your sales. Think of it as the online equivalent of
the old "milk argument," the one that says 90
percent of the people who go shopping buy milk, so if
you want to increase sales in, say, your hardware store,
all you have to do is add a milk cooler.
There
is a difference between searching for content and
going shopping. When people want content on the web,
they go to sites that specialize in precisely the
content they seek. When they want to buy something
online, they want sites that offer a simple, trustworthy
and streamlined buying experience (as well as
outstanding service and great value), The only content
they want is stuff that will directly help them make
a more confident buying decision. Anything else only
confuses them, or distracts them from buying, or slows
the sales process, or bloats your site.
In
e-commerce, content provides a lot of what you'd get
from a real-world salesperson. You gotta have it, and
because it occupies a central place in supporting the
primary sales goals of your site, you cannot give it
secondary consideration in the planning and execution of
your site. You must make sure you have the content
you need - but only the content you need, and
content that is going to earn its keep.
You
need content that's clear, concise, vivid, compelling,
and strictly related to your product or service or to
your expertise. It must motivate the shopper directly
toward becoming a buyer. These days, folks are even monitoring
the effectiveness of their site's content by
tracking which elements prompted the best over-all
results2. When you back-up killer content
like this with a site that excels at the 5-step
professional selling process - as an expert salesperson
in the offline world would do - you will have a site
that doesn’t just lay there and hope people will buy;
you will have a site that sells.
Content
is not King when it exists simply for its own sake,
or when it attracts unqualified traffic that isn't
interested in making a purchase from you, or when it
undermines your sales process, or when it adds
distracting layers that impede your prospect’s
momentum toward becoming a buyer. So if you jumped on
The Content Bandwagon, consider putting your content on
a serious diet. Only then will you find yourself with
content that truly rules!
1
"UCLA
Report Finds Internet Surpasses Television As Key
Information Source." Harlan Lebo. 15 August
2000.
2 See
"Optimize
Content to Maximize the Bottom Line." Charlie
Tarzian, ClickZ, 30 March 2000.
|
Home
