New Website Design Overview

Layout

The National Weather Service rolled out the new weather.gov web site at the end of 2012 with a new layout and design approach. This provided an opportunity to review the whole AviationWeather layout and design and decide whether web pages and products could be presented in a better and easier to use way.

For the last decade, the AviationWeather web site was an offshoot of ADDS, the Aviation Digital Data Service. That part of the web site was considered separate and had distinct URLs and underlying code. Even though this worked for ADDS, it didn't for the web site as a whole. It was decided to leverage more of the ADDS database and less of the ADDS web code. This would allow the ADDS functionality to be available in other parts of the web site. With the rewrite, the distinction of ADDS is lessened but the web site is still powered under the covers by the ADDS data processing, image generation and database.

Consistent Page Layout

Another concern of users was the somewhat disorganized approach to the web design. It was clear there were many contributors to the web development and a lack of consistency plagues the user interaction. With the new design, the web pages are unified under a consistent layout. The way users obtain raw METAR and TAF data are now identical. The output of decoded data is the same whether it's a PIREP or TAF. The use of on page selectors is now consistent and allows users to interact with the data without having to hit the back button to request different data.

Each page has a specific layout.

  • Page Header - This is a standard header and comes from weather.gov. It includes the banner AVIATION WEATHER CENTER and links to NWS and NOAA web pages.
  • Navigation Bar - This includes links to other major pages as well as links to other important sites, search and navigation.
  • Page Content - This is the page specific content:
    • Title Bar - This gives a description of the page. Help for that page is accessible through the "INFO" link on the right side of the bar.
    • Links Bar - This will provide links to similar information and data.
    • Data Controls - These are control elements that allow the user to change the data displayed on the page. The control area, if large, will be displayed below the data.
    • Data Area - This is the data area where raw text and images are displayed
    • Data Links - This will have links to access static imagery and raw text. This will also have links to legends and other pertinent help.
  • Bottom Navigation Bar - This is a text based equivalent to what's on the Navigation Bar.
  • Footer - This has standard links and information designated as part of the weather.gov layout.

Simplified URLs

The new layout simplifies the URLs to the web site and makes them more intuitive. For example, all the METAR pages are under the "/metar" URL. If the users wants raw text METARs, they will use "/metar/data". If the user wants access to static plots, they can now go to "/metar/plot". If they want help, they can go to "/metar/help". The new pages are designed to coexist with the legacy web pages. This ensures the old URLs will still work. Old bookmarks won't break for the time being.

NOTE: Legacy pages will be deprecated in the future. Most legacy pages will remain active for up to a year. Other more desired functionality will be rolled into the new pages, if not already there

No Pop-ups

It was decided with the new site to eliminate pop-ups. Some pages on the old site used them and others didn't. But we found that pop-up windows really don't work well with tablets and other mobile devices. So all data now displays within the web page. With the 960 pixel wide users area, this is only a problem with some of the larger satellite images and SigWx charts. This also gives the added benefit of having the data and imagery better integrated into the site rather than being a separate entity.

URL Parameters

The old web site used to access data and images through hidden forms and wrappers. This has been eliminated in the new site. The reason is that this often breaks the URL chain. If you hit the back button, you get a nasty error that the "Document Expired". Also, it shows all the parameters in the address bar so that all pages can now be directly bookmarked.

The new URL parameters offer a level of customization not offered through the user interface. Any parameter displayed in the user interface has a URL equivalent. For example, for raw METARs, the "ids", "format", number of "hours", inclusion of "taf" can be controlled on the URL. Additional parameters not in the user interface can be added such as "date" for accessing archived data. All the URL parameters are detailed in the help pages.

Mobile Support

One benefit of the new weather.gov layout is it works better with mobile devices. This is not lost on the aviation community who are now likely to be carrying around iPads to support their flight. A concerted effort was made to make sure everything on the web site would work on an iPad or Android tablet. As a result, the use of larger buttons and spacing items so that they can easily and unambiguously selected was of primary concerned. Also, spacing in the layout was design to make scrolling within a web page easier on a tablet device.

GIS Displays

