[WEBSITE v2] MusicBee website and forum redesign

[psychoadept]

Just out of curiosity, what is your problem with avatars? I find them useful to keep people apart and find back my own posts. I don't usually notice screen names at all on fora.

This can be an accessibility issue.  Okay, most of us don't have any use for them, but having options available that support different ways of perceiving and processing information is always a good thing. (This is the field I work in - a related question would be, is the forum/website screen-reader friendly?)

[AvikB]

New update is live. A lots of fixes, as well as new features, new admin panel, moderator panel, and website setting panel for changing things.
Another new feature is the language chooser at the bottom of the page. Thew new site is fully multi lingual. I have made a demo language file in Bengali(just for the sake of how it works). I only translated few things on the home page. You can choose between us english and other one.

Translation can be partial or full. Also you can change add-on menu items too. I have made some backend changes so that you guys can argue and change between us-uk languages.

All i need is some volunteer translators. We don't need whole site but maybe the home page, download page and maybe some other too.

There are few more things to do but most of them are backend. normal user won't see any differences.

[Skoop]

I find them useful to keep people apart and find back my own posts.

There simply aren't that many people posting at MusciBee.  The regulars are few in number compared to the new members who post to ask a question and then don't come back. 

[AvikB]

Turning them off from one's profile setting is not the same as having them off by default.  That means they're -on- by default.   Which I would not like to see.  Users don't set their local time in their current profile, for example.  They're not going to turn off the avatar is it's on by default. 

Personally, I would rather see no option whatsoever for avatars.

I have no intention on disabling any of them by default. If any user wishes they can disable them. But truing them off by DEFAULT is not something i am willing to do.

[Skoop]

Why not?  Turning them off by default is not the same as disabling the function altogether.

[AvikB]

Why not?  Turning them off by default is not the same as disabling the function altogether.

Because there is no reason for them to be turned off by default.
Avatar image is useful when reading long threads. As for sig most of MusicBee forum member do not use them or any distracting way, so it poses no threat to readability or anything.

[phred]

Why not?  Turning them off by default is not the same as disabling the function altogether.

Because there is no reason for them to be turned off by default.

The same can be said for the opposite:  There is no reason for them to be turned on by default.

I'd like to hear what Steven has to say about  this.  After all, it's his website and forum. Despite volunteers working to redesign things ultimately the final decision should be his.

[AvikB]

Just stumbled across this topic so these might have been mentioned before.

On the homepage of http://test.getmusicbee.com/
 - "MusicBee also supports podcasts and web radio stations and Soundcloud integration" should be "MusicBee also supports podcasts, web radio stations and Soundcloud integration"

Should be fixed in next few updates.

- Image is fubar: http://test.getmusicbee.com/img/mb_tag_feature.jpg

I haven't completed them yet , i am not good with graphic design and stuff so they are the last thing on my todo list.

