Drew Furtado

I’m a full time high school teacher, and work in a school that’s over a hundred years old. While our school has lots of unique strengths, our district website

We’ve all attended a Professional Development session before and had speakers tell educators that developing a class website can improve communication with parents and stakeholders. Feeling energized, we run to free websites like Google Sites, Wix, or Weebly, design a website, and figuratively check that box off.

However, we are educators, not web designers. Even with our best intentions, we might not fully understand how to best structure websites and could create an undesired effect on our audience: a poor user experience.

FHSArt.net

In 2014, the art department at Fairhaven High School decided to launch FHSArt.net, a Weebly website that allowed the department to promote the inner happenings. At the time, the department felt the school community was unaware of the achievements and work of FHS Art students. The site provided a route for people to see students’ hard work.

The site became a successful tool for the Fairhaven Art Department and logged over 1000 visitors. However, in 2017, the team lost motivation to update the website, and today the website remains defunct. Our team misses the information shared on the web and now seeks to redesign the site.

Our first order of business includes studying our prior site and conducting a usability study. In a usability test, a team recruits users to visit a website and then complete various tasks. Then researchers can analyze how people performed on the site and identify issues that require improvement.

I just completed a usability testing session of FHSart.net, and the insight gathered inspires me that our redesigned site can be so much stronger. The following is a report of the findings of the usability testing session.

Fairhaven High School Art Department Usability Testing

The current site requires a usability testing session to understand better the issues presented on FHSArt.net. 

We designed the usability testing to include five tasks that will provide critical insight into how users interact with the website and identify crucial issues needing improvement with the site’s redesign.

Testing Summary

I conducted the usability summaries on December 11, 2021. Two users participated in the study through a remote Zoom session, and another user completed the survey in person while being recorded through Quicktime Media Player. Each session lasted 15 minutes and included a diverse group of users with various web experiences.

The testing results indicate the current website requires an entire redesign. Users found the website difficult to navigate, frustrated when unable to complete tasks, and struggled to complete the tasks. Only one user was able to meet all five tasks. Two users failed three of the five functions before giving up.

Users reported that the site needs redesigning, needs simplification, and should include navigational aids such as a search bar. They also suggested creating a standard across pages, eliminating vertical dropdown menus, and modernizing the organization of pages.

One user went as far as saying, “I’ve used many sites before, and this has to be the worst experience I’ve ever had. If I had a child at Fairhaven High School, I wouldn’t trust them to teach my child digital skills if they can’t use their digital skills to develop a website.”

The study highlighted many issues about the website, and recommendations include:

• The main page structure needs simplifying, and navigation requires improvement. The drop-down menus ineffectively assist users in locating content. The team should avoid drop-down menus at all costs.
• Pages need to become the hub of specific content that can branch users into different pages. For example, Clicking on “Ceramics” should bring the user to a Ceramics page that includes all content related to Ceramics.
• The team should also limit the number of choices for users. In the testing session, 100% of users reported feeling overwhelmed with the number of options listed under each class.
• Important information appeared hidden and difficult to find. The team needs to identify important content and provide coherent paths for users to access documents. Two of three users could not locate a comprehensive list of all FHS Art programs.
• Contact information needs inclusion on the website. Two of the Three users could not contact any art teachers for more information about the art program.
• The website could benefit from updated graphics and text elements. Users reported that the website lacked many visual images for a visual arts page and included too much text.
• Participants noticed difficulty identifying student work, and structuring text with headlines and sub-headlines will improve these sections. 
• The homepage needs updating, as the page currently displays an abundance of text and does not invite or welcome users to explore the website. Users reported the homepage looked like an error message and the page’s text proved challenging to read.
• Many users failed to read much of the website’s content. The team should simplify text to allow users to scan information on the website. 

Methodology

The three participants included friends and family of the study’s administrator. These participants are comfortable with the administrator and tend not to shy away from truthful feedback. One participant consists of a colleague at Fairhaven High School, and two other participants included people who visit websites but haven’t visited the FHS Art Department’s website before. Users received a $10 gift card to Dunkin Donuts to participate in the study. 

The sessions took place remotely and in person. The administrator provided an overview of the study and retained permission from users’ involvement before recording and confirming during recording.

The administrator revied the purpose of the study and included the history of the art department. A warmup discussion began the study, prompting users to identify their relationship with web interaction. Following the warmup, users began completing tasks and attempted to speak through their decisions and actions. Afterward, a debriefing conversation occurred after the session.  

Study Script Introduction:

“Hello, My name is Drew Furtado. I appreciate you taking some time out of your day to help me research the usability of Fairhaven High School’s Art department website. In 2016 the FHS Art department developed this website, and it now requires updating. The data gathered from this session will allow our team to understand better how users use the site and identify current issues that we can address in the site’s redesign.

This testing session should take no more than 15 minutes of your time, and we value your insight. We hope that you will be able, to be honest throughout this session. Nothing you say will hurt our feelings, nor are you being judged on your experience. We are testing the site, not you. 

