All Posts in UX/UI

October 24, 2016 - No Comments!

One miiiiiillllion dollars

df_web_interim_v1_thamo-1

Working with an IBM fellow, we were able to make the case to work with/invest in TAHMO (http://tahmo.org/) to support their work developing agriculture and science education in underserved parts of the world. As a result we were able to share the weather data they collect to improve the forecast quality for Africa, as well as parts of the Caribbean and Central America. The funding paid for the installation and support of hundreds of weather stations in places that may have not otherwise had them.

df_web_interim_v1_thamo-2

 

December 23, 2014 - No Comments!

Let it Snow

snowcast5

What is this falling from the sky, is it rain?

Clarity comes in degrees. At Weather Underground we had received some user feedback that when it was snowing, there was some confusion in exactly what our forecast was saying would happen. Internally we estimate how much precipitation may come down, but those estimates (QPF, Quantitative Precipitation Forecasts) are all based on liquid precipitation and our UI expressed everything based on those forecasts. The issue was that we could say in words that there may be 2-4 inches of snow, but the numerical representation would still show the amount of liquid which might be .25" which gave the appearance of contradictory information. Snow is a challenge because there is not a good automated way to measure depth in the way rain can be. The National Weather Service handles it by manually measuring snowfall at it's locations, but those locations are too far apart for the granularity we need to work at.

After some discussions with our meteorological colleagues we came up with a reasonable system for estimating snow fall and accumulation throughout the day which is tremendously helpful compared to the daily accumulation totals normally used. The next challenge was integrating the new information into the UI in a way that clarified what was happening instead of having the new information add confusion.

The approach we took was a conditional hierarchy. If there was a chance of snow, that would override the area normally used to display rain in the UI. This allowed us to weave the information in when it was needed without requiring a separate area dedicated to a condition that for many places was useful for only small parts of the year, if at all. From our testing we found that in the case of snow, any amount of snow was more important to most people than any amount of rain, so the hierarchy matched up to people's expectations. The end result was the interface change was very small, and the additional information was very useful.

snowcast7

snowcast6

snowcast4

snowcast3

snowcast2

November 3, 2014 - No Comments!

Sketchy

sketchy

Sketch 3, first draft

Sketch 3 was introduced to me as a photoshop killer, which of course it is not. Once I got over the enthusiastic introduction, and accepted it as a new and different thing it seemed to be a bit easier to give it a chance.

To get an idea of what sketch was about I took on something familiar, reproducing the Weather Underground homepage, it made focusing on the tools and how they worked easy.

It has it's own logic for how it imagines things to be built, and while it makes sense and makes some things fast, sensible to edit in an iterative workflow, some generative tasks felt slower and clunky to me. It may be that I am so used to my Adobe workflow, shortcuts, etc so I will give it more time.

I had started to use Keynote here and there for quickie wireframes and medium fidelity mocks, and this has a similar feel with way more power.

I have a few side projects I can run though it to see how I feel after putting a few more miles on it.

 

sketchy2

Update

I was pretty grumpy when one of my first projects was unreadable and I lost some time, but with a tentative pardon I gave it another go. Once I gave it some traction on real site projects (multi-page, multi-option exploration) the tool really opened up.

Now I am that guy in the office evangelizing "oh sketch can automate that, oh sketch has a plugin for that"

October 26, 2014 - No Comments!

Just in time

PhotoTab

Contextual alerts

The bringing information to the top, or near the top of the hierarchy based on some relevant change of mode or condition.

In this case we wanted to provide some additional value to the forecast, to tell not just what is going to happen, but why. To tell weather's story with a little more lore.

The test was to see if an informational tab that focused on an upcoming severe weather event (ie lightning) added to the forecast area garnered attention and increased time on page or provided a bump to other content types featured in the tab (photos, informational blog posts).

Debating placement, integration into an existing section, an interstitial addition or a contextual addition. The interstitial was rejected because the city page is already very content dense, and our users have experienced a good amount of change so adding a new module with limited testing was not a good choice, and the temporary contextual module seemed too disruptive, sometimes there, sometimes not. Making it's transitory nature make sense would be a challenge, and volatile interfaces have not tested well with our audience. The addition of a tab into the forecast graph puts in where it makes sense, the use of color and icon can be used to refine it's place in the hierarchy, and can be a/b tested without being as disruptive to the normal experience as the other options.

October 16, 2014 - No Comments!

You are here

CrumbDrop2

Breadcrumb navigation pattern

Complex information can present interesting navigation challenges. The Weather Underground static radar maps merge multiple scale levels including a single site interface. The previous navigation did not have a clear way of navigating across levels.

radar_Orig


The Old Way

The previous region to region navigation is a single long list.

radar1


The New Way

The chosen solution is a hybrid breadcrumb trail, allowing users to see where they are, and at what scale level while making it easy to jump to the next location they want to view.

This slideshow requires JavaScript.