On the download page http://test.getmusicbee.com/download/
 - You pull a serif font out of nowhere (doesn't fit well with the rest)
 - Also, the awesome screen-filling goodness showcased on the homepage is nowhere to be seen. It feels a lot less polished.

I have no idea where did you saw serfi? all fonts are roboto if i didn't make any mistake :/, can you post a screenshot?

As for awesome screen filling goodness, what do you mean by nowhere to be seen?

Login page (http://test.getmusicbee.com/forum/?action=login)
 - Uses a default icon. Doesn't fit in with the rest (http://test.getmusicbee.com/forum/Themes/mb_modern/images/icons/login_sm.gif)
 - Login form can be wider. Would be more in line with the rest of the website. It feels a bit off, just like to download page
 - "Forgot your password" should have an orange hover effect
 - This page is 'part of' the forum, as indicated by the secondary menu bar and the breadcrumb navigation. That is not needed and counter-intuitive. You could redirect to the forum after login but as the login button is visible on the whole website and doesn't seem to be related to the forum, you should not suddenly get forum functionality just by clicking on it.

icon will be changed in phases as the forum has a LOTS of them it is possible for me to update them at once.
i will fix the orange hover effect in next few updates.

The website uses forum login for EVERYTHING! it is the base authentication. i have no plans of changing it.

Forum home page
 - The breadcrumb navigation starts at the forum, not at the main website. That makes the forum more a separate thing than you seem to be intending. I would change it to "Musicbee > Forum (or community) > ...."

It is how SMF works. One can't change them without hacks or editing core files, which i am trying to avoid as much as possible. So don't expect this to happen.

- The Forum Stats section of the page looks messy and technical. Use spacing more freely, remove the brackets around the "more stats" link or just remove the whole thing or change it to a "latest posts" section because that's about the only thing in there. You could link to the "more stats" somewhere where you're actually showing stats, like a bit above, where you show general statistics like number of posts, topics and members.

Stats section is by default messy that's why i created a much more spaced out non technical stat above that. The messy stat can be collapsed if required.

- Shouldn't those general stats like number of posts, topics and members be below the " MusicBee Test - Info Center " header?
 - The  "MusicBee Test - Info Center" header is invisible

- not necessarily, those stats are just overview and after that much more technical stat is placed.

Overall
 - I miss the logo. Is that intentional?
 - Try to question your users why they use MusicBee above other players and let those features show on the homepage. I for one use MusicBee because, it's easy to use out-of-the-box but if you want something more, it's usually possible and the option will be right there where you expect it to be.

- I have plans to show the logo instead of text. But i haven't talked to steven about the logo. It is not priority right now, will change it once the core site is pretty stable.
- Why you ask? well different people have different answer. for me i like it because it has a nice UI(with skin ofc), supports milkdrop visualizer, consumes less RAM, has itune like expand album feature(which is a must for me), auto tag feature, auto organize and so on.
It is really hard to cover WHY? because WHY NOT?

[Steven]

Although i personally dont like avatar images, i appreciate some people do and they should be allowed to upload one if they want. I draw the line at animated gifs though but AvikB has kindly put in a message for users around that.
So i am not really getting what the issue is here, other than some people disliking avatar images in general. I expect many people wont bother but if they want to they can - it still requires some action on their part and i dont see how a default comes into this.

[phred]

Thanks for your input Steven. 

[Joolee]

On the download page http://test.getmusicbee.com/download/
 - You pull a serif font out of nowhere (doesn't fit well with the rest)
 - Also, the awesome screen-filling goodness showcased on the homepage is nowhere to be seen. It feels a lot less polished.

I have no idea where did you saw serfi? all fonts are roboto if i didn't make any mistake :/, can you post a screenshot?

Roboto is a non-standard font and I don't see you loading it anywhere in your CSS as webfont. You probably have it installed on your computer so it renders fine for you. Most elements render in Sans-Serif or Verdana on my PC because you configured those as fallback in the body style but for some reason you specify custom font parameters for some elements (.show_info, input, .btn, H1, H3 and .mainmenu) where H3 doesn't have any fallback fonts configured.

As for awesome screen filling goodness, what do you mean by nowhere to be seen?

The homepage is formatted with a lot of free space and (background) images that stretch from left to right. I have configured your H3 tags to display Sans-Serif for me now so I can take a new look at the download page.
At my screen resolution (1080p with 125% DPI scale) the left side of the download screen looks a bit empty. It feels like the whole page is shifted to the right because the screenshot fills the right part of the screen but the left part is empty space. Also, on the homepage, you use generous spacing for everything, for example the feature boxes and hero-buttons. The boxes on the download page feel cramped with a lot less spacing and buttons that seem to big for the space they are allotted. Increase the paddings in the boxes, center the buttons and increase their margins and you'll go a long way to making those boxes feel less cramped. You can also make sure that the right side of the screen has roughly the same amount of empty space as the left side by making the screenshot smaller or just centering the whole page.

Now that I look at it again, it probably doesn't help that the screenshot is cut of at the right side of the page. >Screenshot<

The website uses forum login for EVERYTHING! it is the base authentication. i have no plans of changing it.

Forum auth being the base auth for the website is not the problem. The login page being a visible part of the forum, without clicking on something forum related is confusing. Just getting rid of the secondery_nav and navigate_section on the login page would fix that. As you're understandably reluctant to change core files of the forum, this is probably something you can't change.

- The Forum Stats section of the page looks messy and technical. Use spacing more freely, remove the brackets around the "more stats" link or just remove the whole thing or change it to a "latest posts" section because that's about the only thing in there. You could link to the "more stats" somewhere where you're actually showing stats, like a bit above, where you show general statistics like number of posts, topics and members.

Stats section is by default messy that's why i created a much more spaced out non technical stat above that. The messy stat can be collapsed if required.

Is it an idea to collapse it by default or for all non-logged-in users to leave a solid first impression?

- Why you ask? well different people have different answer. for me i like it because it has a nice UI(with skin ofc), supports milkdrop visualizer, consumes less RAM, has itune like expand album feature(which is a must for me), auto tag feature, auto organize and so on.
It is really hard to cover WHY? because WHY NOT?

The different idea's might be the reason the ask the question. Let users braindump their reasons to pick MusicBee over other software, make a selection of 10-20 features that make MusicBee stand out and create a poll to pick the features that should be mentioned on the homepage.

Although I must admit that the features you currently list on the (test) homepage are unique to MusicBee. That is already way better than most websites can manage and probably good enough.

[AvikB]

Roboto is a non-standard font and I don't see you loading it anywhere in your CSS as webfont. You probably have it installed on your computer so it renders fine for you. Most elements render in Sans-Serif or Verdana on my PC because you configured those as fallback in the body style but for some reason you specify custom font parameters for some elements (.show_info, input, .btn, H1, H3 and .mainmenu) where H3 doesn't have any fallback fonts configured.

Ah crap, i completely forgot to include roboto from googlefonts , it must've slipped my mind when i switched to scss. it should be fixed now.

At my screen resolution (1080p with 125% DPI scale) the left side of the download screen looks a bit empty. It feels like the whole page is shifted to the right because the screenshot fills the right part of the screen but the left part is empty space. Also, on the homepage, you use generous spacing for everything, for example the feature boxes and hero-buttons. The boxes on the download page feel cramped with a lot less spacing and buttons that seem to big for the space they are allotted. Increase the paddings in the boxes, center the buttons and increase their margins and you'll go a long way to making those boxes feel less cramped. You can also make sure that the right side of the screen has roughly the same amount of empty space as the left side by making the screenshot smaller or just centering the whole page.

Now that I look at it again, it probably doesn't help that the screenshot is cut of at the right side of the page. >Screenshot<

The button text seems big because of the messed up font it should look good in Roboto.
The boxes are cramped because it does not have that much of context anyway, only few download links and few lines of text. making it bigger does not make any sense.
As for making the screenshot smaller, yes thats what i have in mind. To be fair since the new site is specifically shows MusicBee 3's feature, until MusicBee 3's UI is solid it is hard to get a screenshot for the website. Most of the current screenshots are placeholder. I will update them with new ones when MusicBee 3 UI is finalized.

Forum auth being the base auth for the website is not the problem. The login page being a visible part of the forum, without clicking on something forum related is confusing. Just getting rid of the secondery_nav and navigate_section on the login page would fix that. As you're understandably reluctant to change core files of the forum, this is probably something you can't change.

I am actually planning on making a separate login page for v2.0(the next big update), the forum will use it's own login page and the site will use it's own. But both of them will use same credential. OFC it is nothing more than plan at this point as i haven't looked in what kind of hash algorithm SMF uses.

Is it an idea to collapse it by default or for all non-logged-in users to leave a solid first impression?

I am planning to leave it as is for now. There will be another major forum theme+layout change when SMF 2.1 will be released.

The different idea's might be the reason the ask the question. Let users braindump their reasons to pick MusicBee over other software, make a selection of 10-20 features that make MusicBee stand out and create a poll to pick the features that should be mentioned on the homepage.

That could be a good idea. I have added to v2.0 roadmap.

[Steven]

@AvikB, the v3 UI is complete. Its already at the Release Candidate stage and should be going live at the end of this month so no more GUI changes will happen - just bug fixes.

[AvikB]

@AvikB, the v3 UI is complete. Its already at the Release Candidate stage and should be going live at the end of this month so no more GUI changes will happen - just bug fixes.

thanks for the confirmation. I will update the images in the Next update which will be the first stable build.

I have also added(and tested) support for HTTPS(SSL) for the site.

Btw do you have any plan to move the site to ssl? letsencrypt.org give free ssl certificate, and backed up some major corporations(mozialla, facebook and others). i am sure this topic has been discussed previously and the cost is always the issue. But yesterday Lets Encrypt released their first stable release and it could be a great opportunity to make the site more secure and trusted.

[hiccup]

Hey AvikB,

Just in case you are curious what the forum looks like now on a system with a strict 'no fuzzy fonts here' policy ;-)
The previously serif fonts are now indeed sans-serif.
Not all the fonts look particularly nice on my setup (especially the small-type bold ones), but that's not a problem.
(and I am the only one bitching about it anyway ;-)