New OSS Forum Theme - Call for testers and feedback

charrondev · March 2019

Hey everyone, as I've been frequenting this forum a lot more often recently I've felt like it was time we upgraded our theme here. With the publication of Keystone & Theme Boilerplate I went ahead and started work on a new theme here. I ended up using our developer docs as inspiration for the colour palette.

Demo & Testing

The pull request for the new theme (it's open source, just like the previous one) can be found here on our community repository.

I've copied over a redacted subset of data from this forum to my personal test site. No user information or personal data was moved in this process.

http://forum.charron.dev

How to View It

The forum is public so just navigate over there.

Signing In

If anyone wants a member role account over there to test things out please PM me and I'll send you an invitation.

Feedback

I'm looking for primarily visual feedback on the new theme. What do you like, what don't you like. The following areas in particular are most important:

The addon directory - I had to basically start over on the addon directory styles so they've definitely changed a good bit. I'm 100% familiar with all of the functionality there so if I forgot to style something please let me know.
The general navigation - This also got shuffled around with the biggest changes being in the panel location, sticky header, and top level navigation.
The mobile experience - I never really like the previous mobile experience so while this is already a massive improvement I think there's still a little work to do here.

I'll try to incorporate whatever feedback is given, but if I don't have the time to fix something we can make further improvements after we make the initial change. Remember this theme is open source, and anyone can make contributions via pull request over at https://github.com/vanilla/community once the initial theme is merged.

Screenshots

For those of you that don't feel like navigating away here's some screenshots.

Home Page

Addon Directory

An Addon

Mobile

R_J · March 2019

Glad you've asked! I've seen the PR, had taken a look at the forum and immediately wondered why there is no Vanilla blue anywhere. Isn't that some kind of corporate identity?

charrondev · March 2019

The blue is still spread around a bit, but I used the black to distinguish the open source forum from our cloud forum, in the same way we kind of do between our help and developer docs.

I’m still going to need to pass the new theme through our marketing and design people though. That pink is also one of our brand colours.

R_J · March 2019

As a guest I cannot see comments in the test forum. You should change that so that this can also be tested.

R_J · March 2019

These are all findings when looking at the forum as a guest. As a reference, here are four screenshots:

1. Home

2. Discussions (as it is shown when picked from the main navigation)

3. Categories

4. A discussion with multiple pages

And here's my feedback

As a guest on mobile this theme is monochromatic (with very few exceptions). This not only a matter of taste but can cause usability issues.
The forum title and description at first sight do not differ from discussions.
The same goes for category titles and descriptions (see /categories/developers)
Look at the /categories screenshot. "OSS Forum Testing" is no link, "Development" is a link but has no hover effect and then there are the discussions where titles are links with hover effects
In /discussions in the discussion meta area there are three clickable elements: addon names, author names and category name. Only the addon name can be identified as a link.
"/" and "/discussions" differ because "/discussions" shows a breadcrumb "HOME" which is useless: clicking it doesn't present any new content to the user
There's a glitch when looking at a discussion with multiple pages but not being allowed to see the comments as you can see in screenshot 4

R_J · March 2019

Does it really have to be a .Warning for questions based on addons? Shouldn't .Info be enough?
I like the sticky header. It makes a good replacement for BoxDiscussionfilter. By now those links duplicates
The buttons in the header and the panel are not "the same": they behave differently when hovered. But they are duplicates, too and maybe you have to dismiss the "Howdy Stranger!" 😮
If you keep the "Howdy Stranger" you need to do something with the margins: there is some extra space on the left of that text

R_J · March 2019

Concerning the Addons: all perfect! It looks really consistent now, great work!

I would have expected the plugin author name to be links to the user as it is in the discussions view but that is a functionality "issue" and has nothing to do with the theme.

charrondev · March 2019

Thanks for the feedback @R_J it's very helpful.

I was a little worried about the mono-chromaticness. I'll try and do a little better myself and then see what our designed thinks next week. Mobile especially it's kind of hard to differentiate these.

Comments

I actually didn't import the comments. It would have been too large. The whole comments area is just plain boilerplate/keystone though.

I'll do a dba/counts to get the counts looking properly again.

R_J · March 2019

When looking at https://forum.charron.dev/profile I see following issues:

"Try Vanilla Cloud" button and div.ProfileOptions and the "Share" button have not the same color, it is only very similar
The reactions, the spans in div.DataCounts, consume two lines. The css seems to be made for 5 items, its calculated based on "20%", but it shows 7 items instead of 5
The New Discussion button shows some artifacts

The Signatures settings have some underlinings which look superfluous

charrondev · March 2019

https://open.vanillaforums.com/discussion/comment/256018#Comment_256018

Thanks. Some of these ones seem more theme-boilerplate/keystone related. I'm going to open some issues for them during the week so every theme can get the benefit.

charrondev · March 2019

I've incorporated some of the feedback here already. Spruced up the colours a little and fixed the double navigation. I brought back the big counts as well.

R_J · March 2019

I brought back the big counts as well.

Marvellous! I think it is a great idea to resemble the old styling in that way.

I was just about to ask if there will be no discussion photos any more because I do not see them when visiting the test forum, but on your screenshots I can see them. Neither can I see the Who's Online module.

charrondev · March 2019

https://open.vanillaforums.com/discussion/comment/256021#Comment_256021

Yeah sorry. I just forgot to turn on the plugins on my test site.

rbrahmson · March 2019

Tested it, overall I like it. I won't repeat R_J's comments (which I agree with). It is very good that we have a link to the addons in the hamburger menu (which was not there in the original theme).

There was anotherrecent discussion on filtering/sorting. I assume that the filters in this theme, being OS, would serve as good examples on how to use filters.

R_J · March 2019

When in a conversation message and you want to add a user to a conversation, the "Add" button has an autofit to its size, but the other buttons have full (panel) width. I'd make that "Add" full width, too.

R_J · March 2019

The color of error messages and the Primary Button are close but not the same and together they simply look ugly (just try to post an empty comment to see what I mean)

R_J · March 2019

The notifications counter is unreadable: the number is too dark. And it introduces yet another red.

What about choosing a light blue as links are colored? Since the notification is a pointer to a clickable information, giving it the same color as a link wouldn't be wrong.

charrondev · March 2019

I'll be doing a run through the feedback again this weekend, then monday I'll get this merged and deploy it.

donshakespeare · March 2019

Looks good @charrondev .

As I have been minting in Flarum and Discourse lately, there are a few things that my head currently finds comparable.

1. You guys made Tagging into the core now and the feature is sooooo powerfully awesome, any chance this site will now implement them Tags? I find living without tags is like living in a hashed parallel universe ...

2. On this site, I find myself, scrolling up very often to check this or that. Maybe a simple "Scroll-to-top" button? - no need to go all fancy with a custom scrollbar. I added that to our site and I tell you, finger and wrist have been joyful ever since.

3. The view and comment count labels literally grow on you... some users, for very unusual reasons, like their titles to contain an entire biography

Maybe a restriction? I added ...

/*max-height: 80px;*/
height: 80px;
margin: auto;

4. Will you have the useful "In This Discussion" plugin enabled for the new site?

If so, could we rethink the implementation? The duplication of the names afford us (maybe just me?) little info, and the dates are not linked.

Maybe the new releases be great.

donshakespeare · March 2019

May the new releases be great!

charrondev · March 2019

Great suggestions @donshakespeare.

Yeah, I can turn on tagging.
I'm hoping that the sticky navigation and header of the theme will make the scroll to top scenario a lot less likely. Scroll to top buttons are easy to implement but hard to get right without them feeling annoying. I'll consider it but not in this iteration.
I actually implemented the max-height already today (I went with 70px).
I'll look into turning on this plugin, but am not 100% yet if it will require additional theming work. If it does I'd rather do that work upstream in the theme boilerplate. If it looks fine then I'll just turn it on. As far as changes to the utility/appearance of the plugin, I'd recommend filing an issue on the associated repo for it. Contributions are always welcome for things like that.

I won't have any more time to work on this during the week, so I'll be uploading the new theme here tonight and anything else can be iterated on afterwards.