I am coding a personal dashboard which includes, among others, weather forecast. I have a hard time optimizing the structure of the weather forecast. The constraint I have is that the time, temperature and weather icon must be in a grid (placements, distances, fonts etc. are configurable, the grid is currently 3x3 but this is adjustable as well).

enter image description here

The section I want to improve is at the right of 6°. Since it will be used in a home environment (including children) I would like it to be easily readable. The part which annoys me most is the clash between the time and the temperature (it is not immediately obvious which one is which).

EDIT: After much reorganization, I ended up with

enter image description here

  • What do the times stand for? 13:00, 18:00 and 8:00? – Kweamod May 13 '14 at 7:55
  • My design is even worse than I thought if this is not clear :) The times are fixed (8, 13 and 18) and the next three are shown (8:00 above is for tomorrow. If it was now 6:30 then the times shown would be 8, 13 and 18. If it was now 14:30, the times would be 18, 8, 13 -- this is basically a 24 hours forecast for fixed hours). The second row is for the corresponding temperatures and the third one for the "physical" weather (sunny, rainy, etc.)) – WoJ May 13 '14 at 7:59
  • Ah ok! Maybe adding the corresponding day would clearify that. E.g. Mon 13:00, Mon 18:00, Tue 8:00. And maybe putting the icons in the middle and the temperatures at the bottom will seperate time and degrees better. – Kweamod May 13 '14 at 8:03
  • I will add a border between "today's hours" and "tomorrow's hours" for clarity. Since we plan for only 2 days ahead all information is either today or tomorrow. I am more annoyed by the lack of distinction between hours and temperatures – WoJ May 13 '14 at 8:06

Try to play with icons position and ask any designer to work with colors and shapes, it may greatly improve perception of this block, something like this (tuned layout and shapes a bit):


  • +1 , but as the OP said, I would add a distinciton between today and tomorrow in some way. – Kweamod May 13 '14 at 8:37
  • @Kweamod with a color or labeling, yeah – alexeypegov May 13 '14 at 8:39
  • Changing the order of the elements helps a lot. Thanks for taking the time to redraw the image, it is very clear. – WoJ May 13 '14 at 12:04

I'd use different fonts for hours and temperatures since it's not the same kind of information. If not needed, you could skip the ":00" since it's never going to be anything else than ":00". Just replace it with "h" to remember you're reading hours here.

I'd put the icons on top of temperatures too for 2 reasons:

  • IMHO it's better to end with the more precise details and start with the more global ones
  • When looking for the weather forecast on TV, you first have the sky conditions and then the temperatures

You could add an horizontal heavy line between hours and the datas and a thin vertical line to cut your days. It would be a visual clue to seperate days.

  • Thanks for the idea. I changed the fonts and I will add the bar. – WoJ May 13 '14 at 12:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for?Browse other questions tagged or ask your own question.