Showing user's (name) initials but what if more than 1 user have the same initials?

Question

I'm designing an app where users can assign tasks to other people. The space I have available to convey to whom the task is assigned to is about 23-25px. So right now we're just showing two initials, ex: Megan Smith would be shown as MS

But there is a problem. What if more than 1 user have the same initials?

The options we've ruled out are,

• We're not differentiating people using colors.
• We're not going to use a thumbnail size image of the user because it adds clutter.

Also important - the user should be able to tell to whom the task is assigned to without having to roll-over / click the task. Idea is you should be able to tell at a glance.

What should we do here?

Answer 1

One of the immediate problems is with scalability, your only ever going to be able to support 26*26 unambiguous users as an absolute maximum although this would require users with initials like QX and ZJ so in reality it will be a smaller set, even if you are global.

you rule out tooltips (which are a good idea btw), however, there are some other things you could consider:

• larger panels: make some more room in your UI if it's crucial that users are uniquely recognisable yet techniques to make them so in such a small space (images, tooltips) are ruled out.
• restricted sets of users: only show assignable users if they are actually assignable. I'm assuming here, but task assignment is usually done to someone specific and relevant, not just to anyone.
• marking based on role: allow the assignment of user roles and use this information
• mark the last user you assigned a task to, or the last three or something like this
• if you encounter two users with the same initials in a restricted set then mark one and not the other - keep this consistent though (this might not really work in conjunction with other marks)

I mention marking several times. I would advise borders rather than colour. You don't have to use a full border which gives options for different marks. You can also apply gloss (like Stack Exchange does with it's tag badges)

Answer 2

It depends a bit on Maths. You could check if adding one more letter in conflicting cases would resolve all conflicts at the moment (you cannot know for the future). So for example if Megan Smith already is MS, Matt Smith could become MSm. You could also debate turning Megan into MeS and Matt into MaS to keep it clearer and more informative. However, none of those systems are perfect and they will not scale well.

Answer 3

I would suggest to use the 25 px area as a "Card". By terming it as card - I mean to physical deck of cards. Now keeping that as a metaphor - Ideally would have two sides of a card. In the digital world by touch the card flips. To confirm the selection of this "Person" "MS" - either use a slider to ON/OFF, or swipe right (As to moving it to bin for further action) or some rationale approach that best suits the context (not descriptive as this would be a subject of its own)

Now the front facing may have your intial "MS" or "MS2" or "MS3", am using

• numbers or shortened first two letters "Ma" "Me" here as a sub/super-script to decodify the difference.
• Direction - Can you change the horizontal direction flow of letters to vertical?
• You may either have different typeface to differentiate different people as another idea.This may reduce the clutter feel but provision's with more behavioral attribute to identify person through implicit means.
• Combi-of these any options

Why typefaces?

Since you neglect to use colors - am trying to stiffen the idea of Brand identity here by using typefac-ial differences. I do not have a research currently to support this. But over a period of time if you associate a typeface to a person - more or else that gets imbibed to the brand identity or personal identity of the person - just how faces, colors, dresses define a person.

Now the back facing of the card - this is simply an animated transition by using simple JS code on the app ( or some other means), the card flips (remember - flipping only if in need or at worse confusion arise), while flipped you may show a Gravatar or specific detail of the person that further cracks the puzzle or decodifies one. - Better off that this step is an additional flavor to help confusion, but to kill monotonous way of differentiating - we are trying to build experiences that are sleek and nice.

Answer 4

upon user registration have a field called "displayed initials" and put their initials there by default.

if those are taken, make them pick another set of initials

Answer 5

You may add a tooltip to display full name of the person when you hover the control.

Answer 6

That is a problem I also come across very often at work. Tooltip would have been a great solution on desktop, you can have a WHO button next to the initials showing full name or image or both when tapped on; or When selected, the name can have a full tooltip. So when you drag the item on the name, when focused on the item, the name becomes full; otherwise initials.

Answer 7

A couple of ideas.

1. 24px by 24px using an Arial font is plenty of room to clearly display 3 letters. So you might play with both the font choice and size.

2. That size is also plenty of room to display a glyph or icon for individual users. Like a head shot or similar. It could even be a feature of the application that people select their own picture.. Numerous communications apps that run on phones commonly do this.