The interactive displays on the legacy web site all used Java. It's unlikely that Java will be supported on tablets, maybe never on iPads. Therefore, it was important to make sure the interactive features could be replicated on mobile devices. Javascript based APIs such as OpenLayers make this possible. Over the last year, each of the Java applets have been replaced with OpenLayers equivalents. Most of the applet functionality has been replaced as of the release of the new web site.

Some of the functionality embedded in the GIS displays are for mobile support. For example, hover is disabled by default since you can't hover on most tablets. Other design issues are a white bar to the left and right of the GIS display. This allows the user to not only zoom and pan in the OpenLayers area but also zoom and pan on the web page. Otherwise, pan and pinch zoom would only control the OpenLayers area and there would be no way to scroll down on the web page.

As mentioned above, eliminating pop-up windows, adding controls to web pages and links bars were all done with mobile support in mind. The idea is to make the user experience on the tablet as close to the experience on the desktop as possible.

OpenLayers GIS Displays

With the replacement of the Java applets with OpenLayers displays, it moves the AviationWeather web site into the OGC (Open Geospatial Consortium) world. The web site is now starting the leverage the ADDS database to output OGC compliant data. The new "Web Services" are developed not only for use with the AviationWeather web clients but also for other users of aviation data. The GIS displays use both WMS (Web Mapping Service) and GeoJSON data sources. The WMS is mostly used for maps but new "Tilecache" products will be available. The idea is to make sure all the aviation data can be imported into a GIS client.

The components of the GIS displays are:

  • Base Maps - This consists of two global background maps based on the NASA Blue Marble images. These are offered in a light and dark format. Google map backgrounds can be added but they come with labels and other text that clutters the display. The Blue Marble backgrounds give the effect of Google backgrounds without the clutter than would make interpreting weather data more difficult. A third option is a simple map with a white background.
  • Data Overlays - These are various data overlays or "layers". A single OpenLayers map can have several layers:
    • Satellite, Radar - Standard satellite and radar imagery. These are currently disabled waiting for an approved operational source to become available.
    • FIP, GTG, CVA, RAP model contours - Contoured data from these data sources are available as layers. These layers are still in development and will be added in the near future.
    • SIGMETs, G-AIRMET, CWAs - Areal polygon data for various types of advisories are available. These are interactive in that the text of the advisory or other descriptive data are available when the polygon is clicked.
    • METARs, TAFs, PIREPs - Point data are displayed as icons on the map. Each one is click-able for more information whether it's a raw METAR or decoded data.
    • Additional data - There are other sources of data such as airport locations and NavAids which are available as layers on some plots.
    Each of these either comes from a WMS server, provided as a static image imported directly into a layer or as GeoJSON output from the ADDS database.
  • Map Overlays - Each display has a simple map overlay displayed that shows continental, country and state boundaries. Three optional overlays are accessible in each display:
    • Highways - A global set of major highways which are displayed in orange or brown.
    • Top Jetroutes - These are the top jetroutes across the U.S. shown in cyan or light blue. They are labeled with their jetroute name.
    • FIRs/ARTCC Boundaries - This is a global map of FIR boundaries displayed in red. Over the U.S., these are high level ARTCC boundaries.
    • Additional Maps - Even though not on the web interface some displays offer maps such as "roads" - U.S., state and local roads, "counties" - U.S. counties, "runways" - runways for prominent airports. In the future, maps will include high and low level ARTCC sectors, arrival and departure sectors and STAR (Standard Terminal Arrival Routes).

Plot De-cluttering

The METAR and TAF displays use a priority scheme to remove lower priority sites at lower zoom levels. As the user zooms in, roughly twice the number of stations appear at each successive level. This ensures there isn't overlap in the station displays and also guarantees high priority airports will always display. A station density option appears on these GIS displays to adjust the priority level to display more stations.


Page loaded:  12:26 UTC  |   05:26 AM Pacific  |   06:26 AM Mountain  |   07:26 AM Central  |   08:26 AM Eastern

 

ADVISORIES

FORECASTS

FORECASTS

OBSERVATIONS

USER TOOLS

ABOUT US