Site redesign - 2016 Update #1

[kraag]

In response to post #34723145. #34723880, #34726020, #34726205 are all replies on the same post.

kraag wrote: Look like M$ Windows 10 buttons and general "square" layout.

Funny how many many large/corporate websites have gone this way so soon after W10 was released. Almost like they got payed to do it by M$.

I have no idea why you'd want your website to replicate the look of that Spyware M$ OS.

splinter82 wrote: Wow. Conspiracy theorist much>?

kraag wrote: Wow - stick your head in the sand much?

opusGlass wrote: Funny how companies follow the current trends?

Funny how corporations CREATE current trends.

[TheTokenGeek]

In response to post #34709080. #34709435, #34709560, #34709745, #34709825, #34709920, #34711150, #34711250, #34711315 are all replies on the same post.

BlindJudge wrote: Well we've entered 2016 with a productivity bang, all hands are on deck and there is plenty going on behind the scenes here at the Nexus so I thought I'd give you all an insight into what's happening...

Firstly a quick recap - we began the redesign process in the second half of 2015 by first trying to work out what our users like and dislike about the site. We were overwhelmed with the response to our survey which provided us with a wealth of information, our community is definitely one of the best in the world and it was great to see how truly passionate you all are in regards to our site.

A lot of people commented as to how they cannot browse the site on anything other than their PC, others were more interested in trying to find mods quickly and easily, others just wanted the site to be made 'fresher' and 'inline with modern web standards'. We took the time and read through each and every response that we received, that in itself took several weeks.

We decided to aim towards specific goals that were brought up over and over again, the first is for us to create a cracking mobile / tablet / responsive experience so that the site can be enjoyed by any user on any device, but without this experience lessening the experience from our core crowd of users who still visit the Nexus via their desktops. Secondly, we want the site to be easy to navigate around with search deeply integrated with the main functions, and thirdly, we want it to look nice and be a pleasure to use. The list goes on and on, but you get the general gist.

We knew that we weren't going to be able to do this all ourselves and that we were going to need some help from a professional, so we advertised for a UX/UI designer and got a great response from a number of people. Each person brought something to the table but after a lot of deliberation we contracted Phill into the position. He immediately took it upon himself to read through the research we had already conducted (survey results, hot-spots, device statistics) and started producing diagrams and wireframes for us to check out based on his conclusions from the research.

Things were moving along swiftly, but we wanted input from the community and setup a focus group of 15 Nexus users to help. This group has been nothing but brilliant, right from the word go we have had a constant and thorough source of input from them. What has been great is that they come from such a diverse demographic that they represent a great cross section of the Nexus community, giving us an all around feel for what we are doing and whether it would or wouldn't work. I tip my hat to them for the time and effort they have expended on assisting us, it's not over yet though guys ;)

The focus group talks on behalf of the Nexus users. While we would love to include everyone in every stage of the design process, I hope you can appreciate that having 10 million people all chiming in on any sort of process is just completely untenable. I understand that some people are concerned that they’re not being more involved in the process, however, we believe we’ve done well by you these past 14 years and ask that you trust that we’ve got everyone’s best intentions in mind once again!

With the focus group onboard we went full steam ahead on the wireframes. These proved invaluable to begin placement of features on the site and begin to visualise the site routes that people would take to do things.

An example of one of the wireframes we used is below, please note that these are old wireframes and may not reflect the final layout / look of the site.

http://i.imgur.com/H007GXkl.png

After the wireframe stage we worked on design mocks, which included things like fonts, icons, more placement tests and colour schemes. Again, please note that these are old designs and may not reflect the final layout / look of the site.

http://i.imgur.com/4Y6H3THl.png

We’re now into February. Currently, Phill is converting the mock-ups into HTML, CSS and Javascript that our site developers can then integrate into our framework. This is a time consuming and painstaking task, as we test each page created against numerous browsers, devices and resolutions to ensure the maximum compatibility possible. But we’re also beginning to see the fruits of our labour in an interactive way for the first time.

