Rapid Prototyping: Visio

16 Jun 2004 - 7:56pm
10 years ago
9 replies
1882 reads
whitneyq
2010

At 08:35 PM 6/16/2004 -0400, Jim Hoekema wrote:
> > Eg: I put a button on-screen and activate it to go to page 2. I've tried
> > Object Behaviours and I've tried Hyperlinks. Since Visio likes to float
> > every page uniquely on the background, linking from one page to another
> > causes undesired jumpiness. I tried viewing fullscreen, but the
> > hyperlinks don't preserve full-screenness (full-screnity?) from page to
> > page. Why is it so difficult to do what I thought would be a commonly
> > desirable task?

The simplest way to keep the contents of each page from moving off
registration is to put them into a background. And you can layer
backgrounds, making them easy to turn on and off for different reasons.

Here's what I do:

Background 1 is a page header (project name page name, edit date, page
number, etc all inserted automatically from the file properties or other
Visio field variables). This is helpful for printing (or distributing as a
PDF) for review.

Background 2 is a blank browser background with window frame, browser
button bars and so on represented. I've taken some time to set the size so
I have one for ~full 1024x768 and one for ~full 800x600. A very pale grey
line shows the bottom of the fold. (I have the same for a general window,
for non-browser apps)

Background 3 is any standard elements in the page layout. Things like
colored background for a left/top menu, logos, standard links, footers that
never change etc.

Then, I make a set of stencils for things that go on each page, but might
change - headers, menu contents, menu highlights.... These can be dragged
onto any page (and customized - for example, typing a page name for a
PageTitle stencil). If you update the stencil, Visio will preserve the
changes - so you can change a style (say, font or font size) without having
to update each instance.

You can make a stencil on the fly very easily (for one drawing) by just
pasting something you draw on the page into the Drawing Stencil (which
shows all the stencils used in that file). After that, it acts like any
other stencil.

What's nice about this is that all the pages are registered, because they
are all built on the same background. You can also put layout guides in the
background and then snap things to them.

You could, of course, put all of this on one background, but one advantage
of having the browser frame separate is that you can create many different
page templates and they still register without having to experiment with them.

You can put hyperlinks into any layer - so that a top menu, for example,
will always have links without having to reproduce them on each page.

The Save As HTML works pretty well, but I have found it "recalcitrant" at
times - so test as you go. My experience has been that when it works, it
works, but that when it doesn't it's a pain.

I met Visio when it was a mere demo disc and (with occasional tantrums)
we've been doing OK. I'm pretty sure that we mostly have a peaceful
relationship because it's trained me ("touch that feature and I will hurt
you"), and I've created a lot of small tools that help me work faster, so
we've reached a sort of detente.

Whitney Quesenbery
Whitney Interactive Design, LLC
w. www.WQusability.com
e. whitneyq at wqusability.com
p. 908-638-5467

UPA - www.usabilityprofessionals.org
STC Usability SIG: www.stcsig.org/usability

Comments

17 Jun 2004 - 9:00am
Marci Ikeler
2003

Whitney's comments below are excellent -- they're some of the same
things I've discovered that make prototyping in Visio quite fast.

An additional tip I've picked up is the use of very simple javascript in
hyperlinking objects -- specifically, the window.history.go method.
This basically mimicks the behavior of the back or forward buttons in
the browser once you've exported your file to the web.

For example, in a recent project, I had an "Export" button on nearly
every screen that always launches the same Export Dialogue. To make
this work using normal page linking behavior in Visio, you would need to
have a separate Export Dialogue screen for every other screen in the app
to make the "Cancel" button work effectively. However, by including the
script "javascript:window.history.go(-1)" in the hyperlink dialogue, you
can reuse the same Export Dialogue screen; clicking "Cancel" will always
return you to the previous page. Seems fairly minor, but it was a big
discovery for me.

