Justify ISC220 Student's Site

Overall Site Planning     Overall Graphical Design      Navigational Design

The overall site design employed for this site began by dwelling on what needs to be accomplished by the site followed by understanding who the theoretical intended audience would be. This was then followed by concentrating on how to meet the needs of the audience by providing the correct content through an interface that will hold their attention and keep things interesting enough to cause them to use (and stay with) this site to get that needed information. I considered the content, the graphics and layout, and the navigation as three of my main concerns in implementing this site.

The content was probably the easiest aspect of the site to develop. Since the subject (arbitrarily chosen) is a cookbook, then the content certainly had to be foods. The decisions to be made were that such as what foods and in what order and with what supporting material would be needed to properly present each food item. The consideration of space fell prominent amongst the necessary decisions because of the limitations thereof. This could be part of the cost analysis of the site; that there was a limiting factor of about 10-15 pages helped shape just what would be presented on the site. The final decision to grab a couple of possible entrees, a supporting bread, and then finally deserts to round out the meal won out in the need for optimized space race.

References to sources regarding the overall planning of the site:

A coherent site plan is crucial.1

You're not designing for your own management and staff, but for visitors who almost certainly don't care which department reports to whom. All they really want to know is what your company can do for them. Put that information on your main page.1

First, before you do anything else, decide what you want to accomplish with your website. Then decide what information you want to include to accomplish your objectives. Develop an outline for the major portions of the site and determine what content and features goes in each portion.1

Next, determine the overall look, tone, and presentation of your site, and keep it consistent from page to page.1

Cater to their special needs and interests. Offer them more than they can get from your competition. Be responsive, reliable, and available when they need you.1

Update your content routinely. Make sure everything on your site, from contact names and numbers to detailed product documentation, is accurate and up to date.1

Being responsible to a specific purpose can dictate certain design choices.2

The amount of prior knowledge your audience has of your chosen subject matter will dictate how much background information you need to provide, and the extent to which you must clearly define and explain your terminology.2

What is your site about?3

Write simple but don't think your visitors are idiots.3

KISS = Keep it Simple, Stupid.3

1 Basch, Reva. "Finding Your Place Online." Enhancing Websites (PC Novice Learning Series). Oct. 1998: 44-47.

2 "Guide to Web Style from Rick Levine." Sun On The Net. http://www.sun.com/styleguide/index.html. 29 April 1999.

3 "Yet Another Style Guide, 1.1 from Michael Vorburger." KISSfp. http://vorburger.ch/kissfp/styleguide/index.html.29 April 1999.


Overall Site Planning     Overall Graphical Layout     Navigational Design

The presentation of the site, including layout and graphics, was to decidedly point toward a non-techy audience that would use my site to solely get recipe information, not to see the latest in technical web-based novelties. The thought here was to make the site usable across the main browsers, but also to cover for those that may have had background images or graphics turned off. There is only one instance of using JavaScript for a "back" button because of the possibility that the surfer may have come into the page from more than one location.

The graphic choices involved finding graphics which would explicitly be understood as to their meaning at first glance with as little ambiguity as possible. There are specific image text labels to help visually impaired folks with "page readers" understand what is happening on the page as well as help all customers know what they may chose to wait for or help them to decide whether to turn on graphics. The size of the graphic can also be helpful to a surfer so those remain on the image label as well. Colors are highly contrasting and fonts should be sufficiently large to help those with vision impairment; a clean white background helps in this area. No background image was used to minimize ocular confusion and speed page loading. Graphics were kept small and fast loading; they were also re-used to let the images load in the future from the browser cache, thus even furthering the faster load mentality. Hyperlinks are normalized to not confuse the customer; standardized colors and UNDERLINED. If it's underlined, it's a hyperlink. 

Resources used while considering the overall graphical/design of the site:

So from the beginning, design your site with navigation in mind. A content-packed site is worthless if your visitors can't find anything. Consider not only the information and special features you want to put on the site, but the routes your guests will travel.1

Don't overuse graphics and animation. Ask yourself, Is this picture or special effect really necessary?1