Our aim now is to get the site to a stage where we can open it up to run alongside the current site, at first simply as a shell to allow you to experience it and see if it breaks when you try and do things.  But should this be successful it will then be attached to the live database and you will be able to use it alongside the existing site. Between us we’ll iron out any bugs that are discovered and hopefully come out the end with a product that is better, and that we are all proud of.

For those interested, I’ve created a small timeline of events since the beginning of the redesign process.

http://i.imgur.com/B0RXXQY.png

Any questions, please feel free to get in contact.

Kind regards

http://i.imgur.com/SZYsdYu.png

mannygt wrote: Man, I love this new design, really and I'm talking as Web Designer (and developer).

I have just a suggestion for your back-end: Please add the unload() event to avoid leaving the page when a user is uploading a mod without prompting. It's happened to me when I accidentally clicked a link when I was uploading a huge file (my fault of course).

Thank you :)

EHPDJFrANKy wrote: Hi BlindJudge;

Congrats to all the stuff for the great work on all the site. Good news to see you all are working hard, to better the experience.

Speaking about profiles, and in a more concretely way, about pictures and caps, please, Can you tell us, if the pictures needed for the profiles of the mod will change? if so, do you know, which will be the new sizes for them?

Just to know, and going preparing new images for my mods-translations profiles.

Thanks a lot in advance.

Take Care and C U Soon !!!

TheLich wrote: Nice disign! Can't wait to try it out!

BTW, there is a type in events timeline - last two should be in 2016, no?

Hoamaii wrote: Great work!.. Thanks for sharing :)

One 'small' suggestion: is there a way that you could make the 'back to the top' button slide alongside the page so that it remains clickable from anywhere you are in the page?

And a question: what's the tick button for at the bottom of mods' previews?

(sorry for the inappropriate language, French here ;))

BlindJudge wrote: @TheLich - I have no idea what you're talking about - Typo, what typo! ;)

(cheers, have now corrected it :) )

digitaltrucker wrote: Nice to see Phill hasn't begun work twice now as well ;)

4killmaster wrote: This looks fantastic! Do you have any plans to include a legacy version of the site for those that prefer the current layout?

digitaltrucker wrote: Btw - am I the only one that thinks 'Trending Mods' sounds really lame? What's wrong with 'Hot Files"?

For the beginning we will most certainly run the two sites concurrently. It will give people a chance to try it out, find things that break and get used to the navigation etc.

[TheTokenGeek]

In response to post #34709450.

sunshinenbrick wrote: Looks awesome! Thanks for the detailed update and visuals. Very exciting :D

You're more than welcome, I am hoping to get updates out on a far more frequent basis.

[TheTokenGeek]

In response to post #34710005.

DreamingGirl wrote: I only have one plea: PLEASE! don't give us infinite scrolls, give us pages and paginator! Infinite scrolls makes it a real pain to find things again later..

So far it looks ok tho

Oh no! Really!?!?! You don't like infinite scroll :(

.
.
.
.
.

You'll be incredibly pleased to know that there is no infinite scroll and we have no plans to implement it :D

[AKcelsior]

That looks great.

[DreamingGirl]

In response to post #34710005. #34726575 is also a reply to the same post.

DreamingGirl wrote: I only have one plea: PLEASE! don't give us infinite scrolls, give us pages and paginator! Infinite scrolls makes it a real pain to find things again later..

So far it looks ok tho

BlindJudge wrote: Oh no! Really!?!?! You don't like infinite scroll :(

.
.
.
.
.

You'll be incredibly pleased to know that there is no infinite scroll and we have no plans to implement it :D

Lol that is good to hear :D

I was just concerned from the pictures that says 'load 10 more' or 'load 15 more' as that is usually a sign of endless scrolling to get anywhere. So you are saying there will actually be pages, and not 'load 10 more' ad nauseum on page one?

[llihP]

In response to post #34723145. #34723880, #34726020, #34726205, #34726395 are all replies on the same post.

kraag wrote: Look like M$ Windows 10 buttons and general "square" layout.