During this study, you will attempt to complete five different tasks. Please try to complete the task as best as you can and speak out loud about the actions and thoughts you are experiencing. This session will help better understand how to improve the site’s redesign.

If it’s possible, would you consider permitting me to record this session? I can revisit the session and gather the information I might have missed by recording this session. At any point, feel free to ask any clarifying questions that you might have. However, please note that I might not answer your question until after the session.

• Before we start, may I ask you a few questions to better understand your experience with navigating websites?
• What is your occupation?
• How many hours a day would you say you use accessing websites on the internet?
• What types of sites do you frequently visit?
• What are some of your favorite websites?

At this point, I’d like to start the usability study. Are you ready to begin?

Usability Tasks:

1. In this scenario, pretend you are a sophomore interested in taking an art class at Fairhaven High School. You heard a friend discuss a mosaic project made in her ceramics class. Please attempt to find the mosaic page for examples of student work.
   
2. In this task, pretend you are a student’s parent at Fairhaven High School. Your student came home talking about a friend who received a National Student Production Award in their media class. Navigate FHSArt for a news story that includes this achievement.
   
3. In this task, act as a parent who would like to find information about contacting an art teacher about getting your child involved in the FHS Art program.
   
4. In this task, you’re a parent of an 8th grader who is looking for a comprehensive list featuring all art programs offered at Fairhaven High School.

5. In this task, you receive an email from an art teacher about an update about your child’s digital photography bokeh project. The email contains a link to FHSArt.net but does not link to the project. Seek the Bokeh project page and locate your child Evan’s project.

Participant Details

Josh

Male, age 32, Clinical Social Worker

Josh spends two to five hours a day on the internet and has an excellent understanding of navigating different websites. He regularly visits Massachusetts State websites, the New York Times, Reddit, Twitter, and Facebook. 

Susan

Female, Age 66, Retired

Susan refers to herself as not a technology person. Her interactions with websites are limited, but she loves to visit the Washington Post and the New York Times and loves seeing updates on her grandchildren on Tiny Beans’ baby photo site. She spends about 45 minutes on the internet and has never visited FHSArt.net before.

Amanda

Female, Age 43, Science Teacher

As a high school science teacher, Amanda is comfortable with technology and understands how to navigate most sites. She reported she spends a reasonable amount of time on the internet and visits sites like Google Classroom, AP Classroom, and social media sites. On average, Amanda indicated she spends at least 4 hours a day visiting websites. She has seen FHSArt.net before but couldn’t recall the last time she visited the site.

Analysis and Recommendations

Task #1 

In this scenario, pretend you are a sophomore interested in taking an art class at Fairhaven High School. You heard a friend discuss a mosaic project made in her ceramics class. Please attempt to find the mosaic page for examples of student work.

Results:

Participants completed the task with mixed results. Two participants completed the task successfully, and another user gave up as the user got lost in the navigation. 

• One user immediately went to the Ceramics page and located the project page under the Ceramics II subheading.
• Another user clicked on the Ceramics link and couldn’t locate the project page on the Ceramics page. The user then clicked on Digital Photo and realized the heading links included drop-down menus. Once the user identified how the website functioned, they could locate the project page successfully.
• Another user clicked on every link across the page and could not locate the page. The user passed over the link multiple times and became blind to the abundance of options. They shut down if offered more than four options.

Issues Identified

Users immediately demonstrated disdain for the abundance of pages nested under each main header link. The site contains too many options for users and exceeds their cognitive load.

Content lives in unexpected and unpredictable places.

Recommended Improvement

The site should abandon vertical dropdown menus and group content on relative pages. For example, the Ceramics heading should bring users to the Ceramics page to locate Ceramics 1, Ceramics 2, and Ceramics 3 content. 

A search bar would help users navigate the site with ease.

Task #2:

In this task, pretend you are a student’s parent at Fairhaven High School. Your student came home talking about a friend who received a National Student Production Award in their media class. Navigate FHSArt for a news story that includes this achievement.

Results

100% of users located information about the National Student Production Award. However, the ease of this operation varied between participants.

• One user immediately went to the Media Arts page and found the news story on the front page.
• Another user attempted to visit the News and Events page nested under the main Home page. The user noticed the content included information from 2016 and then visited the Photography page, hoping to find information about the story. Then they visited the Media Arts Page and ended up on the Student Projects page until then finding the story on the front page.
• In this task, a user immediately requested a search bar. They first selected the NAHS link and said: “I don’t even know what NAHS is,” but clicked on it anyways. Unsuccessful, they then visited the Media Arts website and immediately located the story on the front page of that page.

Issues Identified

The FHSArt page hides the News and events from users. The only way to access this page is to hover over the main Home link, hover over the Fairhaven Chapter National Art Honor Society, and select News and events.

Pages across FHSart.net contain a variety of page structures and fail to include similar terminology, navigation, and organize information differently.

Recommended Improvement

Pages across the site should develop a standard page structure. Each page should be designed the same way, contain a similar design, and include elements that are easily accessible.

