Interactive prototyping with Visio - no, really...

Started by Trinity, May 30, 2013, 01:08:30 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Trinity

Visio Guy, thank you for this forum!

I love Visio for drafting, but I've never found a way to make wireframes gracefully publish to an interactive click-through with richer interactions than hyperlinks.

When I saw your article on the Visio calculator, it made me wonder if the functionality is there, and I'm missing it. Here's a small passle o' questions. I suspect you have articles on this somewhere. Any help is appreciated!

Specifically:

  • Visio has text fields, drop downs, list boxes, etc. as stencils/shapes. But is there a way to make these fields accept data entry when published as HTML? Insert>Control doesn't seem to cut it.
  • Is there a way for the fields to accept and process data entry if it's not in the HTML view? (This would attempt to skin the cat by not operating in the browser, but instead within Visio itself=a desperation move)
  • Visio can read and write to a database. Can it present data and write data when it's presented in the HTML file?
  • If I can't make the drop downs and other homemade widgets interact, I think I might be able to create a hotspot, as seen http://www.visguy.com/2007/08/24/customized-visio-html-export/, but I need it to display what I want it to, not the Shape Data, and not the Shape Screen Tip either. I also haven't figured out where this hotspot shape is yet. Any help there is appreciated. Is it the same as identifying the shape on the page that gets the hyperlink?

In general, what I see for interaction in Visio is hyperlinks, not text entry, unless I want to get deep into coding. Am I seeing this correctly?

And what's ahead for Visio 2013? ::crossing fingers::


Paul Herber

Controls as available in Visio are, as far as I know, based on ActiveX technology. Controls that look similar in HTML are a very different kettle of fish, these are HTML form elements. They may look the same but are totally different.

There is a way to get the diagrams to work the way you want them to, but I think this will involve publishing to Sharepoint. That is the limit of my knowledge of Sharepoint.

Electronic and Electrical engineering, business and software stencils for Visio -

https://www.paulherber.co.uk/

Hey Ken

Trinity:

   I've come across a similar situation when using Visio for highly-interactive wireframing where the final product is delivered as html; and when the need is great, I resort to a brute force solution.  At first I did it for drilldowns on dashboard mockups where only one section of the screen changed, but I used it subsequently for radio buttons, checkboxes, dropdowns, and worse.  (The squeamish coder should drop off now...  This gets ugly!)

   Let's take the simple example of a checkbox.  You want to click on it in the browser and have the checkmark appear, then click on it again to uncheck it. Here's the basic process:

   1.  Create your mockup page in Visio with the box unchecked.
   2.  Copy the entire page verbatim to a new page.
   3.  Modify that page to have the box checked. 
   4.  Hyperlink the unchecked checkbox to the page with the checked checkbox and versa vice. 
   5.  Save the drawing as a web page (see how I do that using VBA, as well as how to add hover text, if you need it.)

   Voila!  Click on the checkbox in the browser and it gets checked; click on it again and it gets unchecked.

   Dropdowns work the same way, but get a bit more complicated. 

   1.  Create the main mockup page where the dropdown is not dropped down. 
   2.  Copy the entire page verbatim to a new page.
   3.  Modify that page to show the dropdown list dropped down, where each member of the dropdown list is a separate shape. 
   4.  Copy the page N times (where N is the number of choices in your dropdown list) and on each page have only the selected dropdown choice in your dropdown box. 
   5.  Hyperlink each dropdown choice in your list (from step 3) to the appropriate page created in the previous step.
   6.  Hyperlink the dropdown on each of the N pages back to the full list created in step 3.
   7.  Save the beast as a web page.

   Voici!  Click on the dropdown in the browser, and it drops down.  Click on one of the dropdown choices, and it becomes the one selected.  Click on it again and the full dropdown list reappears.

   Of course this approach works easiest when you only have a few checkboxes or dropdowns, because if you have a lot of them you can end up creating a whole slew of pages to encompass all the various permutations of selections.  (I warned you it could get ugly!)  To limit the ugliness and make maintenance easier, I always take the unchanging part of the mockup and move it to a background page such that only the dropdowns, checkboxes, etc. need to be on each page.  Still, it can get messy.

   One thing to watch out for is that the browser tends to re-size the page based on the scope of the real estate being used, which can destroy the illusion of the active dropdowns.  To avoid that problem, on the furthest-back background page I put a virtually-invisible 0.1 point period in each of the four corners to define the boundaries of the drawing.  That way, the browser is fooled into thinking all the pages are the same size and never re-sizes things.  Just be sure you never step outside those limits.

   I have an example of this approach out on the web; and while it does not use checkboxes or dropdowns, it does show how seamlessly the navigation can appear to the user.  Click on the red text near the top left to see what I mean.

   I realize this brutish approach does not address all your concerns, but it does let dropdowns and other homemade widgets interact.  If you figure out how to do data entry or access a database, please let me know!

   - Ken

