Project Real Prevention - Pennsylvania State...
Transcript of Project Real Prevention - Pennsylvania State...
![Page 1: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/1.jpg)
IST 331: Final Project
Project Real Prevention
Pennsylvania State University
College of Information Sciences & Technology
Instructor: Dr. Frank Ritter | [email protected]
Group 14
Joshua Miller-Day | [email protected]
Eunsun Jeong | [email protected]
Matthew Cheung | [email protected]
Arsh Sadana | [email protected]
May 5th, 2015
![Page 2: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/2.jpg)
Abstract
In this report we will analyze the current design of our website. Real-
prevention.com is a website that has already been designed and laid out by a
professional company, but our experiments yielded results that show a change
might be necessary for some elements that can be modified to achieve a more
efficient design. The website itself does not hold a large amount of insurmountable
issues like major bugs or design flaws that would merit a large amount of
manpower to fix. So many of our changes are just small cosmetic modifications that
would improve the user experience and help them navigate the website easier.
Using theories from the IST 331 course, we made changes on the current
homepage using our own ideas on what could be improved. We then surveyed
users and got their opinions on if our ideas were solid and would merit changes
from the company. We believe that the Real Prevention organization can benefit
greatly from a stronger online presence and think that our suggestions would not
only benefit the users experiencing the website, but the organization as well.
![Page 3: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/3.jpg)
Table of Contents I. Introduction.........................................................................................1-2 II. Method...............................................................................................2-5 III. Results............................................................................................6-10 IV. Conclusion...........................................................................................10 References................................................................................................11 Group Log…………………………………………………………………………................11
![Page 4: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/4.jpg)
1
I. Introduction
i. User Centered Design
User-centered design is a design philosophy that puts the user of a product,
application, or experience, at the center of the design process (Lumsden, 2008).
User Centered Design can be seen everywhere around the world, as it is essentially
how we interact with technology. With the exponential increase in technological
integration, it is imperative that what we integrate is done so in a correct, efficient
manner.
Our goal for the assignment is to predict what users may want out of a user
interface and also to ensure that the interface has elements that are easy to
access, understand, and use to facilitate those actions. In particular, we will be
focusing on the website concepts of website layout, efficient navigation, and
appropriate link usability. Hopefully, by the end of our attempts to improve the
website, we will also develop an improved knowledge of how to improve a User
Centered Design’s appearance, functionality, and efficiency.
ii. Real-Prevention.com (see Figure 1.) Figure 1. Current Homepage Design
Real Prevention is a drug prevention
program used nationally in the US and also in
dozens of countries around the world. The
program is designed to educate children from
the ages of six to sixteen on the dangers of
drug use and strategies to refuse the usage of
drugs. Real Prevention has been picked up by
the D.A.R.E. program and has ever since been
successful.
The goal of our project is to provide assistance to the leaders of the Real
Prevention program in regards of their website. Using evidence provided by our labs
and studies we will give suggestions for revision of the Real Prevention website.
Currently, there are areas of clutter and disorganization within the homepage and
around the pages of the website. Also, the website has not been updated in a while
and some of the pages provide broken or outdated links. In our deliverable we will
![Page 5: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/5.jpg)
2
be providing specific suggestions for the changes in the website including specific
wording changes and pictures of potential new layouts. Unfortunately, it is unknown
how the website was coded and designed, therefore our changes may not be
implemented the way we directly suggest but there would still be a better idea for
how to improve on the website.
The leaders of the program have been in contact with our group and are
excited to work with us in the available times that they have. However, they are
not directly in charge of the way the website is managed but they are allowed to
suggest changes and hope for the best. Through them we have acquired assistance
on target audiences and what information is the most necessary for the user to be
exposed to. We will discuss this information and the implications for how the
website should be focused around it.
II. Methodology
i. Task analysis
Our group conducted task analysis lab for improving the website. Task
analysis can be applied to studying how users operate existing products, and such
analysis will assist in the process of understanding the difficulties they face in using
existing products, and improvements that might be needed (Stephanidis, 2014). So
we were looking for how easy user can use our website features. It gave us most
effective result that we can actually apply to our website’s interface design.
Examining Figure 2 shows two tasks and hierarchal order that we were conducted.
The last part showed us the predicted time based on keystroke level model (Ritter,
2014).
![Page 6: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/6.jpg)
3
Figure 2. Hierarchical task analysis for online purchases published studies Task 1
0 Perform online purchase
1. Finding purchase page
1.1 Select product in menu bar
2. Choose object
2.1. Browse listing under the merchandize section
2.2. Select item
3. Pay
3.1. Choose pay screen
3.2. Add to cart
3.3. Select checkout
Task 2
0 Find published studies (Evidence of validity)
1. Browse
1.1 Browse around first page
1.2 Select related link “people”
2. Find publication page
2.1. Scroll down
2.2. Find published studies
Time prediction:
Task 1 = (1.0s) + (1.8 + 0.8s) + (1.0s + 1.0s + 1.5s) = 7.1s
Task 2 = (2.0s + 1.5s) + (2.5s + 1.5s) = 7.5s
To make an interface more accessible for users, it is important that we also
comprehend information like users. The time prediction was based on the concept
that borrowed from keystroke level model and assumption that the interface design
of website is well formed since user occurs less error in well-formed design (Tate,
2009).
![Page 7: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/7.jpg)
4
As shown in Table 1, both tasks took more time than our time prediction.
Even for finding published studies task, it took about 1.5 times more. This means
that our interface design of the webpage needs to be improved. So we can point
out two main problems.
While conducting the task, team members detected some errors user usually
made. For the first task, there are some broken pages in merchandise list. Some
users clicked broken pages to accomplish the task. And for the second task, user
never found the source page at first trial. It is because all the publication
information is placed on not related page.
For the second task, which took about 1.5 times more than our prediction,
the source that user was looking for was put inappropriate location. Most
participants got panicked when they tried the second task, because it seems there
is no related menu in the webpage’s categories.
Table 1. Result table for two different tasks performed by subjects
Task Time Number of actions
Subject 1 Merchandise 7.88s 7
Evidence of validity 11.20s 15
Subject 2 Merchandise 8.37 8
Evidence of validity 10.55 16
Subject 3 Merchandise 7.40 8
Evidence of validity 12.43 12
Subject 4
Merchandise 8.26s 9
Evidence of validity 10.12s 14
![Page 8: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/8.jpg)
5
ii. Homepage Improvements
While we had many ideas to change the Figure 3. Mock Website Design
homepage, it was important to gather data to
support our claims. So our approach was to
make these changes first in a “fake
homepage” (See Figure 3.) and survey users
on what they liked and disliked about each
homepage. We used an online Google form
survey and collected our data on Google’s built
in spreadsheet application.
Our goal was to take problems or inefficient parts of the homepage that we
evaluated previously and use them to create this “fake homepage”. We took a
screenshot of the original homepage and edited it from there. We thought the large
slideshow did not contain much important information and got rid of it. There were
works on the top right that looked like links but were not so we deleted those to
prevent them from being misleading. We made the links on the top right larger as
well because experts like Jakob Nielson say emphasizing top priority tasks are
important (Nielson, 2002). We also resized the font on the page because we had
more room and thought that 9pt font was much too small for this page. We resized
most of the text around 3 points higher to improve visibility. We also changed the
social media portion to be more accessible in the form in larger icons. Our largest
goal was visibility and efficiency for our mock page.
We asked very broad questions such as “Which page do you think is
simpler?” to more specific questions like “If looking to contact the program via
email, what page makes it easier to find the program's email address?” Based off of
our data from user studies, it is very important to ask these varying questions
because an efficient and effective website are both very different. A website with
easily accessible information can look very different than a website that has easily
accessible information and looks good doing it.
![Page 9: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/9.jpg)
6
III. Results
i. Current Homepage Analysis
The homepage is one the most important aspects of a website. It is like the
“first impression” a user gets while visiting a website on the Internet. The original
homepage, which belonged to Real Prevention, had many flaws and inconsistencies.
From broken links on the top right of the page, to difficult to read text and
inappropriate images, the homepage looked like it needs a lot of improvements. It
clearly does not fulfill the requirements a homepage is required to complete. A user
would probably not find the information he/she is looking for on a homepage. The
information provided on the homepage seems incoherent and clustered. In order to
increase user efficiency, improvements to the homepage are necessary. Some
aspects of the flaws and aspects that needed to be considered are mentioned
below.
a. Images/Visuals
The images and visuals on the homepage do not match the website and it's
purpose. Professional and appropriate images and visuals are important for a
website to convince the users for a product or service. The images that are being
flashed on the homepage do not seem very professional and lacks to convince
users.
b. Text
Text is one of the most important factors while talking about user efficiency.
It is important that the text is readable and clear to have a larger audience for your
website. The size of the text on the homepage, in the three sections below the page
'Our Services', 'Why Use Real Prevention?' and 'Contact Us' is smaller than the
standard size (Times New Roman 12). People with poor reading abilities may face
difficulties while reading this type of text. The importance of text should always be
taken into consideration while designing a website.
![Page 10: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/10.jpg)
7
c. Organization
The organization of the homepage seems to be disorderly. The top right of
the page includes five different topics that have been classified as different sections
(prevention, support, consulting, coaching, research). These sections are not lined
up straight as prevention takes the top space while others are placed below. This
website consists of several aspects which makes us believe that there is hardly a
design plan while making the website (Wilson, 2011).
d. Information
Information which is displayed on a webpage is what a user sees first when
they visit a website. The information displayed on the current homepage is
confusing and does not look convincing to the users. Several aspects need to be
kept into consideration while implementing an effective homepage (Collins, 2015).
ii. User Input
We were very interested in gathering a decently large amount of data for the
questions we had prepared for the users. Unfortunately due to time and resources
restraints our pool was smaller than we imagined, Figure 4. Survey Question 1.
although it was not completely inadequate. Users
filled out the survey we had given them and their
results were different than we had predicted, but
were to no surprise to us.
When we made our mock layout for the
website our highest priority was to make sure we
had efficiency in mind. So when a user needed to find information it was as easy as
possible. When the users were asked what page they thought looked simpler the
statistic from the attractive question was flipped where 75% (See Figure 4.) it was
simpler.
![Page 11: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/11.jpg)
8
iii. Advantages & Disadvantages
Figure 5. Survey Question 2.
While the users may think our website
looks more simple, the specific information
is what is very important when making
changes to an existing homepage. One of
the changes we made was changing the
links to social media to clickable icons with
the social medias logo on it. When the users
were asked which they preferred, the
majority users answered the icons over the links. Figure 6. Survey Question 3.
Since 83% (See Figure 5.) of the users prefer the
icons rather than the links it is advantageous to
the website designers to consider changing this
portion of their website to one like the one we
provided earlier.
The biggest changes that we made were
small organizational changes. One of those
changes was making the email address of the
organization much larger and noticeable. On the original page the email address
was provided in a direct link that would open the users email client. The flaw in this
Figure 7. Survey Question 4. is that it causes a lot of problems with users that
prefer web based email clients or users that aren’t
on their normal computer. We asked our users
what their opinion of this change was and the
majority said they liked the changes we made.
75% of the users (See Figure 6.) thought that it
was easier to find the program’s email address
with the changes we made in our design.
Another change we made was a much
simpler one, where we enlarged the links on the top right of the page. While we
don’t think the original ones were too small, we thought making them larger would
![Page 12: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/12.jpg)
9
be a good way to improve efficiency on the page Figure 8. Survey Question 5.
and allow users to find the page they are looking
for faster. When we asked the users to find
something that was directly on this link bar, all of
them preferred the new page. Users were asked to
find the “products” link and 100% (See Figure 7.)
of them preferred the new page. This is as
definitive as we can get when proving that these
changes would be good for this homepage.
Overall even though many of the users preferred the original homepage’s
aesthetics, users as a whole preferred the new homepage layout. The biggest
recommendation we could make would be to show our new design to a professional
who designs website and have them “tidy up” the page to make it more pleasing to
its audience. Even with our more rough design over two thirds (See Figure 8.) of
our users that we surveyed preferred the new page.
iv. Website Cleanup
In addition to improvement of the homepage, we also found certain areas of
the website that needed our attention. More than often, we found problems to
regarding broken links and misleading information.
During our keystroke level model task analysis, we came across an issue
within the merchandise section of the product page. Some of the links that were
provided for each individual item led to a broken page. Thankfully, the link checker
we used (www.brokenlinkcheck.com) was user-friendly resulting in an easy and
efficient method of scanning the entire website for any more possibly broken links.
With this information, we can directly notify the web designer of the issue and have
it quickly corrected.
Furthermore, we found that there were areas of the website that included
excessive, misleading information. On the top right hand corner, there is what looks
like a navigation bar, but in actuality it is underlined plain text. We found that
during out keystroke level model task analysis that almost half of the test subjects
![Page 13: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/13.jpg)
10
tried to click this text in hopes of navigating to another page. This was not only was
a waste of time, but also a waste space.
We also believe that placing the references of information located within the
People’s section made the action of scrolling through the entire page extraneous. To
fix this, we will recommend that the web designer condense all of them into a
separate page redirected by a link at the top of the People’s section.
V. Conclusion
Throughout this project we slowly began realizing the importance of “who”
the website is being made for. From their mission statement and general ideals, we
believe that Real Prevention’s targeted audience is the average everyday
bystander, who may be unsure about their current beliefs. The majority of a
general public is made of people who are not skilled in a specific area. Therefore,
we felt that they should not focus on revamping their website, but instead improve
on the design’s interface of user friendliness and assurance of the quality of
information.
By increasing functionality of the website, the likelihood of user acceptance
greatly increases. Based off the results from our survey, we saw that the mock
website that we created, while visually less appealing, was more favored (even
though the majority thought that the original website looked better). Additionally,
during our task analyses we noticed that the amount of excess information was
prominent and hindered time efficiency. We predicted limiting this information
would result in easier readability and navigation, all of which increase functionality.
In conclusion, the most important concept of user interface design was to
make sure of who the target audience is and what their expectations and
requirements are of the website. The primary motive of this report was to discuss
the several aspects that could be enhanced in order to improve the user efficiency
of www.real-prevention.com. A design interface does not only help create better
user efficiency but also creates a positive impression on the customers. In order to
promote their goods, a company needs to convince the users to trust them with
their services. Hence, having a website which can help do that is always helpful to
any type of organization.
![Page 14: Project Real Prevention - Pennsylvania State Universityacs.ist.psu.edu/ist331/example-projects/projects...integration, it is imperative that what we integrate is done so in a correct,](https://reader034.fdocuments.in/reader034/viewer/2022042408/5f249ac187a0a0096e6f470d/html5/thumbnails/14.jpg)
11
References
Lumsden, J. (2008). Handbook of research on user interface design and evaluation for mobile technology (Vol. 1, p. 1171). Hershey, PA: Information Science Reference. Nielson, J. (2002). Top 10 Guidelines for Homepage Usability. Retrieved May 5, 2015, from http://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability/ Wilson, R. (2011). 12 Website Design Decisions Your Business or Organization Will Need to Make. Retrieved May 5, 2015, from http://webmarketingtoday.com/articles/12design/ Collins, D. (2015). Top Five Best Practices for Website Design in 2015. Retrieved May 5, 2015, from http://www.grafik.com/top-best-practices-website-design-2015/ Ritter, F., Baxter, G., & Churchill, E. (2014). Foundations for designing user-centered systems: What system designers need to know about people. Springer. Stephanidis, C., & Interaction, U. (2014). Universal access in human-computer Interaction 8th International Conference. Springer.
Group Log
NAME ROLE
Josh Miller-Day Built “mock webpage”, designed and created the online survey, wrote the results portion of the survey.
Eunsun Jeong Wrote methodology, result, and performed the experiments.
Matthew Cheung Wrote introduction, conclusion, performed the experiments, and handled formatting.
Arsh Sardana Wrote Result and helped in experiments.