Funny how many many large/corporate websites have gone this way so soon after W10 was released. Almost like they got payed to do it by M$.

I have no idea why you'd want your website to replicate the look of that Spyware M$ OS.

splinter82 wrote: Wow. Conspiracy theorist much>?

kraag wrote: Wow - stick your head in the sand much?

opusGlass wrote: Funny how companies follow the current trends?

kraag wrote: Funny how corporations CREATE current trends.

Masonry layouts were 'square' and image based well before Windows 10 (or 8, originally) had come out. The most recognisable one from back before W8 was released (2011-2012) would probably have been Pinterest.

http://www.webappers.com/2011/12/29/15-great-examples-of-websites-using-jquery-masonry/

Microsoft popularised the concept because they screwed it up so royally for desktop PCs, plus their implementation was poor as a lot of tiles weren't given any context and a lot of it seemed arbitrary.

If you also consider that many of the design elements that currently exist on this site, like thumbnails, mod result lists etc are already image based, you'll see that the primary difference is a shift of where the content sits - it's mostly over the top of the thumbnail now, alongside data that wasn't previously exposed and required an extra click/page load to see.

Considering how vocal I was about how bad I thought the Windows 8 UI/UX was for desktop PCs all those years ago, I couldn't be any more opposed to making it like W8/8.1/10.

[kraag]

In response to post #34709080. #34709435, #34709560, #34709745, #34709825, #34709920, #34711150, #34711250, #34711315, #34726405 are all replies on the same post.

BlindJudge wrote: Well we've entered 2016 with a productivity bang, all hands are on deck and there is plenty going on behind the scenes here at the Nexus so I thought I'd give you all an insight into what's happening...

Firstly a quick recap - we began the redesign process in the second half of 2015 by first trying to work out what our users like and dislike about the site. We were overwhelmed with the response to our survey which provided us with a wealth of information, our community is definitely one of the best in the world and it was great to see how truly passionate you all are in regards to our site.

A lot of people commented as to how they cannot browse the site on anything other than their PC, others were more interested in trying to find mods quickly and easily, others just wanted the site to be made 'fresher' and 'inline with modern web standards'. We took the time and read through each and every response that we received, that in itself took several weeks.

We decided to aim towards specific goals that were brought up over and over again, the first is for us to create a cracking mobile / tablet / responsive experience so that the site can be enjoyed by any user on any device, but without this experience lessening the experience from our core crowd of users who still visit the Nexus via their desktops. Secondly, we want the site to be easy to navigate around with search deeply integrated with the main functions, and thirdly, we want it to look nice and be a pleasure to use. The list goes on and on, but you get the general gist.

We knew that we weren't going to be able to do this all ourselves and that we were going to need some help from a professional, so we advertised for a UX/UI designer and got a great response from a number of people. Each person brought something to the table but after a lot of deliberation we contracted Phill into the position. He immediately took it upon himself to read through the research we had already conducted (survey results, hot-spots, device statistics) and started producing diagrams and wireframes for us to check out based on his conclusions from the research.

Things were moving along swiftly, but we wanted input from the community and setup a focus group of 15 Nexus users to help. This group has been nothing but brilliant, right from the word go we have had a constant and thorough source of input from them. What has been great is that they come from such a diverse demographic that they represent a great cross section of the Nexus community, giving us an all around feel for what we are doing and whether it would or wouldn't work. I tip my hat to them for the time and effort they have expended on assisting us, it's not over yet though guys ;)

The focus group talks on behalf of the Nexus users. While we would love to include everyone in every stage of the design process, I hope you can appreciate that having 10 million people all chiming in on any sort of process is just completely untenable. I understand that some people are concerned that they’re not being more involved in the process, however, we believe we’ve done well by you these past 14 years and ask that you trust that we’ve got everyone’s best intentions in mind once again!

With the focus group onboard we went full steam ahead on the wireframes. These proved invaluable to begin placement of features on the site and begin to visualise the site routes that people would take to do things.

