davidtakac / prognoza

Libre weather app with widgets and offline support
MIT License
374 stars 10 forks source link

Redesign #32

Open Donkey-Doug opened 1 year ago

Donkey-Doug commented 1 year ago

Screenshot_20221221-233837_Prognoza

The items are seemingly randomly placed. Perhaps we could brainstorm about relocating some things?

davidtakac commented 1 year ago

Hello! I'm always open for suggestions. What did you have in mind?

OddSobriquet commented 1 year ago

To be honest I like the way it is right now.

Donkey-Doug commented 1 year ago

Initial attempt:

git2

davidtakac commented 1 year ago

Thank you for the sketch! However, I think the information is too densely packed in that approach and not very scannable. The scannability issue is present in the current design as well - you have to read the "Feels like" and "Gentle breeze" labels to find out what they refer to. Not very good.

To address this, I was thinking of a more modern approach. Apple, for example, puts the accessory weather info (e.g. pressure, UV index, precipitation) into tiles: https://www.macrumors.com/guide/ios-15-weather-app/. I especially like their Wind tile, which contains a compass. It is instantly recognizable to mean "wind", and therefore very scannable.

Donkey-Doug commented 1 year ago

I like their tiles as well, but some of them seem quite useless. Take their UV tile for example:

ios-15-weather-app-modules_1_1

My suggestion is to replace the useless bar that shows the scale of the UV index and use a graph of UV index throughout the day instead. Here is a sketch:

git3

git4

davidtakac commented 1 year ago

Those tiles in the sketch look nice! I'll experiment a bit and see what looks best. I think I'll avoid graphs for now โ€“ they'll probably be added in a more confident way in the future. Something like the Yr.no app.

Donkey-Doug commented 1 year ago

Here is an app with a beautiful material you design for inspiration: https://play.google.com/store/apps/details?id=com.kokoschka.michael.weather

OddSobriquet commented 1 year ago

Not a fan, what I like about the app currently is how simple to navigate it is. Not a lot of bling bling just the info you need.

With the example of yours, it's way too overloaded and cluttered; my dislike towards material you aside.

davidtakac commented 1 year ago

I hear you, restraint is definitely needed in order to not clutter the UI. This is why I'm hesitant with adding new features and/or changing the design. Far too many weather apps on F-Droid just have way too much info to be scannable and nice to look at.

I haven't had a chance to play around with the tiles idea โ€“ work is getting in the way at the moment. But I definitely wish to add atmospheric pressure info, for example, and the current design is preventing it. The tiles (if kept simple!) could be a nice solution.

Wjxfi commented 1 year ago

I really liked his concept

davidtakac commented 7 months ago

Screenshot_20240209-152233 Screenshot_20240209-152237 @Donkey-Doug @OddSobriquet @Wjxfi What do you think? This is what I've been working on lately. The colors are not final and I still need to implement graphs.

Donkey-Doug commented 7 months ago

This is both very beautiful looking as well as a clear representation of the info.

One remark would be that the horizontal bars can be confusing. What is the min and max value? What does the green-blue bar represent and what does the darkblue bar represent that contains the green-blue bar?

Donkey-Doug commented 7 months ago

Maybe we should also get the location in there somewhere

davidtakac commented 7 months ago

Yes, this is sort of what the Dark Sky weather app had. I'll try to explain:

  1. In the screenshot, you can see that the min temp of the week is 2C, and the max is 18C.
  2. 2C is mapped to light blue, and 18C is mapped to light yellow.
  3. This gives us a gradient from light blue to light yellow for the entire week. It's sort of how the temperature feels. Light blue means relatively cold, light yellow means warm.
  4. Every day has its own temp range. Sat min temp is 10C and max is 18C.
  5. The week's temperature range is "cut" so it displays the day's temp range compared to the week.

This gives you at a glance information on the coldest and warmest days of the week. It tells you that Saturday will be the warmest, and that Wednesday will be the coldest.

davidtakac commented 7 months ago

Maybe we should also get the location in there somewhere

Yes, you are right, this will be added when I add the ability to change places. Currently I just hardcoded my coordinates for testing.

HonestAbe7 commented 7 months ago