In response to the larger question about prototyping tools, I personally
feel that Visio is the best one out there. This isn't to say it's a
perfect product -- lots of things about it, frankly, suck. But I
recently was able to create a completely interactive (all interactive
elements functioning, sans data entry) prototype for a 90 screen
client-side application within 2 days. I don't know a single other tool
that can compare to that turn-around time -- the estimate from our Flash
developer was 3 weeks, and that was without the same level of
interactivity.

One big problem with Visio I haven't been able to solve is the ability
to show/hide layers or shapes, for example to recreate the feel of a
drop-down menu. I've experimented a bit with the Visio VB editor and
have written some macros that work, but they aren't included when you
export the file to web. So, if anyone can solve that for me, I'll be a
very happy person.

-Marci

-----Original Message-----
From:
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesign
ers.com] On Behalf Of Whitney Quesenbery
Sent: Wednesday, June 16, 2004 8:57 PM
To: discuss at interactiondesigners.com
Subject: RE: [ID Discuss] Rapid Prototyping: Visio

At 08:35 PM 6/16/2004 -0400, Jim Hoekema wrote:
> > Eg: I put a button on-screen and activate it to go to page 2. I've
> > tried Object Behaviours and I've tried Hyperlinks. Since Visio
> > likes to float every page uniquely on the background, linking from
> > one page to another causes undesired jumpiness. I tried viewing
> > fullscreen, but the hyperlinks don't preserve full-screenness
> > (full-screnity?) from page to page. Why is it so difficult to do
> > what I thought would be a commonly desirable task?

The simplest way to keep the contents of each page from moving off
registration is to put them into a background. And you can layer
backgrounds, making them easy to turn on and off for different reasons.

Here's what I do:

Background 1 is a page header (project name page name, edit date, page
number, etc all inserted automatically from the file properties or other

Visio field variables). This is helpful for printing (or distributing as
a
PDF) for review.

Background 2 is a blank browser background with window frame, browser
button bars and so on represented. I've taken some time to set the size
so
I have one for ~full 1024x768 and one for ~full 800x600. A very pale
grey
line shows the bottom of the fold. (I have the same for a general
window,
for non-browser apps)

Background 3 is any standard elements in the page layout. Things like
colored background for a left/top menu, logos, standard links, footers
that
never change etc.

Then, I make a set of stencils for things that go on each page, but
might
change - headers, menu contents, menu highlights.... These can be
dragged
onto any page (and customized - for example, typing a page name for a
PageTitle stencil). If you update the stencil, Visio will preserve the
changes - so you can change a style (say, font or font size) without
having
to update each instance.

You can make a stencil on the fly very easily (for one drawing) by just
pasting something you draw on the page into the Drawing Stencil (which
shows all the stencils used in that file). After that, it acts like any
other stencil.

What's nice about this is that all the pages are registered, because
they
are all built on the same background. You can also put layout guides in
the
background and then snap things to them.

You could, of course, put all of this on one background, but one
advantage
of having the browser frame separate is that you can create many
different
page templates and they still register without having to experiment with
them.

You can put hyperlinks into any layer - so that a top menu, for example,

will always have links without having to reproduce them on each page.

The Save As HTML works pretty well, but I have found it "recalcitrant"
at
times - so test as you go. My experience has been that when it works, it

works, but that when it doesn't it's a pain.

I met Visio when it was a mere demo disc and (with occasional tantrums)
we've been doing OK. I'm pretty sure that we mostly have a peaceful
relationship because it's trained me ("touch that feature and I will
hurt
you"), and I've created a lot of small tools that help me work faster,
so
we've reached a sort of detente.

Whitney Quesenbery
Whitney Interactive Design, LLC
w. www.WQusability.com
e. whitneyq at wqusability.com
p. 908-638-5467

UPA - www.usabilityprofessionals.org
STC Usability SIG: www.stcsig.org/usability

_______________________________________________
Interaction Design Discussion List discuss at interactiondesigners.com
--
to change your options (unsubscribe or set digest):
http://discuss.interactiondesigners.com
--
Questions: lists at interactiondesigners.com
--
Announcement Online List (discussion list members get announcements
already) http://interactiondesigners.com/announceList/
--
http://interactiondesigners.com/

