What to do BEFORE you code

The first thing that should be done before any design takes place is to decide what you want the site to do.

Ask yourself and/or your Team the following questions.

1. Do you want it to inform, or sell something?
2. What are your qualifications?
3. Who are your users?
4. What is your target market?

Then, you must understand how users interact with websites. They are task and goal oriented. They want to get in, and get out, or if you have some cool stuff, they want to see more of it. They want to do this in 3 clicks or less. Preferably LESS.

How do you offer that? By way of a good navigation scheme that includes main navigation, subnavigation, hubs, buckets, and breadcrumbs. To name a few. Stay tuned to learn more or ask questions and we'll tackle it together.

I talk to many young painters, because I teach in art schools. I ask them: Why do you think that what you do ends at the edges of the canvas? Think of the frame. What frame are you working in? Not just that bit of wood 'round the edge, but the room you're in, the light you're in, the time and place that you're in. How can you redesign it? I would say that to musicians, too. I see them spending a lot of time working on the internal details of what they're doing and far less time working on the ways of positioning in in the world. By "positioning it" I don't only mean thinking of ways of getting it to a record company, but thinking of where it could go, and where it fits into the cultural picture -- what else does it relate to?

-- Brian Eno

Of course, if we were to say this to web designers, I would have to add that by "positioning it" I'm not just talking about getting it to show up in search engines...

You know how in the card game Solitaire there's a heirarchy, with the Ace, King, Queen, Jack and then all the numbers?

Well, imagine hubs and buckets like that.

The Joker is the homepage. A hub is an Ace, King, Queen or Jack. The buckets are the numbered cards. You can even do it so that all the diamonds are sub-hub, all the hearts are a sub-hub, etc. with buckets underneath them.

