Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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).

share|improve this question
    
What do the times stand for? 13:00, 18:00 and 8:00? –  Kweamod May 13 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 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 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 at 8:06

2 Answers 2

up vote 7 down vote accepted

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):

digit

share|improve this answer
    
+1 , but as the OP said, I would add a distinciton between today and tomorrow in some way. –  Kweamod May 13 at 8:37
    
@Kweamod with a color or labeling, yeah –  alexeypegov May 13 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 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.

share|improve this answer
    
Thanks for the idea. I changed the fonts and I will add the bar. –  WoJ May 13 at 12:04

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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