Various usability issues and improvements

[jkelin]

Here is list of small things that could improve usability of the UI. I can fix them later if there is any interest. Feel free to suggest more

General

• Aria tags are missing. I would add them to global components like hamburger menu button at least
• Open Graph tags seem to be completely missing. This is pretty important for content focused site
• Spinner when switching pages is quite small and not centered. There is nothing interesting on the screen at that point anyway, just make it bigger and centered
• Contrast seems pretty bad. In the heading especially. But I am no expert here
• Footer could use some centering and padding to better separate it from content

Login/register page

• Labels are not associated with input fields, so clicking on labels does not focus input fields
• Forgot password button is disabled but does not have disabled cursor on hover
• Buttons seem to be clickable multiple times when in loading state (causing multiple submit), they should be disabled
• HTML5 autofill attributes are missing
• Login button changes width when in loading state, this is little bit ugly
• Forgot password button does not have type="button, this could cause issues with triggering submit even of the form. However currently the button is disabled, so this does not manifest

Landing page

• Upvote/downvote buttons have tooltips of arrow-up and arrow-down
• I would add meaninful tooltips to upvote button/downvote button/score label/upvotes and downvotes labels
• Upvote/downvote labels could trigger upvote/downvote on click as well
• Next/prev buttons are quite small and insignificant on mobile

Comments page

• Empty comments page should show some zero-data element saying something like "Nobody has commented anything yet, be the first!", just to signal to the user that everything is loaded correctly, but there is no content.
• Empty comments page should not show comment filters
• Collapse thread button should
  • Be a button element, not span
  • Have a tooltip
• Tooltip on posted at label ("8 days ago") should have better formatting than default UTC one, something like "2019-1-2 18:23:35" would be much more readable than current one (which includes microseconds)
• Same things upvotes and downvotes as on landing page
• Primary buttons like "post" and "subscribe" could use some color to focus direction to them
• Community name in the sidenav could be a link to community
• What is this for I don't know. Do not display boxes with no content or show a label that there is no content
  
• View source button should be a button, not span
• Single word preview overflows
  
• IMHO post should be scoped below community in url, so you would know the community from the url (https://dev.lemmy.ml/post/29256 tells yo nothing about where you are), but that is little bit off topic
• When writing a reply, "Post" should have color to indicate primary action
• When seeing it for the first time on mobile I had issues separating the comments page from the sidenav and footer. Maybe some color separation? Maybe bigger margins?

Search page /search

• I would like to see quick search in navbar or some other global element
• Next button is visible before I have searched anything. It should only be visible if next page is actually available
• The form is not at all aligned or stretched. This is not consistent with other forms from the navbar
• There should be labels around dropdowns
  
• Add autofocus to the text input. Most common action will be - go to search, write stuff, press enter

Communities page

• Make subscribe be a button, not span
• It would be great if the whole row was clickable, not just the community name
• I don't really see a point of having the subscribe button on this page. Who is going to sub a community without getting looking at the content first anyway?
• On the other hand there are other interesting statistics about a community that could be shown. Like last post, posts per day, comments per day, posts/comments in last month and so on.
• Header sorting should have buttons, not just th
• There is no spinner when going to next page, but "prev" button appears before data is loaded

[Nutomic]

Those are a lot of good suggestions. If you want to fix them, that would definitely be appreciated :)

[dessalines]

Thanks! A lot of these are good suggestions, some of them aren't doable / preferable, but some are.

I think there are open tickets for aria and opengraph tags, if someone has time to implement them that'd be super helpful.

[richardj]

I can pick up some / most / all of these issues. Might have some time this weekend to work on them, starting with the general and login / register pages. ✊

[jkelin]

I am very sorry, as usual I have very much over estimated my free time and can't really work on these myself

[MaybeThisIsRu]

Would it be preferable to open individual tickets or at least a checklist within this ticket for easier management?

[dessalines]

Either one, I'd probably prefer individual tickets, because then commits can close that specific issue.

[MaybeThisIsRu]

I'll be working on creating a new issue for each one of the originally raised issues. I'll use this comment to keep track of what I have created at any given point. I'll be checking the current status of things wherever I can with the flagship lemmy instance (lemmy.ml), currently on v0.9.9.

Here is list of small things that could improve usability of the UI. I can fix them later if there is any interest. Feel free to suggest more

General

• Aria tags are missing. I would add them to global components like hamburger menu button at least

This is super broad. Not sure how to tackle this. Issue not created.

