EPTWhether you liked the design changes or not, they certainly did not come without some resistance or concerns from the community. The biggest concerns over the new design could essentially be boiled down into two thoughts, "How do I get to my posts?" and "I keep hitting the filter button to go home!" (there were a few others that were somewhat less important than these). With there being a big old mod note on the top of the thread saying that they had already received some feedback and welcome to it, I felt that it was important to share my thoughts, being a web designer of sorts, on some of the things that were changed that I was concerned about (in terms of usability, parsing out items, etc...). To my surprise, what I ended up suggesting as small changes to correct some of these bumps actually ended up getting used in adjusting the overall user experience of the site! It was really cool to see the changes go live and to see two suggestions of mine smack dab waving at me on the frontpage (the filter cog, for parsing out that this was a selectable and modifiable option, and the moving of the entire filter bar from the left to right side of the main navbar).
That being said however, when I decided to make a mock image up I started to think about how TL could further go down this road of simplification and making their user experience more clean, concise, and more enjoyable overall, and so I embarked on this somewhat theoretical exercise trying to understand and map out how and why the frontpage is the way it is, and then see how I could remove 'unnecessary' items, or move them into a better and more intelligent location. The most important ideas again here are cleaning up the visual look, while maintaining both the wealth of, and the ease of access to all the information you want.
So how do you clean up or simplify the site visually, and what exactly is not clean about it? The first thing you could do, and probably the simplest choice, is to re-skin the current layout into a more modern aesthetic. This was my first step and probably the biggest boon to simplifying the visual identity of the site. Part of this is because while the site was re-designed in 2010 there are a few visual ideas that have persisted from even the early 2000s classic design (gradient colors in l_sidebar headings for example).
+ Show Spoiler [older designs] +
![[image loading]](http://i.imgur.com/CguZcyF.jpg)
![[image loading]](http://i.imgur.com/7y2HESo.jpg)
![[image loading]](http://i.imgur.com/55huS1E.jpg)
The other reason this is a good place to start with was it is a important step in understanding how and why TL is set up the way it is currently, something very important to consider when trying to modernize or simplify your design. Here's the quick and dirty layout of the frontpage I initially set up with some minor changes to the typeface, and color scheme:
![[image loading]](http://i.imgur.com/Fk4uziE.jpg)
You can easily get a sense of what is important for the frontpage, and it is here that I started to notice a conceptual similarity to another more popular site at this current juncture, Pinterest. Essentially, what is at the core of both of these designs are a series of panes that contain either single items, or items/assets of a similar nature. Not that dissimilar from a column layout in a newspaper, however what this reminds me of more is a refrigerator door. I don't know how common this is nowadays, but when I grew up we used to keep post-it notes, magnet, or clip pieces of paper littered all over our fridge as a 'board of most important things' that our family used on a daily basis (anything from schedules, to phone numbers, or whatever). TL is very much the same where the frontpage contains the 'most important' items you will likely use on the site, hopefully in a well conceived and logical setup (and hopefully, not nearly as chaotic as that aforementioned fridge door).
It actually took a day or two to think about this how and why before I could get a sense of how to change or update things, but I got some help when thinking about ease of use, or the immediacy of how quickly you could access the most important site options (preferences, forums, site features, etc...). A few days later, I think I've gotten to a really good place in some areas, and not surprisingly, it's not radically different from the current design. Here is the result:
![[image loading]](http://i.imgur.com/l7dy07m.jpg)
Same Ideas, New Looks: Breaking Down the Changes
I'd like to for ease break down by each item going from top to bottom in letting you know a few of my thoughts on why I ended up with this result and what might be helpful to think about, or even consider in your own designs. Let's begin shall we?
The Navbar was the most recently changed thing on TL, and while I liked the addition of non-registered access to global content options, I thought the overall design choice was perhaps a little cluttered. There are a few things to note beginning with the position.
- I changed the position of the navbar to the top because what this allows is that we can use the position:fixed css attribute to make it so that our navbar is always at the very top of our screen, whether you are on the top of the webpage, or at the very bottom. What this does is that it allows instant access to your entire site navigation, never having to scroll in order to access this bar.
- In using this top orientation idea, what is commonly done on many sites with a search engine as well as a userbase, is that often these items will be found on, or very near to, this main navigation area. By having this in the exact fixed area, now you can access your search paramaters, or anything in your profile instantly.
- Speaking of profile, I changed the overall location to top right because predominantly websites tend to have this space as the user_profile area. For us, it allows the navbar to remain in its logical left-aligned position, while the search bar will move to the left once logged in. You'll note that I also removed a number of text options to access commonly used parts of your registered user options and placed icons for quicker access (remembering our fixed navbar idea). From left to right they are: PM, Subscribed Threads, Blog, My Posts (which after some thought should probably be a dialogue bubble instead of a post-it note), and Profile. This allows for regular users only two options for the profile dropdown, Liquibets, and options/logout (again, follows more common iterations on the internet) with additional admin options if you have those privileges.
- The Settings for your profile will access every aspect of your settings as a registered user on the site,
- As for the navbar itself, I changed the ordering slightly, because as options and features go, Liquipedia is a separate and non-site specific option, whereas all of the features are directly tied and accessed on TL.net.
A Funny Thing Happened...
Honestly, one of the things that really clutters the site is the direct access to the forums, but you cannot remove this option as I (and of course every registered user) use this feature every day. So how do you change this? How can you clean up the site to preserve what you currently have and make it better? After a lot of thinking It dawned on me that by having the navbar:fixed that we could add our forum list to this in the form of a dropdown list so that we too could access any forum from anyplace on the site.
+ Show Spoiler [forum] +
![[image loading]](http://i.imgur.com/ZsaWEaO.jpg)
"But wo1fwood, don't you need more actions to access the forums this way?" Yes and no. If you're talking about the top most forums, which are News and General by default, then yes. However, these I'd imagine aren't the most heavily trafficked sections of the site (not to mention the news forum list is kind of redundant on the frontpage, but I'll get to that in a bit). With these other forums you currently need at least 1 mouse click and 1-3 scrolls to get to where you are. With the change I came up with you need two mouse clicks, one to open the dropdown list, another to access the thread or forum you want. One thing to note is that for this to work on mobile platforms you really need to have this as a non hover and non navbar selectable option, because of how that landscape works. What this does do is
- Allows instant site-wide access to the forums, wherever you happen to be on the page (remembering our navbar is fixed at the top).
- Preserves the customization of the forum options that we currently have.
- Can allow for longer thread titles, and up to 5 top threads for every forum (an up for D3 and LoL).
- I like the blogs section and this allows it to be slightly less transient with more space.
Site Coverage and sub_banner items
In talking about our brand new options, I understand why the filters options were on the leftmost side when they were introduced, and now that we've moved the navbar, we can place these options back where they were.
+ Show Spoiler [coverage and sub_drop down] +
![[image loading]](http://i.imgur.com/ASvSx2x.jpg)
You'll also note that I added the times in the center, and the active users and chat options in this area. The reason for this is because the top of the webpage now feels a little more social on the right most side due to your profile, streams, and events, and now teamspeak/irc being all in this locale. Additionally I simplified the options to be an easy radio box dropdown (toggleable) that includes the spoilers option, and the reminder to visit LP for the most recent results. This preserves this information being in a place, but also removes it from the neutral look of the mainpage (less floating text).
Body of Work
TL is a coverage and news website. It has always been. One thing that I found I really liked was that by moving the forum sidebar from the main layout I now had more room and was able to really present the important news and community content in a more impactful manner. By removing the left sidebar we gain a lot of cool options that weren't previously available to us.
The leaderboard adspace is preserved. Obviously important, but I find I like the extra space on the sides as it makes the site fee a little less claustrophobic. Speaking of this, in going back to our panes option idea, I removed the background from the left area so that each pane had a more floating quality and felt more spacious (as a note, the padding is 8px around each pane). This also helps reinforce that idea on post-it notes on the refrigerator.
The right sidebar is also preserved. This is because in my ruminating I found that in terms of important materials, items, or events, that this sidebar preservation helped say "hey, live content on the right", as opposed to static content on the left pane. Also as I mentioned before, this helps with the right_aligned social-ness of the site in general. I think.
I also included stream viewer numbers, as it's another subtle way to include people in the social conversation, without needing to have them actively participate (also helps with intrigue and enticement).Now, the left pane. I'll try to break this down by each pane, as it took me a while to figure out how to rearrange the frontpage.
- The frontpage placeholder is familiar, but there are three changes to note. First the fp image placeholder is now exactly the size of a standard youtube video, at 640x360. Second, there are now 5 places for Featured News articles. Third, the image thumbs are removed from underneath the larger fp space to keep the layout cleaner. This is a small thing and probably could go either way, but I felt text-only was better.
- Community News only changed insofar as the width is now 300px. This allows for a few more items in the list (originally I had done this for adspace sizes but ended up changing this later below).
- Spotlight got moved back to where it was before. Why? Well I had to preserve the thin-thick-thin layout of this secondary level of overall content layout, but what made me ultimately choose this position was because of the poll and store vertical spacing along with the sponsored thread position.
- Featured Articles was widened to 571px so that each side panel could be 180px (conforming for adspace). This also helps with less scrolling of all the news content.
- Ok, Sponsored Threads. Why did I put this here? Money. In terms of visibility I felt that this was a better position because in my own screen, I can see just barely the top most portions of the store/featured articles/spotlight. This helps promote this content better I think, especially because this card or area is usually pretty small.
- Store and Poll are also placed below Sponsored Threads as I felt the position of poll was already in a decent spot, but also ST and Store are monetarily based, so it groups that content into a similar vertical space. This is why Featured Video is also directly below Featured Articles, as this helps to keep content of a similar nature in the same or close proximity to each other. Also one addition to placing the Featured Video here is that the image thumb is 180px wide and in the current iteration necessitated a 4th size in the panes. by doing this we can remove this slight deviant. This does mean that the 300x250 rectangle adspace is not usable in a clean way, which is something to consider for sure, but I tried to at least add in something removed, and hence, the square adspace on the left side.
Threads and Not the Mainpage
This is where I've had another major ??? moment. While I love the wider mainpage approach, adapting this to thread, streams and other things is another matter. And this is where hit a larger road bump. I got the frontpage working I think pretty well (remembering this is mostly a conceptual exercise) but how do I approach this new width for this area... As it stands the new width is 948px. Not quite the more standard 960px, but also not 640px or 800px (current stream window size). Nor is it the either 746 or 620px size that twitch uses. You could have native 480p resolutions though (non-fullscreen), so that's something to consider as well. All in all, oi.
Ok, so why is this new size a problem? Well it's not necessarily a problem, but it does mean that one thing you might have to do is change the bulletin board layout to accommodate this, from our more traditional vertical setup, to a more horizontal or address book-like setup (is this too wide as a result, looking awkward from too much unused space). This I worry about because in mentioning this to Nazgul, he mentioned something about keeping the soul of TL alive, and this change is something that could drastically change how TL feels to the average end user... So how to approach this...Well, carefully is the most obvious word, but I've had a lot of trouble trying to think about this.
In the end I just had to sit down and try a few options to see how they struck me, and, I'm not sure of any of the ideas after working on them. They all have relative strengths and weaknesses to them that I could potentially see, though whether this would actually be the case, in the real world idk (always better to be cautious). So I'll just list some of each for the ideas I worked on.
Idea #1 + Show Spoiler [1st] +
![[image loading]](http://i.imgur.com/hZLxtqa.jpg)
- This is the closest resemblance to the current look of the forums with some changes. I thought integrating the thread title with the OP helped remove some unnecessary graphics. In trying to integrate into one section heading, I had to try to simplify the look, and the most obvious solution was to add a dropdown menu (both toggleable or on mouseover) that contained the additional and less important items to the operation of reading or responding in a thread. One of the reasons I also added the dropdown menu is because in cleaning up the look, you have to accentuate the most important options or pieces in a thread response, namely: who wrote it, when, how do I reply, where are we in the conversation, and what they said. Anything besides this information is supplementary and not of primary importance. That being said however, having options like a sig, or showing team support, or where you reside and how many posts you have (with bw iconography), are all still cool and great additions and are part of what make TL feel like TL. I also changed the highlighted poster colors because they didn't impart the importance or highlighting when de-saturated (color blind options, i'm not that knowledgeable on setting this up but I wanted to try to work with that in mind).
- What I feel is not so great about this setup is in terms of how a lot of vb boards work, the response options are usually in the lower right corner, and having team icons and lp coins in that position sort of make that visually clumsy if trying to satisfy putting both in that area. I also am not sure of the necessity of the thread heading space being necessary here, but that could cause other problems. Cue a tweaked revision
![[image loading]](http://i.imgur.com/vjRIVTo.jpg)
- The main difference here is that the entire thread conversation is in a single pane, and that we no longer have thread response headings separating each post. Many current board designs follow this pattern and while it works very well in a number of situations, I wonder about the visual separation between the original content (the OP) and the beginning of responses. One solution could be to simply add in another heading bar between them to visually separate this better, but that then might cause problems or a visual clumsiness for multi-post content, like Torte's How to Use TL (doesn't have to be this color exactly but you get the idea) + Show Spoiler [visual bar] +.
![[image loading]](http://i.imgur.com/KMzzyJT.jpg)
Then we finally get to the biggest departure in
Idea #3 + Show Spoiler [3rd] +
![[image loading]](http://i.imgur.com/vM9dEPc.jpg)
- Obviously this is the biggest change, as the orientation is now horizontal and not vertical. One thing this orientation preserves, at least to a small degree, is the closeness to our current 736px thread width. Now this width is 768px, a gain of only 32px. One of the things I was concerned about the vertical orientations above was that because the thread width was 948px that banners would be a possibly a little too wide. It's not so much that this is a bad thing, but that in terms of how the internet functions as a general rule when it comes to banners and graphics, 948px for secondary items is pretty darned wide, and comes close to the longtime standard of 960px for the entire html page width. One other thing you'll note for this iteration is that only the most important information is where it logically feels like it should be, and because of the tag-like format, sequesters userinfo away from the what and when of the actual post. Finally, highlighted posters can now have their heading bg modified, instead of the entire post bg. I was never a fan of the color chosen for highlighted posters, though i'm not sure of this iteration either, it at least allows for better readability and less strain to my eyes in reading the content section of the response.
- The one thing that i'm not sure of visually is for exceptionally long posts and the left user area of the panes. That's an awful lot of dead space, not to mention, a lot of blue. For news coverage it seems that this would need to be an accessible option for the html options, especially for things like dota2 which is not at all in the blue spectrum, and at least on TL is far more varied in its css styling per content type. I'm also not as sure about the thread title bar, it's ok, but I wonder if it couldn't be better managed here. I should also note that the minimum height of the post with sig is exactly as the 1st, 3rd and 4th posts look, which means anyone with no sig or team or lp stuff, the pane is a tad larger...is this an issue with fitting X amount of posts onto a single page and therefore necessitates larger pages? idk, it's definitely something to note.
With my final thoughts on this exercise, I like using Open Sans for the font (hello TL Strategy), but unfortunately at this current juncture I feel that readability issues past a certain size (in the smaller direction) would preside if this were the main font to be used. I'm not the biggest fan of Arial (though it works), or any of the other long time standard fonts, but until screen resolution sizes change we really aren't going to have truly good looking options across the board when it comes to alternate font presentation (imagine how much cleaner this would all look on a 4k screen and double the pixels to represent an item). They're a huge boon to design right now, and infinitely better when dealing with larger headings, but visually they still are a bit limited in the other direction.
So there are my thoughts on this theoretical exercise that I chose to embark on. It's been a good process for me to think critically about what is exactly important to impart to the end user and how to 'best' approach this. I'm by no means saying that my ideas are better than what is currently set up, as TL has been around for more than 12 years and I suspect has functioned adequately most of this time, and in my own poking around have seen a number of important reasons to why it's hard to iterate on this design without losing functionalities, or options, or other things that make TL well, TL. I hope that some of these ideas might spark some good discussion, or get your brain working around informational flow and user friendliness, and I'd love to hear how this idea strikes you or what could be problematic or great changes in your eyes.
Cheers.
. I like the current look, and while it might need some sprucing up, one thing about TL that I find really greater is the feel of nostalgia on the site. If the site lost that, it would be a lot less fun to run around on. Though I realize the site has undergone massive changes since 2002, the general layout has seemed fairly similar, and it would be a shame if that changed.
![[image loading]](http://i.imgur.com/DE1aSWC.gif)
