Site Redesign Feedback Requested

Raemon

Site Redesign Feedback Requested — LessWrong

46 Site Redesign Feedback Requested

3rd Jul 2020

2 min read

46

For the past few months, the LessWrong team has been working on a redesign for the frontpage (which comes with some overall site redesigns).

We've currently got it up on our development branch on lessestwrong.com, and would appreciate some feedback before we roll it out. (This server is for untested changes, you should not use it generally because you might be subject to horrible bugs. But, right now feedback would be helpful)

For logged out users, it looks like this:

And for logged in users:

Goals

There are a few different goals for this. Some of the goals are a bit vague and hard-to-describe. But, some concrete goals that are easy to list for now include:

Make the new Core Tags more visible.

The team is currently making an overall push to finish the Tagging Feature, and get it to a state where users understand it. Having the Core Tags highly visible on the front page helps establish them as a prominent site feature. In addition:

The core tags help new users understand what topics LW tends to focus on.
You can use the Tag Filters to adjust how much content of each tag appears on the frontpage. (Hover over them to see for access)
Note that you can also add new Tag filters (see the "+" button on the right)

Reduce eyestrain and make the frontpage easier to parse

Some people reported eyestrain from the solid white background, which was very bright. The new light-grey background is intended to be a bit softer on the eyes
The current version uses lots of horizontal lines to have divide sections, which adds a bit of clutter. The new version relies instead on the main content naturally standing out via a white background.

Improve clarity of Recent Discussion

Recent Discussion posts are more more distinguished from each other.

Feedback Welcome

Let me know your thoughts in the comments, both re: the overall feel, and how specific UI elements work.

The redesign primarily is intended to affect the frontpage, but it caused some downstream UI tweaks that required other pages to change, and I'm not sure we've finished ironing those changes out. Let us know what we missed.

If you'd like to chat in detail about your experience of the site redesign (or about the new tagging features, or about the site generally) please send me a PM or reply in the comments here and I'll schedule a time.

Site Meta

Personal Blog

46

Site Redesign Feedback Requested

New Comment

14 comments, sorted by

top scoring

Click to highlight new comments since: Today at 3:29 PM

[-]Liron6y340

The new design looks good to me.

I just want to say overall the LessWrong team is killing it! You folks successfully revived a mostly-dormant community and now it’s lively and special, the community whose feedback I seek and respect the most on many topics. Thanks for making the software lively and special too.

[-]Ben Pace6y40

Cheers Liron. I appreciate you saying that.

[-]Biff Wiff6y130

Comments:

I like the new light-grey background. It looks nicer aesthetically to me. I didn't notice any eyestrain before but now that you mention it I do notice some with the solid white background.
This isn't new, but it's been a while since I've been logged out. Looking at the screenshots in this post, I've been reminded that the logged out page has some images at the top. It strikes me as noticeably more aesthetically pleasing when there are some pictures at the top. I don't mean to imply that there should be pictures at the top, just that seeing them looks a little nicer to me.
I really like the tooltip when you hover over "Recommendations". I guess it's no big deal, but it feels cool to know what it's actually doing.
I actually never noticed "Show tag filters" on the current site. I guess I'm just so used to coming to LessWrong that there's a sort of "muscle memory" where I do my thing and don't notice things that aren't part of my routine, if that makes sense. Now that I notice the tags they seem cool and I'm excited to use them. I really like that it could be weighted instead of binary. I feel like I probably wouldn't use them if they were binary because, for example, I don't want to ignore all AI posts, so hiding those posts would be too strong an action for me.
This sounds small as I type it out but actually is pretty annoying. When I scroll down, there's a ton of tooltips that pop up and get in the way. I guess the only difference are the tooltips for the tags, but maybe that's an important difference. 1) The tooltip when you hover over a post isn't too bothersome to me because it's located far enough to the right where I can still read other post titles, so it isn't really getting in the way. But the ones for the tags do get in the way a lot. 2) The current tooltips are still a little overwhelming though, so maybe adding more just kinda puts things over the edge in a sense. (I know I said I liked the one for the "Recommendations", which might be contradictory, but I'm trying to give more of a stream of consciousness type of feedback.)

