Asset 4

Better Weather: Information Prioritization

The National Weather Service (www.weather.gov), while a robust and powerful tool, lacks in some usability heuristics (Neilsen Norman Group which other weather websites have paid attention to and addressed.

Namely, when a person comes to the site and types in their location, they want to see:

  1. Current temperature
  2. Current conditions
  3. Forecast for the next week

The current NWS local forecast page currently does not prioritize this information, and also does not reflect the search term used, which is confusing for the user, and does not follow convention.

The current NWS local forecast page. The extended forecast is well below the fold.
The current NWS local forecast page. The extended forecast is well below the fold.

I propose and implement the following changes below:

  1. Add a breadcrumb navigation which reflects the user's search term (Haverhill, MA)
  2. Move the current conditions up to have greatest priority
  3. Move the map up so the user has a secondary way of verifying their successful search term.
High-fidelity mockup reflecting changes to match convention and information prioritization.

In this mockup, I haven't yet found a place for News Headlines, and the rest of the auxiliary information available on that page; I would probably implement the News Headlines right above or next to Detailed Forecasts, and everything else as links below that.

MLSPIN Part 1: Carousels

Carousels are now a ubiquitous way to provide information, but there are some widely accepted conventions which are not user friendly. I'm applying some of the design principles regarding discoverability as discussed by the Nielsen Norman Group.

The current landing page for MLSPIN homes.
The current landing page for MLSPIN homes.

The large carousel for hero images is problematic:

Here are two solutions utilizing the illusion of continuity, as a stronger visual cue for more content:

Illusion of continuity using a fade-out gradient.
Sidescroll 1

Arrows would also be a strong visual indicator, if placed in a gutter and not on the image, to avoid possible contrast issues.

Arrows

Password Requirements

While trying to create an account for the zillionth time on a job application portal, I was prompted to create an account using a email address for my login, and to type a password twice.

While trying to create an account for the zillionth time on a job application portal, I was prompted to create an account using a email address for my login, and to type a password twice.

Initial login screen
Initial login screen
Error message with password requirements
Error message with password requirements

Suddenly, a litany of requirements for the password format pops up, only after I've tried to create a password.

I don't think there was any way I could have created a password that satisfied these requirements on the first try.

How can complex password qualifications be disclosed ahead of time?

Assuming I don't get to change the actual number of password requirements, even if it follows best practices, I mocked up some options below.

Full, normal disclosure.
Representative /skeumorphic disclosure.
Color coordination

In the end, the number of qualifications is still lengthy and takes up space.

According to the National Institute of Standards and Technology's guidelines, passwords should not be too long or complex. They suggest long phrases that are easy to remember.

Using best practices for password creation would improve the user experience by saving space on the page and time reading and comprehending the qualifications, while creating robust and hard to break passwords.

How about current practices, like inline validation, or an interactive info flag?

I love inline validation when it works, but it relies on the performance of the site. I've gone through forms multiple times with the same frustration and only experienced the in-line validation the second time.

I believe it's faster to disclose the qualifications visually in plaintext, and also not hidden behind a microinteraction like an info flag, which requires the user to take the hand off the keyboard and use the mouse.

Accept Cookies Button

I came across this button while browsing for Dota2 tournament videos on Gosugamers. 

Original Button
Original Button

A couple of thoughts struck me regarding the diction:

Approve The Cookies

This website uses cookies to improve your user experience

The title is somewhat authoritarian and imperative, and the copy is vague and uninformative. How does it improve my user experience?

Below are some revisions with a different approaches in the diction:

Option 1: Conversational
Option 1: Conversational
Option 2: Friendly
Option 2: Friendly
Option 3: Informative and Empowering
Option 3: Informative and Empowering

I think that an Accept Cookies button is good to have, and in this case, an improvement in the tone would greatly benefit this button.

There are actually very clear benefits for the user of this site to accept cookies - for example, it can remember the search terms I had entered last time, so I can pick up where I left off catching up in a tournament. Currently, this button doesn't help make that case to convince me to click on it!

Scroll to Top