Improve readability with inline avatars

[eppfel]

In #1926 it came up, that inline avatars break the reading flow and could be improved.

I already played around a little bit and it seems that making avatars smaller already helps.

(a) original (b) smaller (c) smaller and some edges for better fitting with the lines

Another thing @jancborchardt came up with, was the problem of generated avatars, that do not really help.

The JS Helper, which we use could be improved as well I guess:
server/core/js/jquery.avatar.js
Especially inline avatars could be transformed in respective to their lines.

This affects comments, activity and other occasions of inline avatars.

@nextcloud/designers

---

• /apps/activity/js/activitytabview.js: 28px -> 21px in Make avatars smaller to fit inline [nextcloud/server#2012] activity#65
• /apps/activity/js/script.js: 28px -> 21px in Make avatars smaller to fit inline [nextcloud/server#2012] activity#65
• /apps/comments/js/commentstabview.js: 32px
• /apps/files_external/js/settings.js: 32px
• /apps/files_sharing/js/files_drop.js: 128px
• /apps/gallery/js/vendor/owncloud/share.js: 32px
• /core/js/sharedialogresharerinfoview.js: 32px
• /core/js/sharedialogshareelistview.js: 32px
• /core/js/sharedialogview.js: 32px
• /settings/js/personal.js: 32px & 145px -> 32px & 128px
• /settings/js/users/users.js: 32px

Apps included in search:
activity, federation, provisioning_api, admin_audit, files, sharebymail, apporder, files_external, systemtags, bookmarks, files_sharing, testing, calendar, files_trashbin, theming, comments, files_versions, twofactor_backupcodes, contacts, firstrunwizard, updatenotification, dav, gallery, user_ldap, direct_menu, workflowengine, encryption, maps, federatedfilesharing, news

[jancborchardt]

@eppfel yeah, making them a bit smaller looks good indeed! I wouldn’t do the edges since we use round avatars everywhere and it looks out of place otherwise. :)

Maybe we should define a class for avatar size so it can be used globally? Like:

• .avatar-small (like here)
• .avatar-medium (share list)
• .avatar-large (like in the public files drop page)

[skjnldsv]

And what about a small icon with a zoom on hover?

[eppfel]

I searched for all occasions of the $.avatar() helper to get an overview. Seems like it would make sense to differentiate:

• .avatar-small: 21px
• .avatar-medium: 32px
• .avatar-large: 128px

There is an exception the 145px in settings/personal

And I would propose to move the avatar in the comments sidebar from medium to small:

Don't mind the offset in the submit icon

I still don't know the best way to deal with this. Maybe rewrite the avatar helper to use these CSS classes? But we should leave flexibility for exceptions. @nextcloud/javascript ?

[skjnldsv]

Ahaha, well, I won't suggest anything like that ever again I promise 😁
Anyhow, do we really want the avatar everywhere? Like on the text-only stuff, why don't we only show the name?

[Espina2]

I think its better to remove the avatars when they are to small. Don't add really nothing since you can distinguish the image because are to small. Visually the avatars in the middle of the text gives the sense of "caos". So if you think its more difficult to understand a picture that small if you compare with a name. This really breaks reading... In this panel text lacks contrast to, is really difficult to understand what is most important.

@nextcloud/designers

[eppfel]

@Espina2 I also pledged for removing avatars on some occasions, e.g. in a horizontal list of users, and I think @jancborchardt, too:

One consideration for this context could be to show the name without placeholder when there’s no avatar. And show only the avatar of everyone when there’s more than 3 people.

– #1926

But I would oppose to completely remove them at this size, because they are distinguishable. Maybe you can't clearly see what the image is showing, but in a longer conversation the avatar is the first indication of the flow:

Of course there could be other ways, like coloring the conversation by participant, but let's first get avatars standardized first.

[Espina2]

I really think its very difficult to understand the avatars at small sizes and can confuse with other people if the photos are very similar, because you dont see the actual content you judge the photo by color and the shape and size its not enought to see the shape. For example in the screen above I place the some photos of the Nextcloud team and its very read to understand who they are if don't have the label. Right? (the image is not so huge like it display in github)

So I think the small circle shape looks better with the text but the Avatar is not really needed at that size so In the end I think its not needed at that case.

So this is what I think and of course you can have a different opinion. And I think that is not completely wrong to have avatars, because at some point you already learned what that avatar mean. So its okay the two ways, just think its redundant. And for example in the layout that you show now its better than the first one and its more readable.

I really think that your first example when you have the icons and avatars inside of the text looks very bad, caotic and breaks completely the reading ( example in the top of the conversation).

Just for finish this are really bad aligned and have to many different "starts" and "ends". (Maybe this a point for another "issue")

I hope that I explain good what I think. :)

[jancborchardt]

In the sidebar activity list and comments, using avatar-small is much too small. Especially there it’s important to see faces!

@eppfel otherwise the sizes seem fine. We could also use the 128px one for personal settings as to make it consistent.

@Espina2 in the current sidebar all the text is correctly left-aligned at the same line.

[nickvergessen]

All done?

[eppfel]

The only arbitrary size is the avatar in the personal settings and I think this is ok, because there you edit it.