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

UI facelift #285

Closed
ccstan99 opened this issue Jul 22, 2023 · 2 comments
Closed

UI facelift #285

ccstan99 opened this issue Jul 22, 2023 · 2 comments
Labels
help wanted Extra attention is needed

Comments

@ccstan99
Copy link
Collaborator

ccstan99 commented Jul 22, 2023

New Figma prototype for a UI facelift to dress up existing functionality. I've left some notes for the designer to update but it's mostly all there. I'd recommend tackling the low hanging fruit first: styling colors, fonts, etc then work on other aspects as time permits. A more detailed overhaul is in progress

Notes (some might need to be added as separate issues, LMK):

  • Header with logo, search bar, and icon/menus is sticky. Footer should only appear below last question.
  • Clicking on a tag icon refreshes page to display answers that match the tag. The behavior between clicking on a tag on an answer or from the the big tags page should be the same.
  • The editors requested that tooltip with brief description appears when hovering over a tag
  • If the related questions lines are shown, questions can "fade in" instead of "slide in" to minimize jarring animation. This may cause complications for nested questions or expanding related questions with their own related question.
  • "Load more question..." @plexish wants it to turn on infinite loading / scrolling. I've informally sampled a few users who expect to just load a batch of another 5-10 questions, so we may need to investigate further.
  • LessWrong people suggested making text window narrower for easier reading. Our current width is 1900 px ~120 characters/line. General wisdom is ~80 characters/line. I did some quick calculations and think we can (1) drop width to 1600px (2) increase left & right padding by 50px (3) increase text size a bit. This might need a bit of trial & error.

Addresses some of the concerns raised in #207

@Aprillion
Copy link
Collaborator

Different figma from PR #327 - https://www.figma.com/file/q7DDvvkSKfYpT0yheLexht/AI-Safety-ccc-ccstan99?node-id=90%3A2047&mode=dev

@ccstan99
Copy link
Collaborator Author

ccstan99 commented Oct 1, 2023

The Figma file linked in the opening post is the most up-to-date. We don't own or have update access to the other one used in that PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
Development

No branches or pull requests

3 participants