IST 331: Final Project

Project Real Prevention

Pennsylvania State University

College of Information Sciences & Technology

Instructor: Dr. Frank Ritter | frank.ritter@psu.edu

Group 14

Joshua Miller-Day | jtm5448@psu.edu

Eunsun Jeong | ezj5050@psu.edu

Matthew Cheung | mmc5476@psu.edu

Arsh Sadana | aws5868@psu.edu

May 5th, 2015

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.

Table of Contents I. Introduction.........................................................................................1-2 II. Method...............................................................................................2-5 III. Results............................................................................................6-10 IV. Conclusion...........................................................................................10 References................................................................................................11 Group Log…………………………………………………………………………................11

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

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).

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).

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

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.

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.

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.

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

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

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.

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.