17 Jun 2004 - 9:28am
Dave Collins
2004

>The simplest way to keep the contents of each page from moving off
registration is to put them into a background. And you can layer
backgrounds, making them easy to turn on and off for different reasons.

I may be making slightly different use of it than appears the norm.

For starters, the big picture:

- What I'm prototyping is ATM cash terminal interaction. You press a
button, you go to the correct page, you read the message, you press a
button.
- It is all about screen-to-screen flow, not about look, or any
activities happening on-screen. Simple boxes are all I need.

So:

- the elements on-screen that are *common* are the things I least care
about (in your case, the browser window, or any other chrome).

- I am not so concerned about registering things *on* the Visio page so
much as making sure that each Visio page stays fixed on my screen. Visio
likes to let their whole pages float around, thus my entire work is in a
slightly different position on my screen than the page I just came from.
(I can use the scrollbars to move it, but that's not acceptable.) I need
them fixed in position.

- I have not quite figured out how to get an object clicked-upon to take
me to the appropriate page. Behaviours and Hyperlinks do, but they have
the problem mentioned above. I've tried using it in fullscreen, but
page-hopping cancels full-screen.

17 Jun 2004 - 9:26am
Dan Brown
2004

A potential solution is documented below, though it's not without its
issues (also shown below). I've been experimenting a lot with Visio's
ShapeSheets recently, so I thought I'd share...

Every shape has a NoShow property in the Geometry section of its
ShapeSheet. I was able to mimic drop-down behavior by:

1. Creating a group with two rectangles: one for the widget shown on
the page and a larger one just below it containing the contents of the
menu.

2. Adding a user-defined property to the group called "dropdown"
(referred to as User.dropdown).

3. Editing the group's EventDblClick property in the Events section of
the ShapeSheet to use this formula:

=SETF(GetRef(User.dropdown),NOT(User.dropdown))

4. Lastly, I opened the shapesheet of the larger rectangle, and in the
Geometry1.NoShow cell, I used the following formula:

=Sheet.3!User.dropdown

Now, the sheet reference you use in Step 4 may be different than the
one I have here. It should be the same sheet reference as for the
group. Open the group's ShapeSheet and look in the title bar.

The issues:

1. You have to double-click to open the menu.
2. I doubt you can export this behavior to HTML or PDF.

If you want more details, shoot me an email...

-- Dan

On Thu, 17 Jun 2004 10:00:47 -0400, Marci Ikeler
<marci.ikeler at carboncg.com> wrote:
>
> Whitney's comments below are excellent -- they're some of the same
> things I've discovered that make prototyping in Visio quite fast.
>
> An additional tip I've picked up is the use of very simple javascript in
> hyperlinking objects -- specifically, the window.history.go method.
> This basically mimicks the behavior of the back or forward buttons in
> the browser once you've exported your file to the web.
>
> For example, in a recent project, I had an "Export" button on nearly
> every screen that always launches the same Export Dialogue. To make
> this work using normal page linking behavior in Visio, you would need to
> have a separate Export Dialogue screen for every other screen in the app
> to make the "Cancel" button work effectively. However, by including the
> script "javascript:window.history.go(-1)" in the hyperlink dialogue, you
> can reuse the same Export Dialogue screen; clicking "Cancel" will always
> return you to the previous page. Seems fairly minor, but it was a big
> discovery for me.
>
> In response to the larger question about prototyping tools, I personally
> feel that Visio is the best one out there. This isn't to say it's a
> perfect product -- lots of things about it, frankly, suck. But I
> recently was able to create a completely interactive (all interactive
> elements functioning, sans data entry) prototype for a 90 screen
> client-side application within 2 days. I don't know a single other tool
> that can compare to that turn-around time -- the estimate from our Flash
> developer was 3 weeks, and that was without the same level of
> interactivity.
>
> One big problem with Visio I haven't been able to solve is the ability
> to show/hide layers or shapes, for example to recreate the feel of a
> drop-down menu. I've experimented a bit with the Visio VB editor and
> have written some macros that work, but they aren't included when you
> export the file to web. So, if anyone can solve that for me, I'll be a
> very happy person.
>
> -Marci
>
> -----Original Message-----
> From:
> discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
> [mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesign
> ers.com] On Behalf Of Whitney Quesenbery
> Sent: Wednesday, June 16, 2004 8:57 PM
> To: discuss at interactiondesigners.com
> Subject: RE: [ID Discuss] Rapid Prototyping: Visio
>
> At 08:35 PM 6/16/2004 -0400, Jim Hoekema wrote:
> > > Eg: I put a button on-screen and activate it to go to page 2. I've
> > > tried Object Behaviours and I've tried Hyperlinks. Since Visio
> > > likes to float every page uniquely on the background, linking from
> > > one page to another causes undesired jumpiness. I tried viewing
> > > fullscreen, but the hyperlinks don't preserve full-screenness
> > > (full-screnity?) from page to page. Why is it so difficult to do
> > > what I thought would be a commonly desirable task?
>
> The simplest way to keep the contents of each page from moving off
> registration is to put them into a background. And you can layer
> backgrounds, making them easy to turn on and off for different reasons.
>
> Here's what I do:
>
> Background 1 is a page header (project name page name, edit date, page
> number, etc all inserted automatically from the file properties or other
>
> Visio field variables). This is helpful for printing (or distributing as
> a
> PDF) for review.
>
> Background 2 is a blank browser background with window frame, browser
> button bars and so on represented. I've taken some time to set the size
> so
> I have one for ~full 1024x768 and one for ~full 800x600. A very pale
> grey
> line shows the bottom of the fold. (I have the same for a general
> window,
> for non-browser apps)
>
> Background 3 is any standard elements in the page layout. Things like
> colored background for a left/top menu, logos, standard links, footers
> that
> never change etc.
>
> Then, I make a set of stencils for things that go on each page, but
> might
> change - headers, menu contents, menu highlights.... These can be
> dragged
> onto any page (and customized - for example, typing a page name for a
> PageTitle stencil). If you update the stencil, Visio will preserve the
> changes - so you can change a style (say, font or font size) without
> having
> to update each instance.
>
> You can make a stencil on the fly very easily (for one drawing) by just
> pasting something you draw on the page into the Drawing Stencil (which
> shows all the stencils used in that file). After that, it acts like any
> other stencil.
>
> What's nice about this is that all the pages are registered, because
> they
> are all built on the same background. You can also put layout guides in
> the
> background and then snap things to them.
>
> You could, of course, put all of this on one background, but one
> advantage
> of having the browser frame separate is that you can create many
> different
> page templates and they still register without having to experiment with
> them.
>
> You can put hyperlinks into any layer - so that a top menu, for example,
>
> will always have links without having to reproduce them on each page.
>
> The Save As HTML works pretty well, but I have found it "recalcitrant"
> at
> times - so test as you go. My experience has been that when it works, it
>
> works, but that when it doesn't it's a pain.
>
> I met Visio when it was a mere demo disc and (with occasional tantrums)
> we've been doing OK. I'm pretty sure that we mostly have a peaceful
> relationship because it's trained me ("touch that feature and I will
> hurt
> you"), and I've created a lot of small tools that help me work faster,
> so
> we've reached a sort of detente.
>
> Whitney Quesenbery
> Whitney Interactive Design, LLC
> w. www.WQusability.com
> e. whitneyq at wqusability.com
> p. 908-638-5467
>
> UPA - www.usabilityprofessionals.org
> STC Usability SIG: www.stcsig.org/usability
>
> _______________________________________________
> Interaction Design Discussion List discuss at interactiondesigners.com
> --
> to change your options (unsubscribe or set digest):
> http://discuss.interactiondesigners.com
> --
> Questions: lists at interactiondesigners.com
> --
> Announcement Online List (discussion list members get announcements
> already) http://interactiondesigners.com/announceList/
> --
> http://interactiondesigners.com/
> _______________________________________________
> Interaction Design Discussion List
> discuss at interactiondesigners.com
> --
> to change your options (unsubscribe or set digest): http://discuss.interactiondesigners.com
> --
> Questions: lists at interactiondesigners.com
> --
> Announcement Online List (discussion list members get announcements already)
> http://interactiondesigners.com/announceList/
> --
> http://interactiondesigners.com/
>

--
Dan Brown ~ brownorama at gmail.com ~ (301) 801-4850

It's a sad day for America when even paranoid schizophrenics no longer
feel the need to wear their little aluminum foil hats.
-- Ed Helms, The Daily Show

the only thing that will save our democratic capitalism from itself is
a new labor movement. the plutocratic path down which we are heading
is eviscerating the middle class. that is simply not sustainable.
-- EC, personal correspondance

17 Jun 2004 - 10:24am
Dave Malouf
2005

Flash as a prototyping tool:

Again, a lot of this depends on the purpose of the prototype. I.e. if I have
to print this, Flash is not optimal.

Marci, you need to find a new flash developer. Using MX 2004 doing your
prototype in 2 days would NOT be a problem and you would get the layer
management that you can't get in Visio. Another big advantage is that you
can objectify your prototype. I.e. your export dialog can be an entirely
different file that gets loaded on need and always behaves as a dialog
should.

Someone mentioned that Flash was too high fidelity. I think it was said that
this is up to you (basically) and I want to just say ... YES! It is totally
up to you. You can make a flash SWF back and white and quite plain looking.
It is just a drawing and scripting tool and b/c it is object oriented it has
some pretty big advantages.

If you do need to convert your prototype to a documentation spec. then just
screen shot your various points in the system and then add those screens to
your document.

One issue that I have w/ flash is that doing annotations in the app is a bit
weird. What I am thinking about doing is using a hot key to turn on
annotations for each of the screens I'm working on. Something like ctrl-A
should do it. ;)