Build your site so it has the capability for continuous user feedback.1

Encourage visitors to tell you what works for them and what doesn't.1

Next, determine the overall look, tone, and presentation of your site, and keep it consistent from page to page.2

Don't make assumptions about what they 'should' know, and don't make it chore to figure out where everything is. Keep the structure simple and straight forward. Don't bury important information, but get rid of the clutter by filing the limited-interest material at lower levels of the site.2

Don't continually force visitors to scroll down a lengthy document, or make them navigate from side to side to look at horizontally formatted tables. Many users won't bother to scroll beyond the text that is immediately visible on their screen. All critical content and navigation options should be near the top of the page. Pages full of solid text set up a psychological resistance as well. People tend not to read on the web-they scan.2

However, four clicks is about the maximum that most people will tolerate when they're searching for a particular piece of information.2

Use screen colors, fonts, and layouts that are simple, effective and legible. Avoid elaborate background designs and overly saturated hues that can overwhelm the text on a page.2

Minimize your use of complex graphics. A picture isn't necessarily worth a thousand words, especially when it takes forever to download.2

Test your site thoroughly before you take it public. It also might be a good idea to try it out on people who don't know your company well.2

Lots of detail and presenting many branches (which may work well for other types of web information) can confuse and frustrate your audience.3

Sometimes, you can assume that many of your readers will arrive at your page because they need and want the information your presenting. You can use longer pages, present more detail, and worry less about 'channel-switching' behavior on the part of your audience.3

You should try to accommodate people with a wide range of viewing capabilities, from those with text-only browsers on slow links, to true techno-dweebs with fast 24-color displays served on high bandwidth direct network connections.3

Generally, the slower the link over which your reader will be retrieving your web pages, the more important it is that you maximize 'value' and usable content, and minimize document size and load time.3

Scrolling the browser window allows a reader to advance in the text with less loss of mental 'context' than does following a link. This advantage lasts up to about four screens full of text. After that, there is a tendency for people to lose their context, and get frustrated with the mechanism of scrolling, and their inability to keep track of what's elsewhere on the page.3

If you have long documents that people will want to print or save in one operation, provide a link to a complete, print- or save-able document, rather than trying to cram lots of content into one page.3

Images can add a lot to the visual appeal and information content of a page.3

Provide images that help explain or demonstrate your subject…be certain it's essential to the presentation…may be an important navigational aid…or help set readers' expectations about a site.3

In all cases, you need to ask yourself if the image your offering is worth the download time.3

Use the <…ALT='description'…> parameter in your source to specify the text to be seen by people with text-only browsers, or those who choose to turn off image display while they're browsing ( it will also help visually impaired folks using screen-reading software).3

By setting the background area of a .GIF to 'transparent,' you allow the background color of the browser to show through. This can add to the visual appeal of the page, yielding a more finished, integrated look.3

Graphical bullets can reinforce page layout and cohesiveness, and can add information to a list to clarify its contents.3

Using a graphic file by reference from another site on a different network can cause delays in loading a page…3

Using many unique images, or identical images with different names, [can slow down loading] as well as have[ing] a potentially dis-unifying effect on your document.3

Better yet, unless you're comfortable that the core audience for your site has bandwidth to load large images quickly, or doesn't mind waiting, consider not using a background image.3

Explicitly setting the text color on a web page comes with some interesting human costs. Are you sure people with varying forms of color-blindness can still read your message? Is the text readable on the background you've chosen? Is the text still readable if your audience shuts off backgrounds and opts for the browser default?3

Also, for pages within each section, add a secondary header that takes readers back to the beginning of that chapter.3

If the page is long, with several distinct sections that are not visible from the first screen full, add a short list of the sections.3

[Add a title header] It doesn't need to be large and bold as long as it's recognizable as a title, separate from the rest of the page content.3

The title that appears in the header of the browser window should match the HTML page title. Try to have a unique title for each page.3

If you're fortunate enough to be creating HTML pages in an editor with a spell-checker, please use it. Otherwise dump the text someplace where you can check it for errors.3

