[frio] Various UX improvements (mostly larger clickable areas)#12699
[frio] Various UX improvements (mostly larger clickable areas)#12699MrPetovan merged 17 commits intofriendica:developfrom
Conversation
Reduce additional spacing between button groups and use the correct markup according to the docs: https://getbootstrap.com/docs/3.4/components/#btn-groups
|
Everything looks good to me, except maybe the font size for comments, which I believe should remain slightly smaller than the top-level post to highlight it. If the absolute font size of comments is too small, maybe increase the top-level post font size instead? |
Looks very well for me, too. But I have a different opinion about the font size of comments.
Could be a solution. Question is how the larger font in top level post would visually match the rest of the UI. |
|
Is this enough for you, Opa? 😄
|
Could you please elaborate what is the reasoning behind this? Personally I don't see the benefit of such approach. I know Mastodon and Twitter do it, but their thread system works differently than Friendica. In terms of highlighting:
If there are any good reasons to differentiate the size, I strongly recommend increasing the main comment font instead of decreasing other comments. I think, from the user perspective, if base font is ok in the thread system like Friendica, then smaller comments may be harder to read or look a bit odd. My vote goes for consistency, therefore the same font-size for comments. PS. I thought about increasing base font even more (15px or 16px - also for comments), but I didn't want to be too extreme and opinionated in my first PR. In terms of accessibility and web typography best practices, the good starting point is 16px. Whatever the choice is, website should support browser preference, which can be done by setting |
|
You make very good points. I've been using the frio theme for 7 years now so I'm very used to its idiosyncrasies. I do support your additional point about typography and letting web browsers handle the font size for maximum accessibility, but you're right, it's best enabled in another issue/PR. |
|
I know it has been merged, still a few ideas of mine:
This is more a positive review than a negative one. |
I can't find that "mouse wheel" thingy on my phone. 😉
Most of the time I hear that: my fingers are too big for that tiny buttons. 🙂 So I think the spacing is a good solution. All in all those changes are looking good. It's a matter of taste, I guess. |
|
Thanks for the comments. I think taste is one thing, but general UX is another. Most of the research tends to conclude with bigger elements. Sometimes much bigger than Friendica has. Of course, it's a matter of habit too, and sometimes we can make a larger clickable area without visually increasing the element size. In any case, good point with a desktop solution with a Material Design is a good reference point in terms of touch target size: https://m2.material.io/design/usability/accessibility.html#layout-and-typography |
|
You can put bigger Sorry, you may have to block some ad-servers there, but here is one I could find quickly: |
|
Of course, I know about media queries, but many people also use laptops with touchpads, which are not as good as a mouse. There are solutions for that (media query again), but I don't think we're even close to saying that the elements are too big for most users. In general, it's a matter of principle and design system. There are no strict conventions in the Frio theme, so there can always be debate about such things. Anyway, I'm open to any suggestions, and thanks for the feedback. |
|
I like clicking space improvements (especially for mobile) but I am with @Quix0r on more compact layout being more useful on smaller screens when reading posts and comments. I get why more spacing and larger fonts can be great for people with higher resolutions and/or less sharp vision however I wish there was a switch between larger and compact (old) mode. Maybe we can have updated and compact Frio available so users can decide? Also there seems to be a small bug on mobile - "share" icon is sometimes invisible unless something else is clicked:
|
Yes, but this has nothing to do with this PR, it's always been like this since I added the feature. The issue is that the button availability has to be checked in Javascript, but I haven't managed to fire this check on page load, however it correctly fires on post reload. |
5 participants
Hi. This is my first contribution to the Friendica project, so please be understanding :)
I noticed some elements in the Frio theme have small clickable areas, small font sizes, small buttons, etc. It's not very convenient and can cause misclicks, especially on mobile. My main goal in this PR is to improve the UX of such elements by making them larger (sometimes only in terms of clickable area, but sometimes also in actual size, which I considered a readability improvement, e.g. comments font size).
I think most of the changes are quick wins, but some may be a little opinionated, e.g. more clean design for responses actions. I needed small redesign to increase clickable area without making the icons too prominent or risking that icons will break into two lines (nested comments and all icons visible with dislike and share via…).
In the PR review, please check if everything is ok or if I haven't broken anything. Of course, I tested these changes before opening the PR, but maybe I left some parts of the system that I don't use or know (like optional settings etc.). To be honest, there are places where CSS has a lot of nesting, overrides or general elements, and can be unpredictable at times. We may consider using BEM methodology in the future.
Most of the commit messages should be self-explanatory, and I think they can act as a changelog. If I should provide more information or context, please let me know.
I hope you'll like the changes!
Here are the most notable before/after examples.
Larger clickable area
Enable user menu scrolling for low screen sizes:
Icon hover style on button hover instead of whole item area hover: