Kristen Wong
Professor Dan Martin
ENC 4416
23 November 2016
Pet Rescue By Judy Web Audit
Introduction
The website that I have audited is
the local Pet Rescue By Judy site. I have volunteered here for several years
and I see the wonderful work that the organization is doing. Unfortunately, the
site does not reflect the same sentiment and care that the animals at the
agency have. This in turn is a huge loss to the organization since many
adoption agencies depend on their websites to get the word out. The sites can
convey upcoming events, have easy donation sections, have organized, online
adoption processes as well as list every single animal that is up for adoption.
The Pet Rescue By Judy site would be incredibly effective in getting the word
out about the available pets, yet fails to do so with messy and ineffective
toolbars, little consistency in fonts and typography, has no main focus and
seems cluttered to the user’s eye.
Methodology
I used several tools to help analyze
the site, one of them being XML Sitemaps. This site counts up to 500 pages on
the site. The total pages tells me if the amount of pages is appropriate for
the site. In the instance of Pet Rescue By Judy, the site has over 500 pages. The
sheer amount of pages on the site is inappropriate for the site since the more
pages there are, the more information the user is being inundated with. Users
of this site want straight to the point facts about the pet they’ll be
adopting, an adoption form, upcoming events, contact information and an about
the organization page. Furthermore, many of the pages on the site are very long
and require a good deal of scrolling. This along with over 500 pages of
information is too much to be classified as user-friendly.
I also use a rating scale of 1-5 for
each analysis section based on content strategists Kristina Halvorson and
Melissa Rach’s book, Content Strategy.
1/5 denotes needs a great deal of improvement while 5/5 denotes that the
section and satisfactory for the site.
Summary
of Findings
The site itself has heart and users
can tell immediately that the organization has a great deal of passion for what
they do. However, there is a difference between being passionate as well as
uncoordinated. This can be seen in several areas of the site.
1.1 Pet of the Week
The
Pet of the Week section also clutters
the page and needs to be reexamined and placed in another area of the page that
does not make it the focal point of every web page. A joint journal written by
scholars at the University of Tennessee and Sejong University in Seoul, Korea
writes that when it comes to websites and message strategy, “the homepage not
only states a key message, but it also provides a kind of "front
door" to all corporate messages contained in the site” (Hwang, et al 1).
1.2 Font and Typography
Aesthetics
There are two aspects of this
particular section, but both work together to create a clean and professional
site. When sites are not uniform in font as well as typography, the end result
is an unprofessional look that may seem sloppy. Dr. BJ Fogg, professor and
director of research and design in Stanford University’s Persuasive Technology
Lab writes, “Typographical errors… hurt a site's credibility more than most
people imagine.” and therefore “avoid
errors of all types, no matter how small they seem” (Fogg 10). Any error in
uniformity causes a site to lose credibility because it may appear as if the
organization does not care enough about their professional tools.
1.3 Toolbars
The
toolbars is one aspect that is executed poorly. There are two toolbars, one going
vertically on the left side of the page while the other goes horizontally on
the top of the page. While this is not necessarily the problem, there are too
many links on the vertical toolbar when they could be easily hidden in roll
over menus. The horizontal toolbar is also much smaller and the links do not
even seem like links, they are just text. This toolbar happens to be the most
important toolbar of them all since it contains the information needed for
users to find pets that are available for adoption.
The
Nielsen Norman Group (NNG), one of the world’s leading user interface and
consulting firms tells web designers to “Make clickable elements obvious to
users so they don’t need to ponder the meaning of design elements or encounter
nasty surprises when something doesn’t work as expected” (Loranger 1).
1.4 Mobile Site
In this day and age, mobile sites
are essential to marketing, or in this case, adopting. The PRBJ site on
smartphones is technically considered “mobile” as every element formats to the small
screen, yet it is not mobile user friendly. Since the elements do not format
congruently with the phone screen, everything shrinks down. The font for most
static text is 9 point Arial font. While this is satisfactory for PC and laptop
displays, it is not for mobile phones. The already fairly small font is shrunk
down to an even smaller font, around 5 point font. This not only puts strain on
the user’s eye, but it causes more work for the users themselves, having to
zoom into a small portion they’d like to look at. It also makes it more difficult
to click on specific links since the touch of a finger is about the size of
three links.
1.5 Homepage Banners and
Events
The amount of banners and events on
the homepage is an overwhelming amount of information for users. Having to
continuously scroll down for upcoming event banners can be tedious. These
banners also remind users of advertisements which are generally unwelcome to
most internet users, therefore they may not read the banners despite containing
important information such as needs, donations or upcoming events. Having the
event pages linking to another page that has more information would not only be
convenient but more polished and professional.
Analysis
and Recommendations
2.1 Pet of the Week
The
primary message of a web page is the “single most important thing you want the
user to know after viewing your content” while the secondary message should be
messages that support the primary message and provide context (Halvorson and
Rach 107). Pet of the Week in essence
is a great concept, especially for animals that may have been at the adoption
center for a long time, however it should not be the primary message of every
page. It ultimately does become the main focus of each page since it is the
first concept users see when opening the site as well as the last. This becomes
primary message of Pet Rescue by Judy. Instead, a simple logo and small about
section or a logo and an encouraging message from Judy herself about the goals
of the organization would be much more effective.
The
huge Pet of the Week feature also
becomes clutter. There are too many items for users to look at, which confuses
them as to where they should be looking. A study done by the Department of
Psychology at the University of Basel in Switzerland states that according to
Leder’s model of aesthetic perception, more complex websites are perceived as
being less beautiful than less complex websites (Tuch, et al. 8). In other
words, the more elements on a page, the more users find the web page unpleasant
to look at. The University of Basel study also found that users prefer websites
with low visual complexity and high prototypicality. Websites of low
prototypicality are generally judged as being unattractive (Tuch, et al. 24).
Save a Life Pet Rescue show this low visual complexity and high prototypicality
seen here in Fig. 2.1a:
It
has low visual complexity with a simple side bar, the logo and a short
paragraph that states what the organization is about. The color scheme is a
simple blue and white and has only two images on the homepage. It has high prototypicality
because many pet rescue organizations have similar layouts. The main focus of
the page is a short summary about the organization and what their highest
priority is. “Most visitors to a Web site decide whether they will continue to
browse a site based on their impressions of the homepage” (Hwang, et al. 1).
Users browse this site on the basis of what the organization’s goals are. The
main focus that comes across from Pet Rescue By Judy is Pet of the Week because it is the first item users will see (see Fig. 2.1b
below).
This
should not be the primary focus nor is it familiar to users as being what they
would usually see on an adoption site, therefore making them uncomfortable or
finding the site aesthetically unpleasing to look at. In order to alleviate
this issue it is recommended to shrink down Pet
of the Week and placing it a more discreet location would be more
effective. Placing it on the homepage and removing it from every other page,
such as Contact Us and About PRBJ would be extremely effective because these
pages also will no longer be cluttered.
Pet of the Week Rating: 1/5
2.2 Font and Typography Aesthetics
A study done by user-interface and
information-visualization designer, Aaron Marcus, found that “mixing [both]
styles of fonts on the same page didn’t improve perception of visual aesthetics”
(Marcus 206). This can be seen in Fig. 2.1b.
Every section of the page that has font has either a different font or is
emphasized in a different way, such as bolded or italicized. This lack of
visual uniformity continues to add to the aesthetically displeasing design. This
flaw can best be seen on the different pet pages. Fig. 2.2a, 2.2b and 2.2c as seen below, depict three
excerpts of dog descriptions taken from the Pet Rescue By Judy website. As one
can see, each description not only differs in fonts, but font sizes, font
styles, font weight, spacing and typography (bolded and italicized).
 |