Bugs:

When I click "Show full sidebar" I get a "Error: TypeError: p is nul" error.
Tooltips overlap each other sometimes.
Clicking the "+" to add a tag filter doesn't work.

[-]Raemon6y60

Thanks! Great feedback.

Clicking the "+" to add a tag filter doesn't work.

This surprises me a bit – what OS/browser/setup are you using? Clicking the button should pop up a little widget where you type in a new tag, with a dropdown menu of selections as you type.

[-]Biff Wiff6y20

I'm on a 2017 Macbook Pro using macOS 10.15.5. Initially I was on Firefox. On Chrome and Safari I get a "Error: TypeError: Cannot read property 'viewUnreviewedComments' of null" error instead. In all three cases the error appears in red text on the screen in place of "Show full sidebar".

[-]Raemon6y20

oh, I meant specifically for the Add Tag + button (I assumed you meant to the top-right of the Latest section)

[-]Biff Wiff6y40

Sorry, misread your comment. I just figured out the issue I'm having with the Add Tag button. It's that the middle of it is clickable but the surrounding area is not. Ie the <a> tag is clickable but the surrounding <span> is not.

[-]Raemon6y20

Oh! That makes sense, will fix that. (Also I think this is true for all tags and seems unnecessarily confusing, thanks for the heads up)

[-]Biff Wiff6y20

Sure thing.

[-]Zvi6y40

Tag changes seem good.

On color I'm confident I prefer white, but I'm also confident I don't care that much.

Extra tooltips are great.

[-]DanielFilan6y40

I prefer white background to grey background.

[-]__nobody6y30

I'd actually prefer to have a true dark mode, which probably won't be coming anytime soon… (unless the team steals the dark/light mode stuff from Gwern maybe?)

Luckily, user style sheets are a thing! There's a dark mode style sheet from 2018 on userstyles.org and thanks to its extreme simplicity, I'm happy to report that it still works on the new site design. (Unfortunately, that simplicity also means that it's not very good… c'est la vie. Maybe I'll make a better one when some urgent deadline approaches some day in the following months, maybe not.)

If you prefer white, setting this as your user style sheet might get you 80%-95% of the way there:

.PostsItem2-background {
    background: #f4f4f4;
}
body, .Layout-main {
    background: white;
}
.PostsItem2-bottomBorder {
    border-bottom: solid 2px white;
}

(You may want to fiddle some more with the post / comment borders, other than that I noticed no problems.)

Of course, I'm not sure how stable those names are… So here's some actual feedback / questions on that side of the design:

Some CSS classes do seemingly unnecessary things (e.g. .PostsItem2-isRead overrides the background color of the normal .PostsItem2-background but applies the exact same value, same for .Layout-main / body), which makes it potentially harder to customize. (Because !important in the user style overrides both classes it actually still works fine for PostsItem2-isRead, but .Layout-main needs an explicit extra rule and just deleting that background color override in the original CSS doesn't seem to break anything.) Do you want a list of weird spots like that? (If yes, I'll make a crazy style in 1-2 weeks and see what breaks when modding / what can (probably) safely go away.)
stable names for most things would be really useful, but PostsItem2 looks fairly unstable / generated? How stable will those names be?

Other than that, I agree with the "looks good"!

[-]Raemon6y50

Jim's actually been interested in a dark mode, and better theme support in general. It's a bit tricky because we do expect to change nontrivial bits of the site around sometimes. The actual effort for initial theme support isn't too high, but then committing to keeping various themes working is a pain. (Different team members have different opinions on how to prioritize those issues)

PostsItem-isRead is a sort of hacky thing I added so I could experiment with changing the styling of read posts, with a superfluous style change so that JSS didn't ignore the class. Currently, a post's read-status only displays on it's title, but I wanted to experiment with changing the background color, further up the component hierarchy.

PostsItem2 isn't deliberately unstable but it'll undergo some changes in month's redesign.

[-][anonymous]6y40

The new design appears to have higher contrast between the foreground and background, which I'm a fan of. It's an improvement, I think.

(Also hoping for reduced page weight and performance tweaks, but I get that they're already in progress :P)

Moderation Log