posted
I need to explain a complex process in an efficient manner. I have the text, and I have the site, but I can't decide how to structure it.
Do you know of any sites that you feel successfully explain something complex? Maybe the Kreb cycle. Or How an Airplane Flies. Or How a Bill Becomes a Law. Maybe How to Set Up a D&D Character in Less Than Two Hours.
I'm wondering about the different ways to present information about a complex subject. Hmm...
Posts: 1163 | Registered: Jan 2005
| IP: Logged |
Hmm...I'm not sure about the animation, but I like the idea of graphically showing the steps on the right, and then putting a Next button at the bottom of each step.
I realy can't do it in Flash. I don't know Flash, I don't own it, and I don't want to. I hope there's a good way to do this in HTML.
[ February 24, 2005, 10:05 PM: Message edited by: Lady Jane ]
Posts: 1163 | Registered: Jan 2005
| IP: Logged |
posted
I know I'm asking y'all to help me with homework. I am helping myself at the same time. I'm just wondering if there is a great solution somewhere. I have several solutions, but none of them are GREAT.
Posts: 1163 | Registered: Jan 2005
| IP: Logged |
posted
http://www.howstuffworks.com/ is always good for simplfying complex things; lots of interesting info. They use a lot of diagrams to help illustrate things.
There's a book called Code that taught me how a computer works (but it's about two and a half inches thick, so I guess it doesn't apply here).
posted
Hmm...they have good text, but I already have that. I wonder if they have any good structure? I like the information, but I don't really like the site.
posted
Hmm... So maybe something that has a sort of javascript slideshow type of thing, where you click a "next" button/link or something and it goes to the next image?
posted
Hmm. I actually don't much like the Krebs cycle animation you linked to, kat. It's trying to show far too much detail about too many things. I like this one much better.
Posts: 32919 | Registered: Mar 2003
| IP: Logged |
posted
"How to Set Up a D&D Character in Less Than Two Hours..."
*grin* Believe it or not, this is actually very possible. A harder one is "set up a D&D character in less than two hours for someone who has never played, but is not interested in playing a generic 'type.'" Posts: 37449 | Registered: May 1999
| IP: Logged |
The problem is there is a LOT of information there, and I have it grouped but haven't decided how to present it. The screen will be only 760 pixels wide (metal industrial business buyers are often not power users), and the left 180 pixels will used up in navigation. The site design is different - none of those big black bars in the way.
The anodizing overview page needs to include (1) a general description, (2) all the options possible, (3) a basic outline of the process, and (4) marketing language of why Pilkingtons is the best.
I really don't want to do animations - I don't have the time, programs, training, or inclination. I don't think users will find it useful enough to make it worth it.
I do like the eHow site - that's very clear. Very useful. *bookmarks*
Tom: And yet, we were up and running in an hour and a half.
[ February 25, 2005, 10:47 AM: Message edited by: Lady Jane ]
Posts: 1163 | Registered: Jan 2005
| IP: Logged |
posted
Hm. Looking at this, I think I'd use an "expanding" or "pop-up" layer on the Z-axis to float a box containing the definition of any given term. (I think the "expanding" concept might work best, indicating with either an underline or a plus-sign that appears during hover that there's a glossary available.) You could then write a more concise sales text that contains the definitional terms, and even use floats over the flowchart provided to define each stage of the process. The upside is that the page would appear much more concise, while still providing as much information to the truly interested person; the downside is that someone who didn't realize they might be interested in "bright-dipping" might not hover over it to get the definition, and thus miss out on the special qualities of that option.
posted
First, I'm against fixed width websites, when unnecessary .
If you did want to make it non-fixed width, what you'd do would be make the right column expand to fill the page as needed, and on your menu set the background colors to the same colors as the menu item backgrounds, and center the images (personally, I'd suggest making the menu items text, or at least giving them hidden text that would let a person using a screen reader or text based browser to use the site; currently that's not possible). Then specify each menu cell's size as a percentage of site width, and the menu will expand symmetrically as the page is enlarged.
As for making it more readable:
non-fixed width would help, people are more comfortable reading more text when its wider, generally (up to a point, but that point should be left up to the user).
Right now the information is just sort of one thing after another, when what you really have is four separate categories of information: Introductory information, step-by-step instructions, detailed specifics/definitions, and a flow chart.
Right now you only separate off two of these sections.
The easy way would be keeping the page much as it is now, but creating a stronger heading structure. After that stronger heading structure is in place, you might put links at the top of the page which take you directly to the subsections (using # anchors). This is highly effective.
Even more effective would be splitting these things up by page. Have four pages, the first page being an introduction and a link menu to each of the subpages and the main subsections on those pages, so it might go:
code:
WHAT IS ANODIZING?
Anodizing successfully combines . . .
Raw aluminum left exposed . . .
Anodized coatings can be colored . . .
Steps Step 1: name Step 2: name Step 3: name Step 4: name Definitions and Further Information Hardcoating Bright Dipping Advantages . . . Flow Chart
At the top of each page would be a menu to the subsections on that page (including sub-subsections, if there are any). There would also be "forward" and "back" buttons at the top and bottom, discreetly.
This allows someone to easily jump to any point of interest, maintains all information in an obvious manner, makes it more digestible, and is generally clear and clean.
It also adds information in a highly usable manner -- the menu of steps, for instance, is now a quick reference point for what the steps are, which is useful. The menu constitutes a quick overview, which is currently absent.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
Hm. Oddly, I disagree strongly with fugu on that design element. While I agree with him on the topic of fixed-width pages, I think multiple pages here will make the information less useful and less likely to be read; I think his approach works well for a wiki or other dictionary-type presentation, but isn't direct enough for sales info. You want to avoid over-compartmentalization, or at least present a snazzy impression while compartmentalizing.
I'd still like to recommend that you go with pop-ups on another z-layer: an alert tied to a hover, and a pop-up glossary box tied to a click.
posted
If this is about sales and not information, you need to just reduce the amount of information there; most of its only useful for someone seeking information, not for someone looking to purchase, that sort of person's going to be looking more for pretty pictures.
Based on the large informational content I assumed a lot of the point was to present information.
Of course, there's also a large body of research out there which shows sites that allow the easiest, clearest access to information of the type purveyed are the most successful.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
The fixed width was my decision and I'm quite comfortable that I'm right. I'm not asking for advice on that. This is not a technical site - it's for business users that will most like never have readjusted the setting on their computers. For most of my audience, 760 pixels will fill the screen. That's fine. IBM and Dell do the same thing.
Fugu, you have an example of what you're talking about? I also have lots of theories of things that would work well, but I want to see something in action that works well. Less talk, more action.
I like the idea of rollover definitions.
[ February 25, 2005, 04:26 PM: Message edited by: Lady Jane ]
Posts: 1163 | Registered: Jan 2005
| IP: Logged |
posted
My current idea is the diagram as the general overview, and then links to more detailed information if they want it.
It is a sales site - it is not an educational site. However, we are selling something that few people have even heard of before they need it, and so the site often has the burden of educating the user.
On the other hand, we don't want the hobbyist customers - they are not cost-effective. We are looking for those customers who know what they want and want proof that we know what we are doing, but don't know the specifics of the business or how exactly Pilkingtons goes about their business.
[ February 25, 2005, 04:29 PM: Message edited by: Lady Jane ]
Posts: 1163 | Registered: Jan 2005
| IP: Logged |
Check out the subpages in particular. The link menu is moved off to the right, and the main page doesn't link to sub-sections, but that's because there are already so many child-pages. This is a sub-page with the stuff to the right: http://httpd.apache.org/docs-2.0/howto/cgi.html
The UN: http://www.un.org/documents/ (only somewhat similar, but illustrating how useful it can be to have a menu-overview to look at so one knows where to go).
posted
If its a sales site, most of that information should just not be there. Instead, there should be more pictures of finished pieces; proof is in the pudding, not in the recipe.
That's why I had hopes on the Kreb Cycle - many steps, components move in and out, but a good illustration can give you an overview in one glance, and then you can go deeper.
Those are like a manual - just a dynamic table of contents. I want something that you can only do on the web - have an illustration of the entire process, and then move in and out of detail.
It is both a sales and an educational site.
If this were easy, I wouldn't need to ask for help. Thanks, y'all.
[ February 25, 2005, 04:39 PM: Message edited by: Lady Jane ]
Posts: 1163 | Registered: Jan 2005
| IP: Logged |
quote: My current idea is the diagram as the general overview, and then links to more detailed information if they want it.
I'm not sure I'd go this route. The diagram by itself isn't informative enough. I'd still put some description of the process itself -- in text -- on the same page.
If you like the rollover concept, one thing that'd be fairly simple is to highlight the appropriate step of the diagram when the accompanying text is moused-over.
Let me see if I can find examples of what I think'd work....
Here's one that uses vertical menus. I wouldn't suggest this layout, but you see the possibilities: you can add whole paragraphs beneath a heading if someone clicks on them.
This one I particularly like. Obviously, you can use a different symbol -- or an underline, or whatever -- as a trigger for the expansion of the text. (Perhaps a small, underlined "read more..." would do?) And, of course, you can combine that expansion with other effects.
posted
*thinks* I definitely want a graphic on the first page, and then links from the first page in deeper. I may include a tutorial that goes step by step, but a simplified one - picture the Exposition Filmstrip in Jurassic Park. So, a simple diagram, and then a "Follow the process step by step" link to the tutorial, I think.
I'll probably have a box of questions on the right. "What happens when..." "Can I ..." That will cover the scenarios of what happens when you don't do it right.
Oh, I'm getting picky, I know. I don't like the vertical menus because then the links aren't in the same place every time - they move. I have this theory that people read much less often than they click on the memory of something they once read, so the links shouldn't move. *thinks*
[ February 25, 2005, 04:43 PM: Message edited by: Lady Jane ]
Posts: 1163 | Registered: Jan 2005
| IP: Logged |
posted
There's a long-standing web design rule against using exclusively graphic navigation on a sales page. Any time you require a click to get to actual information is bad, and image maps represent the nadir of that concept.
(Note: that my own personal webpage violates every single principle of good web design should not be taken as an indication that I don't think good web design is important when being done for money. *grin*)
quote: I have this theory that people read much less often than they click on the memory of something they once read, so the links shouldn't move.
This is a very important consideration for web portals and sites which will see a lot of repeat visitors. By its very nature, this specific page will not.
posted
I think what I'm having trouble grasping is why you want to concentrate on the step-by-step elements of the process flow itself; I suspect that most of your customers could really care less, and instead care about what the steps themselves do, and what options are available to them at those points, and why you guys do each step better than the competition. The text on that site already does an excellent job of putting that into marketing-speak, I think; I'm not sure it would be improved by trying to duplicate the blow-by-blow nature of that Krebs cycle demo.
Posts: 37449 | Registered: May 1999
| IP: Logged |
posted
I hate to to say it, but the reason I was looking for a good way to put the technical information up is that that's what my uncle said he wanted put up.
I'm definitely willing to try and talk him out of it, though.
Posts: 1163 | Registered: Jan 2005
| IP: Logged |
posted
Well, again, I think the text that's there NOW is actually pretty good. I just don't think it would be improved by slowing down access to it, or breaking it up into a timeline. IMO, the graphic does an excellent job of presenting that timeline by itself.
Posts: 37449 | Registered: May 1999
| IP: Logged |
posted
So what about the graphic on half the content, and then text on the right, each step set off in boxes outlined in the same color as the step in the diagram?
Text on the graphic redone - I like the Terminator font, but not for this.
[ February 25, 2005, 05:00 PM: Message edited by: Lady Jane ]
Posts: 1163 | Registered: Jan 2005
| IP: Logged |
posted
Hm. That might look a little busy. I know this violates what I just said about always wanting some text on a page, but if you're determined to use that graphic as your primary navigation element, why not have a SINGLE box on the right that's populated with data based on the appropriate mouseover -- or, preferably, onclick -- area on the image map? That way you don't need to simultaneously display all that info at once.
posted
Just letting you know, the flat glass industry dropdown menus don't work on safari.
edit: to clarify what I mean by "don't work", they appear, but disappear if one tries to move the mouse to use them.
I like Tom's suggestion, though I'd suggest simplifying the graph. Also, steps of each part of the process should be illustrated with photos, probably enlargable thumbnails.
posted
I realize with shame that I somehow produced a sentence containing the words "simultaneously ... all at once." *shudder*
Posts: 37449 | Registered: May 1999
| IP: Logged |
Printer-friendly view of this topic
![[Cry]](graemlins/cry.gif)
I know I'm asking y'all to help me with homework. I am helping myself at the same time. I'm just wondering if there is a great solution somewhere. I have several solutions, but none of them are GREAT.
![[Smile]](smile.gif)
![[Razz]](tongue.gif)
![[Wink]](wink.gif)
.