Another way of looking at is a product website. There's a homepage. There's About Us, Contact Us, Sitemap (if they're smart), Product Catalog.

The Product Catalog is a "homepage" IF there's several product lines, such as Executive Line, Small Business Line, Budget Line. Those "lines" each have a hub page that launches each line. The Product Catalog homepage is their "jump page". (or doorway, if optimized like one.)

Each product line "hub" contains different items. They can be divided into "buckets", where each individual product is a "bucket". Every time a new product is added to the line, a new bucket is added to the hub.

When a webmaster uses templates in their design, the theory of hubs and buckets is all the easier. Each hub can be template, and each bucket can be a different, but related, template design. I've seen some very nice sites that use color to help differentiate hubs. For example, the Executive Line would have a template that features the color blue in the background, and the buckets inside can be a lighter shade of that blue. Another hub would be green, with its buckets being a lighter shade of that green. This is good usability.

Navigation is easier when the drilldown is user friendly. When each hub is linked to from a homepage with a text link, and the page and the link are optimized, this affords much easier access by search engine crawlers. This navigation makes it easier for search engines to find pages, and users as well!

The use of breadcrumbs and how to design the navigation of them, intertwinded with hubs and buckets is another step to all this.

Breadcrumbs are used in conjunction with regular navigation. They don't replace it. And, they're nearly always in text form (text only links). Really big sites have top navigation to the top level pages, hub navigation on the left with breadcrumb navigation inside, and footer navigation is the bottom. The footer is important. When all else fails there must be a fast way "Home" or to "Contact" at the very least.

The idea is to never design a user right out of the Web site. Do everything to keep them there, clicking around...

Just a little note about breadcrumbs? Using them depends on site architecture. If you have a larger site with main categories, subcategories, and such, then it's logical to use breadcrumbs.

I don't know, I think they can be useful on most sites, even if they're small. Certainly, they're necessary on large sites, but I don't think I've seen an instance where they detract from the user experience, even on a small site.

True. There's a signpost and there's navigation to sublevels. I think Shari and I are thinking of sites with multiple levels in which the user really needs the links to help them find what they need vs marker to help remember where they are, etc. A site with a huge number of products desperately needs intricate navigation with subsets, whereas a smaller site can get away with a smart template that offers indicators for "You Are Here".

One of these ways is with color, look and feel of the hub itself.

Obviously it's not a black or white issue or one size fits all. With navigation I think some creative people are still finding new ways to encourage clicking around without the user getting lost or confused.

I think breadcrumbs are great, because they do a lot of things in a simple way.

They: - Let you know what page you're on - Let you know where you are in the scheme of things - Let you get back up anywhere in the tree with one click

I'm aware of a couple of interesting variants:

The Hansel & Gretel thing isn't actually very accurate. Their breadcrumb trail showed where they'd *been*, not where they *are now in the hierarchy*. So, one kosher use of a breadcrumb is actually to leave a trail of the pages you've been on, a bit like the context-back button in browsers. Theseus did the same thing when penetrating the Minotaur's labyrinth..

However, I don't really like this idea very much, partly because it's not the conventional approach, and partly because my web browser gives me that functionality.

One variant of breadcrumbs that really kicks it is this: http://widget.elegan...m/node/view/112, where the breadcrumb is combined with a dynamic drop-down to give you very wide access to the whole site. There are a couple of options, when hovering over a breadcrumb element: - Drop-down could offer all peers of element - Drop-down could offer all children of element

As I finally realized what breadcrums are like (nothing to do with the kitchen), it made me wonder if it were possible to make a script for real breadcrumbs trail - so it would show where somebody has visited. For example "last 24 hours - something - What to do before you code - something" and so on?

Breadcrumbs...who would have thought. You also need to use the new technology that comes out and figure out how to use it to your advantage...Like breadcrumbs, blogs etc. Try and keep the idea in your mind that the Internet and it's resource programs are tools and use them as such.

As I finally realized what breadcrums are like (nothing to do with the kitchen), it made me wonder if it were possible to make a script for real breadcrumbs trail - so it would show where somebody has visited. For example "last 24 hours - something - What to do before you code - something" and so on?

You have to be careful with this type of breadcrumbs though. The crows might follow behind you and eat them all up, and then you'll be stuck in the woods at the witch's house watching her pre-heating the oven.

OK. Seriously.

I've seen some scripts on how to do this. I know it's possible. I don't know if it's worth doing. A back button seems to handle this pretty well.

How comfortable are you in using php or asp or perl? There may be ways of doing that type of breadcrumb with those.

I've seen some scripts on how to do this. I know it's possible. I don't know if it's worth doing. A back button seems to handle this pretty well.

How comfortable are you in using php or asp or perl? There may be ways of doing that type of breadcrumb with those.

Yes...this sort of breadcrumbs are not very practical :roll: But the idea fascinates somehow. All those crows and dark woods..mmMaybe a counter that would show like this the paths visitors have traveled thru the site would be more useful, sometimes.

Php, asp and perls may wait me somewhere in the future, as I'm a newbie and amateur.

Maybe a counter that would show like this the paths visitors have traveled thru the site would be more useful, sometimes.

That's another matter, and a good one to think about.

It's really helpful to see how someone travels through your web site.

Which page do they arrive upon, and which pages they visit, where they go from one page to another?

I exchanged some words on a forum recently with someone who was an architect before becoming a web designer, and he said that one of the things that always intersted him the most about architecture was circulation - how people traveled from one part of a building to another, and how to design they way people moved from area to area. He said that it was something very similar to what he tries to do with web sites.

There is software that looks at the log files of your web site and can help you see some of those paths through your site. Other software is like a counter, and tracks people with software known as cookies, or by tracking who downloads different images on your pages.

This thread on our forums had someone who writes that type of software describing little of how his software works:

Have you ever looked at the log files for a web site? If not, it's an interesting thing to do, and can tell you what words people are searching for when they find your site, and which pages they visit. Log file analysis programs make interpreting all of the information easier, too.

No, because I don't have a domain of my own yet. Some time ago it was possible to track some routes with counters, but nowadays thre's too much traffic. It was very interesting - they use very natural path, after all. Usually not those they are meant to do.Sometimes I've watched a friend visiting my site for the first time. It gives good information indeed.And, if it were easy to get "breadcrumbpaths" of visitors rambling around, you could make some links more visible if needed, or remove dead ends.

Somewhere was ads about visitorville or something like that, it sounded a bit like this.

BTW, is there any method to know where are from visitors, who arrive via redirecting frame? I have hunreds of exotic visitors daily from Africa and Near East, but no idea how they found the site.

This week google sent a visitor who searched "Who is the best woodcut artist in the world". I was number one.

Something for you to look forward to. The log files can tell you where people came from. If they used a search engine, they can tell you what words they used to find your site. How did you find out about the google visitor who found the "best woodcut artist in the world"?

It was very interesting - they use very natural path, after all. Usually not those they are meant to do.

It is funny sometimes the path that people will take. If you are careful, and have some experience at it, I think that you can get good at getting people to follow the paths that you design for them on your site.

[list]Use the words that people expect to see on your site when you write about a specific subject. Use enough words in the link, and in text surrounding and supporting the link so that people have a good idea what is on the other side of the link before they even click upon it.Build pages that work from broad categories to specific topics - So that people's confidence in finding what they are looking for grows with each page they visit.[list]

The breadcrumbs we were describing in part of this thread are some other things that can help people figure out where they are in a web site, and where they can visit, and help them travel through the site.

Sometimes I've watched a friend visiting my site for the first time. It gives good information indeed.

That's a great idea, and something that a number of people recommend. It's hard to sit quietly besides them and not tell them what to click upon, but it's worth seeing what they do.

And, if it were easy to get "breadcrumbpaths" of visitors rambling around, you could make some links more visible if needed, or remove dead ends.

It really does help. Another thing worth doing is seeing the words they use to find the site. Sometimes people are using words that appear on your site, but you can tell that they really weren't looking for your site. Or they use words that you wished you had used more of, and can add to the site.

Somewhere was ads about visitorville or something like that, it sounded a bit like this.

I had heard about visitorville before. It looks like it could be fun to use, but expensive if you get a lot of visitors.

BTW, is there any method to know where are from visitors, who arrive via redirecting frame? I have hunreds of exotic visitors daily from Africa and Near East, but no idea how they found the site.

Identifying redirecting pages can be difficult. Have you looked in Yahoo or alltheweb for your URL to see which sites it might be located upon? Google doesn't show all of the pages that link to a site, especially if those pages have below a certain page rank.

Thanks ...isn't it so that Google MUST be right, whatever they talk about it... :sunny:

Visitorville was really funny with firetrucks and helicopters delivering people to to suburban pages. But expensive, really. No matter how many visitors, it isn't cheap.I have used http://stats1.webpalvelut.com/ which shows search terms and referrers well, but they are going to cost more than until now, so I'm going to quit this counter. I use also Nedstat, but it shows referrers only for 100 last visitors and details of 10 last pageviews, so it's not very helpful.

The lincoln article had a lot of things that sound easy to believe. I probably think like that myself when surfing, but it haven't thought it out as clearly.

Sometimes friends are shy to surf your site if you watch. For example one not so close friend first looked at galleries the way most visitors seem to do. - first the general galleries, then she selected more spesific ones.Mm - that's what the lincoln article said?But afterwards I she visited the site from home - first place was then CV and other pages with personal info. The latter seems to be the most usual way for those who know me personally. Those who are looking for art, but don't know me, do as the the friend did first.

Is it ok to reply to a thread that hasn't been replied to in a year and a half? I feel like I'm unearthing ancient relics.

Anyway, I just wanted to add that you should, as a web developer or webmaster, pitch this idea to your boss/company. In fact, set up a page with an example on it and then say "hey, what do you think of putting these across our website?". I guarantee they'll love it, and you look like the master of all things usability and search engines and then get a $10K raise...or just an appreciative glance

But seriously, great for any size corporate website, and honestly I'm skeptical about what sort of chain to put on certain pages on our company's site. If I'm skeptical, that means the user is probably skeptical about clicking into those areas. Another way of checking for usability, eh?