|
A
study done by Tomoyuki Nanno at the Tokyo Institute of Technology reported that
“if some fragments of the Web page are described in the same font color and
font size, they could belong to the same group. We consider that such a
“uniformity” can be useful for detecting the repetition of elements in the Web
page” (Nanno, et at. 7). By using this ideology, one can see that users may not
associate the details of the pet with one another. Furthermore, the content
reinforces this idea. Some pets have foster updates while others do not.
Understandably, some pets are not fostered. Therefore, foster updates should be
a smaller section in the details of the pet or at the bottom of a description
of the pet. Millenia and Michelle both have foster updates, yet Oz does not.
This may lead users to not comprehend that the pets “belong to the same group”
(Nanno, et al 7).
This
inconsistency in typography and font also leads to the loss of credibility of
the organization. Stanford University is conducting an ongoing research project
called The Stanford Web Credibility Project. One of their research findings
affirms that designing a site so that it looks professional includes paying
attention to small details such as layout, typography, images and consistency
issues. They write, “We find that people quickly evaluate a site by visual
design alone” (Fogg 6). First impressions are everything, and in this case it
is vital for the organization to be credible. Many pet adoption agencies can be
illegitimate and while Pet Rescue By Judy is not, it can seem illegitimate
because the website fails to be consistent and uniform in its formatting. A
simple fix for this issue is to pick one font and typography format. Then comb
through the site and format all text to have the same font and typography (with
the exception of titles and headers).
Font
and Typography Aesthetics Rating: 2/5
2.3 Toolbars
Users
should not be guessing what elements are or are not links and this is an issue
with the horizontal toolbar on the PRBJ site. Jakob Nielsen, founder of Nielsen
Norman Group (NNG) says, “Life is too short to click on things you don’t
understand” (Loranger 1). If users do not understand that the horizontal
toolbar is even a toolbar, they will not click on it. As stated before, this
toolbar is the most vital toolbar to the site and leads users to the main focus
of the site: available pets. In order to reduce the click uncertainty, Loranger
tells designers to never make users rely on ‘mouse-overs’ to determine if a
text is clickable (Loranger 1). “Mouse-overs” is what Pet Rescue By Judy
relies on when it comes to the horizontal toolbar. A “mouse-over” is an element
that highlights a hyperlink on a web page when users hover over the element
with their mouse. Please see Fig. 2.3a and
2.3b below.
As
one can see, without hovering over the toolbar, users cannot tell it is a
toolbar. It looks like a row of text that tells users what type of animal is
available and how many of those particular types are available. Only when a
mouse hovers over the toolbar (Fig. 2.3a)
do users understand that this section is meant to be clicked on.
To fix this section Loranger gives
several easy fixes. The first is making sure static items do not have the color
as the hyperlinks. Even changing it to a simple blue would be more effective
than what it is currently. Static items should also not have the same color as
hyperlinks, such as the suggested blue. So if using the suggested blue, do not
use blue text for any non-clickable items. Most of all, whatever appearance
chosen for all the hyperlinks must be applied consistently throughout the site
(Loranger 1).
The horizontal toolbar is a
different story, conversely. The sheer amount of links displayed on the toolbar
is enough to confuse even the most veteran of users. In order to improve this,
designers of the PRBJ page could lessen the amount of links by dividing the
site differently. The login in page is an example of dividing the site
differently. Moving the login button to the top of the page or placing the
login box directly on the page rather than redirecting users to a page specifically
designed for logging in would save space and lessen the amount of links on the
toolbar. The Volunteer and Volunteer Portal pages can also be included onto the
same page to further reduce the space it takes up on the toolbar. The PRBJ
Softball Tournament is considered an event, therefore it can be combined onto
the event page as well without cluttering the toolbar.
Drop-down menus are last resort and
are not used as often by design specialists. Sarah Miller, a systems analyst and
Caroline Jarrett, a usability consultant, states that since a drop-down box
hides the menu options; unless the user is very familiar with the site, s/he
will need to review the options in order to make a choice. Hyperlinks also only
involve one click; a drop-down box gives the user more work (Miller and Jarrett
2). However, if that many links are genuinely needed on the site, drop-down
menus are a viable option that hides the large amount of links and gives the
site a cleaner look.
Toolbar
Rating: 2/5
2.4 Mobile Site
Fig. 2.4a
and Fig. 2.4b as seen below depicts
the way PRBJ is seen on a PC screen and mobile phone, respectively. Focusing on
the red text, “Come visit us at our location in Sanford…”, users can read this
very easily on the PC. It is bolded and the font size is 14 point. However,
looking at the mobile view in Fig. 2.4b,
it is almost impossible to read. This is due to the fact that the page is not
mobile user friendly. The mobility of the site only goes as far as fitting
everything on one screen without forcing the format to be awkward and out of
place. This may frustrate visitors of the site.
 |
