deckerst / aves

Aves is a gallery and metadata explorer app, built for Android with Flutter.
BSD 3-Clause "New" or "Revised" License
2.55k stars 96 forks source link

New arrangement of horizontal elements in the UI (gain screen space) #576

Open marcosilva85 opened 1 year ago

marcosilva85 commented 1 year ago

Is your feature request related to a problem? Please describe. I enabled the Overlay->Thumbnails feature of the viewer (somehow simulates the carousel in iOS?) and realized how cluttered the UI becomes specially when playing videos.

These UI elements make sense and are very useful to me, but it does not make sense that all of them have to be arranged horizontally as rows. Because of smartphones screen aspect-ratios there are usually empty black borders which are unused and could be excelent to display these UI elements vertically. The fastest way to understand this is to see the two screenshots I provide (current Aves, proposed change).

Describe the solution you'd like Would be enough to have an option to display the "Quick action buttons" vertically. Currently its too rigid, in its default horizontal row arrangement.

Additional context Current viewer in Aves: a-current Proposed change/option in Aves: a-proposed_option

sorry for my bad img editing skills, hope it helps ;)

other considerations: at top, the 1/4 * big buckbunny text could be moved "one-row" above so that the content is not with another extra "line" of the gray overlay on top. Not sure why it happens.

deckerst commented 1 year ago

Fair enough. It's not that easy though, because the layout already accommodates special cases, like integrating the image/video components of motion photos in the quick action row (cf screenshot (2)).

other considerations: at top, the 1/4 * big buckbunny text could be moved "one-row" above so that the content is not with another extra "line" of the gray overlay on top. Not sure why it happens.

I wonder how you got to this situation. When the overlay is displayed, it's supposed to show the Android status bar too (cf screenshot (1)). That's why there is space to accommodate it.

Screenshot_20230406_102822_Aves

marcosilva85 commented 1 year ago

Indeed, it does not seem to be straightforward. That's why I decided to think about it and to do some mockups for the "Motion/Live photos" UI elements, though I'm not a designer/UX, so take it in the way that someone is just trying to help figuring some possibilities for this.

Here are some possible placements: A - A Motion photo "switch" button close to the "play" button. oa1

B - A Motion photo "switch" button on the gray top bar. ob1

My rationale: In both options I present only one icon, so the switch between Photo/Motion would be using only a touch in the same area. I've thought of placing it on the left side, but for accessibility reasons (how we hold phones) settled with these two options showing the UI element on the right side. For option B: I noticed the gray zone on top isn't actually clickable at the moment, so maybe with an extra icon there the whole area could work as a toggle and in-fact an easier method to implement this?


An anecdotal story: first time I saw a Motion photo in Aves, it took me some time to understand those 2 pictures are the toggles between modes, and not some more pictures in an album. Still do happens to me some times, so I think a switch between modes helps here too and saves 1 space from used "unnecessarily".

Regarding "how I got the (1) situation" - I've now figured out its the new way Android 13 takes screenshots (in Google Pixel, at least) - it grabs only the App leaving out the Status bar icons", seems nothing wrong here then ;)


What are your thoughts @deckerst ?

marcosilva85 commented 1 year ago

Hi @deckerst, you've missed my latest comments, it has been a while so here's a friendly nudge.

deckerst commented 1 year ago

I haven't missed them. There are more complex layout cases, and I got lazy to explain them, sorry. I may revisit this someday but don't hold your breath.