Group-income-simple: Implement improved avatar placeholder image
Problem
The current avatar placeholder does not match the UI of the app. Also, because we only have one placeholder, and if users don't upload their own avatars, the interface can become very dull in places where a lot of avatars are displayed together.
E.g.: Using a chat where all avatars look the same is actually more harmful than not having the avatars there at all.
Solution
We can create a series of avatars that are attributed randomly to users, making it easier to distinguish users that haven't uploaded their own avatars yet. This is also a great opportunity to use more gender and race neutral images.
If you want to read more about the fascinating world of avatar placeholders, I recommend this article.
mmbotelho
All 7 comments
This would be great, it also helps to create the App's personality/vib!
sandrina-p
on 17 Sep 2019
Using initials seems like a good (maybe temporary) solution because it allows users to most easily identify each other.
dotmacro
on 19 Oct 2019
Important consideration: make sure users with the same display name can be distinguished (#745)
dotmacro
on 23 Oct 2019
After doing some research, and trying out some different approaches to solving this issue, my favorite was definitely Identicons.
An Identicon is a visual representation of a hash value, usually of an IP address, that serves to identify a user of a computer system as a form of avatar while protecting the users' privacy. The original Identicon was a 9-block graphic, and the representation has been extended to other graphic forms by third parties.
It's what Github uses for their placeholders!
I found this repository called Blockies. They take the initial idea of Identicons and make them symmetrical horizontally, which makes some very beautiful images. Here's a demo.
Even though I think the random colors they use look gorgeous, I tried it on a mockup for GI and they look too busy visually. So I created a codepen (with @sandrina-p's help) and decided to play around a bit with their algorithm. I used our colors and reduced the number of blocks in each generated image, so that they look simpler and blend well with our visual. language. Here's a mockup of how it looks like:
The algorithm uses a seed to generate the image, and this can be whatever we want it to (e.g. the user name, a completely random string, etc...).
Let me know if you like this approach, and I'll create an issue for development with more technical details!
mmbotelho
on 5 Apr 2020
@mmbotelho Really love this approach! And of course if anyone wants to go the extra mile with this and give the algorithm a unique twist that's also totally welcome! 馃槃
taoeffect
on 5 Apr 2020
I totally love this solution! Can't wait to see this on Group Income! 馃殌
sandrina-p
on 6 Apr 2020
I'm removing myself from this one, since the design is done! 馃帀
mmbotelho
on 15 Apr 2020
Related issues
taoeffect
路
5Comments
taoeffect
路
9Comments
taoeffect
路
3Comments
taoeffect
路
8Comments
sandrina-p
路
8Comments
Most helpful comment
After doing some research, and trying out some different approaches to solving this issue, my favorite was definitely Identicons.
It's what Github uses for their placeholders!
I found this repository called Blockies. They take the initial idea of Identicons and make them symmetrical horizontally, which makes some very beautiful images. Here's a demo.
Even though I think the random colors they use look gorgeous, I tried it on a mockup for GI and they look too busy visually. So I created a codepen (with @sandrina-p's help) and decided to play around a bit with their algorithm. I used our colors and reduced the number of blocks in each generated image, so that they look simpler and blend well with our visual. language. Here's a mockup of how it looks like:
The algorithm uses a seed to generate the image, and this can be whatever we want it to (e.g. the user name, a completely random string, etc...).
Let me know if you like this approach, and I'll create an issue for development with more technical details!