1

I'm building a little app that lists music recommendations to users in a room. I want to list the users in the room but have a hard time finding patterns for this.

Right now it looks like this (by no means "good"):

enter image description here

Since I only really need to present the username, I thought I would add categorical colors (with no expertice in knowning how to pic colors that look "good" while simultaneously being distinguishable). It just doesn't look good so I was wondering: This must be a common use case, how have other pages and applications solved this? But find myself dumbfounded trying to find examples of lists of usernames in a "room".

Should I skip the colors? Thought it could be useful as a marker if I'm referring to users on other parts in the view (as a shorthand).

  • Beside the names, can the app display a profile picture/avatar for each user? – Joao Carvalho Jul 26 at 12:47
3

Multi colors are useful for differentiating elements, a function that is not necessary in this case. In fact the difference is given by the user name or nickname.

In some cases color differentiation adds complexity and conflict: will a boy like to have the color pink? Would a user like to have a brown poop color? Will a user like his/her name to disappear on a yellow background? Why is the first user intense red? Is it a kind of hierarchy?

I think having a whole area well differentiated from the music list with the names inside a frame would be enough. This example from di.fm can help, the top area could be the room with the user names:

enter image description here

  • 1
    This was a really nice analogy to my app, with good arguments for removing the colors, thanks! – MrJalapeno Jul 26 at 13:17
3

Broadly, I'd tend to agree with Danielillo's answer, but the Devil's Advocate in me couldn't help throw the following together...

In your example, the colours behind the users are not being used for anything, so there seems little point in keeping them (especially given the problems that Danielillo mentioned of choosing "usable" colours).

However, it takes a little bit of effort matching the shortened names against each track to the full names at the top of the page. This is perhaps where colour could be useful.

Depending on how many users you expect in each room at a time, you could create a list of distinctive-enough colours (perhaps flipping between white-on-colour to black-on-colour for the text, depending on the background colour).

To help if the number of colours needed means they aren't as distinctive as you'd like, you could potentially highlight the full name when you hover-over (or click/tap) the short-form name against a song.

I've shown the songs in tiles below, partly because it shows the effect better having only copied details of four songs, but you could probably do the same sort of thing in your three-column list.

Example "Room" layout

  • Yeah, using the colors on the abbreviations of the names was actually one of the reasons I thought about introducing it. Was kind of inspired by the random colors of github-avatars. So there's definitely a use case. Question is if finding sufficiently many good colors, while simultaneously keeping them distinct and not causing additional complexity and clutter is possible. Since the number of users could rise to ≈20, it would also clash with any general color pattern of the page. – MrJalapeno Jul 30 at 13:35
  • 1
    @MrJalapeno Yes... it's the sort of thing that could easily get out of hand if not handled carefully. – TripeHound Jul 30 at 13:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.