• Log InLog In
  • Register
Liquid`
Team Liquid Liquipedia
EDT 08:25
CEST 14:25
KST 21:25
  • Home
  • Forum
  • Calendar
  • Streams
  • Liquipedia
  • Features
  • Store
  • EPT
  • TL+
  • StarCraft 2
  • Brood War
  • Smash
  • Heroes
  • Counter-Strike
  • Overwatch
  • Liquibet
  • Fantasy StarCraft
  • TLPD
  • StarCraft 2
  • Brood War
  • Blogs
Forum Sidebar
Events/Features
News
Featured News
Power Rank - Esports World Cup 202550RSL Season 1 - Final Week9[ASL19] Finals Recap: Standing Tall15HomeStory Cup 27 - Info & Preview18Classic wins Code S Season 2 (2025)16
Community News
BSL Team Wars - Bonyth, Dewalt, Hawk & Sziky teams4Weekly Cups (July 14-20): Final Check-up0Esports World Cup 2025 - Brackets Revealed19Weekly Cups (July 7-13): Classic continues to roll8Team TLMC #5 - Submission re-extension4
StarCraft 2
General
The GOAT ranking of GOAT rankings RSL Revival patreon money discussion thread Power Rank - Esports World Cup 2025 Jim claims he and Firefly were involved in match-fixing RSL Season 1 - Final Week
Tourneys
Esports World Cup 2025 Sparkling Tuna Cup - Weekly Open Tournament Sea Duckling Open (Global, Bronze-Diamond) FEL Cracov 2025 (July 27) - $8000 live event RSL: Revival, a new crowdfunded tournament series
Strategy
How did i lose this ZvP, whats the proper response
Custom Maps
External Content
Mutation #239 Bad Weather Mutation # 483 Kill Bot Wars Mutation # 482 Wheel of Misfortune Mutation # 481 Fear and Lava
Brood War
General
BW General Discussion Ginuda's JaeDong Interview Series [Update] ShieldBattery: 1v1 Fastest Support! ASL20 Preliminary Maps BGH Auto Balance -> http://bghmmr.eu/
Tourneys
CSL Xiamen International Invitational [Megathread] Daily Proleagues [CSLPRO] It's CSLAN Season! - Last Chance [BSL 2v2] ProLeague Season 3 - Friday 21:00 CET
Strategy
Simple Questions, Simple Answers I am doing this better than progamers do.
Other Games
General Games
Stormgate/Frost Giant Megathread Nintendo Switch Thread [MMORPG] Tree of Savior (Successor of Ragnarok) Path of Exile CCLP - Command & Conquer League Project
Dota 2
Official 'what is Dota anymore' discussion
League of Legends
Heroes of the Storm
Simple Questions, Simple Answers Heroes of the Storm 2.0
Hearthstone
Heroes of StarCraft mini-set
TL Mafia
TL Mafia Community Thread Vanilla Mini Mafia
Community
General
Post Pic of your Favorite Food! Things Aren’t Peaceful in Palestine US Politics Mega-thread Russo-Ukrainian War Thread The Games Industry And ATVI
Fan Clubs
SKT1 Classic Fan Club! Maru Fan Club
Media & Entertainment
[\m/] Heavy Metal Thread Anime Discussion Thread Movie Discussion! [Manga] One Piece Korean Music Discussion
Sports
2024 - 2025 Football Thread Formula 1 Discussion TeamLiquid Health and Fitness Initiative For 2023 NBA General Discussion
World Cup 2022
Tech Support
Installation of Windows 10 suck at "just a moment" Computer Build, Upgrade & Buying Resource Thread
TL Community
The Automated Ban List
Blogs
Ping To Win? Pings And Their…
TrAiDoS
momentary artworks from des…
tankgirl
from making sc maps to makin…
Husyelt
StarCraft improvement
iopq
Socialism Anyone?
GreenHorizons
Customize Sidebar...

Website Feedback

Closed Threads



Active: 914 users

The Economy of Design: Battle.net 2.0

Blogs > Deleted User 135096
Post a Reply
1 2 Next All
Deleted User 135096
Profile Blog Joined December 2010
3624 Posts
Last Edited: 2013-01-17 21:46:06
January 17 2013 19:41 GMT
#1
I'm fatigued. I had originally planned to write up an extensive blog on UI design, specifically referencing Battle.net 2.0 and why, at least currently, the design and overall idea has been suboptimal (a nice way of putting it), but I' have become relatively fatigued of late. I do also need to apologize, with all of the negativity in the last six months or so I don't mean to add to it, but I felt the need to point out a number of design choices and overall ideas issues that have made the UI for SC2 shall we say, less than optimal, how HotS aims to improve this, and perhaps some ways to look at how to design a system.

The 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
complex border types are for example the border found at the edges of the launcher

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]

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]

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]
complex border types are for example the border found in the launcher

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]

[image loading]
main, top-level navigation areas

[image loading]
main window, rss feed like. Battle.net needs to function more socially (or more actively), this helps a great deal

[image loading]

[image loading]
no need for an external statistics box, also see party dropdown for more

[image loading]
another social function, connection to games, tournaments, and players

[image loading]
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.


****
Administrator
monk
Profile Blog Joined May 2009
United States8476 Posts
January 17 2013 19:43 GMT
#2
WHAT? God of the Battlefield Part 2 is coming out?
Moderator
Deleted User 135096
Profile Blog Joined December 2010
3624 Posts
January 17 2013 19:51 GMT
#3
lol, well I guess Ver has until September to get it done according to this.
Administrator
Doominator10
Profile Joined August 2012
United States515 Posts
January 17 2013 20:35 GMT
#4
OOOooo purty...
Your DOOM has arrived,,,, and is handing out cookies
Sn0_Man
Profile Blog Joined October 2012
Tebellong44238 Posts
January 17 2013 20:42 GMT
#5
On January 18 2013 04:51 wo1fwood wrote:
lol, well I guess Ver has until September to get it done according to this.


And it's in latin now
LiquidDota StaffSCIENTISTS BAFFLED | 3275929302
Harrad
Profile Blog Joined October 2010
1003 Posts
January 17 2013 21:09 GMT
#6
more like battle.net 3.0...looks awesome.
Butterednuts
Profile Blog Joined September 2010
United States859 Posts
January 17 2013 21:30 GMT
#7
Please give me this. I will obsess over moving those graphs! :OOOOO
Chameleons Cast No Shadows
Deleted User 135096
Profile Blog Joined December 2010
3624 Posts
Last Edited: 2013-01-17 22:02:48
January 17 2013 21:58 GMT
#8
Oh I forgot to mention, there are a number of other threads on TL discussing the issues of the current, or older iterations of battle.net they can be found here

hots: (this one is particularly good for redundancy and inconsistencies)
http://www.teamliquid.net/forum/viewmessage.php?topic_id=387109,

pre patch 1.5: (very large galleries)
http://www.teamliquid.net/forum/viewmessage.php?topic_id=204977
http://www.teamliquid.net/forum/viewmessage.php?topic_id=341924
Administrator
LeafMeAlone
Profile Blog Joined November 2010
United States301 Posts
Last Edited: 2013-01-17 22:12:33
January 17 2013 21:59 GMT
#9
Why doesn't blizzard hire people like you instead of whoever they have now, looks better than what we have now

One of my favorite things was using only keyboard to navigate the BW UI
~_~
crms
Profile Joined February 2010
United States11933 Posts
January 17 2013 23:11 GMT
#10
I can't even begin to conceptualize how much better sc2 would have been if the experience was anywhere close to these concepts.
http://i.imgur.com/fAUOr2c.png | Fighting games are great
AnachronisticAnarchy
Profile Blog Joined July 2011
United States2957 Posts
January 17 2013 23:13 GMT
#11
Just curious, how did you make those pictures?
"How are you?" "I am fine, because it is not normal to scream in pain."
gaymon
Profile Blog Joined April 2011
Germany1023 Posts
January 17 2013 23:36 GMT
#12
Looks awesome, thumbs up !
Spiffeh
Profile Joined May 2010
United States830 Posts
Last Edited: 2013-01-17 23:39:23
January 17 2013 23:39 GMT
#13
Love the white shortcut keys. Log in, get into a MM game asap. Also pretty easy to figure out what they do for the average user I would imagine.
snively
Profile Blog Joined August 2011
United States1159 Posts
January 17 2013 23:41 GMT
#14
god its gorgeous. i would marry it.
in all seriousness though, its really cool
My religion is Starcraft
Deleted User 135096
Profile Blog Joined December 2010
3624 Posts
January 17 2013 23:43 GMT
#15
On January 18 2013 08:11 crms wrote:
I can't even begin to conceptualize how much better sc2 would have been if the experience was anywhere close to these concepts.

I noticed in the concept process, that even thinking about how to integrate all of the social ecosystems into the client had a big impact on my feelings towards it, as in it really enticed me to stay in the client more, or at least the impression.

On January 18 2013 08:13 AnachronisticAnarchy wrote:
Just curious, how did you make those pictures?
Aside from the background and images in the news section, its 100% Illustrator.
Administrator
iaminfiniteOSL
Profile Blog Joined April 2011
63 Posts
January 17 2013 23:43 GMT
#16
God of the battlefield, my favorite TL read...EVER.
HuK, Crank, ViOlet, Jaedong...
TroW
Profile Blog Joined June 2011
United States67 Posts
Last Edited: 2013-01-18 00:52:21
January 18 2013 00:51 GMT
#17
This certainly looks a lot better to me than the UI in WoL or the HotS beta. I imagine Blizzard could never help trying to make it more flashy than what you have in mind, but the basic character of the navigation system seems like something they should seriously consider. (As to whether they will, that is another question entirely.) This seems far less cumbersome than clicking back and forth to different "areas" of the game interface with back buttons and the like, which strike me as a pointless and annoying adoption of console game menu design.

May your work find the eyes of the designers at Blizzard and enlighten them...
"A thinker sees his own actions as experiments and questions--as attempts to find out something. Success and failure are for him answers above all." - Friedrich Nietzsche
Deleted User 135096
Profile Blog Joined December 2010
3624 Posts
January 18 2013 01:17 GMT
#18
. It may also be worth noting that the primary element here has a very direct correlation to Brood War. You can clearly see the similarity in the character panes.

[image loading]
Administrator
Ianuus
Profile Blog Joined May 2010
Australia349 Posts
January 18 2013 01:58 GMT
#19
Oh god yes. My eyes tire of seeing the blue/yellow/orange contrast everywhere
CrazyF1r3f0x
Profile Blog Joined August 2010
United States2120 Posts
January 18 2013 02:10 GMT
#20
Damn that looks really slick; not to mention free concept work for Blizzard.
"Actual happiness always looks pretty squalid in comparison with the overcompensations for misery."
1 2 Next All
Please log in or register to reply.
Live Events Refresh
Esports World Cup
10:00
2025 - Day 3
Serral vs ReynorLIVE!
Maru vs Cure
herO vs Solar
Clem vs Classic
EWC_Arena6921
ComeBackTV 2062
EWC_Arena_21152
Hui .611
TaKeTV 518
Berry_CruncH303
JimRising 281
3DClanTV 278
Rex222
CranKy Ducklings122
mcanning104
Reynor102
SpeCial54
LiquipediaDiscussion
[ Submit Event ]
Live Streams
Refresh
StarCraft 2
EWC_Arena6921
EWC_Arena_21152
Hui .611
JimRising 281
Rex 222
mcanning 104
Reynor 102
SpeCial 54
ProTech44
StarCraft: Brood War
Sea 4546
Bisu 1809
Flash 1069
firebathero 1069
EffOrt 823
BeSt 750
Jaedong 713
Mini 337
Stork 337
Hyuk 316
[ Show more ]
Zeus 301
ggaemo 245
Last 235
Soma 198
Pusan 165
Mind 162
Soulkey 154
Snow 132
ZerO 123
Hyun 118
Light 114
ToSsGirL 106
JulyZerg 72
Larva 65
JYJ60
Dewaltoss 55
Sea.KH 43
Sharp 33
sorry 28
soO 28
Movie 24
Sacsri 23
sas.Sziky 20
yabsab 19
Icarus 15
scan(afreeca) 11
Terrorterran 4
ivOry 2
Dota 2
XcaliburYe296
BananaSlamJamma255
420jenkins17
League of Legends
febbydoto11
Counter-Strike
fl0m1525
x6flipin486
sgares128
zeus126
Other Games
singsing2302
B2W.Neo1086
Beastyqt486
crisheroes337
Fuzer 174
hiko164
QueenE30
ArmadaUGS20
ZerO(Twitch)9
Organizations
StarCraft: Brood War
lovetv 7
StarCraft 2
Blizzard YouTube
StarCraft: Brood War
BSLTrovo
sctven
[ Show 15 non-featured ]
StarCraft 2
• LaughNgamezSOOP
• sooper7s
• AfreecaTV YouTube
• Migwel
• intothetv
• Kozan
• IndyKCrew
StarCraft: Brood War
• ZZZeroYoutube
• STPLYoutube
• BSLYoutube
Dota 2
• C_a_k_e 5860
• WagamamaTV328
League of Legends
• Stunt430
• Nemesis312
• Jankos249
Upcoming Events
Esports World Cup
22h 35m
OSC
1d 1h
CranKy Ducklings
1d 21h
BSL20 Non-Korean Champi…
2 days
CSO Cup
2 days
BSL20 Non-Korean Champi…
2 days
Bonyth vs Sziky
Dewalt vs Hawk
Hawk vs QiaoGege
Sziky vs Dewalt
Mihu vs Bonyth
Zhanhun vs QiaoGege
QiaoGege vs Fengzi
FEL
2 days
BSL20 Non-Korean Champi…
3 days
BSL20 Non-Korean Champi…
3 days
Bonyth vs Zhanhun
Dewalt vs Mihu
Hawk vs Sziky
Sziky vs QiaoGege
Mihu vs Hawk
Zhanhun vs Dewalt
Fengzi vs Bonyth
Sparkling Tuna Cup
4 days
[ Show More ]
Online Event
5 days
uThermal 2v2 Circuit
6 days
The PondCast
6 days
Liquipedia Results

Completed

CSL Xiamen Invitational
Championship of Russia 2025
Murky Cup #2

Ongoing

Copa Latinoamericana 4
Jiahua Invitational
BSL20 Non-Korean Championship
Esports World Cup 2025
CC Div. A S7
Underdog Cup #2
IEM Cologne 2025
FISSURE Playground #1
BLAST.tv Austin Major 2025
ESL Impact League Season 7
IEM Dallas 2025
PGL Astana 2025
Asian Champions League '25

Upcoming

CSLPRO Last Chance 2025
ASL Season 20: Qualifier #1
ASL Season 20: Qualifier #2
ASL Season 20
CSLPRO Chat StarLAN 3
BSL Season 21
RSL Revival: Season 2
Maestros of the Game
SEL Season 2 Championship
uThermal 2v2 Main Event
FEL Cracov 2025
HCC Europe
ESL Pro League S22
StarSeries Fall 2025
FISSURE Playground #2
BLAST Open Fall 2025
BLAST Open Fall Qual
Esports World Cup 2025
BLAST Bounty Fall 2025
BLAST Bounty Fall Qual
TLPD

1. ByuN
2. TY
3. Dark
4. Solar
5. Stats
6. Nerchio
7. sOs
8. soO
9. INnoVation
10. Elazer
1. Rain
2. Flash
3. EffOrt
4. Last
5. Bisu
6. Soulkey
7. Mini
8. Sharp
Sidebar Settings...

Advertising | Privacy Policy | Terms Of Use | Contact Us

Original banner artwork: Jim Warren
The contents of this webpage are copyright © 2025 TLnet. All Rights Reserved.