Recently TeamLiquid.net changed a few things about its design and how it functions. Some smaller changes, some larger, like modifying the login and user_info area, adding a global filter option, as well as trying to simplify and refocus the main navbar and other parts of the site.
Whether 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).
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:
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:
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.
Then there's the biggest and most difficult change from this design to the current one. Your first question when looking at the new look was probably "Where's my forum access?!" A prudent question, and one that took a lot of my time to figure out.
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.
"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.
By separating the forums as well from the frontpage layout, it also subtly reinforces the frontpage as a news and information hub, as well as tie the discussion and community in, in a more supplementary and somewhat sequestered way. I do have to say that I'm not entirely convinced on the ordering of the forums or positions in the dropdown menu. The right column for example works to a degree, but currently it doesn't feel as precise as it possibly could be.
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.
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.
For the last part of the mainpage content, we get to the footer. The first thing you'll notice is that I moved the site affiliations from the top to this area. This is mainly done for cleanliness, but also that these are affiliate sites and aren't important in terms of the main navigation of this site specifically. I also moved the social integration here (as many sites have this content here) as well as adding a Staff and Sitemap option into the list next to it. This is so that staff could be easily looked up, and also so that you can get an idea of the whole site from a global perspective. Also it helps with indexing. This may be something out of the reasonable scope atm though as I don't know all of the current workings behind TL.
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.
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
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] +
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.
The last problem I ran into was how to logically incorporate lp coins and team support into the scheme, and after a number of tries I haven't been able to find a space where this is clean, and visible. They could be easily incorporated into the dropdown menu, but that kind of defeats the intent of these items to begin with, or at least the immediacy of that idea.
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.
This needs to be in featured . 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.
Half the threads I visit are because of the title pops up in the left bar, removing that would probably reduce the amount of time I spend on TL by about 1/2, hmmmm maybe that is a good idea.
yea fair points to be sure. This is the biggest deviation out of everything, and I'm not sure of the benefits it lends to the front page content outweighing the potential heartache it could cause, especially since I haven't been entirely thorough in how and what it would or could change in 'normal operation' for the average person (only need to look at the problems I walked into by removing this area when trying to set up the forum layout). A lot to be said regarding big changes on a site that is trafficked by tens of thousands of users.
I should mention that I really like some of the smaller simplification or convergence ideas I had, but the forum thing kind of overshadows them as its a pretty large deviation. I also wonder if I should request a title change to "Iteration or Invention?"
I wouldn't have found this article if there was no left side bar. Everyone would be forced to create threads so good it makes the featured list so we notice them. Its kind of evil and brilliant.
On June 04 2013 08:34 Waxangel wrote: consider the response we got to moving 'home,' now reconsider removing the left sidebar
personally I could live without it, but I don't think the TL users would let us live if we removed it
I had a hard time with the home button change, but clicking specific threads on the sidebar isn't quite the same since you need to pause and choose which thread to read rather than relying on muscle memory to instantly click the same thing every time.
One suggestion, maybe you could move the right side of the dropdown menu (forum index - blogs) so that it doesn't block events and live streams. I check the calendar and streams just as often as thread updates.
On June 04 2013 08:34 Waxangel wrote: consider the response we got to moving 'home,' now reconsider removing the left sidebar
personally I could live without it, but I don't think the TL users would let us live if we removed it
This.
Consider the top banner content a microcosm of what you suggest with the sidebars.
We took certain content that relatively fewer people use frequently (but is less used by a large number of people) and made it a drop down (read: a subgroup of logged in users vs a large majority of non-logged in users). The response was vehement.
We added a pin for those people to essentially return the site to what it was prior to the redesign.
I like the look of your redesign, and believe me we have thought about this... but we would never be able to implement that without a massive revolt.
EDIT: Also, we stick to "older" stuff like Arial to maintain consistency and reliability across platforms. Using Open Sans for Strategy (for example) has created problems with some users. Once browsers catch up with consistent and readable rendering of fonts, we can have more fun.
On June 04 2013 08:34 Waxangel wrote: consider the response we got to moving 'home,' now reconsider removing the left sidebar
personally I could live without it, but I don't think the TL users would let us live if we removed it
I had a hard time with the home button change, but clicking specific threads on the sidebar isn't quite the same since you need to pause and choose which thread to read rather than relying on muscle memory to instantly click the same thing every time.
One suggestion, maybe you could move the right side of the dropdown menu (forum index - blogs) so that it doesn't block events and live streams. I check the calendar and streams just as often as thread updates.
I actually entertained that idea for a little bit as I wondered about how immediate the level of access to events/streams are used by people. I look at the events section all the time, but I think the reason that I eventually decided on this width was because a common idea in drop down menus today is to be %100 the width of the site contents. Also at one point earlier I had the forums stacked in columns and not rows.
On June 04 2013 08:34 Waxangel wrote: consider the response we got to moving 'home,' now reconsider removing the left sidebar
personally I could live without it, but I don't think the TL users would let us live if we removed it
This.
Consider the top banner content a microcosm of what you suggest with the sidebars.
We took certain content that relatively fewer people use frequently (but is less used by a large number of people) and made it a drop down (read: a subgroup of logged in users vs a large majority of non-logged in users). The response was vehement.
We added a pin for those people to essentially return the site to what it was prior to the redesign.
I like the look of your redesign, and believe me we have thought about this... but we would never be able to implement that without a massive revolt.
EDIT: Also, we stick to "older" stuff like Arial to maintain consistency and reliability across platforms. Using Open Sans for Strategy (for example) has created problems with some users. Once browsers catch up with consistent and readable rendering of fonts, we can have more fun.
ha ha that reminds me of when I decided to try to be 'cool' a number of years ago and use sifr to render my heading fonts better...that was not a good idea, especially considering the rapidly expanding mobile landscape. Keeping with older standards like Arial is the safer and better bet I would agree for certain, especially considering the position TL is in.
Also it doesn't surprise me that you've all thought of these things at some point in time. I'm pretty impressed at a lot of what TL does, for example focus mode, which is baller. This thing gave me a new appreciation for your position for sure as the admins and designers.
On June 04 2013 06:41 wo1fwood wrote: "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.
You need a higher res monitor. No scrolling here. This is my view of TL.net: + Show Spoiler +
The mockups look great. What tools did you use to do them?
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,
These are good goals for a simple graphical redesign, but from a UX/Interaction Design/Usability perspective, I think these are really vague goals. I usually try to create more well defined and measurable goals to which I can assign some kind of metric, and usually you can create these goals by looking at user data and analysis (which can be hard if you're just doing a conceptual exercise). An easier way to do this might be to get yourself and couple of friends (who are TL users) together in a room/skype chat and try to find their patterns of usage (and possible problems), and try to come up with goals which address these use cases.
I guess what I'm trying to say is, your design looks good, but I don't really know if it achieves the goals of being more usable (it very well might be more usable than the existing design, we just have no way of evaluating since you don't have a well defined list of goals).
Also regarding fonts : I absolutely love Lato , and use it for a lot of my designs. Sample page (not my design)
On June 04 2013 06:41 wo1fwood wrote: "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.
You need a higher res monitor. No scrolling here. This is my view of TL.net:
I don't think he's talking about horizontal scrolling. If you're reading a thread and scroll all the way down to the end of the thread, the sidebars will be hidden, and you need to scroll back up to navigate to a different thread or section.
On June 04 2013 06:41 wo1fwood wrote: "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.
You need a higher res monitor. No scrolling here. This is my view of TL.net:
I don't think he's talking about horizontal scrolling. If you're reading a thread and scroll all the way down to the end of the thread, the sidebars will be hidden, and you need to scroll back up to navigate to a different thread or section.
Edit: Sorry for the double post.
I'll assume you mean vertical scrollbar, I was assuming his sidebar extended past the vertical space viewable on his monitor.
But if you want to go with that...then home + click on the sidebar, still only two clicks. Or hold middle mouse/move mouse to top of screen and then release middle mouse and click on sidebar. Slightly more complex two clicks, but still only two clicks. Or click and drag scrollbar up and click on sidebar.
I like it. But also I am just a fan of the new Microsoft flat design language in general, and this takes a lot of cues from that language. We are seeing it in Android and likely the next iOS as well.
At any rate, removing gradients and shadows alone would be enough to be considered a major improvement I think.
I love TL's left sidebar, it is such an elegantly utilitarian feature that so many other sites neglect. Simplification for the point of simplification is detrimental if it hinders the functionality of the site itself. (I think a poll would reflect TL users' views on this. Whenever I go to other websites, I am aghast at how difficult they are to navigate/follow compared to TL.)
I like some of your thread ideas though, thanks for the mock-ups.
Edit: Going down for maintenance for an hour today sometime "soon." Left Sidebar, I fear for you!!!!
I spend most of my time on TL looking at the forum nav column honestly... I feel like any redesign of TL should focus on that part the most, hiding it would be a terrible option for me. In fact, though it wouldn't make much sense from what TL is all about, I would prefer if the whole news picture and all that stuff at the top of the default page was replaced by some forums overview.
The frontpage idea looks to me like Windows 8, basic colours with squares, so not really a fan of it. I do agree that the forum posts could have a bit of work done to freshen up the look,
Anyone else remember that time mods got mad people didn't use the forum index more and disabled the left side bar for an entire day with red scribbles all over it. Yeah, worst day ever.
Love the new look. Don't use the left side-bar, so don't need it, but to keep Plexa from going Scottish on you... maybe you could get rid of the right side-bar instead? Just replace all those boxes with a row of BFBs (big fucking buttons) to click on at the top of the page to make it really obvious that people should check out the events, live streams, liquipedia, and TLPD. You might also consider adding the events or the live streams below spotlight if people are super attached to either.
The mockups look great. What tools did you use to do them?
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,
These are good goals for a simple graphical redesign, but from a UX/Interaction Design/Usability perspective, I think these are really vague goals. I usually try to create more well defined and measurable goals to which I can assign some kind of metric, and usually you can create these goals by looking at user data and analysis (which can be hard if you're just doing a conceptual exercise). An easier way to do this might be to get yourself and couple of friends (who are TL users) together in a room/skype chat and try to find their patterns of usage (and possible problems), and try to come up with goals which address these use cases.
I guess what I'm trying to say is, your design looks good, but I don't really know if it achieves the goals of being more usable (it very well might be more usable than the existing design, we just have no way of evaluating since you don't have a well defined list of goals).
Also regarding fonts : I absolutely love Lato , and use it for a lot of my designs. Sample page (not my design)
I used photoshop to lay things out for me. I actually wondered about setting up a system that tracked user patterns in terms of clicks (which url links/buttons are used the most and how) and what that would yield. I'd certainly be curious of what is more trafficked as you're right my intuition or gut feelings could be way off from the general user base. well i guess they are to an extent if you look at the forum concerns of others already.
On June 04 2013 17:23 FlyingBeer wrote: Love the new look. Don't use the left side-bar, so don't need it, but to keep Plexa from going Scottish on you... maybe you could get rid of the right side-bar instead? Just replace all those boxes with a row of BFBs (big fucking buttons) to click on at the top of the page to make it really obvious that people should check out the events, live streams, liquipedia, and TLPD. You might also consider adding the events or the live streams below spotlight if people are super attached to either.
That I feel would be a worse option as it partially ties into the news/events concept of the front page, and you lose the immediacy of access to this info by doing this. Many times i've come to the site to say "whats going on?" and oh "wcs EU is on, or SSL finals is on!" and then proceed to tune in because its immediately in my vision.
On June 04 2013 06:41 wo1fwood wrote: "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.
You need a higher res monitor. No scrolling here. This is my view of TL.net:
I don't think he's talking about horizontal scrolling. If you're reading a thread and scroll all the way down to the end of the thread, the sidebars will be hidden, and you need to scroll back up to navigate to a different thread or section.
Edit: Sorry for the double post.
I'll assume you mean vertical scrollbar, I was assuming his sidebar extended past the vertical space viewable on his monitor.
But if you want to go with that...then home + click on the sidebar, still only two clicks. Or hold middle mouse/move mouse to top of screen and then release middle mouse and click on sidebar. Slightly more complex two clicks, but still only two clicks. Or click and drag scrollbar up and click on sidebar.
One issue I could see here is that you have customized your left sidebar so that you only see 4 forums in total (and they fit in your screen entirely). What about others who have more than this enabled? I have 7 forums enabled in the sidebar as I do traffic sc2, dota2, bw, and blogs. What about me? I need three actions many times to get to the thread I end up on. It's just a thought on oter peoples preferences, or the defaults, though I do use home/end on my kb a lot to get top to bottom quite often.
I could live without the left side-bar. As long as the right one with streams remain (having viewers is pretty nifty), it's all good.
I think, if you don't want people to complain (I'm not; though I really like the current layout, the layouts showed here are really, really good too), you need to give them the option to go back to what they're used to. Though maybe that's going overboard with customization.
I dunno, but I really like some of the changes proposed here.
On June 04 2013 12:37 Kiante wrote: i would move to gosugamers if they moved the left sidebar
I second this. No one can take that right from us!
You mean that left from us
I really like the top bar suggestion I also like the rest of the idea (left sidebar and all) but I understand that for a majority of TL user's that would be an outrage.
I think it was a really good exercise for you to do this and as a web developer I can appreciate the thought behind this and I am so glad you included your thoughts about why you came to that conclusion and how (specifically the forum drop down because my first thought was WHAT YOU WANT TO HAVE A DROPDOWN THAT IS HALF A PAGE?????? but then as I thought about it and looked at it it grew on me.
Also a thought to add to your idea would be to allow the user to "deslect" forum sections so that they wouldnt show up in the dropdown
A lot of websites don't have a sidebar and it makes it harder to scan for content. More clicks to get anywhere... If all you care about is ad revenue and not user happiness, I guess that is okay. But I also think people get tried of clicking thru redundant links, so being able to jump from one thread to the next probably actually keeps users hopping around the website for longer. I don't think I've ever used the actual forum index page to navigate this website.
It's a community driven site, imo. The news is superfluous to the reason people use this site. With that in mind, your changes definitely don't reflect the way people use it.
The left side bar is a waste of space imo. The dropdown list solves the cluttering of the first page while maintaining the forum overview functionality. It's a neat solution.
Not to be contradictory for the sake of it, but the left sidebar needs to go. I feel like it's just bad design, and because of its sheer existence the homepage is worse and nobody uses the Forum link in the menu (redundant as hell).
I navigate TL entirely from the left sidebar + subscribed threads page with occasional forays into the blogs section, so this would devastate me. I don't even read the frontpage.
Why can't we just leave things as they are? the good ol' saying of "if it ain't broken don't fix it" it could because i've used it for so long I don't want to use anything else.... yeah that's it.
On June 05 2013 22:15 NovemberstOrm wrote: Why can't we just leave things as they are? the good ol' saying of "if it ain't broken don't fix it" it could because i've used it for so long I don't want to use anything else.... yeah that's it.
we'd still be in the stone age if we thought "well raw meat works just fine, i see no reason to cook it"
I personally always loved the way team liquid's layout was and is. I always found it even when i was young it was very simple and layed out out so anyone can navigate quickly. I would hate to see more changes to it. I say don't fix something that isn't broken. Unless a lot of people complain about the layout, i wouldn't do anything to it.
What TL desperately needs is to catch up with mobile/tablet optimized UI or app, the desktop variant is fine. I hardly use computers anymore but I lurk TL forums and watch tournaments/streams through a Sony Android tablet. The latter part is fine, the first is frustrating.
Compare with new WCS site, the main selling point is that it's mobile optimized. Time to wake up TL.
The thoughts are good. Perhaps not removing the left sidebar, but in general, upgrade / redesign the whole website would be great. I know, people like it how it is, but sometimes u have to go further.
I literally never use the Forum buttons. I only look at the left side bar to see the most recent threads, if a title there interests me, I will look at it. And this is while say... watching a stream or reading a post, I glance over and if it's interesting I open it in a new tab. So moving that into a drop down would make it so I can't naturally see what's happening currently on TL. Everything else is great though.
Team Liquid is overwhelmed with content. The bars on the left like "News" "General" "StarCraft II" etc all need to go. "Store", "Featured Articles", "Spotlight" etc. It's all junk. People come to Team Liquid to read forums. The front page should literally have an index of the forums.
On June 19 2013 06:16 Hatefiend wrote: Team Liquid is overwhelmed with content. The bars on the left like "News" "General" "StarCraft II" etc all need to go. "Store", "Featured Articles", "Spotlight" etc. It's all junk. People come to Team Liquid to read forums. The front page should literally have an index of the forums.
in occasionally thinking about this it dawned on me later to start considering physical movements as part of the UE more. In that light the dropdown idea is a little more problematic as you have to move your mouse to get any functionality, whereas in the current iteration all you need is the scroll wheel to view. Certainly an important aspect to note.
EPT![[image loading]](http://i.imgur.com/CguZcyF.jpg)
![[image loading]](http://i.imgur.com/7y2HESo.jpg)
![[image loading]](http://i.imgur.com/55huS1E.jpg)
![[image loading]](http://i.imgur.com/Fk4uziE.jpg)
![[image loading]](http://i.imgur.com/l7dy07m.jpg)
![[image loading]](http://i.imgur.com/ZsaWEaO.jpg)
![[image loading]](http://i.imgur.com/ASvSx2x.jpg)
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).![[image loading]](http://i.imgur.com/hZLxtqa.jpg)
![[image loading]](http://i.imgur.com/vjRIVTo.jpg)
![[image loading]](http://i.imgur.com/KMzzyJT.jpg)
![[image loading]](http://i.imgur.com/vM9dEPc.jpg)
. 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)
