Building a single-page prototype with many (100s) dynamic panels

I’ve been working on a prototype for an agile where one page has grown substantially in size, many dynamic panels triggering other panels, each with different states… It’s a mess. So I’m looking to rebuild it but wanted to see how you would approach this situation from scratch.


Situation
- For example sake, say this is an ecommerce site. The left-hand dynamic panel contains the product categories (about a dozen so far, but increasing) and subcategories (products - about a dozen per category), and on selection triggers content in a dynamic panel on the right (the product information panel). That content in the right can have many states, so each panel state has various sub-states. The hierarchy of each of these dynamic panel states can stretch down 5, or 6 levels.

What would be the most optimal method to rebuild this page? It’s going to keep growing as more products and categories are added.

[ol]
[li] single pages for each product category, but keep subcategories (products) within the same Axure page.[/li][li] single pages for everything, using variables to keep selected states showing.[/li][li] keep everything within the same page (kind of as it is now, but could be substantially optimised now we know how the structure will work - it was agile to start with so we weren’t sure where we would end up, but we have a better idea now).[/li][li] something else I haven’t considered.[/li][/ol]

The drawbacks of being too granular is that it’s a whole page load for each selection, which loses some of the swift AJAX-y UX, but the more monolitic it is the larger and more unwieldy the prototype (it’s already about 10mb file size when exported, which browsers are struggling to cope with).

1 Like

I kind of understand what your prototype might look like from your description, so I have an idea for you, but you’re really the only one who can say whether this would work or not.

You could use an inline frame. Put all your products on separate pages (so create a new page for that 5-6 level panel content). Then, when the user clicks a category, set up some logic to Open Link in Inline Frame and select the appropriate page. I included a screen shot to show you. You’ll see my text link top left, the inline frame next to it, and the case editor where I set the target of the inline frame to a certain page.

This makes your products easier to manage because they live in their own pages. It doesn’t help with file size at all. If I think of anything else, I’ll reply again.


Thanks, I had considered this but for some reason I discounted it. Probably because it seems like I’m going back 15 years to the good old FRAMESET days! But this is a prototype, so that’s probably not such a serious offence.

It would certainly help with expandability, and should stop the prototype editing from grinding to a halt as it currently does every few minutes.

I’ll do a proof of concept and see how it goes. I’m curious if I can set some dynamic sizing to the frame, as content internally may not be a single size (which is one of the benefits of using dynamic panels)

Hi,

my impression is that this is a long lasting prototype in a long term project. That is why I would prefer to choose a solution that helps to create a maintainable prototpye. I think your suggestion number 2 (“single pages for everything, using variables to keep selected states showing”) would be applicable.
I think a well structured sitemap, well structured masters (preferable cascading masters) and well defined conventions for naming could help you to create a really huge prototype that is maintainable and does not crash your browser.

Kind regards,
Ben

Did you ever figure this out? I too want to build an SPA and am trying to figure out the best way to organize it before starting.

Thanks!

-Sergio