|
|
A
research study done on mobile readiness conducted by Dr. Tina Mccorkindale,
former Associate Professor of Public Relations at Appalachian State University
had several conclusions on this topic. Non-mobile websites had to be resized to
create viewable content in text because it was either too large or too small.
In addition, non-mobile sites required more vertical and horizontal scrolling…
[and] was more time consuming. “The researchers qualitatively noted multiple
cases of frustration with non-mobile sites due to issues with resizing the
screen and difficulty with clicking the links” (Mccorkindale and Morgoch 1).
This is true to the PRBJ site in
that it is difficult clicking the links because the text and other clickable
elements are too small. Creating a mobile friendly site is important to
visitors because most of them are on the go, visiting the PRBJ site in Sanford.
They might want to look up more information on available animals or on a
specific pet they might be interested in. However, because the site is not
mobile friendly, it may frustrate them into not wanting to look up more
information about a particular pet they may be interested in. The easiest fix
for this may be creating simple CSS and HTML coding for the site. This can be
done by hiring a professional or having someone from the organization find the
simple code online. Another option is by using easy and free tools such as
Mobify or Wirenode.
Mobile Site Rating: 2/5
2.5 Homepage Banners and
Events
Since PRBJ likes to do events or
support events, there are many banners on the home page. It is implemented
poorly, however since it contains an enormous amount of information and causes
users to continuously scroll down the page to see all of the events. They may
become tired of seeing so many or reading that much information that they could
actually stop looking. This is only the first problem. The second problem with
this is many of the banners have a large amount of information on them and only
causes users to believe they are sponsored advertisements. This is likely not
the initial idea for the events.
To fix this, PRBJ may implement a
scrolling banner/home page carousels. If event banners are fixed to only catch
the viewer’s eye and then lead to another page with all the information when
clicked on, this would be incredibly user friendly and more welcome to visitors
of the site. If implemented correctly, they can even be enjoyable for users to
view. This would be especially eye catching for the PRBJ website because it
allows users to see all of the items on the homepage that it initially wanted
to show.
A
study done by Baynard Institute, a research institute focusing on e-commerce
usability, found a few tips for users to implement user friendly home page
carousels: the first photo or slide should be the most important and must
reinforce the products sold, or in PRBJ’s case, the most important ideal to the
organization. Slides that pause when hovered over by a mouse and permanently
pause when clicked on (it can be reinitiated by clicking the left and right arrows)
are most enjoyed by users (Bustos 1). These tips for a better scrolling banner
create not only a more professional look, but the site will look cleaned up as
well.
Homepage
Banners and Events: 1/5
Words Cited
Fogg,
B.J. (May 2002). "Stanford Guidelines for Web Credibility." A
Research
Summary from the Stanford Persuasive Technology Lab. Stanford
University.
www.webcredibility.org/guidelines
Halvorson,
Kristina and Melissa Rach. Content
Strategy for the Web. New Riders,
Berkeley, CA, 2012, pp. 107
Hwang,
Jang-Sun, et al. “Corporate Web Sites as Advertising: An Analysis of
Function,
Audience, and Message Strategy.” Journal of Interactive Advertising, vol.
3, no. 2, Spring 2003, pp. 1
Marcus,
Aaron. Design, User Experience, and
Usability: User Experience Design
Practice. Springer International Publishing Switzerland, 2014, pp. 206
McCorkindale,
Tina, and Meredith Morgoch. "An analysis of the mobile readiness and
dialogic principles on Fortune 500 mobile
websites." Public Relations
Review 39.3 (2013): 193-197,
pp. 1
Miller, Sarah, and Caroline
Jarrett. "Should I use a drop-down? Four steps for choosing
form elements on the
web." Retrieved October 30 (2001): 2006.
Nanno,
Tomoyuki, et al. "Structuring web pages based on repetition of
elements." Proceedings of WDA2003 (2003). pp. 7
Tuch,
Alexandre N., et al. "The role of visual complexity and prototypicality
regarding
first impression of websites: Working towards
understanding aesthetics
judgments." International Journal of
Human-Computer Studies 70.11 (2012):
794-811, pp. 8