An example of one of the wireframes we used is below, please note that these are old wireframes and may not reflect the final layout / look of the site.

http://i.imgur.com/H007GXkl.png

After the wireframe stage we worked on design mocks, which included things like fonts, icons, more placement tests and colour schemes. Again, please note that these are old designs and may not reflect the final layout / look of the site.

http://i.imgur.com/4Y6H3THl.png

We’re now into February. Currently, Phill is converting the mock-ups into HTML, CSS and Javascript that our site developers can then integrate into our framework. This is a time consuming and painstaking task, as we test each page created against numerous browsers, devices and resolutions to ensure the maximum compatibility possible. But we’re also beginning to see the fruits of our labour in an interactive way for the first time.

Our aim now is to get the site to a stage where we can open it up to run alongside the current site, at first simply as a shell to allow you to experience it and see if it breaks when you try and do things.  But should this be successful it will then be attached to the live database and you will be able to use it alongside the existing site. Between us we’ll iron out any bugs that are discovered and hopefully come out the end with a product that is better, and that we are all proud of.

For those interested, I’ve created a small timeline of events since the beginning of the redesign process.

http://i.imgur.com/B0RXXQY.png

Any questions, please feel free to get in contact.

Kind regards

http://i.imgur.com/SZYsdYu.png

mannygt wrote: Man, I love this new design, really and I'm talking as Web Designer (and developer).

I have just a suggestion for your back-end: Please add the unload() event to avoid leaving the page when a user is uploading a mod without prompting. It's happened to me when I accidentally clicked a link when I was uploading a huge file (my fault of course).

Thank you :)

EHPDJFrANKy wrote: Hi BlindJudge;

Congrats to all the stuff for the great work on all the site. Good news to see you all are working hard, to better the experience.

Speaking about profiles, and in a more concretely way, about pictures and caps, please, Can you tell us, if the pictures needed for the profiles of the mod will change? if so, do you know, which will be the new sizes for them?

Just to know, and going preparing new images for my mods-translations profiles.

Thanks a lot in advance.

Take Care and C U Soon !!!

TheLich wrote: Nice disign! Can't wait to try it out!

BTW, there is a type in events timeline - last two should be in 2016, no?

Hoamaii wrote: Great work!.. Thanks for sharing :)

One 'small' suggestion: is there a way that you could make the 'back to the top' button slide alongside the page so that it remains clickable from anywhere you are in the page?

And a question: what's the tick button for at the bottom of mods' previews?

(sorry for the inappropriate language, French here ;))

BlindJudge wrote: @TheLich - I have no idea what you're talking about - Typo, what typo! ;)

(cheers, have now corrected it :) )

digitaltrucker wrote: Nice to see Phill hasn't begun work twice now as well ;)

4killmaster wrote: This looks fantastic! Do you have any plans to include a legacy version of the site for those that prefer the current layout?

digitaltrucker wrote: Btw - am I the only one that thinks 'Trending Mods' sounds really lame? What's wrong with 'Hot Files"?

BlindJudge wrote: For the beginning we will most certainly run the two sites concurrently. It will give people a chance to try it out, find things that break and get used to the navigation etc.

@ digitaltrucker - You are not the only one.

[jpsimonetti]

In response to post #34714565. #34718485, #34720180, #34724595, #34724720, #34725835 are all replies on the same post.

Rooker75 wrote: I'm sure someone's brought this up already, but I'll say it anyway, this site isn't the friendliest to mobile devices as it is now. Text is too small, some important menu buttons rely on a mouse hover event that's impossible for a touch screen and the search box at some point stopped accepting the "enter" button as input (also a problem on desktop browser), so it makes it extra awkward searching from a tablet/phone.

Also, I despise white text against black backgrounds and wish I could choose a more usable color theme, like I can on the forum part of the site. More than a few minutes gives me serious eye strain. I can override the colors on my PC's browser but it makes everything look weird. I can't do that at all on my tablet.