I REALLY recommend people look into Flash MX 2004. The addition of "screens"
makes the new version of flash really easy for building application
prototypes. What's better is that if you want to make it data enabled
(connect to a database, web service, XML files, etc). It is just an
additional scripting object away. Give flash to developer and they can do
the scripting in a familiar javaScript based langage. Voila, you now have
entered the world of RIAs and you did it w/o any extra GUI development time
and you saved money b/c now you don't need that pesky JSP/HTML developer any
more. ;)

-- dave

17 Jun 2004 - 11:56am
Todd Warfel
2003

On Jun 17, 2004, at 11:24 AM, David Heller wrote:

> Someone mentioned that Flash was too high fidelity. I think it was
> said that
> this is up to you (basically) and I want to just say ... YES! It is
> totally
> up to you.

Amen to that - it's not the tool, but the craftsman that ultimately
determines whether or not the final product is high fidelity. We've
done hi/low fidelity prototypes (wireframes) in HTML, Illustrator,
Flash, and even Visio.

Cheers!

Todd R. Warfel
User Experience Architect
MessageFirst | making products easier to use
--------------------------------------
Contact Info
voice: (607) 339-9640
email: twarfel at messagefirst.com
web: www.messagefirst.com
aim: twarfel at mac.com
--------------------------------------
In theory, theory and practice are the same.
In practice, they are not.

