Lesson 12 - Planning Your Website
Navigation Structure
Navigation within your site is one of the most important considerations. Remember Vincent Flander's list of 5 things that make your website unattractive? One of them was bad navigation, either too confusing or leading to dead and broken ends. You, of course, will not do that. Consider your website in terms of how the users will move around between the five pages.
There's the traditional slide show which forces the reader to move in a specific order, from one slide to the next. This one is from one of the nursing instructors, made from a PowerPoint presentation, and is basically an outline of the chapter or lecture.
Navigation can be from the left panel, across the top, or from the right panel. All these three are known as the floating structure, by far the most common navigation system. There is a definite home page, acting as a main table of contents. Other pages offer links to get back to the home page.
Another version of the floating structure is the page that is filled with links all over the place. In fact, the front page is sometimes nothing more than links. Most colleges and universities, unfortunately, have gone this way.
There's also the cued structure, where every page on the site offers links to every other page. Any page can be the front page. This will only work for a small site that does not have hundreds of pages.
Look at each one of these sites and figure out which system you want to use for your own website.
Next, with an old-fashioned paper and pencil, try to draw a diagram of your website, showing how readers will move between sites.
Below is a diagram of the page that will be written. There will be a main page that announces the summer travel and study program to Thailand. From that page, users can click to: find dates and costs, find lists of what to bring, find information about the coordinators, and see pictures of where they'll be living and visiting.
You can also visit this page by a previous student. This is the website she created for this course, and she's graciously allowed to show it to you.
Determining your Audience
Many details about the design of your website will be determined automatically by your audience, and by the purpose of your website. Consider the two questions below.
If this is a personal site for you and your friends, or your dog Casper's friends, these questions will be easy, and maybe your friends won't care if your site is unfocused, sloppy and confusing. But, they probably won't read it either.
If the site is for a company, the answers become much more important. Without a specific focus, valuable information will be left out or buried in pages of superfluous junk.
- Who is your target audience? Potential clients for your future web design studio? Customers to your restaurant? Donors to your cause?
- What kind of information will they be looking for?
Always keep this in mind: What are your readers looking for?
Communicating with your Audience
A successful website, according to the people who define such things, is measured not by how many hits your site gets, but by how many visitors come back. Visitors come back to sites that communicate with them, or sites that change regularly, or sites that have actual content, valuable content on them.
Some of the sites that do this are listed below.
When you design your own website, try to think of ways that you can communicate with your visitors. At the very least, you should have the e-mail address of someone that visitors could contact. You would be surprised to know how many websites leave out this detail.
As one of the pages of your website, you'll be designing a form for visitors to fill out. Start thinking about what you'd like to ask them.
Ragu Sauce, Mama's Cucina, where visitors are invited to write stories, share recipes, learn Italian and sign up for grocery giveaways.
Speeches.Com, designed by a speech writer from New Zealand, will write a speech for you, give you tips on public speaking and speech-writing workshops.
Meguiar's Car Care offers a car prescription service. Visitors can key in the information about their car, key environmental factors, and their level of commitment to car care. Meguiar's will give them personalized advice on how to extend the life and value of their cars.
Technical standards of your audience
Know the characteristics of your audience. If they are propeller-heads, they might browse in Unix on a 21 inch monitor. Or, if they are more conservative, they might have a 12 inch monitor running Internet Explorer 3. If you design a site that suits your audience, they won't be complaining to you later.
Accessibility Standards
Accessibility means that your website should be accessible to most people. There are a few basic steps you can take to make your website available to a much larger number of people.
Why accessibility? Jane Maringer, instructor for the Disabled Student Services Program at Gavilan College (located in Gilroy, California), has put together a list of challenges and solutions to make your pages compliant with Priority 1 standards of the Americans with Disabilities Act.
The Web Delivers Light In a Sightless World gives you some insight on how your page will sound when read through a reader like Lynx. At the end of the article, you'll find a link to hear the first paragraph read to you through a speaker. Do it, it's enlightening.
- 10-20% of the population have disabilities.
- Temporary disabilities, such as Repetitive Stress Injury (RSI) or accidents can affect our ability to access the web.
- Most people become "less abled" as they age (vision, mobility, short-term memory, dexterity can decrease).
- 8% to 10% of males have some form of color blindness.
- Accessibility is a legal requirement (ADA).
|
Use H1 to H6 tags while designing your website
- Readers use them. Remember Jacob Nielson's take on how people read the Internet? They scan, they jump from headline to headline, from <h1> to <h6> tags. Use those header tags for your important stuff.
- Readers for the blind can be keyed to jump from <h4> to <h4> tag.
- Internet search engines are programmed to recognize those headers (<h1> through <h6> tags). If you use them, your website will show up on search engine result lists more often. People will find your website.
Using Bobby for an Accessibility Check
You'll use the Bobby website to check your final project. Do this now with one of your webpages that you've already put up. Scroll down the page until you see the place to type in your URL. It looks like the image below.
The following URL has been scanned: http://www.angelfire.com/bug/csis6/firstpage3.html
Here's the report:
The scanned website does not meet the minimum standards to be approved for Priority 1 Accessibility. It requires alt attributes to the <img alt="" border="1" src> tags before it could pass the standards. Fortunately, the Bobby site gives the specific lines (39, 91, 209) where the <img> tags are without the alt attributes.
The next section, Priority 1 User Checks, lists some items that it really can't check automatically. For example, number 3. The report tells that the site needs to give information in some way other than using color. If the site tells users to 'click on the red button for more info', then the red button should be labeled as "More Info", so that a colorblind person could still find the correct place to click. Click on the image to view a full-size version in a new window.
This is the end of Lesson 12. Please go to the next lesson.
|
