Add how to display a representation of a person (e.g. avatar)

[kelliedesigner]

As a user of the design system I want to know how to create an avatar So that there is a consistent experience across services

Description

Links and resources

https://material.io/design/communication/imagery.html#informational-imagery

Acceptance Criteria

• [ ] Add components to design system
• [ ] Addresses accessibility/usability considerations
• [ ] Works on target devices and browsers

[kelliedesigner]

Care leavers app:

[kelliedesigner]

Trello Design System

[olimj]

Material Design guidelines include brands (as well as users) in the things that avatars can represent. So things like partner logos. This hasn't come up yet within any Barnardo's project, but it's one to think about: https://material.io/design/communication/imagery.html#informational-imagery

[olimj]

In journey design ideas, we're using circles to display user avatars to communicate:

• that a user is typing a message as themselves
• that a user is logged into an application
• which user has posted what

[olimj]

On the B4U project we're using avatars to show a young person who their support worker would be:

https://b4u-welcome-pack.netlify.com/

Although, considering the size of this image and the information that accompanies it, maybe this isn't considered an avatar?

[olimj]

When a specific worker hasn't been assigned to a young person then we keep things simple and show a gender neutral avatar as a placeholder. This communicates that a real human will be involved in the process, but they just haven't been specified, assigned or responsibilities could be shared across multiple workers instead. We thought this more personalised that cutting this section altogether.

[olimj]

There's a particular importance to Barnardo's responsibilities in gender neutrality and racial equality when design products:

the use of white male avatars reinforces the idea that this identity is the norm. These assumptions can lead to real-world outcomes that are detrimental to people who have subdominant identities

https://uxdesign.cc/design-avatars-that-make-sense-and-be-more-inclusive-in-the-process-d4dd6a486ea6

[olimj]

Back in 2013, Github introduced identicons - a neat way to provide individual users with unique avatars, without having to upload or define anything themselves.

Pros: Gender neutral, reduce upfront complexity for a user during on-boarding Cons: Perhaps a little tech industry specific? Might not be relevant to young people?

https://github.blog/2013-08-14-identicons/

[olimj]

Initials are a good way to provide identifying information when no profile image is present. Pairing initials with a unique color can help visually organize comment threads at a glance and provide extra context as to who is commenting.

[olimj]

Colorful monsters and aliens are a really delightful way to increase engagement and give personality to comment threads and mundane tasks. If they incorporate brand elements, it’s a smart strategy to connect company identity to something fun and memorable, which can have a positive impact on customer loyalty

[olimj]

Since people talking on public message boards might not always want to display their actual likeness, random pop culture images can provide some anonymity as well as tie into the fun vibe of sites like 9gag. This approach is on brand and still helps organize comment sections, since each user still has a somewhat unique avatar.

[olimj]

We've played around with the idea above in the journey project. Some research and testing has indicated that some young people find it easier to post things online when they have something funny to 'diffuse' topics that are hard to face to discuss.

The idea of personalisation without the stress of finding an image that a young person is comfortable with to use online

[kelliedesigner]

I like the idea of identicons for cyp, would be good to test with users and see how they respond to them.

The larger image on the B4U project I would classify as a 'Profile' image not an 'Avatar'.

I guess the rationale could be that an avatar is either a representation of someone, or a very small image of them, in which case it is more a representation of them, as you can't see them in detail?