commons-app / apps-android-commons

The Wikimedia Commons Android app allows users to upload pictures from their Android phone/tablet to Wikimedia Commons
https://commons-app.github.io/
Apache License 2.0
1.01k stars 1.2k forks source link

[Discussion]: Feedback for proposed UI/UX of a new PendingUploads screen #5587

Open ShashwatKedia opened 7 months ago

ShashwatKedia commented 7 months ago

Attached is my proposed UI design for the upload queue management task and some of my suggestions: (i) I suggest creating a new pending uploads screen with the title 'Pending Uploads (N)' screen, where 'N' represents the number of pending uploads, which will update as and when the images get uploaded or cancelled successfully. This will make it easier to see whether all uploads are completed or not and simultaneously will prevent cluttering the already full ContributionsFragment. (ii) I have also added the tag 'Queued (X)' to the images which are queued, where 'X' represents the position of the image in the uploads queue, which will update as and when another image is paused or fails or gets uploaded successfully. This will help the user know the sequence of the current upload. (iii) As and when an image gets uploaded successfully, it will be moved from the PendingUploads screen to the Contributions list screen. Cancelled items will be removed from the PendingUploads screen. (iv) To access the pending uploads screen, I have added an icon in the top menu in the Main Activity. (v) A cancel and pause button can be added to the Queued item if the community feels so. (vi) Paused and failed items can be moved to the bottom of the grid so that the user can easily see the items currently being uploaded/queued.

I'm also thinking of adding a CTA when the PendingUploads screen has no pending uploads, something on the lines of these designs (credits to @veryveryharry), where the text can be "No pending uploads. Upload images now to see them here!".

Screenshot 2024-03-03 at 12 31 20 PM

Note: All these PendingUpload UI changes are flexible enough to be incorporated in the ContributionsFragment itself if later on it's decided against creating another activity for PendingUploads.

I am eager to hear and improvise on your thoughts and suggestions for the proposed design :)

psh commented 7 months ago

Nice work! 👍

Over in #5583 there is a suggestion of improvements for the queue management (start/stop button bar) that might live on this screen rather than the proposed contributions screen.

If queue management moved onto this screen we wouldnt need the "limited connection mode" per-se (since it's a paused upload at that point) so perhaps this screen would launch from the "cloud" button instead of a new one?

Crazy idea - can the button include a small badge that shows the number of pending uploads?

Also, let's separate out the change to the contributions screen layout into another proposal, to focus on the upload management 😄

psh commented 7 months ago

Slight tweak - when uploads finish, could they maybe stay on the screen until I clear it myself (or I leave the app) - it would be nice to see the overall progress of the 3 images being processed and successes shown.

ShashwatKedia commented 7 months ago

Over in #5583 there is a suggestion of improvements for the queue management (start/stop button bar) that might live on this screen rather than the proposed contributions screen. If queue management moved onto this screen we wouldnt need the "limited connection mode" per-se (since it's a paused upload at that point) so perhaps this screen would launch from the "cloud" button instead of a new one?

Yeah, that would be better as it'll save the space which would have been taken up because of a new icon in the title bar. But then we would need to add a button to pause all uploads (which is what limited connection mode essentially does) in the PendingUploads screen. Maybe, we can remove the notifications and cloud icon when the user is inside the PendingUploads screen and instead keep an overall pause and overall cancel button? I'll think more about where it's best place can be.

Crazy idea - can the button include a small badge that shows the number of pending uploads?

Great idea! Indeed that would be an awesome addition to the icon. We could also customise the icon to have an up arrow in the middle of the cloud (which will better depict that it's for pending uploads) and have a small red icon at the top right of the cloud, to display the number of pending uploads (similar to the notification bell icon, to maintain the design and uniformity of the app)

Also, let's separate out the change to the contributions screen layout into another proposal, to focus on the upload management 😄

Sure, I'll create a separate issue for that and edit the description of this issue, my apologies for adding it here.

ShashwatKedia commented 7 months ago

Slight tweak - when uploads finish, could they maybe stay on the screen until I clear it myself (or I leave the app) - it would be nice to see the overall progress of the 3 images being processed and successes shown.

Nice idea. We could keep the uploads in the PendingUploads screen, till the user leaves the app (or the screen maybe?). However, I'm not really sure if we want to keep an option for the user to clear it themselves, as it would require another icon and might increase the complexity of the process for the user. Though, we can surely ideate on this further and come up with something :)

I'm also thinking of adding a CTA when the PendingUploads screen has no pending uploads, something on the lines of these designs (credits to @veryveryharry), where the text can be "No pending uploads. Upload images now to see them here!".

nicolas-raoul commented 7 months ago

Note: Thinking about a new UI can be part of the GSoC task itself. :-)

ShashwatKedia commented 7 months ago

Note: Thinking about a new UI can be part of the GSoC task itself. :-)

Yeah, I was just taking feedback for my idea and improvise on it so that it would be easier during GSoC if I get selected (if not, it might help the selected candidate :)