Creating a Flowchart for Wireframes

Question

I am kind of new to wireframing, so I might have the wrong conceptions here, but I would like to create a flowchart showing how different wireframes of an app are related to each other. The thing is, it is getting quite messy:

as you might be able to tell it already is quite messy and I am still missing some connections ...

Is there a better way to depict the relation of wireframes (maybe flowcharts are out and theres something cooler) or are there some other tricks to it, like only showing certain cases (buying something, getting information on X, logging in, etc.) and therefore reducing the number of connections that are relevant for a particular case?

Thanks in advance! :)

Answer 1

Technically all pages of the wireframe will be interconnected, which will complicate the diagram. I can't quite read the page names in the illustration provided, it looks like it might be a shopping site.

I would break it down into one illustration displaying all the page types or site tree. Then a seperate diagram for each user flow/journey. For a shopping site you might have the following journeys.

• User manage account
• User checkout
• User add product to cart
• Admin manage products
• Admin manage orders
• etc

Like in the following examples.

User Checkout

User Manage Account

Admin Manager

Usually in flow charts the little diamon/square on a 45 angle represents a user decision or split in the flow. Ignore the first diamond in the user manage account diagram, I should have taken that out.

Answer 2

The trick i use for network graphs is I open them in some automated layout tool like. yEd or Graphwiz. This way I get a good starting point for a minimally overlapping graph.