-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: text/enriched
Size: 1130 bytes
Desc: not available
Url : http://listserver.dreamhost.com/pipermail/discuss-interactiondesigners.com/attachments/20040617/98518b27/attachment.bin

17 Jun 2004 - 12:04pm
Chris Ryan
2004

On Jun 17, 2004, at 9:56 AM, Todd R.Warfel wrote:

>
> On Jun 17, 2004, at 11:24 AM, David Heller wrote:
>
>> Someone mentioned that Flash was too high fidelity. I think it was
>> said that
>> this is up to you (basically) and I want to just say ... YES! It is
>> totally
>> up to you.
>
> Amen to that - it's not the tool, but the craftsman that ultimately
> determines whether or not the final product is high fidelity. We've
> done hi/low fidelity prototypes (wireframes) in HTML, Illustrator,
> Flash, and even Visio.

Maybe I was thinking as much about the file format. It's easy and fast
to change text (e.g. XHTML/CSS/PHP). And anyone can edit it.

Chris
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: text/enriched
Size: 728 bytes
Desc: not available
Url : http://listserver.dreamhost.com/pipermail/discuss-interactiondesigners.com/attachments/20040617/8b9f711f/attachment.bin

17 Jun 2004 - 12:19pm
Todd Warfel
2003

Really depends on what you're familiar with/good at. I can edit faster
in Illustrator and Flash than editing PHP in BBEdit/DW. But can edit
XHTML/CSS just as fast as Illustrator/Flash. Also depends on how well
you set up the files.

