National Weather Service Weather Forecast Office Norman, OK Website Redesign Proposal Report 12/14/2015 Lindsay Boerman, Brian Creekmore, Myleigh Neill
TABLE OF CONTENTS Parts PAGE Abstract... 3 Introduction... 3 Procedure... 3-5 Results... 5-8 Discussion... 8-9 Conclusions... 9-10 2
1. Abstract My team performed a usability test to provide your website, The National Weather Service for Norman Oklahoma with ideas on how to improve the ease of use by exposing flaws in the websites design. The test showed that navigating to the weekly forecast, local radar, and warnings pages proved to be time consuming to the participant. The participant was also confused by the raw data of the warnings page and it was hard for the participant to disseminate the information to read out if there was a warning for their local region. The following report will describe in detail how these flaws occurred and what my team will propose for a website re-design to fix them. 2. Introduction The usability test followed a process described in our memo from December 1 st and included a participant following a specific script that tested the functionality of the weekly forecast, radar, and warnings pages. A usability test as we described in our Website Re-design Proposal from November 19 th is used to determine qualitatively through testing a small group of participants how the website functions with a scripted task to complete on your website. The test isn t about quantitative statistics but how easily the users can navigate the website to complete a specific task. The tests were done to expose flaws in the way the participants navigated to the forecast, radar, and warnings pages and were done in a way that we could see what the participant sees and what they click as they tried to accomplish navigating to these pages. My team has looked at the website as we prepared our Website Re-design Proposal from November 19 th and found flaws that we predicted would be illuminated with the two usability tests we performed. The flaws that we predicted in the proposal were a complicated navigation bar, no tab illumination that let the participant know which page they were on, pertinent information displayed below the scroll line causing the participant to scroll down, the texts of the temperatures being too small, and information being confusing. 3. Procedure Before beginning the process, my team and I set up a camera and microphone to document the usability test. We then chose participants that varied in their familiarity with your website. The first participant we used was a student named Kate, shown in Figure 1. Kate is a user who frequently uses her phone to check the weather and rarely checks your website. She also likes to check your website if there are active storms in the area. Figure 1 The First Participant we used in our Usability Test 3
The second participant we used is a student named Alex, shown in Figure 2. He gets on your website weekly to check the weather. He is from a technical background as he is an aspiring engineer. He likes to use your website to check the radar and other technical functions of your website Figure 2 The Second Participant we used in our Usability Test The contrast in the participants background with participant 1 being less familiar with your website and the more familiar participant 2 helped our team think about the direction we would like to re-design your website. We then briefed both participants about what they were going to be doing for us, and assured them we were testing the design of the website and not their abilities to use the site. With consent from them we continued with our script. We asked basic questions about their lifestyle, specifically what their occupation is and how much time they spend on the internet daily. We then began the actual test of the website. Homepage Tour We asked both participants to navigate through the homepage voicing their thoughts but without clicking on anything. We wanted to know what they thought looked good or bad, and what caught their eye. The first participant thought it was a decent design, but she would use the search bar to navigate through the site instead of using the tabs. The second participant was more familiar with the website having used it to check the weather multiple times. The second participant gave an explanation on what each tab did on the homepage. Scenario 1 We then asked our participants to complete a series of tasks based off of three scenarios we gave them. The first scenario asked each participant to find the current and future forecast for the Norman area as well as read out loud if there was going to be a chance of rain. Our first participant began navigating the homepage but had problems when trying to find the correct tab. She clicked on the local weather tab and it brought her to the Oklahoma City forecast, not the Norman area forecast. The process she talked through verbally made logical sense, but she encountered frequent U-turns throughout the site having to use the back feature to return to a previous page. Our first participant took three minutes to find the forecast page. The second participant clicked on the tab that required him to enter in his city and state abbreviations which was the correct method to find the forecast. He navigated correctly to the forecast page in little over a minute. The contrast between the participants time to reach the forecast page was 4
expected because the homepage had a complex navigation bar and only an experienced participant would be able to find it immediately. Scenario 2 In scenario 2 we asked our participants to find the radar page associated with the Norman area. The first participant clicked on the Current Hazards tab, but it brought up the wrong page. The first participant had to re-navigate back to the homepage by eventually hitting the back button on the browser. The first participant then scrolled toward the bottom of the homepage and clicked on the radar and imagery tab which was correct. The first participant took eleven minutes to accomplish finding the radar page. The second participant took time to scroll down toward the bottom of the home page to click the right tab and he took about a minute since he had previous experience. Scenario 3 The final scenario we had our participants try to accomplish was to find the warnings page for their local region. The first participant clicked on the radar page as an initial step to try to navigate to the warnings page but was unsuccessful. The first participant had to return to the homepage several time before scrolling down and finding the correct tab. The first participant took over seven minutes to navigate to the warnings page and then had trouble finding the Norman regions part of the data. The second participant took over two minutes and had to scroll down to find the correct tab. The second participant had trouble reading the data to disseminate which warnings pertained to Norman Oklahoma. The first and second participant stated that they would have liked this information in a table to speed up the process of finding a warning for their area. Final Thoughts After our participants had completed our test of your website we asked them what they would change and what the major problems they encountered were. We concluded from their thoughts that condensing the numerous tabs on the left side of the homepage and keeping the format of the site consistent are the first things to be taken care of as well as making the current forecast appear on the homepage. 4. Results Major problem 1: The complicated navigation bar The navigation bar on the left side of the screen shown in Figure 3 caused several problems in navigating the NWS website. The overcrowded navigation Figure 3: Navigation bar 5
bar caused Participant 1 to miss the tab for the radar page because she could not scan through the options efficiently. Participant 1 told our team that it looked professional at first, but now that I ve tried to use it, it s just complicated. In addition, participant 1 later became confused when the navigation bar changed and she could no longer find the home tab. Our team believes that it would be beneficial to redesign the navigation of the website to make it more scannable. Major problem 2: Warnings tab The warnings tab is displayed below the scroll line as shown in Figure 4, which caused participant 1 not to notice it at first due to trying to find it on the part of the page she had in front of her. After searching around for a few moments, she began scrolling down and said Oh, is it this? Our team believes that it would be beneficial to the website to include pertinent information above the scroll line, so that users will be able to locate it faster. Scroll Line Figure 4: Warnings Major problem 3: Warnings data was displayed in a difficult to read manner causing frustration The warnings data was displayed in a difficult to read manner as shown in Figure 5, causing frustration to the participants when they were asked to check if there were any warnings for their area. The warnings page could definitely be organized better noted our second participant. Our team believes that improving the scannability of the warnings page through a table will enhance the user s ability to locate a specific warning for their area and to understand the information that the warning is presenting. Figure 5: Warnings data Use a Table instead of a list 6
Minor problem 1: No tab illumination telling the participant where they were The first minor problem shown in Figure 6 was that there was no tab illumination telling the user where they were on the website. Participant 1 was quoted as saying Wait, how do I get back? when she wanted Figure 6: No tab illumination to get back to the home page but could not tell where she was. Our team believes that it would be beneficial to add tab illumination to the website in order to give users a better idea of their location on the website, and also how to maneuver around it. Minor problem 2: Search bar format The search bar on the NWS website shown in Figure 7 will not recognize a town unless it is typed in a specific format, with correct capital letters and a comma in between the city and state. The correct format for Norman would be Norman, OK. When participant 1 searched for Norman using the format norman ok, the webpage resulted in an error message. She took this to mean that there was no forecast for Norman, and was quoted, My town doesn t exist well that s bad. Our team proposes that the search bar format be modified to accept several forms of notation for the City, State search so that the chances of finding a forecast on the first search will increase. Figure 7: Search bar format 7
Minor problem 3: The local forecast is on a different website Our second participant, was able to correctly enter in Norman, OK in the search bar. However, when the forecast was displayed as shown in Figure 8, it left him confused. Did it take me to a different page? What website am I on right Figure 8: Forecast on a different website now? he asked. This told our team that the NWS Norman website would benefit from having the local 7-day forecast displayed directly on their webpage, rather than redirecting to the main NWS NOAA site for the local forecast. 5. Discussion Our results have shown that there are several aspects of the website that could use some tweaking to make it more user-friendly. A few of the most common errors were that the overall navigation of the site was confusing to participants, the search bar did not always work, and data was not displayed in an easy-to-understand way on the warnings page of the site. These errors are the same ones we predicted in our introduction. The first problem that will be fixed is the complicated navigation of the site. Solving this problem will allow users to navigate smoothly around the site and it will reduce frustration when users click on a page and don t understand how to get back to where they were before. A quick fix to this problem would be to recreate the left-hand side navigation bar to look more scannable, and rename a few of the links to better reflect what is shown on the linked page. This solution will tweak the website to look better and feel more efficient to users while not taking up too much time to fix. A long-term solution to this problem would be to completely rewire the navigation bar to link to expected pages, remain the same throughout the entire website rather than changing depending on the page the user is on, illuminate tabs showing what page the user is on, rename links, and re-design to look more scannable. These changes would take much more time but would provide a more in-depth solution to the problem. The second problem that will be fixed is pertinent information being displayed below the scroll line. The information on immediate warnings is currently displayed below the scroll line, which makes it difficult for users to find, especially if in a rushed situation like someone looking for a warning would find themselves in. Solving this problem would allow rushed and even panicked users to find warnings for 8
their area quickly and efficiently. A quick fix to this problem would be to simply move the warnings tab closer to the top of the page. This would allow users to find it easier by not needing to scroll down to see it. A long-term fix to this problem would be to not only move the warnings area to a more noticeable position, but also redesign the area to stand out to users. With the current map it is difficult to tell if there are any warnings in certain areas and it takes a longer period of time to understand the map. It is especially unclear if there are no warnings in the area providing the user with no information. A redesign of the map and a reposition of the warnings area would allow users to better understand and find the warnings they are looking for. The third problem that will be fixed is the way the warnings data is displayed in text form. Currently, the warning data is listed in block text and all caps, which makes it difficult to read and understand. Although this text form is used to feed the information out into the public over automated radio and TV messages, the technology has advanced far enough to where using this text form on the NWS website is not necessary. Solving this problem would allow users to read and understand the warnings easier. A quick fix to this problem would be to make the text on the warnings page more scannable with different fonts, sizes, and color. This fix would allow users to scan through the warnings and pick out what is most important to them more quickly. A long-term fix to this problem would be to re-design the warnings page so that each county is separated and users can search for warnings in their specific county instead of scrolling through each and every warning to find one that applies to them. Changing the font, sizes and colors of the webpage would also help in the long run to make the page more scannable. 6. Conclusions My team has accomplished finding three main problems in the course of one usability test including a complicated navigation bar, warnings tab below view of the user, and warnings data too difficult to understand. My team has developed a prototype of the homepage re-design shown below in Figure 9 that will fix the complicated navigation bar and the warnings tab below scroll line of the user. Figure 9 Homepage Re-Design Proposal The forecast has also been moved to the homepage to allow your users instant access to the local weather. The few changes provide your users in the future a reduced time that they will have to spend on the website which caused frustration in our participants. 9
Our participants needed to spend an average of four minutes and forty one seconds attempting a task and with our re-design we have reduced that time to less than a minute. The less time it takes to accomplish a task the more likely the user will return to the website which will mean more activity and revenue for your website. Usability tests should be performed each month and are a vital part of making your website successful because they take into consideration how an average user actually accomplishes tasks on your website. My team would like to conduct a monthly usability test and make changes based on these tests to accomplish an overall better experience for your users. 10