On Apr 16, 2008, at 10:20 AM, Connor, Adam wrote:

[] Here's how I differentiate: Wireframes - standalone "illustrations" of screens void of graphic treatment, with indications of functionality and screen flow. Prototypes - interactive versions of screens with varying levels of graphic treatment/fidelity. The interactivity of the screens should mimic the intended functionality of the final product.

Just came off this discussion at the IA summit. It's really fuzzy when you're discussing wireframes vs. a prototype, as in reality prototypes can be a very broad range of things. However, the one thing the group I was discussing this with agreed on is that a wireframe doesn't have to have a sequence of events, or display a sequence of screens. On the other hand, to be considered a prototype it would need to have some type of sequence, the ability to move from one state/screen/page to another, or the ability to simulate moving from one point/state/screen to another point/state/screen.

For instance, a prototype could be made up of a series of wireframes that communicate how a customer/user would move through time and/or space. A wireframe doesn't have that stipulation.

This was the one thing we all agreed on. There was some initial disagreement as to whether or not prototypes had to be interactive— half thought yes, half thought no. After we came to the consensus that prototypes required the ability to show/communicate movement through time/space, then there was consensus that prototypes could be built of static screens stitched together w/o having to be truly interactive— they could fake it.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully. Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
In theory, theory and practice are the same.
In practice, they are not.

Todd,

I love your definition of a prototype: A prototype needs to have some type of sequence, the ability to move from one state/screen/page to another, or the ability to simulate moving from one point/state/screen to another point/state/screen.

I would argue that a process flow that described this type of sequence would be a protope. Perhaps even a narrative describing a sequence would be a prototype.

The essential core definition of a prototype is that it communicates the flow through a sequence.

Andy Switzky
Senior Information Architect
Austin Energy - Web/Portal Services
www.austinenergy.com

w: 512.322.6318
f: 512.322.6025

Original Message
From: discuss-bounces at lists.interactiondesigners.com [mailto:discuss-bounces at lists.interactiondesigners.com] On Behalf Of Todd Zaki Warfel
Sent: Wednesday, April 16, 2008 10:52 AM
To: Connor, Adam
Cc: discuss at ixda.org
Subject: Re: [IxDA Discuss] Wireframe vs. Prototype

Just came off this discussion at the IA summit. It's really fuzzy when you're discussing wireframes vs. a prototype, as in reality prototypes can be a very broad range of things. However, the one thing the group I was discussing this with agreed on is that a wireframe doesn't have to have a sequence of events, or display a sequence of screens. On the other hand, to be considered a prototype it would need to have some type of sequence, the ability to move from one state/screen/page to another, or the ability to simulate moving from one point/state/screen to another point/state/screen.

For instance, a prototype could be made up of a series of wireframes that communicate how a customer/user would move through time and/or space. A wireframe doesn't have that stipulation.

This was the one thing we all agreed on. There was some initial disagreement as to whether or not prototypes had to be interactive- half thought yes, half thought no. After we came to the consensus that prototypes required the ability to show/communicate movement through time/space, then there was consensus that prototypes could be built of static screens stitched together w/o having to be truly interactive- they could fake it.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully. Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
In theory, theory and practice are the same.
In practice, they are not.

Welcome to the Interaction Design Association (IxDA) ! To post to this list . discuss at ixda.org
Unsubscribe .... http://www.ixda.org/unsubscribe
List Guidelines http://www.ixda.org/guidelines
List Help http://www.ixda.org/help

I would also add to that that it captures to core concept or original intent and communicates this through a sequence of screens, stages, or events.

On Apr 16, 2008, at 12:00 PM, Switzky, Andrew wrote:

The essential core definition of a prototype is that it communicates the flow through a sequence.

Cheers!

Todd Zaki Warfel
President, Design Researcher
Messagefirst | Designing Information. Beautifully. Contact Info
Voice: (215) 825-7423
Email: todd at messagefirst.com
AIM: twarfel at mac.com
Blog: http://toddwarfel.com
Twitter: zakiwarfel
In theory, theory and practice are the same.
In practice, they are not.

Pretty simple to me...

Wireframe: a static skeletal structure of content, drawn to proportion for your screen

Prototype: a behavioral representation of the final product, at varying degrees of fidelity (from skeletal to rich)

Hope this helps,

Uday Gajendar
Sr. Interaction Designer
Voice Technology Group
Cisco | San Jose
ugajenda at cisco.com
+1 408 902 2137

On Apr 16, 2008, at 7:20 AM, Connor, Adam wrote:

A common point of confusion when I've partnered with other IAs/Interaction Designers/UX Designers, yadda yadda yadda is what a wireframe is vs. what a prototype is. Everyone seems to have a slightly different take on them. Here's how I differentiate: Wireframes - standalone "illustrations" of screens void of graphic treatment, with indications of functionality and screen flow. Prototypes - interactive versions of screens with varying levels of graphic treatment/fidelity. The interactivity of the screens should mimic the intended functionality of the final product. So, am I missing something? Are their varying definitions out there for these two deliverables. [trim]