For instance, when doing wireframes in HTML/Flash/Illustrator, we
typically create libraries and global components. So, common elements
are easy to update.

On Jun 17, 2004, at 1:04 PM, Chris Ryan wrote:

> Maybe I was thinking as much about the file format. It's easy and fast
> to change text (e.g. XHTML/CSS/PHP). And anyone can edit it.
>

Cheers!

Todd R. Warfel
User Experience Architect
MessageFirst | making products easier to use
--------------------------------------
Contact Info
voice: (607) 339-9640
email: twarfel at messagefirst.com
web: www.messagefirst.com
aim: twarfel at mac.com
--------------------------------------
In theory, theory and practice are the same.
In practice, they are not.

-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: text/enriched
Size: 1256 bytes
Desc: not available
Url : http://listserver.dreamhost.com/pipermail/discuss-interactiondesigners.com/attachments/20040617/0114d666/attachment.bin

17 Jun 2004 - 12:24pm
Dave Collins
2004

Really depends on what you're familiar with/good at. I can edit faster
in Illustrator and Flash than editing PHP in BBEdit/DW. But can edit
XHTML/CSS just as fast as Illustrator/Flash. Also depends on how well
you set up the files.

I've got all sorts of other reasons why Flash is not a viable solution
in my case, which I don't really need to go in to. I'm hoping to elicit
dialogue about Visio.

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://listserver.dreamhost.com/pipermail/discuss-interactiondesigners.com/attachments/20040617/38c4a2d9/attachment.html

17 Jun 2004 - 1:26pm
vutpakdi
2003

--- Marci Ikeler <marci.ikeler at carboncg.com> wrote:
>
> In response to the larger question about prototyping tools, I personally
> feel that Visio is the best one out there. This isn't to say it's a
> perfect product -- lots of things about it, frankly, suck. But I
> recently was able to create a completely interactive (all interactive
> elements functioning, sans data entry) prototype for a 90 screen
> client-side application within 2 days. I don't know a single other tool
> that can compare to that turn-around time -- the estimate from our Flash
> developer was 3 weeks, and that was without the same level of
> interactivity.

My guess is that the "best" prototyping tool will vary depending on the
person and the situation, much like asking software engineers about what
the editor or best IDE (or best language or best OS, etc) is. Sort of a
religious topic, and people's preferences about what the "best" one is
depends on their background and experience with the tool.

If someone has been using Visio extensively, that person knows the ins and
outs of the tool. Knows how to quickly get things done well enough for
most of what is needed. And, the only time that he/she will seriously
consider looking at another tool is when forced to a decision point by
something (event, missing functionality, rest of team using something else,
etc) that creates an opening for another tool.

My preference is for Canvas, and I've built up a body of work and technique
for being effective and fast using it. So, if I were in the same position
that you were in, I would have done the same thing, probably as quickly,
using Canvas instead of Visio. I've tried Visio and Illustrator, but
probably because I wasn't as experienced or serious about a possible
change, I've decided neither is as effective for me as Canvas is. So, I'm
not yet at a decision point. :-)

Ron

=====
============================================================================
Ron Vutpakdi
vutpakdi at acm.org

Syndicate content Get the feed