Docstoc

Team 5 Final Documentation for IST331

Document Sample
Team 5 Final Documentation for IST331 Powered By Docstoc
					                     IST 331

                  (Summer 2011)

                  Term Project




Team WEBDEV
(Team 05)

Martin Naughton
Rich Overholt
Mike Peña
Brandon Prus
                                                    Table of Contents
Introduction ..................................................................................................................................... 4

Team Site Map ................................................................................................................................ 4
  USS Fling (Developer: Rich Overholt) ...................................................................................... 4
  Fort FlimmFlamm (Developer: Martin Naughton) .................................................................... 4
  Blood Bank(Developer: Brandon Prus) ...................................................................................... 5
  The Citadel (Developer: Mike Peña ............................................................................................ 5

Site Screen Shots............................................................................................................................. 5
  USS Fling Site ............................................................................................................................. 5
     Home/About Page ................................................................................................................... 5
     Timeline................................................................................................................................... 6
     Memory Wall........................................................................................................................... 6
     Grounds ................................................................................................................................... 7
     Virtual Tour ............................................................................................................................. 7
     Visitors .................................................................................................................................... 8
     Events ...................................................................................................................................... 8
     Donate...................................................................................................................................... 9
     Members .................................................................................................................................. 9
     Volunteer ............................................................................................................................... 10
     Contact ................................................................................................................................... 10
  Fort FlimmFlamm ..................................................................................................................... 11
     Home ..................................................................................................................................... 11
     About ..................................................................................................................................... 11
     News ...................................................................................................................................... 12
     Calendar ................................................................................................................................. 12
     Scouts .................................................................................................................................... 13
     Membership ........................................................................................................................... 13
     Directions .............................................................................................................................. 14
     Contact ................................................................................................................................... 14
  Blood Bank ................................................................................................................................ 15
  The Citadel ................................................................................................................................ 15
     Citadel Home Page ................................................................................................................ 15
     Citadel History Page .............................................................................................................. 16
     Citadel Contact Page ............................................................................................................. 16
     Citadel Donate Page .............................................................................................................. 17

The Development Process............................................................................................................. 17
  Naughton / Overholt .................................................................................................................. 17
  Prus / Peña ................................................................................................................................. 18

Site Scenarios ................................................................................................................................ 18
  Naughton: USS Fling ............................................................................................................... 18
  Overholt: Fort FlimmFlamm .................................................................................................... 19
   Prus: Blood Bank ..................................................................................................................... 20
   Peña: The Citadel ..................................................................................................................... 21

Low-Fidelity / High-Fidelity Prototypes ...................................................................................... 22
  Fort FlimmFlamm ..................................................................................................................... 22
    Low-Fidelity Prototype ......................................................................................................... 22
    High-Fidelity Prototype ......................................................................................................... 23
  USS Fling .................................................................................................................................. 23
    Low-Fidelity Prototype ......................................................................................................... 23
    High-Fidelity Prototype ......................................................................................................... 24
  Blood Bank ................................................................................................................................ 24
    Lo-Fidelity Prototype ............................................................................................................ 24
    Hi-Fidelity Prototype ............................................................................................................. 25
  The Citadel ................................................................................................................................ 25
    Low-Fidelity Prototype ......................................................................................................... 25
    High-Fidelity Prototype ......................................................................................................... 26

Applying Standards & Heuristics ................................................................................................. 26
 Naughton Prototype Discussion ................................................................................................ 26
 Overholt Prototype Discussion.................................................................................................. 28
 Prus Prototype Discussion ......................................................................................................... 29
 Peña Prototype Discussion ........................................................................................................ 30

Usability Testing ........................................................................................................................... 31
 Naughton/Overholt Usability Test (Naughton version) ............................................................ 31
 Naughton/Overholt Usability Test (Overholt version).............................................................. 35
 Peña/Prus Usability Test (Prus version) .................................................................................... 37
 Peña/Prus Usability Test (Peña version) ................................................................................... 38

Conclusion .................................................................................................................................... 39
Introduction
Welcome to the presentation of Team WEBDEV’s IST 331 Term Project. Throughout this
semester, we have worked together as a team, in pairs, and individually at the task of conceiving,
designing, refining, constructing, and testing our own web sites from the ground up. As we
worked through each exercise, we learned a lot from our individual and collaborative efforts
about all of the various processes involved in bringing a new web site to life. Over the pages that
follow, we will introduce the reader to the four websites that our members built this semester. In
doing so, we will look at the screens from each site, the development process, site scenarios,
low- and high-fidelity prototypes of each site, applying standards and heuristics, and briefly talk
about the lessons we learned when other users experienced our sites in usability testing.


Team Site Map
Please find below an index-style site layout of the links to each team member’s site’s index.html
files and low-level pages.

USS Fling (Developer: Rich Overholt)
Landing Page (Home): http://www.personal.psu.edu/rto5025/IST331/index.html
About: http://www.personal.psu.edu/rto5025/IST331/index.html
Timeline: http://www.personal.psu.edu/rto5025/IST331/Timeline.html
Memory Wall: http://www.personal.psu.edu/rto5025/IST331/MemoryWall.html
Grounds: http://www.personal.psu.edu/rto5025/IST331/Grounds.html
Virtual Tour: http://www.personal.psu.edu/rto5025/IST331/VirtualTour.html
Visitors: http://www.personal.psu.edu/rto5025/IST331/Visitors.html
Events: http://www.personal.psu.edu/rto5025/IST331/Events.html
Donate: http://www.personal.psu.edu/rto5025/IST331/Donate.html
Members: http://www.personal.psu.edu/rto5025/IST331/Members.html
Volunteer: http://www.personal.psu.edu/rto5025/IST331/Volunteer.html
Contact: http://www.personal.psu.edu/rto5025/IST331/Contact.html

Fort FlimmFlamm (Developer: Martin Naughton)
Landing Page (Home): http://personal.psu.edu/myn5072/ist331/index.htm
About: http://personal.psu.edu/myn5072/ist331/about.htm
News: http://personal.psu.edu/myn5072/ist331/news.htm
Calendar: http://personal.psu.edu/myn5072/ist331/calendar.htm
Scouts: http://personal.psu.edu/myn5072/ist331/scouts.htm
Membership: http://personal.psu.edu/myn5072/ist331/membership.htm
Directions: http://personal.psu.edu/myn5072/ist331/directions.htm
Contact: http://personal.psu.edu/myn5072/ist331/contact.htm
Blood Bank(Developer: Brandon Prus)
Home Page: http://www.personal.psu.edu/bdp5008/bloodbank/index.html
About Us: http://www.personal.psu.edu/bdp5008/bloodbank/AboutUs.html
Schedule: http://www.personal.psu.edu/bdp5008/bloodbank/Schedule.html
Local Center Finder: http://www.personal.psu.edu/bdp5008/bloodbank/LocalCenters.html

The Citadel (Developer: Mike Peña
Home Page: http://www.personal.psu.edu/mkp5104/IST331/home.html
History: http://www.personal.psu.edu/mkp5104/IST331/history.html
Contact: http://www.personal.psu.edu/mkp5104/IST331/contact.html
Donate: http://www.personal.psu.edu/mkp5104/IST331/donate.html




Site Screen Shots
Please find below screenshots of all pages located on each of the sites or alternately links to
access the prototypes.

USS Fling Site
Home/About Page
Timeline




Memory Wall
Grounds




Virtual Tour
Visitors




Events
Donate




Members
Volunteer




Contact
Fort FlimmFlamm

Home




About
News




Calendar
Scouts




Membership
Directions




Contact
Blood Bank

Brandon Prus’s Prototype Available at:
http://www.personal.psu.edu/bdp5008/bloodbank/index.html
http://www.personal.psu.edu/bdp5008/bloodbank/
Each page is available for viewing and navigating there.




The Citadel

Citadel Home Page
Citadel History Page




Citadel Contact Page
Citadel Donate Page




The Development Process
Please find each partnership's general overview of each site and a brief discussion of how they
were developed.

Naughton / Overholt

Marty and Rich co-developed their sites over a few days in June. Marty’s site concept (USS
Fling) was based upon the USS Ling, which is a WWII-era submarine permanently moored at
the New Jersey Naval Museum in Hackensack, NJ. Rich’s site concept (Fort FlimmFlamm) was
based upon Fort Mifflin, which is a Revolutionary War-era earthen fort located near the
Philadelphia International Airport in southeast Pennsylvania. Marty and Rich met several times
to briefly discuss general likes and dislikes in their experiences with web design and use of the
Internet, and what each thought were desirable characteristics in a well-designed and well-
conceived web site. Based on these conversations as well as the IST331 assignments in week 6
(site profile), week 7 (site standards and heuristics) and week 8 (low-fidelity and high-fidelity
prototyping), the USS Fling and Fort FlimmFlamm site designs came into being pretty quickly.
Both Marty and Rich have prior experience in developing web pages and site designs, so the
process of creating each person’s respective site happened with a minimum of hassle.
Prus / Peña

Brandon and Mike co-developed their sites in June. Mike’s concept(The Citadel) is based on a
fort in Alexandria, Virginia. Brandon’s concept(Bloodbank) is based on the Central Blood Bank
of Pittsburgh, which provides blood for local hospitals. The two stayed in contact with each other
during the development process, working as developer and designer throughout the process.
Their design ideas were passed back and forth to develop the most ideal websites, and to
improve each website one step at a time, from scratch to the final prototypes. As the assignments
were completed and heuristics and standards were taken into consideration, the sites evolved
further, and toolbars were moved around on both sites to come up with what each developer
thought was the appropriate location for all links and information.


Site Scenarios
Please find in this section each partnership's sites' scenarios and a brief discussion of how they
were developed.

Naughton: USS Fling

Profile Description
The people who will use this site either served on the U.S.S. Fling as part of the service or
worked on it after decommissioning. They are likely to be senior citizens, people 65 years or
older. The vessel was engaged in active duty from June 1945 to October of 1946, people who
served on it during this time period would be no younger than 83 years old. The vessel was then
used in the Atlantic Reserve Fleet until 1960. People who served on it as a reserve ship would be
no younger than 69 years old. For the remaining years that the U.S.S. Fling was in the naval
inventory, it was used as a training vessel until 1971. People of this category would be no less
than 58 years old. These ages are calculated with the assumption that no one less than 18 years
old served or worked on the Vessel.

Expectations and Preferences
These people who had intimate involvement with the vessel, such as spending years of their life
living on it or working on it, will want the site to be a full account of the U.S.S. Fling’s history.
They will have high expectations for the documented time line of events that the submarine was
involved in and the details for how the vessel served its country. The site will be expected to act
as a living museum for not only the submarine itself, but for the events that the submarine lived
through. These people will probably not be well versed in computers and they will hope that the
site structure is easy for them to navigate through. They would appreciate options for those who
are both visually and physically impaired. The people in this profile would also appreciate it if
there were a memorial section to the site where they could pay homage to their comrades or
friends that served on the vessel with them. A memory wall on the site would provide them an
outlet for expressing their thoughts about the time they spent together.

Scenario:
Lieutenant Commander Mike Wallace is currently 84 years old. He served on the U.S.S. Fling
for just a year as an Ensign when he first entered the U.S. Navy just out of High School in 1945.
He is living with his wife of 50 years in San Diego, California and is hoping to schedule a trip to
visit the U.S.S. Fling during the summer. The trip will commemorate the death of his good
friend Captain Christopher D’Angelos whom he served with on the vessel and just recently
passed away at the age of 95. Lt. Cmdr Wallace will be utilizing the site to investigate
information concerning his trip. He will need the address and location of the grounds, as well as,
some basic information concerning the surrounding area. He might look to the web site for
options as to which hotels are in close proximity. Also, he will reference the site to determine if
there are any special events going on that he might like to participate in during his visit. The
calendar on the site is a good resource for him to utilize when picking the dates for his trip.
Since Wallace is retired, he has no restrictions as to the dates when he can travel. In addition to
gathering information, Ltd. Wallace would like to be able to utilize the site to remember his
friend. He uploads pictures to the webmaster and requests that they be posted in the memorial
section. He also writes on the memory wall to let everyone know about his friend and the
contributions that he made to his country.

Development:
The site scenario was developed primarily on the types of users that could be expected to visit
the site and the expectations that they would have concerning it. The USS Fling was chosen to
be the site that I requested be developed because it is based on a location that is very near to my
home. The USS Fling was fabricated as a clone of the USS Ling which is a submarine and
museum located in Hackensack, NJ. I have visited the site numerous times in the past and
enjoyed learning how to share the historical value that it had to offer.

Overholt: Fort FlimmFlamm

As Rich Overholt actually visited Fort Mifflin (the historic site upon which Fort FlimmFlamm is
based) in 2009 and had spent considerable time on the Fort Mifflin website, it became apparent
that there is a significant focus on Boy Scouts and Scouting-related activities within the Fort and
on its grounds. Because of this, Overholt chose to gear his site scenarios towards a Boy Scout
planning to integrate his activities into Fort Mifflin into his pursuit of a Camping Merit Badge.

User Profile: Boy Scout:
Background: Must be male and between the ages of 11 and 18. Tends to have interest in web
sites and the Internet, and a good deal of experience playing Internet or console-based games. Is
planning to visit Fort FlimmFlamm for a day tour or a Boy Scout sleepover on the grounds, or
perhaps has already done so.
Expectations: Navigation of the Fort FlimmFlamm web site should be easy and fun for Boy
Scouts of all ages, but also provide enough substantial facts and information to be used as an
information source when earning scout merit badges or conducting research for school papers
and assignments.

Preferences: Most Scouts are very familiar with a range of computer applications, and have used
the Internet most of their lives. Site should work with a variety of web browsers (Internet
Explorer, Firefox, Chrome, Safari) on both the Windows and Mac platforms, and should easily
facilitate the printing or emailing of information on each web page.

Scenario: Boy Scout:
Leo, a 12-year-old in his second year as a Boy Scout, is working towards his Camping merit
badge. Most significant among the requirements towards his merit badge are twenty days and
twenty nights spent camping either under the stars or in a tent. Leo’s scout troop is interested in
the historical aspects of the Fort FlimmFlamm site, and is planning to take advantage of the
extensive Fort grounds by camping overnight within the boundaries of its walls.

As the requirements for all Boy Scout merit badges (including his desired Camping badge) are
carefully laid out and available online via www.meritbadge.org, Leo regularly tracks his own
progress at home in an Excel spreadsheet and compares them against the online requirements
before and after each camping trip or excursion to see how far he has progressed. As his troop
prepares for their overnight at the Fort FlimmFlamm campground, Leo checks the Scouting area
of the Fort’s website to see if there are any tips or information that he can apply towards his
merit badge progress.

As he reads, Leo is delighted to find that there is detailed information about each of the activities
available for Boy Scouts during both day trips and overnight or weekend camping trips.
Furthermore, each activity is arranged in a table that shows the details and expected duration of
each activity in addition to which specific merit badge or badges that the activity can be credited.

Inspired and thrilled with the ease of information on the site, Leo learns that there are several
activities for both day and overnight scout visits that can go towards the Camping merit badge,
including a supervised 30’ rappel down one of the Fort’s inner walls, and a 5-mile looped hiking
trail that starts and ends at the Fort and is ideal for a cross-country backpacking hike.
Furthermore, each of these web pages has “Printable View” and “Click to Email” links that can
be used to easily produce printouts or send the information to other people. Excited, Leo emails
the information about the Camping merit badge activities to his troop leader, who writes him
back later that day to praise him for his initiative and to confirm that the troop will participate in
both of the activities when they arrive at the Fort for their camp-out.

Prus: Blood Bank

Description:
The Blood Bank is a series of blood donation centers in Pittsburgh, PA. It started in 1945 with
World War II's need for blood donations to help support the war, just as conserving gasoline or
other resources was important. Since then it has grown to multiple centers throughout the city
capable of receiving blood donations to help support local hospitals for surgeries and
emergencies.

User Profile: 25 Year old Citizen
Background: A typical person, recently employed in a job, possibly recently married, just
starting out the long portion of their life. This person should be looking at developing habits that
they will continue for the rest of their life and setting a lifestyle appropriate for themselves.

Expectations and Preferences: The main goal of the website is to encourage people to find a
local donation center, so appropriate information should be made readily available, and
accessible by any level of user. The site should make it easy to find a center that is
geographically nearby a location convenient for a donation.

Scenario: John Smith is recently married, and living in an apartment with his wife. He hears
multiple advertisements on the radio about blood drives going on at various locations and
begging for donations. He becomes intrigued and decides to find more information about the
Blood Bank, so he decides to visit their website.

From the website, he manages to find a local donation center that is close to where he works. The
next day, John contacts the Human Resources Department where he works, and finds that he can
even take extra paid time off of work to donate blood. He immediately decides to set up an
appointment and schedules an afternoon off work to donate blood.



Peña: The Citadel

Description:
The Lyceum is a historical museum in Alexandria, VA, that was constructed in 1839. It was
built by a group of men called The Alexandria Lyceum and was originally intended to be a
lecture hall, science lab and study area. Since then, the Lyceum has gone through many
iterations: It served as a hospital during the Civil War, a home, and an office building. In 1985 it
became a museum dedicated to the history of Alexandria, Virginia. The Lyceum does not have
an official website but information about the museum is provided by the City of Alexandria
website. The Citadel is based on the idea and history of The Lyceum.

User Profile: Student Visitor
Background: Should be a local student, more than likely preparing for a class field trip or
completing a homework assignment. The students should be at an age where they understand
history, and the implications of government policies -- such as war. Additionally, the student
would most likely be in a social studies or history class.
Expectations/Preference: Navigating The Citadel site should be simple enough for an English
speaking child, who is more than likely from the local area as it is unlikely that someone outside
of the area would know about the existence of The Citadel. Of course, it is also expected the
student has a computer available -- either at school or home -- is knowledgeable on searching for
information on the Web, and is actively seeking The Citadel instead of doing a general search for
historical sites.

Scenario: Student on Assignment:
Prior to going on a field trip, a sixth grade social studies teacher at Mark Twain Middle School in
Alexandria, assigns his students to conduct research and turn in a paper on the local historical
site The Citadel. He directs his students to use any source, such as the school library or Internet,
and the paper must be done prior to the field trip in order to have a better understanding of what
The Citadel is all about.

Shelly is one of the students, and she has decided to use her school library that has a "media
corner" to conduct her research. With the help of the librarian, she performs a search and finds
the Web site for The Citadel, where she reads a brief history, downloads pictures, and finds
where it is located. Armed with this information, she is prepared to write her paper and eagerly
awaits her class' field trip.



Low-Fidelity / High-Fidelity Prototypes
Please find one low-fidelity prototype for each site and its corresponding high-fidelity prototype
from each partnership.

Fort FlimmFlamm
Low-Fidelity Prototype
High-Fidelity Prototype




USS Fling
Low-Fidelity Prototype
High-Fidelity Prototype




Blood Bank

Lo-Fidelity Prototype
Hi-Fidelity Prototype




The Citadel
Low-Fidelity Prototype



                               Title
    Links:

    Home

    History                    Introductory Page.

    Contact              Pictures and welcome message.


    Donate
High-Fidelity Prototype




Applying Standards & Heuristics
Below is a brief discussion about applying standards, heuristics, etc. for each site's prototype
from its respective developer.

Naughton Prototype Discussion
                Web Site: http://personal.psu.edu/myn5072/ist331/index.htm

Introduction:
When developing a website, it is important to outline the principles, standards, guidelines,
golden rules, and heuristics that will be used in the design of the web site prior to a prototype
being built. Reviewing these recommendations and best practices prior to development of the
site can save precious time by setting expectations and avoiding developing a site that is not
acceptable. Such a review can also work as a basis for interface developers who may refer to the
document as they work through the interface design.

The Standards Chosen:
Within a prior phase of the project, each of the team members made recommendations as to what
standards should be deployed. We then had subsequent meetings to review the recommendations
and we devised a common list of standards to work with. This list of standards is as follows:
1.   The logo for the organization will be a banner positioned at top of page and centered.
2.   Graphical navigational buttons will be lined up horizontally under the banner at the top.
3.   Navigation links will be repeated as text only across the bottom of page
4.   Publishing and contact information will be located at the bottom under all other content.
5.   A plain white, solid background with no images or watermarks will be used.
6.   One standard and traditional font (to be determined later) will be used throughout the site.
     (Choices include: Arial, Verdana, Tahoma and Calibri)

When a user first enters a site, it is important they understand what the site will be about. If they
can quickly identify that they are in the right or wrong place, they will find their information that
much faster. The logo for the organization in the form of a banner was positioned at top of page
and centered. Therefore, we satisfied the requirement to easily identify the content by
implementing standard number 1 as itemized above. Standard number 6 which includes
displaying the publishing and contact information at the bottom under all other content also
servers to identify the site by advertising who supports the effort.

A website is only considered to have good navigation if it is user friendly and intuitive. In fact, a
user will only feel comfortable using a website it they can trust that the buttons they are clicking
on will bring them to the information they expect to find there. For this reason, it is important
that all buttons are labeled so that they appropriately describe the information that they link to.
Within the website that is being built, appropriate labels (words or short phrases) were placed on
each of the buttons that link to the different sections of the site. Graphical navigational buttons
will be lined up horizontally under the banner at the top and navigation links will be repeated as
text only across the bottom of page. Both of these standards 2 and 3 served the purpose of
navigation. Standard 6 also contributes to usability since it indicates only one standard and
traditional font should be utilized. This keeps the look of the site clean and efficient.

Standard number 5 was employed because it was imperative that the reader of the website be
able to easily distinguish between visual components of the site. Keeping a high contrast ratio
ensures that the colors do not blend making it hard to recognize buttons and text. The site should
instead be developed with a white background which most dark colors will be easily discernable
against. No light colors should be used as text such as pale yellows of light shades of grey. As
the standard indicates a contrast ratio of at least 4.5 to 1 needs to be maintained.


Conclusion:
As we completed this phase of the project, we accomplished quite a bit. For one, we tweaked
our High Fidelity prototypes to reflect the heuristics and commonly accepted guidelines and
standards. We also reviewed our sites with our teams and gathered the feedback they had to
offer. After reviewing their feedback, we made the final changes to the High Fidelity Prototype.
At this point, the site design is well established and we were ready to move into the next phase of
the project.
Overholt Prototype Discussion

               Web site: http://www.personal.psu.edu/rto5025/IST331/index.html

Having spent a good part of my professional career designing and creating fat-client and web-
based applications and websites for business, I have come to the conclusion that the key factor
behind good design is consistency. This applies to terminology used throughout the site or
system, placement of buttons / links / other objects for navigation, and every other single aspect
of the system for which the designer has direct control. With this in mind, it has been an
interesting and eye-opening process getting formal instruction in principles, standards and
guidelines, WCAG, local standards, heuristics, and golden rules and learning how to best apply
them to site design.

In working with my partner and our whole team, we arrived on six general design standards that
we thought were common-sense, universal, appealed to our sense of design and aesthetics, and
seemed like a good fit for the purpose of building an informative website for a living history
museum or similar historical site:

1. Logo graphic should be positioned as a banner across the top of page
2. Navigation should run left-right as buttons under the banner across the top of the page
3. Navigation buttons should be repeated as links across the bottom of page
4. Site copyright/summary contact information should be located at the bottom of page under the
   bottom navigation links
5. Use a plain or solid background; no distracting background images or watermarks
6. Use modern fonts with no hanging characteristics (i.e., Times New Roman is no good.
   Instead, use Arial, Verdana, Tahoma, Calibri, or something similar)

My partner and I met weekly to discuss our assignments, and even if there wasn’t any stated
partner or team work for that particular week, we felt that there was still value in meeting and
discussing our approaches to each week’s assignments. With that said, when we initially
developed our own low-fidelity prototypes, we both quickly realized that we were on the same
page and working in a similar vein, and I thought that our prototypes looked pretty similar and
utilized a lot of the same ideas.

When we finally held our meeting to discuss our low- and high-fidelity prototypes, I felt proud
of the fact that my prototypes (especially the high-fidelity prototype) held nearly all of the
characteristics that our team selected as design standards. This proved to also be the general case
with the majority of our team members’ high-fidelity prototypes as well – and our prototypes had
been built well in advance of talking about site standards together. In thinking about this, I
would bet that this isn’t necessarily statistically significant, as the people in our team are all
experienced with taking online classes via Penn State and most have some degree of professional
technology experience, which means that they have had a lot of exposure to the Internet and have
opinions about what makes for a good site. This almost certainly would not have been the case if
I were comparing opinions about website design with average people off the street.
During our discussion about forming standards and how they applied to our prototypes, my
teammates and I made more than one mention of “the GeoCities site appearance”, which
represents how millions of poorly-designed and coded homemade webpages hosted on the free
GeoCities platform back in the 1990s used to look. Most seemed to have distracting watermarks
or background graphics, a great deal of animated .GIF graphics placed willy-nilly around their
pages, either the Times New Roman or Comic Sans font, and a variety of other patterns that,
collectively, would seem to place a site’s look and appearance to an undesirable place in the
1990s. I think people tend to avoid dated-looking websites that look homemade, and I think our
standards go out of their way to specifically address and run counter to this appearance. It is
worth noting that GeoCities was shut down in 2009, which lends weight to our argument that
modern websites should not have that type of appearance.

In the end, I only needed to make slight modifications to my high-fidelity prototype so it would
adhere to our team’s standards, and I am proud and happy about the way it looks. All in all, I
have greatly enjoyed working on the term project with an assist from the opinions and
perspectives of my teammates. They are an intelligent, diverse bunch with a good deal of
perspective. Our sites will be the better for their collective input and wisdom.


Prus Prototype Discussion
                  Website: http://www.personal.psu.edu/bdp5008/bloodbank/

My experiences and findings with the high fidelity prototype are that the way a website may be
designed may vary quite a bit from the way it is actually programmed and developed. The
developers may have their own vision for what a website may look like, which can differ quite a
bit from the design ideas that the designer has in mind when they picture their website.
Developers may take shortcuts to make a website more streamlined than a designer may want, or
they may add extra information that the designer did not think to incorporate into the website.
The design principles may vary too, as a designer may want their website to look one way, but
standards and design principles may make it easier to develop and maintain a website and make
it more consistent if it follows a different design.

Examples experienced in the high fidelity prototype exercise were that of differing visions. For
example, some designers might have in mind a design idea that has navigational bars along the
side, while a developer may feel that the website has a lot of information necessary on the
webpage and that navigational bars along the side may limit the amount of space. For this reason,
there may be an argument that needs to be cleared up between the developer and the designer,
and each side represented. The opposite could happen as well, where a developer may find that a
website doesn't need as much space for information in the body, and toolbars on the side could
make the website look more appealing and aesthetically pleasing, while also making the website
look a lot fuller and more loaded with information. This would also need to be communicated
back to the designer so that a decision could be made on the exact ways of laying out a website.

Conflicts can also come in standardizing a website and keeping it with standards and principles
of a company. A company may have rules and regulations regarding the display of all
information or websites, and it may be awkward and an outside developer could have a lot of
problems with the way the design is regulated to be. Regulations that are outside of the norm for
developers can make it awkward, and their ideas and feelings may fight with the regulations and
standards of the organization sponsoring the website. Organization standards and regulations can
be a major problem with developers, as they might be designed around the will of higher level
management that don't understand the hands-on processes and the sharing of information in the
best ways possible. When regulations and standards don't make sense, then developers may have
a very difficult time making a website conforming to them, as they may see problems and the
only thing they can focus on is the problems that they do not like that are results of the
regulations of the organization.

Standardizing all of the web pages associated with it is almost never a problem, unless it varies
from the designer's ideas. Developing a website that is standardized across all of the pages is
much easier than if it were to vary from page to page, as the basic layout can just be reused over
and over, which makes the development process very simplified. If a designer has an idea in
mind with pages varying from page to page, it can be difficult for a developer to create the
website in that way, both because it is more difficult to develop each individual page on its own,
and because it is against the nature of developing principles and processes to create multiple
unique pages instead of standardized pages.


Peña Prototype Discussion

Web site: http://www.personal.psu.edu/mkp5104/IST331/home.html

It is easy to find interactivity problems with a web site, especially when you are not responsible
for creating it. This project taught me to look at interaction from a different perspective; where I
believed something made sense or was obvious, my partner was able to identify where a user
would become lost or confused. Something as easy as adding a title, or indicating the user what
page they are one can make users feel more welcome and likely to return. Simply put, you have
to find ways to break your own product, because that is what any user can do, and the more you
strive to improve the usability standards, the more successful the project will be.

At the beginning of this project, I thought designing something as simple as a web page would
go quickly and without much thought to it. The problem is, especially for the broad target
audience we were seeking, creating a page that almost anyone can navigate requires using
several HCI standards and principles; even for a simple page. After reviewing my site with my
partner, and using HCI guiding principles, we identified several areas that needed correction.
Specifically, if a user was linked to one my pages from an external website, could they easily
identify where they were in my website? The answer was no. Then I realized that this event has
happened to several times before; for example, I visit a blog that contains a link to an obscure
page and when I follow the link, I arrive to a page and realize I can't quickly find where I am at
in this new website. Now, each page in my website has an updated browser title, and the
navigation links at the bottom identify where the visitor is in the web site.

A few other changes were made to make the site more user friendly and presentable: The home
page was actually renamed "home" instead of "index" -- although not a necessity, it aesthetically
improved the site; an email link was added to the contact page for users to easily send emails;
the folder location name that contained the pages was simplified - since having a space in a
folder name caused the website to read "...IST%20331...", it now reads "...IST331..."; and,
historical information was added to give the customer a better idea how more text would be
situated on the page.

Ultimately, developing interaction standards for a simple web page still requires much planning
and outlook. Although it is impossible to foresee what every user will do, using principles and
standards can vastly improve interaction. By thoroughly dissecting the work and applying those
different techniques, I was able to improve the web site, making it more user friendly.



Usability Testing
Please find below the usability test questions for each site and a brief discussion from each
partnership about its findings after conducting usability tests.

Naughton/Overholt Usability Test (Naughton version)

Introduction:
Usability testing is an important step in determining the quality of a web site that has been
developed. It can be conducted by the development team of the website or by the customer. In
some cases, both parties will conduct testing. The developer will typically do so before passing
the site along to the customer for acceptance. One of the first steps in preparation for usability
testing is to ensure that the overall goals for the web site are outlined. This is an important step
because it will act as the foundation for which the testing will be gauged against. Basically the
testing will determine if the developer accomplished the objectives that the web site set out to
satisfy. The first objective to consider is what purpose does the content on the website serve.
Many web sites are built intending to offer information to the user. Others are built to provide a
tool for the user. Advertising and collaboration are some more examples of web site purposes.
There are many different uses for websites, but within all those uses it is important that the user
understand why the site is there. If the overall focus of the website is easily understandable by
the user, the usability testing can move to focusing on other details within the site. Some of the
alternate objectives might center on the ability for the user to navigate through the site and the
readability of the content.
Once the objectives for the site are defined, a matching list of questions needs to be developed to
test the effectiveness of the website meeting that objective. Please find below a list of the
objectives and questions that will be incorporated into my surveys. I performed a survey
regarding the FlimmFlamm site from the perspective of the developer and also a survey of the
USS Fling from the perspective of the customer. Since the goals of the two sites were essentially
the same, I worked with one list of objectives and questions. Please find them listed below:


Objective 1: To create a website with a landing page that will quickly and concisely convey to
             the user the general topic or concept that is being presented.

Question 1:    After just 30 seconds of looking at the landing page, what is the general topic that
               the site is about?

Objective 2: To present a website that is easy for any user to navigate.

Question 2:    What email address should you use when attempting to contact someone
               regarding questions about the website?

Objective 3: To offer content on the website that is readable and understandable.

Question 3:    After reading the “About” page, please list one detail that you read about that
               comes to mind.
                            An Example of a Usability Testing Survey

Website to Test: FlimmFlamm_______________________________________

Person Performing Survey: Martin Naughton, Developer__________________

Person Completing Survey: _Maureen Naughton________________________


Please click on the following web link and complete the questions listed below:

http://personal.psu.edu/myn5072/ist331/index.htm


Question 1:

After just 30 seconds of looking at the landing page, what is the general topic that the site is
about?

Answer 1:

a fort that is now a historic attraction

Question 2:

What email address should you use when attempting to contact someone regarding questions
about the website?

Answer 2:

information@fortflimmflamm.com

Question 3:

After reading the “About” page, please list one detail that you read about that comes to mind.

Answer 3:

The use of the Fort spanned many decades having been initially built to defend the river and
naval resources, and later being used as a military hospital/rehabilitation facility and military
training ground with living accommodations.
Conclusions:
After conducting both surveys with three participates each, I was able to draw some important
conclusions about usability testing in general, as well as, how well the websites met the
objectives. Concerning my usability testing approach, I learned one very important lesson.
Phrasing the question itself is probably just as important as analyzing the results of the survey. If
the question is not phrased precisely how you want it answered, then the survey results will not
be as meaningful as they could have been. When I wrote the first question for the survey, I
envisioned that the person taking the survey would read the question, and then understand to
only look and scan through the “landing” page of the website for 30 seconds before answering
the question from memory. The people were not meant to read through the page and gather
details. At least one of the respondents answered with responses far too long and exact for it to
be from just quickly scanning through the page. In this case, perhaps the error was having made
the time span too long. Maybe 30 seconds was too much time to scan through the page without
having time left over to start reading it. If I were to repeat the usability test, I would make the
time span only 10 seconds. Question three experienced similar difficulties. The intent was for
the people to read the “About” page and then to list one detail of what they read from memory.
Apparently the way the question was phrased was not specific enough to get that point across
because at least one of the respondents answered with details that were very unlikely to have
been regurgitated from memory. It is more likely that the person read the page and then went
back to what they read, pulled out a detail and copied it into the form.

Other than the difficulties I encountered because of inadequately phrased questions, I believe the
websites did fairly well with the usability testing. The users each understood which page was the
“landing” page and their answers did support the fact that Objective 1 was satisfied. The users
were able to indicate what the general topic for the website was by only looking at the initial
page that comes up when the website loads. Question number 2 was meant to test the navigation
aspect of the website. Since each of the users answered with exactly the same responses, there
was no issue with any of them navigating to the “Contact” page of the website. Their lack of
problems navigating indicates that the label for the contact button must have been clearly
identifiable and they understood where and how to click in order to obtain the email address
listed on the page. Therefore, Objective 2 was also satisfied on both of the websites. The last
question was written intending to determine if the content of the “About” page was readable and
understandable. Each of the respondents was able to provide at least one detail from what they
had read which indicates that they were able to digest the information and provided proof that
they understood the material. However, even though every respondent was able to answer the
question that may not mean the site was easily readable. One respondent followed up with a
second email concerning the USS Fling site “About” page listing three grammatical corrections,
a few issues with spacing between words and citing a couple of consistency problems such as
using World War II in some cases and then changing to World War 2 later. Although the
question was not to critique the site’s page, the particular respondent found enough glaring errors
to feel it necessary to point them out. Perhaps the usability test was especially revealing because
of the last question. The extra email that was sent indicated to me that although the USS Fling
site passed the test for Objective 3, it may need more work for the text to be easily and enjoyably
readable. There were no complaints regarding the FlimmFlamm site, so I will determine that
Objective 3 was a success on that front.

The overall experience of conducting usability testing was rather rewarding. I learned a great
deal concerning how to better conduct my tests in the future and also how the results can lead to
important conclusions regarding the sites. The way the questions are worded is of great
importance and the test is more effective if the surveyor is present when the respondents were
taking the test. This would ensure the details of the test were being paid attention to, such as
using a stop watch when timing was necessary, and ensuring that there would be no confusion
with the wording of the questions.

Naughton/Overholt Usability Test (Overholt version)
The first part of this assignment, to develop a list of goals for the usability testing, proved to be
relatively straightforward and easy. As the sites developed by myself and my partner (that are
the subject of our testing) only contain between eight and eleven pages each, we knew that the
goals should be modest in scope, while the testing itself should attempt to help us realize our
goals as much as possible. With that said, the following is the list of goals I developed for the
testing of the USS Fling website, and the few questions that accompany each goal:

Goal 1: Verify general soundness and logicality of the site’s layout.
   1. Locate the Address and Phone number of the Naughton Naval Museum / USS Fling site.
   2. Locate a map of the site.
   3. Locate the guestbook where visitors can enter and share memories about the USS Fling.

Goal 2: Verify that users can find desired information in the place where they expect it to be.
   1. Find the price of admission and specify whether the Museum accepts major credit cards.
   2. Find out whether the USS Fling site is available for visits today (Thursday).
   3. Find out whether there are any events scheduled to take place at the USS Fling today
       (Thursday).

Goal 3: Verify that users find the information (somewhat limited though it may be within the
        high-fidelity prototype) useful and not significantly lacking in any way.
   1. Find out whether the USS Fling has ever visited the country of Panama while in service.
   2. Find out where to send museum donations.
   3. Find out whether or not volunteer positions are available at all times.

General questions about your experience with the USS Fling site:

How well were you able to navigate the site?
What is your opinion of the layout of the site?
Was there anything you were expecting to see within the site that was lacking?
Was the site easy to read?
Was anything about the site particularly annoying or intrusive?
Was it easy to return to the home page to start a new search or “go off in a different direction”?
Do you have any other comments to share?

The two people who participated in the test were friends’ wives with whom my family shared a
vacation rental house this past week. Subject One is a 36-year old, married, mother of two, high
school graduate who has completed several college classes, who works part time as an office
manager for a prominent local financial advisor. Subject Two is a 30-year old, married,
expecting the birth of her first child in about a month, college graduate, who works full-time as a
high school teacher. Both subjects consider themselves fluent Internet users who rely on the web
to provide information on a near-daily basis.

After testing, I felt like my first Goal was quickly accomplished. Both subjects located the
Museum address and phone number quickly in the footer of the home page (and remarked that
they appreciated having the info visible on all pages as a convenience). Both subjects were able
to quickly locate the map of the Grounds, although Subject Two remarked that the Grounds link
and page might be better served if it were renamed “Map”, as a map of the Museum site is the
only content found within it. Additionally, both subjects were easily able to locate the guestbook
within only two clicks, but commented that they thought that changing its name from Memory
Wall to Guestbook might better represent its contents.

Goal Two brought more constructive comments and criticism that found both Subjects in
agreement. Interestingly, both Subjects mentioned that it was easy to locate admission pricing
and credit card information, but thought that the Contact page would be better served to strictly
provide a means for people to request information and that the pricing and credit card
information should be moved to the Visitors page. Both made the same comment with regards to
the days and hours of operations information – that it would be logical to move it to the Visitors
page. Both users remarked that the Events calendar was easy to find and simple/functional in
appearance.

Goal Three brought some more comments. Both subjects found that the information on the
Donate and Volunteer pages was clear and easy to find, but Subject Two mentioned that it might
make sense to combine both pages into a single one. The task in question 7 took the longest for
Subject One to complete (and second-longest for Subject Two). While neither said or suggested
this, the fact suggests to me that the site would benefit from an integrated site search feature
(such as how a Site Search feature been implemented into the Penn State Home Page at
http://www.psu.edu/). Most Internet users are familiar with using search engine technology and,
at this point in time, there is no reason that every site shouldn’t be designed to include it.

There were only a few comments and answers to the free-form questions I asked of the subjects
after testing. Both indicated that they found the site generally easy to navigate and found the
layout simple and clean. Subject Two mentioned that accessibility is a concern to her (as she has
a close family member who is wheelchair-bound), and that the USS Fling site would benefit
from either a separate section or added information to the Visitors page detailing accessibility
features of the building / ship / exhibits. Subject One also mentioned that she would appreciate
the ability to easily increase text size on the site as she found the size 11 font a little small, and
was happy that the Mozilla Firefox browser with which we performed the testing had a feature to
easily do so (Ctrl + Plus Sign to increase font size and Ctrl + Minus Sign to decrease font size). I
think she would have appreciated instructions within the USS Fling site itself on how to do this,
but that presents an interesting question for debate – where to draw the line between providing
instructions about using a particular site vs. pointing out features inherent to a particular Internet
browser?

At the end, I think my partner’s site design proved to be a good one, but I have a feeling that
some of the problems or shortcomings (trivial as they may be) that were pointed out by my test
subjects might prove to be quite common in more widespread or robust testing and therefore
should be considered for inclusion in a revised version of the USS Fling website.


Peña/Prus Usability Test (Prus version)

Questions:
1. When was the Citadel Constructed and for what purpose?
2. What hours is the Citadel open on Saturdays?
3. Are private tours available and who would be the appropriate contact for a private tour, or
   public tour if private tours are not available?

Thank you for helping to test the site.
1. How easy were you able to navigate the website?
2. Do you feel it was well organized?
3. What information would you like to see added?
4. Do you feel any information should be shown in multiple places that isn't?

Results:

From tests conducted by a family member and a personal contact, the results were that the
website was easy to navigate. As the websites we have created so far are still closer to prototype
phases than their final phases of development, the feedback received was that more information
could be shown in general, with more contact information. More contact information was
requested so that if somebody was interested in a tour they could get more information.

Information about cost of tours was not available and was requested to be shown, if there are
tickets, and if they are on a limited availability or if somebody can show up and take a tour free
of cost. The testing subjects also both looked forward to the pictures that will be posted in the
future and perhaps even a sort of virtual tour through the Citadel could be made available to give
visitors a brief idea of what is in the building. A virtual tour would also be nice for people who
live far away and may not travel to Alexandria or nearby and could gain a visual perspective on
an old fort such as the Citadel and possibly learn from it.

One test subject found it tedious that every time a link at the bottom of the page was clicked that
it scrolled the page all the way to the top again, and thought it might be easier if the navigational
links at the bottom of the screen were available at the top of the screen as well, so that a user
could quickly go from page to page or change the decision of which page they wanted to view
next quickly if they desired.

The usability test was interesting in that it gave the perspective of other people, a similar level of
user's point of view as well as a beginner's point of view. It also gave the perspective of more
curiosity towards the site as if it were a genuine website and what information could be gained
from it. From their tests they were able to find the information from the fairly basic site rather
quickly, but requested more and were intrigued at the ideas of the web sites and even wondered
how we had chosen the particular sites as our topics.



Peña/Prus Usability Test (Peña version)

Our partnership’s goal was to create two simple, functional, and neatly organized sites with the
purpose of informing a visitor as quickly and easily as possible. Obviously, if more time and
resources were available, more robust sites could be created. For the purpose of this project, and
our goals, the sites were kept simple.
Overall, test subjects thought the Web sites were organized well, and looked like they were on
their way. It was obvious to them that both sites were clearly being worked, but felt both had a
good chance of being a helpful site and found them to be informative.

Survey for Mike Peña Web site <http://www.personal.psu.edu/mkp5104/IST331/home.html>,
and Brandon Prus’ Web site <http://www.personal.psu.edu/bdp5008/bloodbank/>.
1. At first glance, please tell me what the site for?
2. Find information about where you can donate.
3. Find the telephone number for the staff or site information
4. Find a way to email the staff.
5. Find historical/general information.
6. Find out whether they are open today.
7. How well were you able to navigate the site?
8. What is your opinion of the layout of the site?
9. What is your overall impression of the site?
10. What, if anything, would you change?
Conclusion
At the conclusion of this term, our team has learned a great deal about the overall process of
building a web site. The assignments that we completed took us from the very first stages of
discovering what the site will represent to presenting that information in an easily navigable way
for the user. The general process began with site descriptions and user profiles to understand
what the customer was trying to accomplish. It then progressed into offering the customer a
rough look and feel of the website in the form of a low-fidelity prototype. After much
communication back and forth between the designer and the customer, a high-fidelity prototype
was developed consisting of the basic structure of the site. Within the high-fidelity prototype we
were sure to abide by the acceptable standards and heuristics that are critical for a web site that
will be used by a wide array of people. While learning about the detailed standards, we came to
realize that much thought and consideration was put into each standard in order to best
accommodate all categories of people. Once we were done with the high-fidelity prototype and
we were comfortable with our work, we testing the design on potential web site users. The
usability testing taught us what worked about the website and what aspects could use
improvement. If the project were an actual contractual endeavor, at the conclusion of usability
testing, the final updates would be made and the site would be handed off to the customer. The
expectation is that if there was ample communication through the process from beginning to end,
the customer would be well informed regarding the final product and would likely be pleased
with the results.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:35
posted:9/25/2012
language:Unknown
pages:39