Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Various usability issues and improvements #389

Open
jkelin opened this issue Dec 31, 2019 · 6 comments
Open

Various usability issues and improvements #389

jkelin opened this issue Dec 31, 2019 · 6 comments

Comments

@jkelin
Copy link

@jkelin jkelin commented Dec 31, 2019

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
    image
  • View source button should be a button, not span
  • Single word preview overflows
    image
  • 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
    image
  • 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
Copy link
Collaborator

@Nutomic Nutomic commented Dec 31, 2019

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

@dessalines
Copy link
Member

@dessalines dessalines commented Dec 31, 2019

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
Copy link

@richardj richardj commented Jan 17, 2020

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
Copy link
Author

@jkelin jkelin commented Jan 23, 2020

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

@hirusi
Copy link

@hirusi hirusi commented May 26, 2020

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

@dessalines
Copy link
Member

@dessalines dessalines commented May 26, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.