• Open Graph tags seem to be completely missing. This is pretty important for content focused site

At least the following OG/Twitter meta tags are visible:

<meta data-inferno-helmet="true" property="og:title" content="Privacy - Lemmy">
<meta data-inferno-helmet="true" property="twitter:title" content="Privacy - Lemmy">
<meta data-inferno-helmet="true" property="og:url" content="https://lemmy.ml/c/privacy">
<meta data-inferno-helmet="true" property="twitter:url" content="https://lemmy.ml/c/privacy">
<meta data-inferno-helmet="true" property="og:type" content="website">
<meta data-inferno-helmet="true" property="twitter:card" content="summary_large_image">

Issue not created.

• Spinner when switching pages is quite small and not centered. There is nothing interesting on the screen at that point anyway, just make it bigger and centered

Issue created.

• Contrast seems pretty bad. In the heading especially. But I am no expert here

Not sure what OP meant by "heading." Issue not created.

• Footer could use some centering and padding to better separate it from content

Agreed. Still an issue. We could use flexbox sticky footer.

Issue created.

Login/register page

• Labels are not associated with input fields, so clicking on labels does not focus input fields

I tested this and this no longer appears to be an issue.

• Forgot password button is disabled but does not have disabled cursor on hover

Issue created.

• Buttons seem to be clickable multiple times when in loading state (causing multiple submit), they should be disabled

Pending testing. Issue might need to be created.

• HTML5 autofill attributes are missing

I'm assuming this is meant for the email field on both login and sign up forms. It's set on neither. Issue created.

• Login button changes width when in loading state, this is little bit ugly

Issue created.

• Forgot password button does not have type="button, this could cause issues with triggering submit even of the form. However currently the button is disabled, so this does not manifest

No longer an issue.

---

Landing page

• Upvote/downvote buttons have tooltips of arrow-up and arrow-down

Issue created.

• I would add meaninful tooltips to upvote button/downvote button/score label/upvotes and downvotes labels

This is done in part (upvote/downvote buttons have tooltips). Issue created.

• Upvote/downvote labels could trigger upvote/downvote on click as well

• Next/prev buttons are quite small and insignificant on mobile

Comments page

• Empty comments page should show some zero-data element saying something like "Nobody has commented anything yet, be the first!", just to signal to the user that everything is loaded correctly, but there is no content.

• Empty comments page should not show comment filters

• Collapse thread button should

  • Be a button element, not span
  • Have a tooltip

• Tooltip on posted at label ("8 days ago") should have better formatting than default UTC one, something like "2019-1-2 18:23:35" would be much more readable than current one (which includes microseconds)

• Same things upvotes and downvotes as on landing page

• Primary buttons like "post" and "subscribe" could use some color to focus direction to them

• Community name in the sidenav could be a link to community

• What is this for I don't know. Do not display boxes with no content or show a label that there is no content
  

• View source button should be a button, not span

• Single word preview overflows
  

• IMHO post should be scoped below community in url, so you would know the community from the url (https://dev.lemmy.ml/post/29256 tells yo nothing about where you are), but that is little bit off topic

• When writing a reply, "Post" should have color to indicate primary action

• When seeing it for the first time on mobile I had issues separating the comments page from the sidenav and footer. Maybe some color separation? Maybe bigger margins?

Search page /search

• I would like to see quick search in navbar or some other global element

• Next button is visible before I have searched anything. It should only be visible if next page is actually available

• The form is not at all aligned or stretched. This is not consistent with other forms from the navbar

• There should be labels around dropdowns
  

• Add autofocus to the text input. Most common action will be - go to search, write stuff, press enter

Communities page

• Make subscribe be a button, not span

• It would be great if the whole row was clickable, not just the community name

• I don't really see a point of having the subscribe button on this page. Who is going to sub a community without getting looking at the content first anyway?

• On the other hand there are other interesting statistics about a community that could be shown. Like last post, posts per day, comments per day, posts/comments in last month and so on.

• Header sorting should have buttons, not just th

• There is no spinner when going to next page, but "prev" button appears before data is loaded

[dessalines]

Sweet, thx for making. It'll be nice to get some help with the UI.

[TCB13]

I would like to add that there's some readability issues related to improper spacing between items.

For instance the post list looks poorly:

If we increase the spacing between posts things get a LOT better:

[NekkoDroid]

I am not sure if so much wasted space is honestly necessary. I think a similar result could be achieved by making each post/comment move visually separate from each other (not jusst being separated by a thin, barely visible line)