# Presentation: 511662

- Paxton/Marine Web

## Future Marine 

- Charlie Paxton
- National Weather Service
- Tampa Bay Area, Florida

- Paxton/Marine Web

## This is a great opportunity!

- Collectively, we have the knowledge to envision the future and the resources to make it come true.

- Paxton/Marine Web

## Where do we start?

- Who are we doing this for?

- Paxton/Marine Web

## Who is our audience?

- Mariners

- Paxton/Marine Web

## Who is our audience?Pleasure Boaters

- Paxton/Marine Web

## Who is our audience?Commercial Sipping

- Paxton/Marine Web

## Who is our audience?

- Paxton/Marine Web

## Who is our audience?Cruise Ships and Passengers

- Paxton/Marine Web

## Who is our audience?Fishing Industry

- Paxton/Marine Web

## Who is our audience?Water Sports Enthusiasts

- Who is our audience?Water Sports Enthusiasts

- Sail Boarders
- Kayakers
- Swimmers
- Surfers

- Paxton/Marine Web

## Dude!

- Paxton/Marine Web

## What are they looking for?

- One stop shopping
- Easy navigation
- Simple detail
- Easy to interpret

- Paxton/Marine Web

## What are our goals?

- Complementary text and graphics.
- To show what is important!

- Paxton/Marine Web

## What is important to Marine interests?

- Marine Advisories, Statements, Warnings
- SCEC
- SCA
- Gale
- NOW
- MWS
- SMW

**!**

- Paxton/Marine Web

## What is important to Marine interests?

- Observations
- Buoy
- CMAN
- Land based
- Wind
- Seas
- Weather

- Paxton/Marine Web

## What is important to Marine interests?

- Graphical Forecasts
- Wind
- Wave
- Weather

- Paxton/Marine Web

## What is important to Marine interests?

- Web Page with easy navigation

- Paxton/Marine Web

## What is important to Marine interests?

- Table or bullet form

- Easily readable Text

- Flags indicate SCEC, SCA, GALE, etc

- Wind direction shown as arrow

- Weather icons

- Paxton/Marine Web

## What else is important to Marine interests?

- Paxton/Marine Web

## What else is important to Marine interests?

- Paxton/Marine Web

- What else is important to Marine interests?

- Paxton/Marine Web

## What else is important to Marine interests?

- Paxton/Marine Web

## How can we assemble all this into a neat slick package that’s easy to navigate one stop browsing?

- Paxton/Marine Web

## The magic of       Flash!

- The magic of       **Flash!**

- Professional high end vector graphics with:
- Animation
- Sound
- Low bandwidth for fast downloads

- Paxton/Marine Web

## How it’s done:

- A Flash generator template is developed and installed on a regional server
- WFO’s generate component products using common names
- The Flash generator calls those files and incorporates them into a web file.

- Paxton/Marine Web

## Components of the pages....

- Paxton/Marine Web

## Building upon success

-  "We have taken your hard work and great ideas and what you have beensuccessful in, and we took it, built upon it and incorporated it all into a universal marine weather page."

- Paxton/Marine Web

## Page Components: Hazards

- Paxton/Marine Web

## Page Components:Observations

- Paxton/Marine Web

## Page Components:GFE Graphics

- Paxton/Marine Web

## Page Components:Forecast Table

- Paxton/Marine Web

## Page Components:Navigation to other sites

**Clickable navigation**

- Paxton/Marine Web

## Specialized help menus Show Beaufort scale images of what various sea wind and weather combinations look like. 

**Wind speed 48-55 kt, average 52 kt**
- Swell **Height (ft) 22**
**Period (set) 9**
**Sea Criterion: **Very high waves with long overhanging crests. The resulting foam, in great patches, is blown in dense white streaks along the direction of the wind. On the whole, the surface of the sea takes on a white appearance. The tumbling of the sea becomes heavy and shocklike. Visibility affected.

- Paxton/Marine Web

## View Page in Browser

- Paxton/Marine Web

- Paxton/Marine Web

- Paxton/Marine Web

## Some Comments on the Page...

- Paxton/Marine Web

## Screen Size

- Full screen width on a 600x800 display.
- Vertical length kept as short as possible
- No Scrolling for important information
- Watch, warning advisory
- Observations
- Graphical and text forecasts.
- Current usability studies indicate users have grown accustomed to scrolling down
- This does not hold true with horizontal scrolling, thus the page width was kept within the screen.

- Paxton/Marine Web

## Navigation:

- Multiple navigation methods for almost every  piece of information.
- The Hazards map links to a page that displays all hazard information about that zone.
- The observation map links to the web page that corresponds to that site (NDBC, PORTS, Mesonet, etc.), thus tying together several different networks into one page.

- Paxton/Marine Web

## Colors

- The soft green and tan page colors give a professional look, while not drawing any attention away from the weather information.
- Usability studies show that users first ignore the banner, and work their focus outward from the center.
- Therefore, the person's eyes will be drawn to the current advisories map --  exactly where we want them during a weather situation.

- Paxton/Marine Web

## Colors

- The background colors will probably be changed, along with the 'look' of the page at least once a year.
- It is a bigger challenge to make sure our pages stay up with the times, and that means not resting on a single look for too long.
- Most usability studies suggest 2 to 3 times per year

- Paxton/Marine Web

## Other Features

- Printable version to take on board.
- Options include:
- html page
- plug-in such as Flash
- The Flash method renders a much nicer page.
- About 5% may not have the plug-in – but it’s free.

- Paxton/Marine Web

## A Work in progress...

- Develop a specific 256 color pallet to maximize the look of the page.
- Getting a copy of Generator to make png files with slick overlays. $1000
- Developing the actual page to list hazards for a zone. This will be done using a scripting lang. called PHP. This will probably be the easiest thing to do.

- Paxton/Marine Web

## Tides (in progress)

- Building tide information into a mySQL database.
- Writing a routine to ingest buoy and cman data into mySQL.

- Paxton/Marine Web

## Professionalism

- Professionalism is also important for another reason -- trust.
- The user experience is greatly affected by the IMPRESSION of professionalism, whether or not it actually exists.

- Paxton/Marine Web

## Professionalism

- If the page looks good, they instill greater trust in the information presented, and in the company represented.
- A good example of this is Amazon.com, which  was a very small company but gave a much different impression through its presentation on the Internet.

- Paxton/Marine Web

## Benefits

- These ideas are well-thought out.
- This is one complete page to accommodate the customer, everyday.
- This page has been tested by the customers - this is what they wanted, asked for, and liked.

- Paxton/Marine Web

## More Benefits

- It's a one-stop shop.
- It's professional.
- Graphics are media ready

- Paxton/Marine Web

## Tip of the...

- Template useable for:
- Public
- Fire Weather
- Etc.

- Paxton/Marine Web

## The Future	

- Personalize the product producers
- Web Casts
- Office Cams
- Beach Cams
- PDA Products
- VTIS Products

- Paxton/Marine Web

## Final Note:

- With diligence and products that connect to our users, we can avert disasters such as this.

- Paxton/Marine Web

## Over and out...

- Paxton/Marine Web