On Apr 16, 2008, at 9:00 AM, Switzky, Andrew wrote:

I love your definition of a prototype: A prototype needs to have some type of sequence, the ability to move from one state/screen/page to another, or the ability to simulate moving from one point/state/screen to another point/state/screen.

This is an unsatisfying definition.

Behavior is not reduced to a sequence. To think so is a web page model of thinking. That mode of operation never was the genesis of "interaction" in software design. The genesis was always applications, and more so the early software apps like MS Word and Wordstar back before graphical interfaces became popular, but even more so once something like MacPaint and MacWrite hit the market.

Behavior is just that: behavior. It's interactive, however that expresses itself. Sometimes it a sequence, but in the near future as technology catches us back up to where we were in the late 1980s, it won't be sequential at all. Example: How is a modeless palette that updates and changes based on selection a "sequence" of anything? And yet, that sort of widget is one of the most interactive things in desktop software.

Uday's definition is far more appropriate. A prototype is a behavioral representation of the final product, at varying degrees of fidelity (from skeletal to rich) .

A sequence can work sometimes as a prototype, but more often than not, it fails at being a very good prototype, and it especially falls down on learning any truly useful information from it when put in front of real customers. Unless of course the product is a non-Ajaxified web site.

-- Andrei Herasimchuk

Principal, Involution Studios
innovating the digital world

e. andrei at involutionstudios.com
c. +1 408 306 6422

I think this is close, but still not completely on target. I'm reminded of Jeff Hawkins of Palm, who carried around a block of wood in his pocket as a prototype for the first Palm Pilot.

To me, a prototype is a representation of some attribute(s) of your final product that you are evaluating. So, whether it has behavior (like a clickable PDF prototype of a website) or something more basic, like size, weight, or material, it's a prototype.

A wireframe is a description of the product you intend to create. It can be used to evaluate some attributes, but as others have noted, it's not usually very good at this because that is not the true nature of the thing.

Dante

wireframe: http://tinyurl.com/3ndgy8
prototype: http://tinyurl.com/46trp5
specification: http://tinyurl.com/3mlsk2
documentation: http://tinyurl.com/42p28n

p.rototyper

I develop RIA and games, where I find that webpage methodologies break down, and use several terms/tools:

Wireframe - a single screen as output by IA's, typically representing one state at a time, a skeleton to serve as a container for available copy and for graphic design to flush out as 'Comps' Storyboard - sequence of wireframes + graphical interaction (mouse clicks, drags), typically a one way trip through a system, trying to get buyin from the entire team.
Comps - a single screen as output by graphical designers based on Wireframes. Interactive Wireframe - aka clickthroughs, wireframes stacked in time, selectively hiding an showing things, to help flush out the interactive architecture. As somethings have to be played to be understood.
Mockup - a high graphic fidelity, but limited in interactivity similar to a theme park ride. Great fun on the ride, but get a few feet off the track and the whole thing breaks down.

Statemap/Lifecycle - a heirarchical statechart of all system states and events between them, frequently having links/thumbnails to various fidelity comps. Like a subway map it should encompass at varying levels of detail the entire system of states relevant. I find this missing in most designs. Screw this up then everything is already broken. Been compiling a library of common LifeCycles (user registration, media players), as I find that they are constantly rediscovered, and getting them rightcan be tricky. Flow - a particular usecase/workflow across the statechart.

Prototypes - a typically technically driven 'spike' to answer a narrow question if something is feasible or not, or better than another scenario. Often using whatever is available ducktape, wood, paper + glue. typically disposable.

You are correct, anything that isn't building the final release meets the definition of a prototype. Thus I find it's more practical to have more specific terms (like mockup) to describe what I expect of a deliverable, what it does and what it won't do. However in the case for questions like 'can we sort 10000 items clientside, based on the dominate color' generally there isn't any other term available, so I use spike/prototype.

On Wed, Apr 23, 2008 at 8:09 AM, junu bubble.bling at gmail.com wrote: Aren't wireframes a type of Prototyping? Maybe not in the corporate jargon, but certainly from a design process POW. Anything that starts to simulate the final product in form, behavior, material/technology is a form of prototyping. I guess maybe it's b/c I regard prototyping almost analogous to sketching (a la Bill Buxton) ...

I consider a wireframe a type of prototype.

If the type of prototype has active interactive functions I call it "interactive prototype".

Prototype Non-Active Functionality Wireframe
Prototype Active Functionality Interactive Prototype

Posted from the new ixda.org
http://www.ixda.org/discuss?post=28118