About the OC Website Design
Have questions about why the design of the Olympic College website is the way it is? Check the questions below and see if yours are there. If you have additional questions about the website design that you think should be here, please email mailto:helpdesk@oc.ctc.edu.
Formatting Questions
Why are links displayed in alphabetical order?
Why are the website links red instead of the default blue?
Why Arial 10 point font?
Why do the subheadings need to be directly above the sections they describe, rather than having a blank line in between?
Why do we need to proofread our pages?
Why is there an item in black in the left side menu sometimes and not others?
Why not use all caps?
Why not use italics?
Why mark external links?
Why mark file types (and sizes)?
Why should bold be used in moderation?
Why should links be reduced or removed from the body text and instead placed in the right-side Related Links?
Why spell check?
Graphic Questions
Why do graphics we want to add need to come through the Web Content Manager?
Why do we need signed release forms to use photos on the website?
Why do we need to set the borders on graphics to 0?
Why enter ALT text for images?
General Questions
Why do we need a splash page?
Why is doesn't our site fill my browser window?
Page Element Questions
How was the header graphic selected?
What are the labels in the black bar at the top of the page for (Current Student, etc)?
What's the difference between the Quick Links on the left and the Related Links on the right?
Why do we need the Category Thread?
Why do we need the right column?
Why do we have the drop-down menus?
Why does the Windows Title Bar page title have to be in the format Page Title [Olympic College]?
Why does it say Staff & Faculty instead of Faculty & Staff?
Why enter keywords?
Why is Search where it is?
Why Arial 10 point font?
Arial is a sans-serif font. Times is a serif font. If you're unsure of the difference, look at the last two sentences. See how the first sentence, written in Arial, sans-serif font, has clean lines with nothing hanging off the letters at the ends? Now look at the second sentence, written in Times, a serif font. Notice the little "feet" hanging off the ends of the points of the "T", at the bottom of the "m"?
Research shows that for online reading, sans-serif fonts are more legible (The Non-Designer's Web Book, Williams & Tollett). In addition, Arial is one of the default fonts available with all browsers. Therefore, by choosing all our text to be in Arial font, we know that everyone is seeing the same thing, and that our text is legible online.
The font size (10 point) is the minimum recommended for web pages, but allows us to maximize our screen real estate. Users can change the font size through their browser options (View, Text Size) if they want smaller or larger type.
Overall, having a consistent font across the entire site increases the professionalism and credibility of the website.
 top
Why does the Windows Title Bar page title have to be in the format Page Title [Olympic College]?
The Windows Title Bar is the page title displayed in the blue bar at the top of the browser window. Setting up a standard for this title format served two purposes. First, it gives a consistent view to the title for every page on the site.
Second, most search engines display this page title in their results pages. If an individual searches for "college athletics" it would be useful for them to know that the page that comes up called Athletics is for Olympic College versus Harvard.
Some sites put the business or organization name first: Olympic College Athletics. However, when a search yields numerous Olympic College pages, it becomes difficult to discern which is the appropriate item because they all start with the words Olympic College. This makes our eyes and brains work harder to differentiate between the items. Usability guru Jakob Nielson recommends including the business/organization name after the main page title.
top
Why enter keywords?
Most search engines, including the one on our site, review the keywords entered for all pages in order to determine if they match a particular search entry. Therefore, if you have the word "athletics" in your keywords, your page is more likely to get pulled up in a search for athletics than if if didn't have that keyword entered, even if the content is about athletics.
top
Why do we need the Category Thread?
The Category Thread, similar to what some sites call a bread crumb trail, indicates to users where they are at on the site, where the current page falls in the site hierarchy. It helps users feel grounded in the site rather than lost in cyberspace. This is another recommendation from web usability expert Jakob Nielsen.
Secondly, the Category Thread allows users to quickly revisit past levels from the current page without using the Back button.
top
Why are the website links red instead of the default blue?
In an effort to brand our site and connect with the OC identity, we chose to make all site links red to match the school logo and colors.
top
Why do the subheadings need to be directly above the sections they describe, rather than having a blank line in between?
When a header is separated from it's content by white space, the user has more difficulty connecting the two items as they read. For example:
Header
Note how the header above is equally distant from the bottom of the last paragraph and the start of this one. It kind of hangs there in limbo, and the user is forced to process the concept that its meaning is most likely attached to this paragraph rather than the last. However, with the other headings on this page, the association between heading and content is obvious by the proximity.
top
Why should bold be used in moderation?
If everything (or simply too much) content is in bold, it loses its emphasis altogether. For instance, if I write this entire paragraph in bold, it becomes harder to pull out the important information because all the information is given equal priority. Our brains must read it all and then decipher what is really important even though we have told them this whole section is important.
On the other hand, if we reserve bolding for only the really important points that need emphasis, the user can easily see what the important information is without having to re-process the information. Therefore, use bolding in moderation so that it retains its value as marking important pieces of information.
top
Why not use italics?
Though there are obvious needs for using italics, such as book title references, italics often does not stand out enough from regular text when intended to be used for emphasis. Does the word italics really catch your attention in the center of this paragraph of text? Or was your eye drawn to the words in bold?
top
Why not use all caps?
Research has shown that text in all capitals slows down reading. The shapes of lower case letters, including the ascenders and descenders such as those in d, p, j, g, h, etc, help the human eye and brain decipher what the meaning of a word is. Research shows that if you blur the word, but people can still see the shape of the word, they can often tell what the word is supposed to be. However, WHEN TEXT IS ALL IN CAPS LIKE THIS, THE WORD IS JUST A RECTANGLE SHAPE WITHOUT THE NORMAL LETTER SHAPES TO HELP THE BRAIN DETERMINE WHAT THE WORDS ARE.
Therefore, our recommendation, as well as those of usability and web design experts, is not to use text in all capital letters.
top
What's the difference between the Quick Links on the left and the Related Links on the right?
Quick Links, on the left, are links within the section you're in. For instance, under About OC, all the links on the left are within the About OC directory/section. Related Links, on the right, could include links to items in other parts of the site or on external sites, related to the content on the current page. Related links allow a lot of cross-referencing within our site, so that users don't have to go find something they want that's related, it's right there for them.
top
top
Why is there an item in black in the left side menu sometimes and not others?
The left side navigation bar displays links for the current section of the website. If you're on the About OC page, the Quick Links on the left are all links to sections of the About OC part of the site. If you go into Public Information from the About OC page, the links on the left change to all the links in the Public Information section.
If you're on a page that has no other levels or pages in its section, the main level navigation is displayed with the current location marked in black. This serves as another place marker for users to tell where they are in the website. For instance, on the Mission & Vision page, the links on the left are all the About OC links. Mission & Vision is not a multi-page section, therefore, the Quick Links are for the main About OC section, and Mission & Vision is identified in the Quick Links by being black, bold and not-linked (since it's our current location).
top
Why are links displayed in alphabetical order?
Except in cases where there's a reason to order the Quick and Related Links in another order, all links should be displayed in alphabetical order. The human brain detects patterns and uses them to help find information. If the list were in no particular order and the user was looking for a particular item, s/he might have to read through every link on the page to find it. Whereas, once the user notices the alphabetical ordering of items, they can simply look for the letter the topic they want begins with to find it.
Alphabetical ordering is a good default for link order to help users find information.
top
Why mark external links?
Many users are irritated when they click on a link, expecting to stay on the current site, and are whisked away to an entirely different website. Notifying users that the site they're about to click on will take them to an external website allows them to choose if they want to go there now or not.
In addition, identifying the non-OC websites helps us point out that we don't have any control over the content on those sites and helps protect us legally.
top
Why mark file types (and sizes)?
Many users are irritated when they click on a link, expecting another regular web page, and have to wait for the browser to open a Word document or Adobe Acrobat PDF file that they didn't know they were going to get. But labeling such files, users can choose if they want to view these links or not, and at the very least, are aware before they click that it will take a little longer while Acrobat or other applications open in the browser.
Similarly, all photo captions should include a notation of the full-sized photo size and file type that the user will see if they click on the smaller photo. All pages containing photos should be using the smaller size appropriate for the page type (usually 200x150 or 150x200). Each photo should then be linked to the full size graphic for any user that wants to wait for the download. Labeling the smaller graphic caption with the file size/type of the full image that would be displayed if the user clicks on the smaller image helps the user make the determination if they want to click or not. This is also a feature that is recommended for increased accessibility of the website for visually-impaired users, allowing them to see a larger version of graphics if desired.
top
top
Why enter ALT text for images?
ALT text is the alternative text that is displayed for images while an image is loading, when the user hovers the mouse on the image, when a user has their browser set to not display images, and that is read by a screen-reading program to a user who is visually-impaired. Having ALT text for all images is important for our site's accessibility.
ALT text should be a brief description of what is in the image.
top
Why do graphics we want to add need to come through the Web Content Manager?
With the current process and editing tool, Content Providers cannot upload non-html files directly to the test server. Graphics on the website need to be sized for the standards listed in the Web Guide (small and full sizes), have a one-pixel black border added to the photo (for differentiation from the white page background), and to optimize the graphics. Optimization takes a graphic that may be 300K and reduces the file size to something like 8K or 38K, which will take much less time to download, but won't visibly affect the quality of the graphic.
When you have graphics you want to add to the site, you can submit them to the WCM, who will ensure you have the required signed release to use the photos, size, optimize and add the black border to the photos, and then upload them to the test server. At that point you will be able to access the graphics via Contribute and add them to your page.
The required photo release forms protect us legally, indicating we have permission from the persons featured in the photos to use their image on the website.
In the future, we are looking at offering optional training for Content Providers on performing the required photo manipulations, assisting with the ordering of suggested photo editing software, and then developing a process by which Content Providers can upload their own photos to the test server.
top
Why do we need signed release forms to use photos on the website?
The required photo release forms protect us legally, indicating we have permission from the persons featured in the photos to use their image on the website.
top
Why do we need to set the borders on graphics to 0?
Since all photos are supposed to link to a larger version of the image, borders should be set to 0. Since our default link color is set to red, if the borders are not turned off, the linked graphic would have a red border around it, which is not the look we want. This is why we've added a one-pixel black border around the graphics.
top
Why spell check?
Everyone has typos. And everyone can forget to spell check (even me!). But it is helpful to spell check each page before publication in order to reduce the number of typos on our site.
As an educational institution, and indeed, in the name of professionalism in general, it looks very bad for OC's image for users to encounter misspelled words on our website. The website is an extension of the college; the impression people have of the website becomes the impression people have of the college. We want it to be a good one. Please try to remember to spell check (and I will, too!).
top
Why do we need to proofread our pages?
Spell check only finds misspelled words, not missing words, grammatical errors, or confusing content. Few people like to take the time to re-read their work, but it is essential for a professional website that we all take responsibility for the quality of our work. Please proofread your content.
top
Why is doesn't our site fill my browser window?
If your computer is set to a screen resolution of 800 pixels wide by 600 pixels tall, the website fills your screen. If you have your settings at 1024 pixels wide (or wider) by 768 pixels high (or higher), the website appears at the left side of the browser window with white space to the right.
We optimized our site for a screen resolution of 800 by 600 since that is still the most popular size used by the public. Many of us have screens set at 1024 x 768, but we did not wish to make our site inhospitable for a large percentage of our users.
top
Why do we have the drop-down menus?
Research on college websites indicated that many colleges are moving toward a user-directed website design, offering content based on what type of user you are: Current Student, Prospective Student, Faculty & Staff, etc.
The determination to use drop-down menus for this option came from usability testing on a prototype during the design phase. Less experienced web users disliked the drop-down (rollover) menus, while more experienced users really liked them. Therefore, we decided to offer them with an option on all pages to disable the menus.
Offering the rollover (drop-down) menus on all pages gives easy access to primary features of the website from the home page or any page of the website.
top
What are the labels in the black bar at the top of the page for (Current Student, etc)?
Research on college websites indicated that many colleges are moving toward a user-directed website design, offering content based on what type of user you are: Current Student, Prospective Student, Faculty & Staff, etc. The drop-down menus offer easy access from any page in the site to key features of interest to each user group. For example, Current Students should find many of the areas of the website they need to access listed in the Current Students drop-down menu.
In addition, if you click on the user group titles (except International, which goes directly to the International Student Program section), a "portal" page is displayed which contains a link to most areas of the site of interest to that user group. Ideally this will provide a one-stop shop for users.
top
Why do we need a splash page?
What we're calling a splash page (the first page where you select which campus you want to view or the Foundation) is actually more a routing page, allowing the user to select which area to view. This gives a higher profile to the various areas of the college (Shelton, Poulsbo, Foundation).
top
Why does it say Staff & Faculty instead of Faculty & Staff?
An interesting result of the usability studies performed during the analysis and design phase was that users would look at the word "faculty" and say "facilities," clicking on it to find information about facilities on campus. Similarly, they would see "facilities" and say "faculty," clicking to find information on instructors. By reversing this title so that Staff comes first, this problem was eliminated.
top
Why is Search where it is?
Research has shown that users don't look for the word search. They look for the little white box you can type in. Studies have found that the top two locations for the search box are the top left and right corners. Since the logo is found in the top left corner (top placement for that element), we opted for the top right corner.
top
How was the header graphic selected?
We used several locally relevant images in our usability testing, and this was the one that received the best comments. It is hoped to make this a changing feature, updating the site look without completely overhauling the design every year or so. The colored bars on the left and right side would change as well to complement the banner graphic selected.
top |