[Discussion]: Request to enhance the design of the ContributionsFragment to make more images visible at once

ShashwatKedia commented 7 months ago

What is the user problem or growth opportunity you want to see solved?

Currently, the ContributionsFragment can show only 2-3 images at once and the user has to scroll a lot to see their past contributions (since one full scroll means only 2-3 new images will be visible). I would recommend enhancing the ContributionsFragment, by showing more images in a grid format. This will increase the visibility of images and drastically reduce the amount of scrolling the user needs to do to see their past contributions.

How do you know that this problem exists today? Why is this important?

I have experienced this issue myself and found it a bit frustrating to scroll so much to view my contributions. It's important as it will improve the user experience of the ContributionsFragment, which is the first fragment visible (mostly) when the user opens the app.

Who will benefit from it?

The Commons app users will benefit from this.

Anything else you would like to add?

I've created a mockup of what I think could be a better design and make more images visible at a time. Suggestions or any entirely different design/idea are more than welcome :)

       Light mode:                          Dark mode:

rohit9625 commented 7 months ago

It looks pretty nice and justify the need for a new design 👍

RitikaPahwa4444 commented 7 months ago

I'm not sure if we're completely removing the buttons. Even if we move the pause, resume, failed buttons to a completely different screen, there is a Wikipedia icon that appears for some of the contributions for wiki articles that require images. Would become cluttered imo.

ShashwatKedia commented 7 months ago

I'm not sure if we're completely removing the buttons. Even if we move the pause, resume, failed buttons to a completely different screen, there is a Wikipedia icon that appears for some of the contributions for wiki articles that require images. Would become cluttered imo.

Um, I do not propose to remove any buttons, this mockup is when the uploads have already been completed. The Wikipedia icon would still be there (though it wasn't depicted here because these images are not used in any article). I just suggest to show more images on the screen, irrespective of whether we move the pending uploads to a different screen or not :)

kanahia1 commented 7 months ago

I also think overall design needs to be revamped. But it should be built over proper justification and analysis.

Since UX design process is based upon - Assess -> Design -> Build -> Do it again until you can provide best possible experience to the users.

Also we may need to conduct some kind of surveys, interviews (if required) for understanding users needs. Since we can't build the design just based upon our thoughts as it could affect other users. And later on we may need to A/B testing for testing better design. Will we be able to get volunteers for it or we can even do it from github contributors ?

shashankiitbhu commented 7 months ago

@kanahia1 yes exactly, it would be great if we could take inputs from a larger set of reviewers and actual app users for formulating a better UX

RitikaPahwa4444 commented 7 months ago

Um, I do not propose to remove any buttons, this mockup is when the uploads have already been completed. The Wikipedia icon would still be there (though it wasn't depicted here because these images are not used in any article). I just suggest to show more images on the screen, irrespective of whether we move the pending uploads to a different screen or not :)

My concern is for the smaller devices. I still feel adding those small buttons will make the design cluttered.

Now, I'm curious to know how far do users scroll through and for what reasons🙂 Let's say for users with over 10k uploads, one reason could be to check if all contributions got uploaded or not. Any other thoughts on this?

rohit9625 commented 7 months ago

Um, I do not propose to remove any buttons, this mockup is when the uploads have already been completed. The Wikipedia icon would still be there (though it wasn't depicted here because these images are not used in any article). I just suggest to show more images on the screen, irrespective of whether we move the pending uploads to a different screen or not :)

My concern is for the smaller devices. I still feel adding those small buttons will make the design cluttered.

Now, I'm curious to know how far do users scroll through and for what reasons🙂 Let's say for users with over 10k uploads, one reason could be to check if all contributions got uploaded or not. Any other thoughts on this?

Yeah right. For the small screen, it would be better to not design a grid 👍

ShashwatKedia commented 7 months ago

My concern is for the smaller devices. I still feel adding those small buttons will make the design cluttered.

Yeah, that could be a potential problem. Maybe we can remove the bottom tag of the username, to make it more spacious, since the contributions belong to the user anyways

Now, I'm curious to know how far do users scroll through and for what reasons🙂 Let's say for users with over 10k uploads, one reason could be to check if all contributions got uploaded or not. Any other thoughts on this?

Yeah, to see if their contributions got uploaded or not, the user can scroll the list. Another thing for which I scroll is to see if any of my images got featured in a Wiki article (didn't have to luck of getting one featured, so don't know if I will get a notification or not, so I see myself). Users can also scroll to find any particular contribution they uploaded (possibly for changes or deletion). Though this may be rare.

neeldoshii commented 7 months ago

Now, I'm curious to know how far do users scroll through and for what reasons🙂 Let's say for users with over 10k uploads, one reason could be to check if all contributions got uploaded or not. Any other thoughts on this?

Proposed Solution:

Add filters on above to sort based on date, location (not sure about what filter buts it really needed on larger consideration)
Giving a gridview will hurt the hands for a person who has more than 1k contributions, better to have a recycler view (and show a list) no bigger images small square will do the work.

Consider the below example as reference.

I can provide a figma ui if we wish for I come from a past UI/UX background. This solves the issue of n numbers of contributor a user has, recycler performance considering gridview, small device support. What do you think about it guys ? @RitikaPahwa4444

kanahia1 commented 7 months ago

@RitikaPahwa4444 https://github.com/commons-app/apps-android-commons/issues/5583#issuecomment-1975090522

rohit9625 commented 7 months ago

One more thing I suggest is to implement whatever the design will be in the Jetpack Compose.

kanahia1 commented 7 months ago

Hey @neeldoshii, I have developed a similar design https://github.com/commons-app/apps-android-commons/issues/5583#issuecomment-1975090522, How about looking up there and provide some suggestions 🤝

nicolas-raoul commented 7 months ago

Even though I have 19k contributions, I personally prefer a single column with big thumbnails (such as the current UI). It allows me to see in detail the last pic or last few pics I uploaded, for instance to check whether a detail is included or not.

The app's philosophy and priority number 1 is to facilitate uploading. Browsing is a far second, so reaching pictures I uploaded months ago is not a priority, and by the way it is probably better done via "Explore". 🙂

I agree that it is difficult to see whether an upload failed, or whether some files are still uploading. This will hopefully be solved by this year's GSoC (I think there is a bullet/issue for this). 🙂

psh commented 7 months ago

One feature I really like in Google Photos is the ability to pinch and zoom on my photo list. On my phone it switches from 1 ➡️ 4 ➡️ 6 pictures per row (with date based headers switching too). If the commons app remembered the preferred zoom level you would be able to keep your single column view, and others a compact multi-column grid.

ShashwatKedia commented 7 months ago

If implemented, that would be a great feature to have in our app :)

nicolas-raoul commented 7 months ago

If pinch does not add much code and is easy to maintain, I am all for it. 🙂

rohit9625 commented 7 months ago

I have a doubt and that is this feature works on Google photos app because there we have all photos at one place but in commons a large amount of images are not fetched at once. So what happened if user tries to pinch when all photos are not loade?

commons-app / apps-android-commons