Other weather websites

There are a lot of different ways we can present our website. Ensuring and good user experience and the website is accessible for all people is going to be super important. Below are a few example websites/apps displaying weather information.

Met Service

https://www.metservice.com/towns-cities/locations/dunedin/7-days

Pros:

• Simple and easy to look at layout
• Simple colour scheme
• In mobile view information is stacked nicely with important information at the top
  
  Cons:
• 40% of the page is taken up by non-relevant information on web view
• Temperature is not made obvious

OU Department of Physics Weather Station

https://www.otago.ac.nz/physics/energy-studies/weather-station

Pros:

• Has Webcam
• Clear Data presentation
• Shows update time
• Simple navigation
  
  Cons:
• Cluttered layout
• Poor responsiveness
• Outdated design
• Hard to read graph
• Lacks interactivity

Apple Weather

Pros:

• Sleek and modern
• Temperature, location high and lows very obvious
• Animations
• Consistent
  
  Cons:
• Information density
• Overcrowding

Weatherwatch

https://www.weatherwatch.co.nz/forecasts/Dunedin

Pros:

• Simple and easy to read
• Makes use of widgets
• Carousel prevents overloading of information on screen
  
  Cons:
• Poor responsiveness
• Ambiguous icons

Accessibility

Accessibility is about making sure our weather station website is easy for everyone to use, no matter their abilities. We're dedicated to designing a site that’s clear, easy to navigate, and fully inclusive. By focusing on accessibility, we ensure that everyone, including those with disabilities, can easily access and understand the weather information they need. This approach not only makes our site better for all users but also reflects our commitment to serving the entire community effectively. https://www.nngroup.com/articles/accessibility-inclusivity-study-guide/

Sketch ideas for frontend

User Experience

We should strive to ensure we provide an overall good user experience for people using our site. A good way to keep a check on this is to following Nielsen's 10 Heuristics consistently: \

• Visibility of system status
• Match between system and the real world
• User control and freedom
• Error prevention
• Recognition rather than recall
• Flexibility and efficiency of use
• Aesthetic and minimalist design
• Help users recognise, diagnose, and recover from errors
• Help and documentation
  https://www.nngroup.com/articles/ten-usability-heuristics/

Graphs

Choosing the right graph is crucial for effectively communicating weather data. Clear and accurate visualizations help users quickly understand complex information. Properly displayed data ensures that everyone can easily grasp what we aim to share. To ensure this we should try to adhere to some of the principal's of Edward Tufte: \

• The representation of numbers, as physically measured on the surface of the graph itself, should be directly proportional to the numerical quantities represented
• Clear, detailed and thorough labeling should be used to defeat graphical distortion and ambiguity.Write out explanations of the data on the graph itself. Label important events in the data.
• Show data variation, not design variation.
• In time-series displays of money, deflated and standardized units of monetary measurement are nearly always better than nominal units.
• The number of information carrying (variable) dimensions depicted should not exceed the number of dimensions in the data. Graphics must not quote data out of context.
  https://thedoublethink.com/tuftes-principles-for-visualizing-quantitative-information/

Line Charts

Best For: Temperature, Humidity, Air Pressure, Windspeed
Why: Ideal for showing trends over time

Bar Chart

Best For: Windspeed, Temperature Ranges
Why: Great for comparing values at specific times

Area Chart

Best For: Temperature, Humidity
Why: Highlights the volume of change over time

Gauge Chart

Best For: Current Windspeed, Air Pressure
Why: Provides an at-a-glance view of a current value

Wind Rose Chart

Best For: Wind Direction Distribution
Why: Simple way to show direction frequency

Dual-Axis Chart

Best For: Comparing two related metrics
Why: Useful for visualizing relationships, eg temperature vs humidity

Scatter Plot

Best For: Correlations
Why: Displays relationships between two variables

Technology Stack

We have decided to swap to NEXTJS to facilitate control of the back and front end on one server considerations and research made. Nextjs is built off of react which will allow us to keep this highly usable for our developers while still being able to use react for frontend development.