The team should also develop an FHS Arts newsfeed that lives on the website’s front page and includes navigational links that direct users to the department’s News.

Task #3:

In this task, act as a parent who would like to find information about contacting an art teacher about getting your child involved in the FHS Art program.

Results

Only one participant completed this task, and the other two participants became so frustrated that they gave up ultimately. 

• One user visited each course searching for a contact for a teacher, and finally found a reference for the Media Arts teacher. This user navigated to many pages until finding a contact link in the footer of the Media Arts page.
• Another user visited each link seeking a contact link but unsuccessfully found one. The user promptly gave up and was frustrated a link could not be located.
• A third user-worked hard to locate a contact link but could not complete the task. The user visited each page seeking a contact link, and ended up on the Media Arts page. They found a link to the Fairhaven High School and attempted to access a directory of staff, but the link on that site was absent and included a dead link. As they tried to troubleshoot this difficulty, they found a link labeled FHS Art and became frustrated when the link brought them back to his original website.
  

Issues Identified

While FHS Art does include a contact page, the link lives hidden amongst the website’s pages. The page lives nested under the Home header, the Fairhaven High School Chapter of the National Arts Honor Society link, and nested under News and updates.

No users located this link.

Recommended Improvement

Simplifying and making the contact feature more prominent would be strongly recommended. Burying a contact link amongst other pages would not be ideal, and a contact link requires a priority for users. 

It’s also advisable that the Home link operates precisely like a home page instead of nesting links under the home page header. Most users do not expect pages hidden under this tab.

Developing a footer could solve this problem. Important links could contain valuable pages such as a contact page, privacy policy, and site map in the footer. 

Task 4

In this task, you’re a parent of an 8th grader who is looking for a comprehensive list featuring all art programs offered at Fairhaven High School.

Results

Two of the three users successfully located this page but with various difficulties.

• One user found the page immediately, as they accidentally stumbled on it during a prior task.
• Another user visited each FHS Art course until they realized the Home header included nested items. After that, they could successfully access the program of studies offered by Fairhaven High School.
• The third user clicked every page seeking this information but failed to locate the studies program. Instead, they returned to the NAHS page multiple times, despite not knowing what the NAHS abbreviation meant. The user decided that FHS offered no value and gave up the task. The user commented that they would think twice about sending their child to Fairhaven High School since the user could not locate the information.

Issues Identified

Again, the home header includes nested items that users cannot locate. The practice of having important information under the home header needs serious redesigning.  This task demonstrated that the website does not include multiple pathways to essential details.

Recommended Improvement

It might be beneficial for the website to include multiple ways to access important information. Various pathways to content allow users to correct mistakes if they are on the wrong pages.

Again, removing the links nested under the home header would be a top priority in redesigning FHSArt.net.

Task 5

In this task, you receive an email from an art teacher about an update about your child’s digital photography bokeh project. The email contains a link to FHSArt.net but does not link to the project. Seek the Bokeh project page and locate your child Evan’s project.

Results

100% of users completed this task, and 100% experienced a severe struggle to access this content.

• One user navigated to the page by visiting Photography under the Digital Art header and realizing no link was included on that page. They went back to the Digital Art header, advanced to the Digital Photography 1 subheading, and finally located the Bokeh Project page.
• Another user visited the digital photography page nested under the Digital Art heading. The user attempted to open the Bokeh Project button posted on the page, but the link was dead and did not open. After a few attempts, the user finally accessed the page nested in the Digital Photography 1 subheading.
• The final user visited many pages, including Ceramics, Media Arts, and Arts, until they landed on the Digital Art heading and located the Digital Photography 1 subheading. From there, it took some effort, but they eventually landed on the Bokeh Page Project. This user also could not locate their son “Evan’s” project.

Issues Identified

The navigation of FHSArt.net leaves users with an undesired experience. The header navigation proves to be too difficult to use. The Digital Art header opens links to the right. However, if users select Digital Photography, the menu extends to the left, covering options already revealed by the user. In addition, when users move to choose a page listed in this subheading, the menu collapses, leaving users to try multiple times until they can trick the site that their mouse is no longer moving.

This unpredictable situation confuses users and leaves users frustrated with the site’s design.

Another issue identified from this task includes the site relies too much on large bodies of text. For example, on this page, students’ artist statements are included in the body of work. However, the text is too condensed and does not include descriptions or headers. Users cannot determine what the text reads, who produced the artwork, and many didn’t realize the large blocks of text had student writing.

Recommended Improvement

Organizing the pages more effectively would streamline the navigation process, and removing the dropdown navigation would also improve the users’ experience. 

Introducing headlines and subheadings can alleviate text issues, provide clues to the user to what they are reading, and allow users to scan the website for information quickly. 

Conclusion

While users applaud the art department for showcasing student work, the site needs serious updating. The site requires a navigation overhaul, an improved information architecture, a simplified and consistent standard across pages, a welcoming homepage, and improved graphics. The FHS Art Department’s website can better serve information to the school community, students, and stakeholders by addressing these needs.

If you’re looking to develop a class website, please consider having people test the site first!