How about a customizable widget where we can pick which items we want included? Then maybe be able to move the items up or down and left to right until we, the user, wants it? I have a vision of listing the items we want displayed like a checklist, with the ability to move the item's up or down with a preview window too. Weawow app kind of does this pretty good as an example.

davidtakac commented 7 months ago

Great suggestion, I've been thinking about this feature too. Could be useful because there's a lot of data and people may not want all of it. Or maybe they want to rearrange it.

OddSobriquet commented 7 months ago

Kinda like it. I know my mom would complain about the current temp being so small, that aside tho, i think a tad bigger wouldnt hurt. ๐Ÿ˜‚

The general layout and feel I like. Material 3 elements are well implemented and don't rob / waste too much space. Personally I'm more of a dark mode person which is why I like the dark slate colours of the old one better but the new colour is still fitting and well implemented.

As for the temperature bars: I'm not entirely sure whether I understand correctly. Basically the week's minimum is the left end, the week's maximum is the right end and the day's temperature range is then displayed within the week's range? If so I think this is a neat idea but I do think it needs something to make that clear to the user, that being said, not entirely sure how that could be achieved.

One thing that came to mind: I'm not entirely sure whether the colour ranges are standardized. In Germany the lightest shade of blue is negative and then the colours continue to darken and turn pink and finally white the lower the temps are, green, yellow, orange, red, black(?...I think..) for positive temps. I didn't find documents on the scale which temp receives which colour. Intuitively I would set the lightest shade of blue as the freezing point though. In your mockup it currently looks like blue might still be above freezing. (Probably just my OCD tho)

davidtakac commented 7 months ago

Thank you for such a detailed response, @OddSobriquet :)

i think a tad bigger wouldnt hurt.

Sure!

Personally I'm more of a dark mode person which is why I like the dark slate colours of the old one bette

The color palette will change based on the current weather. The blue palette in the screenshot is for sunny or partly cloudy weather. Clear night sky would be black, overcast will be gray-bluish, etc. I also plan to add an option to pull the color scheme from the device (Material You) and to give the option to always use one of the color schemes like Clear night.

As for the temperature bars: I'm not entirely sure whether I understand correctly.

Maybe my explanation was not that good. I will post an image describing this and then we can discuss further. Maybe there's a more intuitive solution.

One thing that came to mind: I'm not entirely sure whether the colour ranges are standardized

Not as far as I know. The current shades are copied from Apple Weather. There's also the ESRI color palette available here: https://www.esri.com/arcgis-blog/products/arcgis-pro/mapping/a-meaningful-temperature-palette/ Does that seem more intuitive to you?

davidtakac commented 7 months ago

Basically the week's minimum is the left end, the week's maximum is the right end and the day's temperature range is then displayed within the week's range?

Yes, this is it! I'll post an image of the drawing process so you can get a better feel.

OddSobriquet commented 7 months ago

Okay, so the temperature bars for the weekdays, neat idea, but as mentioned at the moment still not very intuitive, but to be fair, I too am lacking ideas to make it more intuitive.

I suspected the colour scheme is weather responsive which is perfectly fine :)

As for the temperature colours, I can't find any documents. You can check out Wendy's colour scale though, which is pretty much identical. Not very familiar with Fahrenheit which is why the esri document on first sight is like a completely different language to me :'D I'll have another look at it once I'm back at my desktop :)

davidtakac commented 7 months ago

As promised, here's an attempt to visualize the construction of the temperature bars. Please excuse my GIMP skills :smile:

explanation-cropped

Does that help? Maybe the confusing part are the temperatures at the edges of the overall bar. It could be more intuitive to place them at the edges of the cropped bars. That's how Dark Sky did it (although their bars were not colored):

image

devlocalhost commented 7 months ago

I know this isn't the final version, but I still prefer the old (current) design tbh

davidtakac commented 7 months ago

Hey @devlocalhost, thank you for the feedback. Could you tell me more about what you dislike in the new design?

devlocalhost commented 7 months ago

Hey @devlocalhost, thank you for the feedback. Could you tell me more about what you dislike in the new design?

I can't really tell what exactly I dislike. Maybe the colors?

It's too early to judge, but I prefer the old design. I like the font and the placement of details, I like the lists below the weather

davidtakac commented 7 months ago

Dislikes new colors, likes old font

The font and colors will likely change before the first release. I just threw something together for this first demo to get a feel of the redesign. I could play around to see how the old font looks in the redesign.

