Visio prototyping

2 Jun 2005 - 1:18am
9 years ago
17 replies
2323 reads
Jonathan Arnowitz
2005

Hi everyone,

I was wondering if there are any visio prototyping expert out there,
available for training?

--Jonathan

--

Jonathan Arnowitz
Principal User Experience Designer
SAP Labs

Co-Editor-in-Chief
Interactions Magazine
j.s.arnowitz at acm.org

Comments

2 Jun 2005 - 11:45am
Wendy Fischer
2004

What types of prototypes are you looking to make with visio?

I don't think you can make interactive prototypes with just visio. You'd have to use a combination of visio/flash or perhaps with Visual Basic (I don't know about the visual basic part).

As for just wireframes or paper prototypes, just get Microsoft Visio Professional or use illustrator. Gabe Zentall's GUI elements widgets are great with Illustrator, and I think they might even have stencils for Visio.

As for creating paper prototypes and wireframes, it's relatively easy in Visio. Buy Visio Professional. Either choose the Windows XP Template for your new document, or just do File > Stencils > Software and choose the appropriate windows XP interface stencils. You then just drag and drop.

I also came across this:

http://www.guuui.com/issues/02_03_02.php

I don't think you really need training to create prototypes in Visio.

-Wendy

Jonathan Arnowitz <arnolandwest at yahoo.com> wrote:
[Please voluntarily trim replies to include only relevant quoted material.]

Hi everyone,

I was wondering if there are any visio prototyping expert out there,
available for training?

--Jonathan

--

Jonathan Arnowitz
Principal User Experience Designer
SAP Labs

Co-Editor-in-Chief
Interactions Magazine
j.s.arnowitz at acm.org

_______________________________________________
Welcome to the Interaction Design Group!
To post to this list ....... discuss at ixdg.org
(Un)Subscription Options ... http://discuss.ixdg.org/
Announcements List ......... http://subscribe-announce.ixdg.org/
Questions .................. lists at ixdg.org
Home ....................... http://ixdg.org/

2 Jun 2005 - 12:06pm
Marci Ikeler
2003

>I don't think you can make interactive prototypes with just visio.
You'd have to
>use a combination of visio/flash or perhaps with Visual Basic (I don't
know about
>the visual basic part).

You actually can similuate some level of interactivity in Visio by using
the Hyperlink feature. You can link particular shapes to other pages
within your document. For example, if you are prototyping a simple
website, you would mock up the home page and all other pages. Then you
can hyperlink the navigation in each page to point to the appropriate
screen in your document. To navigate using the hyperlinks, you can
either view your Visio document in full-screen mode (F5 key) or export
your file to HTML.

One obvious limitation of using Visio for interactive prototyping is
that it is difficult to acheive seemless results without creating a
separate page for each state you wish to show. Part of this hassle can
be mitigated by using Background shapes for common screens.

As Wendy noted, there is more advanced interactive functionality in
Visio through Visual Basic, but I've found the documentation on this
topic to be rather poor. One good article can be found here:
http://www.boxesandarrows.com/archives/toggling_shapes_in_visio_special_
deliverable_12.php .

Hope this is useful,

Marci

--------------------------------------------------------

This message and any accompanying document or attachment is intended for the
sole use of the individual or entity to which it is addressed, and may contain
information that is privileged, confidential and/or exempt from disclosure under
applicable law. If the reader of this message is not the intended recipient, or
the employee or agent responsible for delivering the message to the intended
recipient, you are hereby notified that any dissemination, distribution or
copying of this communication is strictly prohibited. Any document(s) attached
to this message is (are) being provided at the client's or recipient's request
and for its convenience. Any such document is a proprietary document and should
not be changed or altered unless previously discussed with or disclosed to the
sender.

2 Jun 2005 - 2:24pm
Tom V
2005

I agree with the previous replies. Visio's HTML linking feature is easy to
use, and handy for creating quick, semi-interactive prototypes. You might
want to also check out this site:
http://www.gotomedia.com/gotoreport/may2005/news_0505_usable1.html. It is a
slightly more involved process using Acrobat and some third-party software,
but it might be a good starting point for ideas.

2 Jun 2005 - 3:20pm
Robert Cornejo
2004

I'd suggest using InDesign (or Pagemaker) for paper
prototyping and keeping Visio for flows, processes,
ERDs.

The "Master" pages function in InDesign saves you from
a lot of repetitive work, i.e. headers, footers,
common nav items, etc. Any changes to these elements
in the master will be propagated across all the pages
using them, saving you the tedium of updating every
page in Visio or Illustrator.

As for linking pages, you can create links in the
finished PDF file with Acrobat. The files are
typically pretty small and readable by almost all
clients.

= Robert

--- Jonathan Arnowitz <arnolandwest at yahoo.com> wrote:

> [Please voluntarily trim replies to include only
> relevant quoted material.]
>
> Hi everyone,
>
> I was wondering if there are any visio prototyping
> expert out there,
> available for training?
>
> --Jonathan

__________________________________
Yahoo! Mail
Stay connected, organized, and protected. Take the tour:
http://tour.mail.yahoo.com/mailtour.html

2 Jun 2005 - 3:31pm
Dave Malouf
2005

Ok, I don't want to get into a debate of my tool is better than your tool
stuff (I don't use Visio anymore now that I made the switch to Mac), but ...

1. Interactivity is very easy in Visio. Use the hyperlink feature and then
export to HTML. Works like a charm!!!

2. Background pages are in Visio and you can stack on them so that you can
do way more than save headers and footers. AND you don't have to propogate
EVERY page, but you can just select which pages use which background pages.

The originally question was to look for an expert and I can't think of
anyone who might be in this community who is more qualified than Dan Brown.
His articles on Boxes & Arrows about Visio are great and take Visio to the
next level.

What is best about Visio are the included stencils for software design. They
are good for web, but better for software. The controls are just so
intuitive to layout on the page and they have so many modalities, that you
can account with one stencil object many of the states that a widget like a
text box, or select box might have.

Now all that being said, I still say that for prototyping, you should use a
programming tool. I have enjoyed 3 depending on the level of fidelity I
required:

Flash
Norpath Elements
Dreamweaver

Doing "screen design" w/o having the ability to add behavior to the widgets
just is making less and less sense to me during the design phase. Now later
on when you have to document it, that's a completely different animal.
Screen shots, and InDesign/Word work for me.

Let me highlight that point again "doing design requires different tools
than documenting a design."

-- dave

On 6/2/05 4:20 PM, "Robert Cornejo" <sine808 at yahoo.com> wrote:

> [Please voluntarily trim replies to include only relevant quoted material.]
>
> I'd suggest using InDesign (or Pagemaker) for paper
> prototyping and keeping Visio for flows, processes,
> ERDs.
>
> The "Master" pages function in InDesign saves you from
> a lot of repetitive work, i.e. headers, footers,
> common nav items, etc. Any changes to these elements
> in the master will be propagated across all the pages
> using them, saving you the tedium of updating every
> page in Visio or Illustrator.
>
> As for linking pages, you can create links in the
> finished PDF file with Acrobat. The files are
> typically pretty small and readable by almost all
> clients.
>
> = Robert
>
>
>
> --- Jonathan Arnowitz <arnolandwest at yahoo.com> wrote:
>
>> [Please voluntarily trim replies to include only
>> relevant quoted material.]
>>
>> Hi everyone,
>>
>> I was wondering if there are any visio prototyping
>> expert out there,
>> available for training?
>>
>> --Jonathan
>
>
>
> __________________________________
> Yahoo! Mail
> Stay connected, organized, and protected. Take the tour:
> http://tour.mail.yahoo.com/mailtour.html
>
> _______________________________________________
> Welcome to the Interaction Design Group!
> To post to this list ....... discuss at ixdg.org
> (Un)Subscription Options ... http://discuss.ixdg.org/
> Announcements List ......... http://subscribe-announce.ixdg.org/
> Questions .................. lists at ixdg.org
> Home ....................... http://ixdg.org/

-- dave

David Heller
http://synapticburn.com/
http://ixdg.org/
Dave (at) ixdg (dot) org
Dave (at) synapticburn (dot) com
AIM: bolinhanyc || Y!: dave_ux || MSN: hippiefunk at hotmail.com

2 Jun 2005 - 3:30pm
Tim Lynch
2005

> I don't think you can make interactive prototypes
with > just visio.
> You'd have to use a combination of visio/flash or
> perhaps with Visual Basic
> (I don't know about the visual basic part).

I've actually been investigating creating interactive
prototypes with PDFs (and Visio) for several upcoming
projects...as outlined in this two-part article:

The User Advocate: Interactive Prototyping
Part 1: Easy PDF Prototyping
By Dave Rogers
http://www.gotomedia.com/gotoreport/may2005/news_0505_usable1.html

Haven't had a chance to give it a whirl yet, but it
seems like a fairly simple process...

(i'm Tim...been lurking for a while...howdy!)

- Tim

__________________________________
Discover Yahoo!
Find restaurants, movies, travel and more fun for the weekend. Check it out!
http://discover.yahoo.com/weekend.html

2 Jun 2005 - 4:19pm
Bill DeRouchey
2010

Actually, creating links with InDesign/PDF is even easier, especially with
master pages.

Use the Hyperlinks palette in InDesign to assign a link to any object. Do
it once on a master page for common nav items. All the hyperlinks will
export into the PDF file. Much much easier. Doing it by hand in Acrobat
can be a pain, especially over multiple iterations.

Bill

On Thu, 2 Jun 2005, Robert Cornejo wrote:

> [Please voluntarily trim replies to include only relevant quoted material.]
>
> I'd suggest using InDesign (or Pagemaker) for paper
> prototyping and keeping Visio for flows, processes,
> ERDs.
>
> The "Master" pages function in InDesign saves you from
> a lot of repetitive work, i.e. headers, footers,
> common nav items, etc. Any changes to these elements
> in the master will be propagated across all the pages
> using them, saving you the tedium of updating every
> page in Visio or Illustrator.
>
> As for linking pages, you can create links in the
> finished PDF file with Acrobat. The files are
> typically pretty small and readable by almost all
> clients.
>
> = Robert

2 Jun 2005 - 4:30pm
michelle
2005

> Now all that being said, I still say that for prototyping, you should use
a
> programming tool.
> Let me highlight that point again "doing design requires different tools
> than documenting a design."

Excellent points...

I also switched to Mac a few months ago and promptly started using
Omnigraffle for screen-level design (it was recommended to me by a friend at
Google and it looked really cool). I spent a day or two building a stencil
for every widget in our UI framework. This was a fun exercise, and everyone
marveled at how realistic my designs looked and how quickly I could create
new designs.

However, shortly after, I abandoned Omnigraffle for screen design. My
background's in programming: why use the fake widgets when I could be using
the real ones?

The next set of screen designs I delivered were fully interactive JSP
prototypes. The engineers *loved* them (of course! I gave them code!), but
when it came to showing off the designs to PM and to customers, I had to
screengrab the prototypes and create powerpoint presentations with sticky
notes and arrows. That wasn't a terrible solution, but it was a real pain to
have to update the presentation every time I changed the prototype...

What I'd really like is a tool that allows me to create an interactive
prototype with an optional layer of explanatory text and the ability to shut
off certain portions of the interaction. Something like the "stencils-based
tutorials" paper that was presented at CHI:
http://portal.acm.org/citation.cfm?id=1054972.1055047

Anything like that out there for designers (who can code)?

Also, is anyone on this list using Macromedia Flex for prototyping?

Thanks,
Michelle

3 Jun 2005 - 3:28am
Navneet Nair
2004

Excel can be a good low-fidelity prototyping tool also. It has in built form
controls and using the hyperlink function you can create the same level of
interactivity as in Visio. The added advantage is to use the comment feature
to add comments. Our current workflow involves first create Lo-Fi protos in
Excel, then during the review, people add comments to the excel file and
finally once the design is finalized, it gets converted into a Hi-fi
prototype in Dreamweaver...
Visio is quite good when prototyping desktop applications. Also the
annotations shape palette is quite useful for add comments and notes...
I'm also not sure why you would want to use Flex for prototyping if it is
going to be a throwaway prototype. The Flash IDE, I believe, would be a
better option (I've not used Brady personally), also there is no dependency
on a server to render your prototype...
Cheers
Navneet

On 6/3/05, michelle <michellen at gmail.com> wrote:
>
> What I'd really like is a tool that allows me to create an interactive
> prototype with an optional layer of explanatory text and the ability to
> shut
> off certain portions of the interaction. Something like the
> "stencils-based
> tutorials" paper that was presented at CHI:
> http://portal.acm.org/citation.cfm?id=1054972.1055047
>
>

----------------------------------------------------
Navneet Nair
Interaction Architect
onClipEvent: form follows function();
----------------------------------------------------
Website: http://www.onclipevent.com
Blog: http://www.onclipevent.com/enterframe/

3 Jun 2005 - 3:53am
hj
2005

> On 6/3/05, michelle <michellen at gmail.com> wrote:
> >
> > What I'd really like is a tool that allows me to create an
> interactive
> > prototype with an optional layer of explanatory text and
> the ability
> > to shut off certain portions of the interaction. Something like the
> > "stencils-based tutorials" paper that was presented at CHI:
> > http://portal.acm.org/citation.cfm?id=1054972.1055047

PowerPoint?

For prototypes, I often use Paint (or Photoshop if I want a 'nice' finish)
to design a screen. I snapshot the widgets I want from wherever I find them,
and then modify them appropriately. I also build up my own set of
'favourite' widgets that I keep as a library for future use. This approach
means I'm not restricted to any particular set of widgets that are provided
with some product (e.g. Visual Studio), and can even create my own unique
ones if I so wish.

Then to 'animate' it, I often use PowerPoint. You can use invisible buttons
as 'hot spots' to cause different behaviours/actions to occur, e.g. things
appearing (drop-down lists, new windows etc). You can hide/show explanatory
text easily (use another on-screen button to control visibility, for
example), and it's fairly easy to switch off/on parts of the interaction,
with a bit of thought.

I've created PowerPoint prototypes where the audience were absolutely
convinced it was a fully functional system even though they saw the
PowerPoint screen to begin with.

Best,
- Helen

3 Jun 2005 - 6:29am
Anjali Arora, NYU
2004

I have enjoyed prototyping with Fireworks & DreamWeaver combined. It allows
you so much flexibility, & I could mold things quite the way I wanted. (
Check out all the links from
http://www.artbrush.net/archchive/user-scenario/scenarios.htm), the
scenarios).

I tried Photoshop first, but it really would not flow with my ideas & intent
( probably because I have PS 5, CS may do all that Fireworks does).

Anyhow, it was a joy creating the graphics in FW; the feature here I found
very important was the ability to store pieces of the art as folders; I
could then turn off entire layers to suit my needs.

The art was then brought into DW, & using javascripting with layers, a great
deal of interactivity was woven in.

For smoother artwork, I would also use the drawing tools in Flash, &
transfer back & forth between these three apps.

Hope this helps.
-Anjali
---------------------------------------------------------------------
Anjali Arora,
http://www.artbrush.net/
Blog: http://www.artbrush.net/blog/

----- Original Message -----
From: "hj" <hjohnstone at btconnect.com>
To: <discuss-interactiondesigners.com at lists.interactiondesigners.com>
Sent: Friday, June 03, 2005 4:53 AM
Subject: RE: [ID Discuss] Visio prototyping

> [Please voluntarily trim replies to include only relevant quoted
material.]
>
> > On 6/3/05, michelle <michellen at gmail.com> wrote:
> > >
> > > What I'd really like is a tool that allows me to create an
> > interactive
> > > prototype with an optional layer of explanatory text and

3 Jun 2005 - 8:38am
vutpakdi
2003

----- Original Message -----
> I'd suggest using InDesign (or Pagemaker) for paper
> prototyping and keeping Visio for flows, processes,
> ERDs.
>
> The "Master" pages function in InDesign saves you from
> a lot of repetitive work, i.e. headers, footers,
> common nav items, etc. Any changes to these elements
> in the master will be propagated across all the pages
> using them, saving you the tedium of updating every
> page in Visio or Illustrator.
>
> As for linking pages, you can create links in the
> finished PDF file with Acrobat. The files are
> typically pretty small and readable by almost all
> clients.

I would recommend this approach as well except that I'd suggest doing
everything in Canvas from ACD Systems because you can do all of that
(creating the elements in Illustrator, laying them out in InDesign
across multiple pages with a master page with layers, linking in
Acrobat) in one seamless application that is available on both Windows
and Mac.

One downside is that you'll need to create your own stencils and widget
elements since none are available by default. Another downside is that
you'll still want to keep Visio around for doing flowcharts and such
(which Canvas can do, but not as well as Visio).

Ron

3 Jun 2005 - 8:43am
vutpakdi
2003

----- Original Message -----
> What I'd really like is a tool that allows me to create an
> interactive
> prototype with an optional layer of explanatory text and the
> ability to shut
> off certain portions of the interaction.

Partial solutions that I've used for being able to add explanatory text
and the ability to shut off certain portions of the interaction is to
hide the explanatory text behind a Help button and to add a hidden
Preferences dialog.

For the high fidelity prototypes, I'll set the Help buttons to bring up
a window that will contain the explanatory text (and a graphic, if
appropriate) for any given dialog/window.

For shutting off parts of the interaction, you could add a hidden (or
not so hidden) Preferences dialog which will allow you to set up a
couple of toggles. Then, you'll need to check the status of the toggles
when the "user" of the prototype tries to use some piece of
interactivity and either do the interaction or not depending on the toggles.

Ron

3 Jun 2005 - 9:41am
sylvania
2005

I have used Visio, Dreamweaver, PhotoShop, and several other apps for
prototyping over the years, and I agree wholeheartedly with Dave: the
best tool for any job depends very much upon what the prototype will be
used for.

My favourite for high-fidelity prototyping is Flash, hands down. I have
built a substantial Windows UI widget library by simply creating each
widget as needed, so I now have a large library of re-usable, scalable,
layered UI elements, complete with templated interactivity
(mouseover/click/etc.). Prototyping is much easier and more efficient
than it ever was before. And nothing quite conveys the intended
functionality of a design than a "functioning" prototype.

I also like Flash for wireframing. By making each layer's outline
colour black, I can easily switch my entire prototype back and forth
between hi-fi and wireframe. I can create a design in wireframe mode
using my existing UI widgets and vector primitives, then switch to hi-fi
mode later for refinement.

For lo-fi prototyping, my favourite tools remain good ol'fashioned paper
and pencil. :) There is something uniquely inspiring about truly
tactile drafting supplies (at least for me).

I only use Visio for process flows, UML diagrams (use cases, usage
scenarios), and storyboarding. I find Visio simply too limiting for
actual design. As Dave pointed out, it's fine for documenting a final
design.

Of course, each of us has our favourite tools and processes. What works
best for some may not be a good fit for others. Depends on our
background, what we're doing, and why. :)

Cheers,
Sylvania

5 Jun 2005 - 9:36am
nuritps
2010

>From asking about a Visio trainer the list gone to talk about prototyping
tools...
So this is not really an answer to the original question ( I agree with
others, I don't think you really need training in Visio) , but the general
question about prototyping tools is something I thought a lot of, over the
years.
I also did a bunch of trials with different tools. I agree that for
different targets and in different stages of the design you need different
tools... When you start the concept of pages, use paper or any other "loose"
tool, if you start with Visio and more over programming you are limiting
yourself to the tool abilities (and your knowledge of the tool) and that is
never a good start!

Later on there are a few possibilities, and I find it hard to point "the
best one"
The questions I would ask myself before starting are:
1) What type of application - web? Windows? GIS (I once did it, and
prototyping the interaction with the map was very problematic...)
Who and when will see this prototype? Customers? Users? Testing?
Developers? Fellow designers? Your boss....
With some customers/users I found that a more schematic prototype is better,
otherwise it is very hard for some of them to differentiate between graphics
and UI (one time the customer was constantly talking about the colors
selection although I said it was before graphical design)

And maybe the most important one is what tool do you master.... As other
people explained here, each has there own techniques and shortcuts with the
tools they know well, this is very important, starting with a new tool is
always time consuming, it takes time to know the limits of the tool, and
even more time to know how to get over them (or at least some)

Nurit

: : nurit.peres at ams-sys.com
: : http://www.ams-sys.com

--

Jonathan Arnowitz
Principal User Experience Designer
SAP Labs

Co-Editor-in-Chief
Interactions Magazine
j.s.arnowitz at acm.org

_______________________________________________
Welcome to the Interaction Design Group!
To post to this list ....... discuss at ixdg.org (Un)Subscription Options ...
http://discuss.ixdg.org/ Announcements List .........
http://subscribe-announce.ixdg.org/
Questions .................. lists at ixdg.org Home .......................
http://ixdg.org/

5 Jun 2005 - 11:17pm
James Melzer
2004

A couple folks have commented that Visio training is unnecessary, and
for beginners I agree. But an advanced Visio training course would be
very nice for people who actually want to use it to its potential. And
such a course is hard to find. Dan Brown's recent class at the IA
Summit is the only serious attempt I've ever seen (and I've been
looking).

If Microsoft would produce some decent documentation, we'd be better
off. Many of the key aspects of Visio remain undocumented (e.g.
anything having to do with shape sheets or variable name conventions).

~ James

--
James Melzer
http://www.jamesmelzer.com

On 6/5/05, Nurit Peres <nurit.peres at ams-sys.com> wrote:
> [Please voluntarily trim replies to include only relevant quoted material.]
>
> >From asking about a Visio trainer the list gone to talk about prototyping
> tools...
> So this is not really an answer to the original question ( I agree with
> others, I don't think you really need training in Visio) , but the general
> question about prototyping tools is something I thought a lot of, over the
> years.
> I also did a bunch of trials with different tools. I agree that for
> different targets and in different stages of the design you need different
> tools... When you start the concept of pages, use paper or any other "loose"
> tool, if you start with Visio and more over programming you are limiting
> yourself to the tool abilities (and your knowledge of the tool) and that is
> never a good start!
>
> Later on there are a few possibilities, and I find it hard to point "the
> best one"
> The questions I would ask myself before starting are:
> 1) What type of application - web? Windows? GIS (I once did it, and
> prototyping the interaction with the map was very problematic...)
> Who and when will see this prototype? Customers? Users? Testing?
> Developers? Fellow designers? Your boss....
> With some customers/users I found that a more schematic prototype is better,
> otherwise it is very hard for some of them to differentiate between graphics
> and UI (one time the customer was constantly talking about the colors
> selection although I said it was before graphical design)
>
> And maybe the most important one is what tool do you master.... As other
> people explained here, each has there own techniques and shortcuts with the
> tools they know well, this is very important, starting with a new tool is
> always time consuming, it takes time to know the limits of the tool, and
> even more time to know how to get over them (or at least some)
>
> Nurit
>
>
> : : nurit.peres at ams-sys.com
> : : http://www.ams-sys.com
>
>
>
> --
>
> Jonathan Arnowitz
> Principal User Experience Designer
> SAP Labs
>
> Co-Editor-in-Chief
> Interactions Magazine
> j.s.arnowitz at acm.org
>
>
>
>
> _______________________________________________
> Welcome to the Interaction Design Group!
> To post to this list ....... discuss at ixdg.org (Un)Subscription Options ...
> http://discuss.ixdg.org/ Announcements List .........
> http://subscribe-announce.ixdg.org/
> Questions .................. lists at ixdg.org Home .......................
> http://ixdg.org/
>
>
> _______________________________________________
> Welcome to the Interaction Design Group!
> To post to this list ....... discuss at ixdg.org
> (Un)Subscription Options ... http://discuss.ixdg.org/
> Announcements List ......... http://subscribe-announce.ixdg.org/
> Questions .................. lists at ixdg.org
> Home ....................... http://ixdg.org/
>

6 Jun 2005 - 8:56am
Jim Kauffman
2004

> -----Original Message-----
> From:
> discuss-interactiondesigners.com-bounces at lists.interactiondesi
gners.com [mailto:discuss-interactiondesigners.com->
bounces at lists.interactiondesigners.com] On Behalf Of James Melzer
> Sent: Monday, June 06, 2005 12:18 AM
> To: discuss-interactiondesigners.com at lists.interactiondesigners.com
> Subject: Re: [ID Discuss] Visio prototyping
>
> [Please voluntarily trim replies to include only relevant
> quoted material.]
>
> If Microsoft would produce some decent documentation, we'd be
> better off. Many of the key aspects of Visio remain undocumented (e.g.
> anything having to do with shape sheets or variable name conventions).

James,

You should order a copy of Graham Wideman's Visio 2003 Developer's Survival
Pack. It's available from Trafford, an "on-demand" publisher
(www.trafford.com). There's a companion web site, too (diagramatics.com).

There's an incredible amount of information in this book that I've never seen
anywhere else.

Jim K.

Syndicate content Get the feed