How do I build a flowchart-based website?
June 24, 2011 1:18 PM Subscribe
I (think I) am capable with HTML and CSS, but I've been asked to create an interactive, flowchart-based website and I'm not sure where to turn. (Similar to the specs described here - No one answered this question.) --- What do I need to learn to make this happen? Any tips or suggestions would be welcome.
My ultimate goal is to create a website that explains a complex political process in the most easily understood way. The main audience is not tech-savvy and won't necessarily have the most up-to-date browser (or Flash player plugin).
More details about my case:
I'm trying to design a website that will guide community activists through the process of fighting a particular environmental problem.
The organization I'm working with has very specific ideas about what this website will look like. The director of said organization was very inspired by a Prezi she saw, particularly the ability to zoom in to get detail, without overwhelming the viewer with too much detail at the outset.
Director's vision:
The usual steps of this process (e.g. collect signatures for petition, deliver to city manager, write editorials in response to city manager's comments, etc.) would be displayed in a series of boxes connected like a flowchart.
Folks would click on the step they're in and the box would expand OR a second box would pop out to show more info about what to do in this step (e.g. identify key stakeholders, pass out petitions at events). Then users would be able to close/resize the box and move on to the next step.
Thanks!
My ultimate goal is to create a website that explains a complex political process in the most easily understood way. The main audience is not tech-savvy and won't necessarily have the most up-to-date browser (or Flash player plugin).
More details about my case:
I'm trying to design a website that will guide community activists through the process of fighting a particular environmental problem.
The organization I'm working with has very specific ideas about what this website will look like. The director of said organization was very inspired by a Prezi she saw, particularly the ability to zoom in to get detail, without overwhelming the viewer with too much detail at the outset.
Director's vision:
The usual steps of this process (e.g. collect signatures for petition, deliver to city manager, write editorials in response to city manager's comments, etc.) would be displayed in a series of boxes connected like a flowchart.
Folks would click on the step they're in and the box would expand OR a second box would pop out to show more info about what to do in this step (e.g. identify key stakeholders, pass out petitions at events). Then users would be able to close/resize the box and move on to the next step.
Thanks!
Response by poster: Hello TheBones - thanks for the suggestion! I emailed the director for more detailed requirements & a full list of steps as well as the paths between them. Hopefully I can get all of that info in place and make this a more productive question.
Apologies if this question is the web design equivalent of walking into a library and asking for "That book with the red cover"!
posted by brackish.line at 2:01 PM on June 24, 2011
Apologies if this question is the web design equivalent of walking into a library and asking for "That book with the red cover"!
posted by brackish.line at 2:01 PM on June 24, 2011
This might not be the most useful answer but there's also the possibility that having some complex interactive thingy might not be the simplest and clearest way to get a complex issue across. If you do your research and find that an interactive flow chart isn't the best way to communicate the things your client wants to communicate you should make sure you know what is and convince them of that. The problem might just as easily be solved by good CSS styling that conveys the hierarchy of events and possibilities and actually be more usable because of that.
I guess what I'm saying is design to convey the information - don't fit the information around the design.
posted by pmcp at 2:14 PM on June 24, 2011
I guess what I'm saying is design to convey the information - don't fit the information around the design.
posted by pmcp at 2:14 PM on June 24, 2011
I agree with pmcp- I don't really see the benefit of having everything done on one page. I am a project manager for an international company and we get all kinds of crazy requests from sales reps and customers. It is my job, as project manager, to cull out kernels and form them to what will actually work. If this workflow is any more complicated than about 2 or 3 steps, having a page for each step is the best way to go. I know it's not what they want, but in this case they are the client and you sometimes have to tell the client that this won't work.
I looked at the example you gave in your previous question linked above, and if there are specific action items that have to be taken, this design will not work. There is too much going on for 1 page to handle.
From what you have given us, I would be suspect to believe that this can be done without any server side scripting. Your best bet would be to find someone who can scope and build this for you and not try to take this on yourself with just an understanding of HTML and CSS.
posted by TheBones at 3:07 PM on June 24, 2011
I looked at the example you gave in your previous question linked above, and if there are specific action items that have to be taken, this design will not work. There is too much going on for 1 page to handle.
From what you have given us, I would be suspect to believe that this can be done without any server side scripting. Your best bet would be to find someone who can scope and build this for you and not try to take this on yourself with just an understanding of HTML and CSS.
posted by TheBones at 3:07 PM on June 24, 2011
Sometimes the way to "... tell the client that this won't work. " is to work out a couple approaches and bill them exorbitantly for the bad approach (or estimate big hours).
Multiple pages with a similar graphic can have the same effect as a flash site, with many advantages. Folks will be able to link to a specific topic, search engines will give better results. It's the information, not the sizzle.
posted by sammyo at 6:44 PM on June 24, 2011
Multiple pages with a similar graphic can have the same effect as a flash site, with many advantages. Folks will be able to link to a specific topic, search engines will give better results. It's the information, not the sizzle.
posted by sammyo at 6:44 PM on June 24, 2011
« Older Jet engine versus internal combustion engine:... | Control - Y keyboard shortcut has globally stopped... Newer »
This thread is closed to new comments.
Your first step is to gather requirements and put together a workflow. Once it has been signed off on, then go and build mockups. Once you have the mockups, post them online and come back and put a link to them so we can help you figure out what to build it in.
posted by TheBones at 1:43 PM on June 24, 2011