EPTThe reason that I've explored this idea now, is partially because it may show the differences and improvements in HotS, or things that haven't been, and how the battle.net system has improved in its incremental steps. More importantly however, I've been working on a project that dealt with UI design that I would like to share, but can't quite yet, that made me begin to ask these questions.
I should also put a big disclaimer up, this is simply one way of looking at UI design and that I am not 100% right, and they are not 100% wrong, but that I do have some insight as to what I feel is suboptimal, or overly unnecessary.
Issues and Economy
So what is the issue of design for battle.net exactly? It's bloated and not economical of its elements. This is the case both informationally, and presentationally. Being a game, this changes the landscape quite a bit in terms of how presentational elements are used and developed, but one of the reasons that the current battle.net a mess is that it has become a Frankenstein of ideas. Blame arcade patch 1.5 for that. This isn't to say that it doesn't have any good ideas, because it certainly does, but it's that there are far too many of these ideas coexisting with each other that end up cluttering the screen with unimportant differences. So here are the overall problems I'd like to talk about:
Issues of Design
too many elements used: overly cluttered
too much visual contrast: loss of visual elements (not covering but I feel this is an issue of visual recognition)
no unifying theme: learning curve directly proportional to the complexity of the system
pc controls: why u no make for pc?! (it's appropriate)
responsiveness: dota2.... the elephant in the room
reaction time: patch 1.5 almost 2 years after release... guaranteed that many will not wait for another 2 years to LotV for a proper custom system.
So I became curious to see what kinds of elements are used, how many times and how they are put together. What I found is rather startling. Below is a list of graphic ideas used in the current system and how many times they are used. Each of the numbers below represents a unique iteration of that element:
- Number of progress bars used: 3
- Number of unique buttons used: 14
- Number of unique buttons, pre patch 1.5 holdover: 5
- Number of unique simple border types: 19
- Number of unique complex border types: 5
- Number of unique border/window configurations: 29
As a designer, those numbers make me cringe. But what I also find problematic is that in terms of how information is presented, there are an incredible amount of different configurations. A whopping 29 unique configurations is problematic, but there is another less obvious thing to consider. Overall, there are essentially 0-3 inner panes per screen and are configured in different ways, which while perhaps necessary is not at all consistent with each other. What ends up happening is that we as the end user have to navigate in upwards of 20 different major screens (many with minor differences, but), which is becomes very difficult to remember. It also means that submenu navigation would be so complex that it would be incredibly difficult to coherently set this up (also note that each 'screen' does not take advantage of the full monitor area).
This is one area that HotS aims to improve upon, and from what little I've seen does far better than WoL. Main navigation is maintained at all times, submenu navigation I would imagine that it is more consistent, but I don't have the beta to idk. There is also a stronger 'taskbar' like orientation for the socialization in SC2. This is an improvement as well, but it seems to me that day 1 had this initial idea, so I wonder why the designers didn't go down this path originally. Regardless, there are improvements here.
One thing that I hope HotS does, is bring the feeling that battle.net was actually designed for the pc. And this is something that unfortunately in the pc space overall, is woefully absent as of late. Top-level menu navigation was entirely absent until patch 1.5, and sublevel navigation? In all my time playing PC titles this addition has more and more so disappeared, but its saddening due to the robust nature of this type of navigation, and especially when keyboard usage is vitally important to the IP itself. In Brood War, I could get into battle.net by simply typing m+e+o+[password]+[ent]. No mouse involved, and it is amazingly fast. But additionally, the tactile payoff for being able to navigate with your keyboard faster and more efficiently is something also worth thinking about. I have a game designed exclusively for a PC, so why doesn't it feel like it?
The last thing I wanted to touch on was the responsiveness of battle.net. It's very sluggish, and especially in drawing varying amounts of information. I originally thought, well, maybe these are growing pains for the new battle.net, but as I have been poking around in dota2 for the last week... I can't really state it better other than to say there's another elephant in the room, and its Dota2. The Dota2 UI isn't the most polished in some areas, but one thing I can say about it unequivocally is that it is incredibly fast. Want to read up on the latest news? Under 1 second. Want to learn how to play a hero while you're spectating a match? No problem, and it's almost disturbing how easy the game seems to handle these information requests. Finding custom games (with a limit of 42?) on battle.net is not even close to this responsive, nor is instantiating a new and fully populated chat channel.
Ok so I do need to point out however that Valve has had a lot of time working with steam to figure out how to parse out information with relative ease, but battle.net is about as old, so I wonder how each parses its information and why the battle.net system is so far behind.
Simpler is Often Times Better
So regardless of some of the other accoutrements, I'd like to return to the basic design aspects and the reason for this blog. I three days ago decided to investigate some of the ideas of UI design, and how to approach them with a minimal usage of elements. I mention the time because it took me all of three days to come up with these initial ideas, which have been purposely designed around a few of the current and future battle.net ideas. As many designers know, these are drafts, and in a short period of time. In polishing things, usually many iterations occur, or subtle additions of enhancement, so this could have been more polished, but isn't because I simply don't have the time to devote to it. Also I'm going to leave this section a little less verbose because a study of the present ideas should help to illuminate a few of the more subtle ideas.
I wanted to first design around perhaps the most important element in the scheme, this:
![[image loading]](http://i.imgur.com/cZogh.png)
If broken down in to its constituent elements, we are left with three distinct elements, that can be manipulated into many scenarios, but always are in reference to this most primary of ideas.
![[image loading]](http://i.imgur.com/VW2ys.png)
Going back to my look at what was used and how many times, here is how they look in comparison
- Number of progress bars used: 1 (not shown, but derived from scroll bar) [down from 3]
- Number of unique buttons used: 1 [down from 14]
- Number of unique simple border types: 4 [down from 19]
- Number of unique border/window configurations: 4 [down from 29]
I should also mention that a strict adherence to size proportions is made, so that any adjustments have been made in relation to other architecturally important elements. This creates a sense of continual reference to the single idea present (presentational feel). One last thing, it's not expressly stated in the images, but it seemed to me that the use of the [Tab] key would function like alt+tab in windows, as a toggle between current and last active window (especially helpful for open channels and news/tournament/other...). also see f keys and number keys being protected and always available (see ~ for on/off functionality at news and socialization).
![[image loading]](http://i.imgur.com/VhPGI.jpg)
![[image loading]](http://i.imgur.com/og6tj.jpg)
main, top-level navigation areas
![[image loading]](http://i.imgur.com/mTGgc.jpg)
main window, rss feed like. Battle.net needs to function more socially (or more actively), this helps a great deal
![[image loading]](http://i.imgur.com/VRATh.jpg)
![[image loading]](http://i.imgur.com/61Rfi.jpg)
no need for an external statistics box, also see party dropdown for more
![[image loading]](http://i.imgur.com/tyP6r.jpg)
another social function, connection to games, tournaments, and players
![[image loading]](http://i.imgur.com/GpaG8.jpg)
the single pane used for the social hub, command info, searchable and passwords enabled channels, official channels separated
Again apologies for this being less developed than I had originally planned, but I simply don't have the energy to truly delve into every aspect in the way that I would like at the moment.
![[image loading]](http://i.imgur.com/kxBof.jpg)