Use either a mailto: link or a link to another mail comment form. Make it easy for your audience to comment on your documents. Encourage them to do so.3

Try to provide valuable content on your top-level page.3

[based on tests] They will skip over text that they consider non-essential. They don't like to scroll.3

Concise and succinct is most important: Use short sentences in small paragraphs, or lists if the topic can be enumerated.4

All major information and links should be visible from the homepage without scrolling.4

Top uncool: Broken links!4

Keep a well-balanced and generally rather shallow than deep hierarchical tree. The three click rule states that users will not stay onsite if it takes more than three clicks to access the information they need.4

Navigation bar [should be global and static]4

Clearly mark which graphical elements are links a user can click on…textual links: underlined = clickable, always!4

A clickable e-mail address and last modified date goes at the end of every page!4

It is of great help to [all of the above mentioned if you] put a meaningful ALT tag in your IMG and write an explicit image caption below the image.4

I believe scrolling two or even three printed pages is better [than short enough to never scroll], and preferable over needing to click 'Next' and 'Previous' too many times.4

It's comfortable to start at the top, at the most general level, and move down the line toward more and more specific information. If you have a large site, you can't afford to ignore hierarchy.4

No matter what navigation systems you build, you'll need the solid foundation of the hierarchy to do it well.4

Consider breadth and depth4

Help people find themselves…If users miss your front page because they arrive via a search engine or a remote link, they should be able to figure out where they've landed.4

…it helps to have the name of your organization on every page of your site.4

When all your pages share a particular graphic or overall look, users can also tell when they've left your site.4

Using a site map in place of good architecture is like holding a jet together with gum. 'Nuff said. 'Consider a table of contents.'4

'Ad hoc [embedded links] navigation is risky, since overdoing it results in a mess…avoid confusion by putting important ad hoc links on separate lines within a paragraph, or by gathering all the ad hoc links into a menu or a bulleted list elsewhere in the document.4

If you don't want to provide explicit context, consider supplementing your ad hoc links with link titles (that show on mouseover).4

1 Basch, Reva. "Finding Your Place Online." Enhancing Websites (PC Novice Learning Series). Oct. 1998: 44-47.

2 Basch, Reva. "Create A Website That Attracts Visitors." Enhancing Websites (PC Novice Learning series). Oct. 1998: 52-55.

3 "Guide to Web Style from Rick Levine." Sun On The Net. http://www.sun.com/styleguide/index.html. 29 April 1999.

4 "Yet Another Style Guide, 1.1 from Michael Vorburger." KISSfp. http://vorburger.ch/kissfp/styleguide/index.html.29 April 1999.


Overall Site Planning    Overall Graphical Design    Navigation Design

The global navigation schema used is that which would work in almost any browsing media. The links are clearly marked, sustained throughout the whole site in the same fashion (from page 1), and simply labeled as to avoid any confusion. The one (page) instance where I did chose to use the ambiguous "[Top]" label,  was preceded by clear instruction to the user of how that function was to be used. I used images whereby customers could navigate and used redundant text links as well.

The resources used/considered when making link HCI decisions:

Give them shortcuts on every page-in the form of links-to the main areas of your site. Provide clear and adequate road signs so they can anticipate where the next click will take them. Avoid confusing or ambiguously labeled pathways, unexpected detours, and blind alleys.1

In addition, choose your link names and icons carefully. Visitors should be able to anticipate where each link will take them1

Don't try to be clever by labeling your link 'Hey, Lookee Here' because essentially you're antagonizing your visitors.2

Add a site map. Like a table of contents, a site map diagrams the main sections and subsections of your site in hierarchical, outline form. Some visitors will find your site easier to navigate this way than by following links.2

Adding a link to text does emphasize the word or phrase containing the link, and can actively make the text more difficult to read.3

Try to choose link text that has a conceptual similarity to the title and headers of the destination document.3