Ken V. Krawchuk
Author
No Dogs on Mars - A Starship Story
http://astarshipstory.com

Trinity

Thank you, both of you - I'd actually already gone down the path of the proverbial beast, with page-by-page image-mapped interactions like what you've described, Hey Ken. I had to smile when you wrote that - so true. For the really intensive pages, I've converted the original drawing to a background so that there's no jiggle. Thanks also for the tip for working around the resizing problem. I'll get on that when it's time for the next show and tell with the client.

As for DB connections and feeds, I *started* down the path of database connection a couple years ago, and I think I got a field to render. At the time, I think dev w/couldn't produce a data schema for me, so I was designing a full DB from scratch in Access. This was labor intensive (on top of the wireframe drafting task), and dev didn't appreciate me reinventing their data structures, so I didn't pursue that further. On that gig I was running Visio Professional, 2007, and I used the data connection wizard, as I recall. I haven't taken the time to confirm if I can do it on my plain Jane Visio 2007 edition at home...I assume it's possible...

And here's another quirk about the db connection and display - if you can't have true dynamic selection in your HTML output, you won't really benefit from having a db feed data into the wireframe UIs you've developed....to my knowledge, the database interaction only has input-output effects when you are working within Visio proper, so if you're doing a client demo, and you did have a database connected to your UI, you would be better off doing the demo in Visio, not the image-mapped HTML view.

And so perhaps this is where the (VB?) controls come in.

So in sum, it's a bummer that Visio doesn't have the interactive control options, despite some other very powerful capabilities. If I have a client with Sharepoint in the near future, I will look for that capability, Paul.

And on a related note, how does one get on the inside circle of the product team for Visio? I've been with Visio off and on since 99, and I would love to see this tool advance (especially in ways that meet my own selfish, professional ends)....including killing that horrid ribbon that hides all advanced functions. Grrr.

Thanks, Visio brothers,

Trinity

John Distai

I use Visio for wireframing daily.  I use a variety of stencils and smart shapes from previous Visio Pro versions.

I don't pretend to make it interactive.  I make it a flip book, as described earlier.  If you place your elements where you want on one page, you can copy and paste to other pages and you won't get the "jiggle".

You may need to make some smart shapes though that you can right click on to change the states on.

I print mine to PDF and have the developers arrow through the pages to be walked through the document.  On each page origination page I use the mouse tooltip shape and indicate what my action is and the name of the control. (e.g. Click - New Project).

The mouse is on the button, and the next page shows what happened when that button was clicked.  I then change the states on all the objects that changed state due to that action.

The tester's aren't huge fans of it, but it sure helps troubleshoot an interaction and trap errors.  No fancy linking required.

Hey Ken

Folks:

   Here it is five years later, and there's new news about how I put together wireframe that improves upon my suggestions above.  I call it Quantum Entanglement for Visio Shapes.  I can' t tell you how much time and trouble entangled shapes have eliminated for me, especially with creating wireframes where buttons and checkboxes need to be at the same location with the same topology on multiple pages.

   There's a whole thread in the forum dedicated to how it works.  Check it out: http://visguy.com/vgforum/index.php?topic=8611.msg37527#msg37527.

   - Ken

Ken V. Krawchuk
Author
No Dogs on Mars - A Starship Story
http://astarshipstory.com