Analysis of Web
Design Theories and How These Affected the Design of goKzoo.com
Please click on any of the links below to jump to that section of
the analysis or you can scroll down to read it in its entirety. (Note
that some images are not actual size. Click on the images to view
them in their entirety and then click the Back button on your browser
to read the document further.)
Introduction
Navigation
Site Theme
User-Friendly Graphics
Search Functionality
Conclusion
References
Introduction
The analysis of web design theories
is a complex process that can be broken down into simple steps. To design a complex
site by going through each simple step will produce the outputs that are necessary,
and wanted. The best way to design a good site, as proven by the extensive research
of Jakob Nielsen and Vincent Flanders, is to have good navigation, a consistent
site theme, user-friendly graphics, and search engine functionality. By properly
implementing the four major parts of a good web site, along with some creativity
and continuity, a great site can be produced.
Navigation
Proper
navigation is something that needs to be completed in several different
ways. At all times, users want to know exactly where they are on
the site, and how to get to the rest of the site. As found by Jakob
Nielsen, earlier web design studies showed that only ten percent
of users would scroll down a page to find the main links or divisions
of the site. To adhere to this notion, goKzoo.com has a tabbed navigation
system at the top of every page as seen in Figure 1.0. This tabbed
style of linked navigation is seen as confusing by Nielsen, as many
Netscape type browsers use a tabbed style for their browser windows;
however, Flanders notes that as long as a tabbed navigation is constructed
appropriately and consistently, it can be a very useful tool for
web design.
Figure 1.0 - Click to Enlarge
Not
only are the tabs always located at the top of every page, but also
the division of the site that the user is currently viewing is always
the tab in front, also noted by the red text on the tab. In Figure
1.1, the user is currently viewing the Recreation division of the
site. This theme stays consistent throughout the site, so using the
tabbed navigation in this manner is applauded by the proven research.
Figure 1.1 - Click to Enlarge
Not
only does the site include all of the main links at the top of the
page, but there is also a set of links at the bottom of every page.
This is done so that after a user views the information on the site,
they can click the next link that appeals to them without having
to scroll back up. This also keeps every page on the site only several
mouse clicks away. Figure 1.2 shows the link system at the bottom
of the page.
Figure 1.2 - Click to Enlarge
To
further enforce proper navigational techniques, a system that has
been dubbed the term "cookie crumbs" is in use on goKzoo.com.
Figure 1.3 shows a cookie crumb trail in use. As seen in the example,
as the user delves further into the site, the cookie crumb trail
increases. In Figure 1.3, the user has navigated from the Welcome
page, to the About Us section on the site, and then clicked on the
link to Contact Us and send an e-mail. By using a cookie crumb trail
throughout the site, the user can get back to any page they were
at previously with only one click. Cookie crumbs are also a good
way of visualizing the structure of the site for those that are just
learning how the site works.
Figure 1.3 - Click to Enlarge
In
the future, there will also be an even further facilitation of navigation
in the left side menu. The Browse section in the menu, as seen in
Figure 1.4, will have an even further subdivision of the site set
up for navigation inside of each division of the site. For example,
in the Restaurants division of the site, the Browse section will
have links to different types of restaurants, such as fine dining,
family dining, pizza parlors, buffets, pasta, and other types of
restaurants. This way, users can click on a link in the Browse section
and see just the businesses that fit that description.
Figure 1.4
Site
Theme
Along
with a proper navigation system, a good site theme is necessary throughout
the site. Not only should the theme be appropriate for the type of
content being shown on the site, but it also needs to stay consistent
throughout the site. The theme chosen for goKzoo.com is used for
several different reasons. As goKzoo.com is an information directory,
it is to be used to help users navigate their way throughout the
Kalamazoo area.
To go along with this theme of
navigation, road signs and maps of Kalamazoo are used as the main graphics throughout
the site. As seen in Figure 2.0, the backdrop of the goKzoo.com logo is a map
of Kalamazoo.
Figure 2.0
The main graphics throughout the rest of the site are
road signs seen along expressways to symbolize the same thing that
goKzoo.com uses them for. By this, it simply means that the Restaurants
division uses the sign of a fork and spoon as the logo, as seen in
Figure 2.1 below. This set of logos is used throughout the site to
show the divisions of the site textually and visually. A large percentage
of web users are visual users and another large percentage of web
users are textual, as they would rather read the page than visualize
it.
Figure 2.1
The
entire site theme is done in a darker shade of blue because the signs
used on the site are done in this same shade of blue. As seen in
Figure 2.2, all of the graphical elements of goKzoo.com are in the
same shade of blue. All of the following from the site are done in
the same shade of blue as the road signs: the overlay of the Kalamazoo
map, the text in the main divisional tabs, the scrollbars, all links,
the outlines of all the menus, and also the labels for all of the
side menus.
Figure 2.2 - Click to Enlarge
As
one can see, the site itself stays constant throughout all of the
pages, maintaining the color scheme and design layout. Another advantage
to goKzoo.com is that the site is designed for all types of browsers
and screen sizes. Users of Internet Explorer, Netscape, and Mozilla
browsers, will notice minimal differences in the site's layout and
capabilities. In Figure 2.2 above, the goKzoo.com Welcome page is
shown in Internet Explorer 6.0, the most commonly used browser. Figure
2.3 below shows the same page in Netscape 6.2.
Figure 2.3 - Click to Enlarge
And finally, Figure 2.4 shows goKzoo.com as seen in
Mozilla 1.0.1.
Figure 2.4 - Click to Enlarge
To
test different resolutions for monitors, three screenshots were produced
for the resolutions of 800x600, 1024x768, and 1152x864. goKzoo.com
with an 800x600 resolution can be seen below in Figure 2.5.
Figure 2.5 - Click to enlarge
Figure 2.6 shows the site with a resolution of 1024x768.
Figure 2.6 - Click to Enlarge
Finally, Figure 2.7 shows the site with a resolution
of 1152x864.
Figure 2.7 - Click to Enlarge
In
all of six examples of different browsers and different resolutions,
the site structure goes unchanged with only a few aesthetics being
changed in the Netscape and Mozilla browsers. In the different resolutions,
the only part of the site that changes is the width of the content
area in the center of the site. As the site width increases and decreases,
the left and right menus stay justified, but the center section width
changes with the resolution.
User-Friendly
Graphics
Not only do the graphics used
in the site need to be geared towards a certain theme, but they also need to
be user-friendly. For graphics to be user-friendly, they need to be small in
file size, fast in load time, and aesthetically pleasing. The color blue was
chosen because it creates a relaxed feeling for web users and internally makes
them want to look at the site even further. Red is a color used to induce hunger,
and orange and yellow are used to be flashy and stick out. From a business perspective,
blue was used not only to match the signs, but also to keep users attracted to
the site and coming back often.
The graphics used on the goKzoo.com
site were also trimmed down in file size to decrease the load time for the pages,
especially for those viewers on slower Internet connections. By reducing the
image color clarity in several of the images, the pages on the site loaded much
faster, without taking away from the theme of the site. The images still look
the same, but just load faster. Another tool used to decrease load time will
be used on the pictures for the businesses. By creating thumbnail graphics that
are smaller in viewable size and file size, the page loads quicker, and gives
the user the option to view the picture in full form, at a longer download.
One problem with slow loading
pages is that the page changes and is restructured whenever new graphics load.
Text that was being read clearly one second could be halfway down the page the
next second. Although there are many graphics included on the goKzoo.com page,
this is done to complete the overall theme of the site. However, one way to make
the page appear to load faster is to make sure that the page loads exactly as
it is designed to look after it is done. This can be done by specifying the height
and width of every graphic on the page. By specifying the dimensions of the graphics
in the code for the page, web browsers will allocate that much space on the page
for the graphic when it finally loads. Even if the graphics aren't loaded yet,
the text and content of the page are already in place, giving the user the illusion
that the page is loading faster.
Another image tool that supports
navigation is the usage of text as the user has the mouse over important images
on the site. As seen in Figure 3.0, as the mouse is over the Restaurants logo,
the word Restaurants is displayed. This is useful for several different reasons.
For starters, it gives a non-visual person a textual example of what the graphic
is for. It is also useful for web users that turn off all of the graphics for
their web browsers. Instead, there is a space left where the image would be.
Without the extra text, it would stay as only white space, but with the added
coding, the word Restaurants is shown in place of the graphic. Without the word
there, it leaves the graphics-free user to guess what the links are there for.
Lastly, for blind users of the Internet, this mouse over text is relayed in audio
with a screen-reading program that the blind use.
Figure 3.0
Search
Functionality
Another step to properly designing
a web site is to include a search function on the site. A recent study by Nielsen
found that fifty percent of all web users go straight for the search button on
the website to find exactly what they are looking for. They don't want to take
the time to look at anything else, except for the info they came for. Regardless
of the search button, Nielsen also found that these users, and a large percentage
of the other fifty percent of users still need the site to be grounded with a
strong sense of structure and navigation support. This way, they can still understand
where the page they are looking at still fits in to the larger scheme of the
site. Using search engine functionality, cookie crumbs, and navigation continuity
throughout the entire site will make goKzoo.com a site that is appealing to every
type of web user.
Not only is the site appealing
to every type of web user, but the target audience for the site is obviously
those that already live in the Kalamazoo area, or those that plan to travel to
the area. By identifying the target audience of the site, additions to the site
are made keeping the target audience in mind. The main page has the weather for
the day featured on the right hand menu. Another section of the right hand menu
is the Affiliates listing. By contacting and partnering with other businesses
in the area, the site is enriched and supported by other Kalamazoo businesses
and organizations. On top of targeting the Kalamazoo audience, the site is also
designed to keep people browsing the site, and coming back often. For this reason,
there aren't any flashy banners, images, or popup messages on the site.
goKzoo.com itself features a
search engine on the site using the technology of www.atomz.com. Using their
search functionality on the goKzoo.com site, users can enter in their search
criteria and any page within the goKzoo.com domain that matches their search
criteria will be displayed on the results page. The search menu on the goKzoo.com
site is featured on every page of the site, except for the pages of the businesses
themselves. Figure 3.0 shows the Search menu. Anything applicable to the site
can be entered into the search box and then by clicking Go, the results are displayed
on the next page.
Figure 4.0
The results page is completely customizable and the
results are printed out in the order of the best results from the
search. A simple search for "food" can be seen below in
Figure 2.4. Using the Atomz search engine, a customized results page
is outputted. Keeping intact with the goKzoo.com theme and navigation
scheme, the search results are shown in the content area of the site,
while the rest of the site is still consistent.
Figure 4.1 - Click to Enlarge
Not
only does goKzoo.com have a search engine specifically for the domain,
but the site is also submitted to dozens of the best worldwide search
engines. By using search functionality in the code of every page
on the goKzoo.com site, the site can be found on other search engines
when searches relevant to goKzoo.com are entered as the search criteria.
Using code known as META tags is what does this. META tags are simply
keywords inserted into the code of webpages to allow them to be found
on search engines. By carefully placing the appropriate keywords
and descriptions in the META tags, goKzoo.com will be found higher
on the results list on search engines.
Conclusion
As shown through the above examples,
goKzoo.com is not a site that has been thrown together overnight. By researching
web design and the most appropriate ways to appeal to web users, this site has
been given extensive attention to detail and perfection. The goal of the site
itself is to take the best concepts in web design and appeal to the largest of
the Internet population. By using a navigation system of tabbing, cookie crumbs,
and easy to find linking systems, the site will be easy to navigate for every
type of user. With a road sign theme in mind, the blue color scheme will please
the users of the site, as well as keep them coming back. The site will also keep
all web users happy, as it can be viewed in the most widely used web browsers
and monitor resolutions and it won't take a long time to load. A search engine
is one of the most important parts of a business web site in today's web savvy
world, and goKzoo.com ensures that the search predominant users will be as happy
as the navigation based users by using a top-end search functionality such as
Atomz.com. Not only is the site easy to search inside the domain, but also using
META tags, the site can also easily be found on many other popular search engines.
As one can see, the work put into designing the site in such a way will output
its rewards later as it attracts hundreds and thousands more hits per day. These
examples show how goKzoo.com is not only a good site design proven by research,
but also uses simple methods to create an end result of a complex website.
References
Flanders, Vincent. "Web Pages That Suck learn usability and good Web design
by looking at bad design." 24 March 2003. <http://www.webpagesthatsuck.com>
Glover, Jeffrey M. "Sucky to Savvy, by Jeffrey M. Glover." 24
February 2003. <http://www.jeffglover.com>
Nielsen, Jakob. Useit.com Jakob Nielsen's site (Usability and Web
Design). 24 March 2003. <http://www.useit.com>
goKzoo.com
Navigation -- Welcome > About
Us > Analysis of Web Design Theories
