Blank screen with no data in list

[devaar100]

Summary: On contribution list fragment and nearby places list fragment when there is no data to populate list view there is just a blank screen Since the app is about images, aesthetic beauty is integral

Expected behavior: A simple and beautiful png/clip art to be displayed in the centre if the list is empty

Observed behavior: Blank screen

[ShivaniGawande]

Can I work on this ? @devaar100

[devaar100]

@ShivaniGawande sry but I want to work on this

[devaar100]

Suggestions for nearby places list screen

[devaar100]

Suggestions for contribution list fragment

[misaochan]

When you say "no data to populate list view", do you mean that the user is offline? In that case, I think the text "No connection, unable to load contributions/nearby places" would be better. There can also be an image to go along with the text, but it should be something that reflects what the text says, IMO.

For the contribution list, if it is empty because the user has not uploaded anything, I think it would be more useful to instead encourage the user to upload photos instead. Again, there can be a picture, but it should reflect the text.

[neslihanturan]

These pictures looks different than our apps style. Plus, their license is very important, are they CC0? Should we include attribution?.

[devaar100]

@neslihanturan @misaochan if the issue seems to be of importance then I would invest some time to find more CC0 images that go better with app style Please guide me for the same :)

[neslihanturan]

I never needed such images as a user. However, this can be a good idea to improve communication worth user. I agree with @misaochan images should be together with texts. But I think images should be designed for our app, using existing images doesn't seem like a good idea to me. I don't think we have a designer contributor either.

[veryveryharry]

Hi, I can take a stab at creating some graphics for the empty states if this is still available.

[misaochan]

Hi @veryveryharry , that would be great! I think you can collaborate with @devaar100 for this, where you could create the images (license as CC0 if possible please) and he could implement it. Please post the first image you create, so we can provide feedback early.

Thanks. :)

[97balakrishnan]

I think these image drawable assets provided in android studio by default under apache license 2.0 can be used initially.

[veryveryharry]

@misaochan that works for me.

Just to clarify, are these the cases we're talking about for blank screens?

1. No connection when loading nearby places
2. No connection when loading contributions
3. User has not uploaded anything

I had a few ideas for (1), and was trying to make these consistent with mostly the tutorial illustrations in terms of style. Let me know if it's not too far off.

Mocks:

[misaochan]

Yes, for the blank screens. :)

The mocks look great IMO! I agree that they are consistent with the style in the tutorial. I would probably make the images a little bit darker though, as it's hard to see them at first glance.

Will ping @neslihanturan for further thoughts.

[neslihanturan]

I agree they should be a little darker. Besides you should test them on dark theme too, thanks @veryveryharry

[veryveryharry]

Sure! I made the colors darker and created a set based on the one I thought was most clear:

Mockups:

Current SVGs are in a repository under CC0 license here.

Let me know if this works.

[neslihanturan]

I prefer middle collumn with message "No uploads yet" with better English. On the other hand if the problem is connection, we can use wireless icon that you shared earlier with message "No internet connection". Since using same icon for both cases can be confusing.

[misaochan]

@neslihanturan I don't think he was asking us to choose - I think the 3 columns correspond to 3 different scenarios - (1) user hasn't uploaded anything yet, (2) user has no internet connection in contribution list, (3) user has no internet connection in Nearby places? @veryveryharry could you clarify this?

Going with that assumption, for the "no uploads yet" scenario, the first column looks fantastic IMO. :) Great way to encourage users.

For the "no internet connection" scenario, I agree with @neslihanturan that displaying the wireless icon (bottom of your 2nd last post) with the words "No internet connection" would be better.

[veryveryharry]

Yes, the three were for the three different scenarios. Sorry if that wasn't clear. How is this?

No uploads	No connectivity (For both uploads & places)

I was hoping to convey the idea of "contribution" with the No uploads graphic, but seeing it without any explicit mention of that in the text, I'm thinking it loses a little bit of meaning/clarity?

I did have a few other variations for that one that I didn't show

Other options for "No Uploads Yet"

[neslihanturan]

I would use the middle one from Other Options for no uploads yet.

[veryveryharry]

Vector files updated here

[misaochan]

Yeah, I agree with the middle image for "no uploads yet".

However, for the person who implements this... The text:

No Recent Uploads Make a contribution to Wikimedia Commons today!

that was proposed in the earlier mockup seems perfect to me, to go along with the middle image. I would strongly prefer it over "No Uploads Yet".

Thanks for the vector files @veryveryharry ! :) @devaar100 are you still interested in implementing this?

[nicolas-raoul]

veryveryharry's mockup below looks like the best design to me, though I would replace the subtitle with Contribute one of your pictures to Wikimedia Commons by tapping the + button.