epoling wrote: Am I just old? I don't get reading this site on a phone. You only get a few lines of text that is too tiny for these old eyes to read. By the time you crowd all the necessary functions of Nexus onto a mobile screen you get even less text unless you make it tinier. Just because things can be done on mobile devices doesn't really make it a good idea.

Pagafyr wrote: No! You're not getting old. You are getting worn out, likely following the incorrect guidelines for your continued health and wellness. The tiny mobile phone screens tend to strain the eyes a person who is beginning to suffer from lack of solar or HappyLight during the Winter months when the days are shorter. Get a couple HappyLights in you rooms and you'll see the difference after following the instructions CAREFULLY for them.

llihP wrote: As the new design stands, it's very mobile/tablet friendly.

jim_uk wrote: Does anyone know what those menu buttons at the top do? if clicking them brings down a menu then that's fine, if clicking them takes you off somewhere then it's going to have to same problem as the site does now.

llihP wrote: They bring down menus, yes

Regarding Epoling's post.

I have no idea why you'd want to look at this site on a mobile. Are you going to download the addon to your Mod Manager on your mobile? Can your mod browsing not wait until you get home? Seems like a huge waste of resources to expect a site like this to cater to that demand. I'd like to see stats on what devices most of their traffic comes from.

I realize things change, but I hate to see it happen sometimes. This site, for example, is a classic web site design. It is sleek, incredibly fast and responsive, and easy to find what you're looking for without pictures and shiny objects everywhere.

What you kids probably don't notice (because you grew up with it), is the very slight delay in highlighting when you mouse over all those fancy new tiles people keep making sites with. When you mouse over text or a raw html img insert, it highlights instantly. (as you'd see on a classic website, like this). For a generation that is so easily distracted, you'd think they would notice.

That's not a big deal if you're used to it. But there are lots and lots of these "not a big deals" on modern websites. Kids will never really understand how fast and responsive a web site can be, because they rarely see them. They think it means bandwidth/load time when people say a web page is fast and responsive. It doesn't. Or didn't used to, anyway. Now things are ridiculously cluttered with raw text in HTML replaced by a script or image at every possible place.

Anyway, things change. Whatever. Just ranting.

[kraag]

In response to post #34723145. #34723880, #34726020, #34726205, #34726395, #34729495 are all replies on the same post.

kraag wrote: Look like M$ Windows 10 buttons and general "square" layout.

Funny how many many large/corporate websites have gone this way so soon after W10 was released. Almost like they got payed to do it by M$.

I have no idea why you'd want your website to replicate the look of that Spyware M$ OS.

splinter82 wrote: Wow. Conspiracy theorist much>?

kraag wrote: Wow - stick your head in the sand much?

opusGlass wrote: Funny how companies follow the current trends?

kraag wrote: Funny how corporations CREATE current trends.

llihP wrote: Masonry layouts were 'square' and image based well before Windows 10 (or 8, originally) had come out. The most recognisable one from back before W8 was released (2011-2012) would probably have been Pinterest.

http://www.webappers.com/2011/12/29/15-great-examples-of-websites-using-jquery-masonry/

Microsoft popularised the concept because they screwed it up so royally for desktop PCs, plus their implementation was poor as a lot of tiles weren't given any context and a lot of it seemed arbitrary.

If you also consider that many of the design elements that currently exist on this site, like thumbnails, mod result lists etc are already image based, you'll see that the primary difference is a shift of where the content sits - it's mostly over the top of the thumbnail now, alongside data that wasn't previously exposed and required an extra click/page load to see.

Considering how vocal I was about how bad I thought the Windows 8 UI/UX was for desktop PCs all those years ago, I couldn't be any more opposed to making it like W8/8.1/10.

Glad I'm not the only one, I will wait and see how it turns out though before passing final judgement. As they say the new site layout is still in its infancy. But, like FO4, I fear this is the way they are going, regardless.

Sad to see that whatever the corporations say is "trending" is ultimately what everyone has to abide by - rather than designing your own unique site and standing out from the crowd, essentially, thinking for yourself.