The convention that's evolved among creators and users of web browsers is that links that have not yet been followed use a brighter or higher luminance color than those that have already been traversed…you can easily reverse this brightness mapping, or worse, choose colors that read at the same level of brightness. Don't do it.3

…use a navigation scheme that employs concrete navigation links connecting a small number of topics.3

Supply text labels for any graphical navigation buttons.3

If the page is long, with several distinct sections that are not visible from the first screenful, add a short list of the sections.3

Describe the destination of link in absolute terms, rather than implied destinations.3

Use either a mailto: link or a link to another mail comment form. Make it easy for your audience to comment on your documents. Encourage them to do so.3

All major information and links should be visible from the homepage without scrolling.4

Top uncool: Broken links!4

KISS = Keep it Simple, Stupid4

Navigation bar[should be global and static]4

Back & Forward and Next & Previous buttons are distinct! The first is provided by the browser for the 'casual' flow of the current visit, the second is for fixed logical flow between your pages. Ideally, there should be 'Next' & 'Previous' everywhere to allow a user to leaf through your site as in a printed book, for those who want.4

Clearly mark which graphical elements are links a user can click on…textual links: underlined = clickable, always!4

A clickable e-mail address and last modified date goes at the end of every page!4

Help people find themselves…If users miss your front page because they arrive via a search engine or a remote link, they should be able to figure out where they've landed.4

You can make a 'back' link work by being specific, for instance, 'go back to my front page' or 'go back to the table of contents.'4

You might leave the nav bar off your site's front page, since it probably links to the three second level sections anyway. If your site is small, you could implement a simple global navigation system by putting a link back to the front page on every page.4

Some designers dim out the button representing the current section, partially so that pages do not link to themselves.4

Whatever you do, don't remove the navigation element that represents the section the user is in. According to navigation expert Jennifer Fleming, this well-intentioned move is harmful to navigation, not helpful.4

Bailey warns of common pitfalls like vague labels, link labels that don't match the titles of the pages they link to, and labels that don't make sense immediately (or ever)…4

What's the difference between 'home' and 'top' & 'help' and 'FAQ.'4

'Ad hoc [embedded links] navigation is risky, since overdoing it results in a mess…avoid confusion by putting important ad hoc links on separate lines within a paragraph, or by gathering all the ad hoc links into a menu or a bulleted list elsewhere in the document.4

If you don't want to provide explicit context, consider supplementing your ad hoc links with link titles (that show on mouseover).4

1 Basch, Reva. "Finding Your Place Online." Enhancing Websites (PC Novice Learning Series). Oct. 1998: 44-47.

2 Basch, Reva. "Create A Website That Attracts Visitors." Enhancing Websites (PC Novice Learning series). Oct. 1998: 52-55.

3 "Guide to Web Style from Rick Levine." Sun On The Net. http://www.sun.com/styleguide/index.html. 29 April 1999.

4 "Yet Another Style Guide, 1.1 from Michael Vorburger." KISSfp. http://vorburger.ch/kissfp/styleguide/index.html.29 April 1999.


A couple of notes:

The justifications for this homepage or title page or start page, or as my professor so aptly uses on a regular bases, this "splash" page, start above the area of instant focus, above the graphics and text that are the page. The beginning of a webpage, from an information architect's point of view, begins with the browser title bar and file name. The browser title bar says just what the page is all about, an ISC220 Student's Cookbook page. The page's file name is "cookbook.htm" keeping a continuity across the board between what the surfer will see in the status bar when they mouseover the linking link and what they will see on the page when it loads. Spell checkers were used to minimize wrongfully spelled words as an important added touch. Not everything was implemented throughout the site the way I would have liked, but, you can see samples on different pages. The most obvious is the missing full graphic description for each graphic on mouseover or matching filenames with page titles. Time would have corrected this.

There were to follow further justifications on individual pages but once I saw the the completeness of this justification page, to put individual justifications would have been redundant to say the least. This justification page covers just about every aspect of this entire site. Should you have further questions regarding justifications for this site, feel free to contact the author.

Overall Site Planning    Overall Graphical Design     Navigational Design

Back to the Cookbook