10
National Weather Service Weather Forecast Office Norman, OK Website Redesign Proposal Report 12/14/2015 Lindsay Boerman, Brian Creekmore, Myleigh Neill

National Weather Service Weather Forecast Office Norman ...€¦ · My team performed a usability test to provide your website, The National Weather Service for Norman Oklahoma with

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: National Weather Service Weather Forecast Office Norman ...€¦ · My team performed a usability test to provide your website, The National Weather Service for Norman Oklahoma with

National Weather Service Weather

Forecast Office Norman, OK

Website

Redesign Proposal Report

12/14/2015

Lindsay Boerman, Brian Creekmore, Myleigh Neill

Page 2: National Weather Service Weather Forecast Office Norman ...€¦ · My team performed a usability test to provide your website, The National Weather Service for Norman Oklahoma with

2

TABLE OF CONTENTS

Parts PAGE

Abstract ........................................................................................................................... 3

Introduction ..................................................................................................................... 3

Procedure .................................................................................................................... 3-5

Results ......................................................................................................................... 5-8

Discussion .................................................................................................................... 8-9

Conclusions ................................................................................................................ 9-10

Page 3: National Weather Service Weather Forecast Office Norman ...€¦ · My team performed a usability test to provide your website, The National Weather Service for Norman Oklahoma with

3

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 1st 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 19th

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 19th 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

Page 4: National Weather Service Weather Forecast Office Norman ...€¦ · My team performed a usability test to provide your website, The National Weather Service for Norman Oklahoma with

4

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

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

Figure 2 The Second Participant we used in our Usability Test

Page 5: National Weather Service Weather Forecast Office Norman ...€¦ · My team performed a usability test to provide your website, The National Weather Service for Norman Oklahoma with

5

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

Page 6: National Weather Service Weather Forecast Office Norman ...€¦ · My team performed a usability test to provide your website, The National Weather Service for Norman Oklahoma with

6

Figure 4: Warnings

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.

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

Scroll

Line

Use a Table

instead of

a list

Page 7: National Weather Service Weather Forecast Office Norman ...€¦ · My team performed a usability test to provide your website, The National Weather Service for Norman Oklahoma with

7

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 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 6: No tab illumination

Figure 7: Search bar format

Page 8: National Weather Service Weather Forecast Office Norman ...€¦ · My team performed a usability test to provide your website, The National Weather Service for Norman Oklahoma with

8

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

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

Figure 8: Forecast on a different website

Page 9: National Weather Service Weather Forecast Office Norman ...€¦ · My team performed a usability test to provide your website, The National Weather Service for Norman Oklahoma with

9

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 re-

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

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.

Figure 9 Homepage Re-Design Proposal

nice job on the redesign!
nice job on the redesign!
Page 10: National Weather Service Weather Forecast Office Norman ...€¦ · My team performed a usability test to provide your website, The National Weather Service for Norman Oklahoma with

10

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.