Likes the old placement of details

I see, this redesign would move the details below the hourly and daily forecast. Would you like it more if you could rearrange the detail tiles to be underneath the now forecast? You could also remove the tiles you don't need.

I like the lists below the weather

Do you mean the vertical list of future hours? The only information the redesign dropped in the future hours is the textual representation of each hour's weather icon (Thunderstorm, Overcast, Clear sky, etc.) Do you miss that?

When I added new data, I needed a way to keep the forecast screen compact. Future hours took up a large chunk of vertical space, so I removed the textual representation to make them fit into a horizontal list instead.

devlocalhost commented 7 months ago

Would you like it more if you could rearrange the detail tiles to be underneath the now forecast?

I don't understand. Isn't that the default, what you showed?

Do you mean the vertical list of future hours

Yes

davidtakac commented 7 months ago

No, I meant the option to put the detail tiles of the second screenshot (Precipitation, UV Index, Pressure etc.) between the Now and Hourly forecast in the first screenshot.

OddSobriquet commented 7 months ago

I can see what he means, I too am not exactly as person of change and really like the current design but the new one is definitely something I could grow to like. My opinion on the colours you know but as said before this is something I'm not gonna go too strong against because the new one clearly is functional and makes a ton of sense.

Would you like it more if you could rearrange the detail tiles to be underneath the now forecast? You could also remove the tiles you don't need.

Making the modules rearrangeable would be a feat not gonna lie. Your decision if you wanna take that effort or not. Great idea but if it's truly necessary.... Your decision :)

Sikeen commented 7 months ago

Gonna start by saying, love the new design on the first screenshot. Especially the temperature sliders, they're intuitive on my opinion, but i do realize i may be the odd one out.

But as said by others i also think the ui & font is a bit too small, especially when only at a glance.

I feel like the weather icon on Monday with the 39% change of precipitation should be a dark cloud, instead of white though. Maybe like 25 or 30 would be the threshold idunno.

I personally don't really like the tiles, they just clinch with what i am used to seeing, so๐Ÿคท But I'm pretty sure i would get used to them. Though i feel like some of them needs some love, fx "sunset", "feels like" & "visibility" are quite minimalistic & empty, could maybe be improved by a bigger font, but i still think they would be lacking in some sense. I think maybe more information, smaller tiles or a combination of some tiles(don't know which ones though) could make it seem less empty, but i don't know for sure. But one suggestion is that the "feels like" tile, could also display the current temperature, alongside the "feels like" temperature, that way you don't have to scroll up to see the increase in temperature (i also use the "feels like" temperature to get a feel for the weather and wind).

and also a dark mode, but that has already been said.

overall really excited to see/use the product of our squabbling ๐Ÿ˜„

davidtakac commented 7 months ago

Glad to hear you generally like the direction ๐Ÿ˜„

But as said by others i also think the ui & font is a bit too small, especially when only at a glance.

Noted. I increased the font size since then, it's looking better now.

I feel like the weather icon on Monday with the 39% change of precipitation should be a dark cloud, instead of white though. Maybe like 25 or 30 would be the threshold idunno.

The darker cloud actually has raindrops underneath it that are invisible because of the background ๐Ÿ˜„ Icon color will not depend on PoP. These are just the icons from the old design that I used to test everything out. I plan to make custom ones that are better suited for Open-Meteo.

But one suggestion is that the "feels like" tile, could also display the current temperature

I like this! I'll add it.

"sunset" & "visibility" are quite minimalistic & empty

Yes, you're right. There's just not that much info to show there tbh. I played around with a sort of sun path graph for sunrise, but couldn't get it to work. If we figure out some useful info to display, we can add it.

and also a dark mode, but that has already been said.

In the works as we speak :)

Sikeen commented 7 months ago

Icon color will not depend on PoP.

Oh, what is it Then?

I played around with a sort of sun path graph for sunrise

That would be cool if it could be done!.. if a little frivolous๐Ÿ˜„

and I'll be sure to send a message if I find something more

davidtakac commented 6 months ago

Hey guys. I just published the redesign on https://github.com/davidtakac/bura. It's a complete rewrite and all further development will happen there. Give it a try, there's a 1.0.0 build in the Releases section. I'll apply for F-Droid inclusion soon, too.