"web 2.0" prototyping

21 May 2007 - 4:59am
7 years ago
12 replies
972 reads
Björn Simonson
2007

Hi!

I'm curious as to how members of this list prototype "web 2.0" sites. How to make a prototype for user testing short of actually making a functioning site?

I currently work with Axure RP (on web 1.0 sites) and feel that it might not be the best tool for the job, but I can't think of anything better at the moment either.

Regards

Björn Simonson

Comments

21 May 2007 - 8:18am
Kurt Morris
2007

Although I still default to basic xHTML for most protoyping, I've found this helpful:

http://urlgreyhot.com/personal/weblog/creating_prototypes_with_omnigraffle

Click the image to view a Flash demo. It's specific to Omnigraffle (Mac), but the basic principle could be used in Visio as well.

Kurt Morris

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com [mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Björn Simonson
Sent: Monday, May 21, 2007 6:00 AM
To: discuss at lists.interactiondesigners.com
Subject: [SPAM] [IxDA Discuss] "web 2.0" prototyping
Importance: Low

Hi!

I'm curious as to how members of this list prototype "web 2.0" sites. How to make a prototype for user testing short of actually making a functioning site?

I currently work with Axure RP (on web 1.0 sites) and feel that it might not be the best tool for the job, but I can't think of anything better at the moment either.

Regards

Björn Simonson

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org List Guidelines ............ http://listguide.ixda.org/ List Help .................. http://listhelp.ixda.org/ (Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org Home ....................... http://ixda.org/ Resource Library ........... http://resources.ixda.org

21 May 2007 - 8:22am
Christopher Fahey
2005

> I'm curious as to how members of this list
> prototype "web 2.0" sites.

We're about to build a neat prototype by re-skinning several open-source products and cobbling them together into a working model. Many Web 2.0 concepts and functions exist in countless open-source platforms, both mature and sketchy, already out there for you to play with. It's amazing how much you can do with, say, a basic install of WordPress, a couple of third-party plug-ins, and a little custom PHP coding.

The result of such an approach is a little higher fidelity than a click-through, but the resulting prototype can be evolved, expanded, and tweaked quite a bit.

-Cf

Christopher Fahey
____________________________
Behavior
http://www.behaviordesign.com
me: http://www.graphpaper.com

21 May 2007 - 8:32am
Vishal Subraman...
2005

Bjorn,

What specific problems are you facing with Axure? I use it often and have
encountered very few things (tying data to the prototype being the
biggest...if I'm not mistaken, they are working on that feature for a future
release) I can't do with it.

--
-Vishal
http://www.vishaliyer.com

On 5/21/07, Björn Simonson <Bjorn.Simonson at creuna.se> wrote:
>
> Hi!
>
> I'm curious as to how members of this list prototype "web 2.0" sites. How
> to make a prototype for user testing short of actually making a functioning
> site?
>
> I currently work with Axure RP (on web 1.0 sites) and feel that it might
> not be the best tool for the job, but I can't think of anything better at
> the moment either.
>
> Regards
>
> Björn Simonson
>

21 May 2007 - 8:53am
Joe Leech
2004

> > Hi!
> >
> > I'm curious as to how members of this list prototype "web 2.0" sites. How
> > to make a prototype for user testing short of actually making a functioning
> > site?

Have been using powerpoint and you can do some little animations that
can do some basic functionality.

We are looking at starting using flash - as it seems to be getting
easier and easier to use.

A big client is also pushing for us to start using Silverlight but as
it ain't Mac it may not happen.

HTH

joe

--
*****************************************************
joeleech.net +447905 33 4163

Interesting?
http://interesting.org.uk

21 May 2007 - 9:03am
Björn Simonson
2007

Hi,

To be honest I haven't done any serious work on 2.0 functions in Axure yet but I know that our customers ask for 2.0 functionality and I'd like to be prepared.

Just looking at Gmail for example, the show/hide details option seems tricky to accomplish in Axure because of the moving of other elements. That specific function might not be very important to show in a prototype for Gmail but you can use show/hide in other contexts where it could be critical for the understanding/evaluation of the prototype.

Also, even though lots of web 2.0 stuff can be done in different programs (OmniGiraffe, Flash, powerpoint, Axure), is it worth the effort? The point of prototypes is that they are easier, faster and cheaper to make than the real deal. But with web 2.0 the prototypes seem to become ever more complex and time-consuming to make. How can we show the user what were trying to accomplish without doing hours and hours of semi-programming?

Cheers!

Björn Simonson

________________________________

From: Vishal Iyer [mailto:vishaliyer1 at gmail.com]
Sent: den 21 maj 2007 15:32
To: Björn Simonson; discuss at lists.interactiondesigners.com
Subject: Re: [IxDA Discuss] "web 2.0" prototyping

Bjorn,

What specific problems are you facing with Axure? I use it often and have encountered very few things (tying data to the prototype being the biggest...if I'm not mistaken, they are working on that feature for a future release) I can't do with it.

--
-Vishal
http://www.vishaliyer.com

On 5/21/07, Björn Simonson < Bjorn.Simonson at creuna.se <mailto:Bjorn.Simonson at creuna.se> > wrote:

Hi!

I'm curious as to how members of this list prototype "web 2.0" sites. How to make a prototype for user testing short of actually making a functioning site?

I currently work with Axure RP (on web 1.0 sites) and feel that it might not be the best tool for the job, but I can't think of anything better at the moment either.

Regards

Björn Simonson

21 May 2007 - 9:15am
Ari
2006

Axure can simulate the kind of functionality you describe via its
dynamic panel feature but there are many Web 2.0/AJAX feature it can't
do out-of-the-box such as drag and drop, etc.

Björn Simonson wrote:
> Hi,
>
>
>
> To be honest I haven't done any serious work on 2.0 functions in Axure yet but I know that our customers ask for 2.0 functionality and I'd like to be prepared.
>
>
>
> Just looking at Gmail for example, the show/hide details option seems tricky to accomplish in Axure because of the moving of other elements. That specific function might not be very important to show in a prototype for Gmail but you can use show/hide in other contexts where it could be critical for the understanding/evaluation of the prototype.
>
>
>
> Also, even though lots of web 2.0 stuff can be done in different programs (OmniGiraffe, Flash, powerpoint, Axure), is it worth the effort? The point of prototypes is that they are easier, faster and cheaper to make than the real deal. But with web 2.0 the prototypes seem to become ever more complex and time-consuming to make. How can we show the user what were trying to accomplish without doing hours and hours of semi-programming?
>
>
>
> Cheers!
>
>
>
> Björn Simonson
>
>
>
> ________________________________
>
> From: Vishal Iyer [mailto:vishaliyer1 at gmail.com]
> Sent: den 21 maj 2007 15:32
> To: Björn Simonson; discuss at lists.interactiondesigners.com
> Subject: Re: [IxDA Discuss] "web 2.0" prototyping
>
>
>
> Bjorn,
>
> What specific problems are you facing with Axure? I use it often and have encountered very few things (tying data to the prototype being the biggest...if I'm not mistaken, they are working on that feature for a future release) I can't do with it.
>
>

21 May 2007 - 9:47am
Kurt Morris
2007

>> Just looking at Gmail for example, the show/hide details option seems tricky to accomplish in Axure because of the moving of other elements. That specific function might not be very important to show in a prototype for Gmail but you can use show/hide in other contexts where it could be critical for the understanding/evaluation of the prototype.

This sort of hide/show functionality is actually pretty easy to accomplish in Visio, Omnigraffle, or PDF for that matter: Clicking a "hotspot" on, say, an expanded module links to another page where the same basic wireframe/prototype displays a collapsed module.

>> Axure can simulate the kind of functionality you describe via its dynamic panel feature but there are many Web 2.0/AJAX feature it can't do out-of-the-box such as drag and drop, etc.

There's certain functionality that, IMO, has no place in a prototype. Drag-and-Drop is a perfect example. Indicating which parts can be moved and which can't should be enough. At the point that one is prototyping that sort of functionality, one might as well be coding the site, and that misses the point. Business owners/customers, at some point, need to be able to envision what the designer is trying to convey without explicit interactivity.

A some point, it's akin to building a full-size replica of a house that someone can walk through before building the real one <g>. It's not just about the pictures, but about the words that describe them. Good verbal communication is critical, irrespective of the prototype fidelity or method used to produce them.

My .02,

Kurt

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com [mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Ari Feldman
Sent: Monday, May 21, 2007 10:16 AM
To: Björn Simonson
Cc: discuss at lists.interactiondesigners.com
Subject: [SPAM] Re: [IxDA Discuss] "web 2.0" prototyping
Importance: Low

Axure can simulate the kind of functionality you describe via its dynamic panel feature but there are many Web 2.0/AJAX feature it can't do out-of-the-box such as drag and drop, etc.

Björn Simonson wrote:
> Hi,
>
>
>
> To be honest I haven't done any serious work on 2.0 functions in Axure yet but I know that our customers ask for 2.0 functionality and I'd like to be prepared.
>
>
>
> Just looking at Gmail for example, the show/hide details option seems tricky to accomplish in Axure because of the moving of other elements. That specific function might not be very important to show in a prototype for Gmail but you can use show/hide in other contexts where it could be critical for the understanding/evaluation of the prototype.
>
>
>
> Also, even though lots of web 2.0 stuff can be done in different programs (OmniGiraffe, Flash, powerpoint, Axure), is it worth the effort? The point of prototypes is that they are easier, faster and cheaper to make than the real deal. But with web 2.0 the prototypes seem to become ever more complex and time-consuming to make. How can we show the user what were trying to accomplish without doing hours and hours of semi-programming?
>
>
>
> Cheers!
>
>
>
> Björn Simonson
>
>
>
> ________________________________
>
> From: Vishal Iyer [mailto:vishaliyer1 at gmail.com]
> Sent: den 21 maj 2007 15:32
> To: Björn Simonson; discuss at lists.interactiondesigners.com
> Subject: Re: [IxDA Discuss] "web 2.0" prototyping
>
>
>
> Bjorn,
>
> What specific problems are you facing with Axure? I use it often and have encountered very few things (tying data to the prototype being the biggest...if I'm not mistaken, they are working on that feature for a future release) I can't do with it.
>
>

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org List Guidelines ............ http://listguide.ixda.org/ List Help .................. http://listhelp.ixda.org/ (Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org Home ....................... http://ixda.org/ Resource Library ........... http://resources.ixda.org

21 May 2007 - 7:35pm
jstrande
2007

Bjorn,

One thing that I've been doing for this is actually prototyping the
various states and then communicating the design in the form of three
distinct sections:

1.) Entry State - show what the person will experience when they first
see the page

[IMAGE OF ENTRY STATE]

2.) Working State - show what the visuals are during the stage where
the application is responding / working, whatever

[IMAGE OF WORKING STATE]

3.) Exit State - show what the person will experience when the
interaction is complete

[IMAGE OF EXIT STATE]

You can have multiple prototypes for the working state; something that
shows the invocation of the request to the server, something that show
the animation that is displayed while the server is working, etc.

This style cuts down the time required for the prototyping cycle, yet
still clearly communicates all of the requisite interactions.

It has worked very well for me.

Jon

On 5/21/07, Björn Simonson <Bjorn.Simonson at creuna.se> wrote:
> Hi!
>
>
>
> I'm curious as to how members of this list prototype "web 2.0" sites. How to make a prototype for user testing short of actually making a functioning site?
>
>
>
> I currently work with Axure RP (on web 1.0 sites) and feel that it might not be the best tool for the job, but I can't think of anything better at the moment either.
>
> Regards
>
> Björn Simonson
>
>
>
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://listguide.ixda.org/
> List Help .................. http://listhelp.ixda.org/
> (Un)Subscription Options ... http://subscription-options.ixda.org/
> Announcements List ......... http://subscribe-announce.ixda.org/
> Questions .................. lists at ixda.org
> Home ....................... http://ixda.org/
> Resource Library ........... http://resources.ixda.org
>

21 May 2007 - 9:37pm
Jeffrey D. Gimzek
2007

On May 21, 2007, at 6:53 AM, Joe Leech wrote:

>>> Hi!
>>>
>>> I'm curious as to how members of this list prototype "web 2.0"
>>> sites. How
>>> to make a prototype for user testing short of actually making a
>>> functioning
>>> site?
>
> Have been using powerpoint and you can do some little animations that
> can do some basic functionality.
>
> We are looking at starting using flash - as it seems to be getting
> easier and easier to use.
>
> A big client is also pushing for us to start using Silverlight but as
> it ain't Mac it may not happen.

I am a big fan of combining flash and just plain HTML for 2.0
prototyping...

It has the benefit of being simple to build, and allows you to fake
complicated Ajax code with out complicated programming...

jd

--

Jeffrey D. Gimzek
Digital Experience Designer

www.jdgimzek.com
thundercougarfalconbird.blogspot.com

22 May 2007 - 1:29am
Björn Simonson
2007

Hi

You're right in that many functions have no place in a prototype. But you nevertheless what the user to have a good idea of how elements will behave.

I'm thinking that some kind of "interaction mood-board" would be in place. An interaction mood-board would show the user what she could expect from different elements in the prototype and aid in making the prototype seem more alive?

Has anyone tried an approach similar to this?

Cheers!

Björn Simonson

-----Original Message-----
From: Kurt Morris [mailto:KMorris at fool.com]
Sent: den 21 maj 2007 16:48
To: Ari Feldman; Björn Simonson
Cc: discuss at lists.interactiondesigners.com
Subject: RE: [SPAM] Re: [IxDA Discuss] "web 2.0" prototyping

>> Just looking at Gmail for example, the show/hide details option seems tricky to accomplish in Axure because of the moving of other elements. That specific function might not be very important to show in a prototype for Gmail but you can use show/hide in other contexts where it could be critical for the understanding/evaluation of the prototype.

This sort of hide/show functionality is actually pretty easy to accomplish in Visio, Omnigraffle, or PDF for that matter: Clicking a "hotspot" on, say, an expanded module links to another page where the same basic wireframe/prototype displays a collapsed module.

>> Axure can simulate the kind of functionality you describe via its dynamic panel feature but there are many Web 2.0/AJAX feature it can't do out-of-the-box such as drag and drop, etc.

There's certain functionality that, IMO, has no place in a prototype. Drag-and-Drop is a perfect example. Indicating which parts can be moved and which can't should be enough. At the point that one is prototyping that sort of functionality, one might as well be coding the site, and that misses the point. Business owners/customers, at some point, need to be able to envision what the designer is trying to convey without explicit interactivity.

A some point, it's akin to building a full-size replica of a house that someone can walk through before building the real one <g>. It's not just about the pictures, but about the words that describe them. Good verbal communication is critical, irrespective of the prototype fidelity or method used to produce them.

My .02,

Kurt

-----Original Message-----
From: discuss-bounces at lists.interactiondesigners.com [mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Ari Feldman
Sent: Monday, May 21, 2007 10:16 AM
To: Björn Simonson
Cc: discuss at lists.interactiondesigners.com
Subject: [SPAM] Re: [IxDA Discuss] "web 2.0" prototyping
Importance: Low

Axure can simulate the kind of functionality you describe via its dynamic panel feature but there are many Web 2.0/AJAX feature it can't do out-of-the-box such as drag and drop, etc.

Björn Simonson wrote:
> Hi,
>
>
>
> To be honest I haven't done any serious work on 2.0 functions in Axure yet but I know that our customers ask for 2.0 functionality and I'd like to be prepared.
>
>
>
> Just looking at Gmail for example, the show/hide details option seems tricky to accomplish in Axure because of the moving of other elements. That specific function might not be very important to show in a prototype for Gmail but you can use show/hide in other contexts where it could be critical for the understanding/evaluation of the prototype.
>
>
>
> Also, even though lots of web 2.0 stuff can be done in different programs (OmniGiraffe, Flash, powerpoint, Axure), is it worth the effort? The point of prototypes is that they are easier, faster and cheaper to make than the real deal. But with web 2.0 the prototypes seem to become ever more complex and time-consuming to make. How can we show the user what were trying to accomplish without doing hours and hours of semi-programming?
>
>
>
> Cheers!
>
>
>
> Björn Simonson
>
>
>
> ________________________________
>
> From: Vishal Iyer [mailto:vishaliyer1 at gmail.com]
> Sent: den 21 maj 2007 15:32
> To: Björn Simonson; discuss at lists.interactiondesigners.com
> Subject: Re: [IxDA Discuss] "web 2.0" prototyping
>
>
>
> Bjorn,
>
> What specific problems are you facing with Axure? I use it often and have encountered very few things (tying data to the prototype being the biggest...if I'm not mistaken, they are working on that feature for a future release) I can't do with it.
>
>

________________________________________________________________
Welcome to the Interaction Design Association (IxDA)!
To post to this list ....... discuss at ixda.org List Guidelines ............ http://listguide.ixda.org/ List Help .................. http://listhelp.ixda.org/ (Un)Subscription Options ... http://subscription-options.ixda.org/
Announcements List ......... http://subscribe-announce.ixda.org/
Questions .................. lists at ixda.org Home ....................... http://ixda.org/ Resource Library ........... http://resources.ixda.org

22 May 2007 - 12:07pm
Will Parker
2007

On May 21, 2007, at 11:29 PM, Björn Simonson wrote:

> You're right in that many functions have no place in a prototype.
> But you nevertheless what the user to have a good idea of how
> elements will behave.
>
> I'm thinking that some kind of "interaction mood-board" would be in
> place. An interaction mood-board would show the user what she could
> expect from different elements in the prototype and aid in making
> the prototype seem more alive?
>
> Has anyone tried an approach similar to this?

I'm getting into the habit of maintaining a personal library of
interface behavior storyboards, focusing on the small details that
give designs their flavor but might get lost in a proto.

If reviewers seem to not 'get' the overall design, I whip out my
handy Moleskine Storyboard and give an impromptu description of the
intended behavioral details and a restatement of how these effect the
user experience.

One particularly good point to having these detail storyboards on
hand in a single collection is that it prompts discussion of
alternate behaviors _before_ code -- even proto code -- is written.
(Bring pens and a big sketch pad to the meeting; that way you'll keep
the non-IxD people engaged in specifics, and if you're lucky, you'll
get some real surprises.)

Yes, a few mood boards could serve the same purpose, but as part of
my training is in film animation, I'm more comfortable with
_storyboards_ focusing on the general layout and action in the early
stages, and mood boards as a way of showing alternative static visual
details.

- Will

Will Parker
wparker at ChannelingDesign.com

“I wish developing great products was as easy as writing a check. If
that were the case, then Microsoft would have great products.” -
Steve Jobs

7 Jun 2007 - 5:49pm
Myles Brookin
2007

You might check out Simunicator as one option. Its not well known but is web based and a powerful tool for prototyping web apps. You can build online and demo to anyone with a browser. It used to be a bitch to learn to use but a new version came out that\'s a lot easier. Not for everyone but does have some unique features.

Syndicate content Get the feed