Tuesday, 28 February 2012

Imagine That My Rank Is Higher

Today I thought I would talk to you about ranks.. and more specifically about rank symbols, like the ones used by the army and many games that feature an online multiplayer competitive component. Is this relevant to my thoughts on the subject matter? Well, for the most part it's not but both of them did serve as inspiration when redesigning our ranks and their respective symbols.

But first for a little back story for those who don't know the back story. Back in September when we launched our NHL Statistics Website (we still haven't figured out a catchy name) there were 17 ranks with Titles, divided over 5 classes. They, in turn, were visualized by different shield colours for classes and Roman numerals and letters to signify specific ranks. I won't list all of the titles but here's some examples and a complementary picture to better illustrate my example.

As "Drafting Potential", the rank you start at, you would have a Silver shield and a rank "symbol" of IV-A, fourth (IV) class from the top, and first (A) within that class. As "Defensive Leader" III-C you would have a Gold shield and of course third (III) class from the top and third (C) within that class.

You get the idea I hope?

Problem with this was, mostly, was that although very clear and to the point, it was boring and too reminiscent of Finnish beer's tax classes.

So, for update 3.1 the "symbols" were rethought into actual (non quotation required) symbols. So instead of D you get 1 chevron (insignia), C becomes 2 chevrons, B becomes 3 chevrons and A becomes a star. The colour of the shield tells which class you are in.

Now this seems pretty fine doesn't it? Assuming you are accustomed to the basic in military ranks, it makes a lot of sense that 3 chevrons are better than 1, but a star triumphs them both. There is one glaring problem though as one of our more active players commented on and rightfully so. In the picture above it's pretty cut-and-dry... in the picture above, everyone is in the same class. In reality we're not all in the same class. And as the previously mentioned player commented, "One might not necessarily know that the reddish-brown shade represents Bronze, and if one doesn't understand the relationship between e.g. the colours Bronze and Silver (reddish-brown and medium grey) then you have now way of telling which is better."

Obviously Silver is better than than Bronze, but it's not obvious through the colours alone. Never mind the fact that people usually don't have calibrated displays anyway and as such there's no way to ensure the colours come out right.

So.. back to the drawing board for update 3.2. The chevrons were and are a good way to visualize various ranks, but they needed to be expanded so that every rank had its own symbol, rather than reusing the same four symbols over and over again. Taking much more inspiration from the Halo series ranks and various military ranks we (me and Mr. Cruise) threw some ideas around and ended up with this.

A very quick sketch, but an outline of our ideas nonetheless. The basic concept being that of a linear progression in rank symbols. Some element needs to be reoccurring so that one can compare any rank within a class to any other rank within another class. One should be able to tell the relationship between symbols without shield colours. We also expanded the original 17 ranks to 24 ranks, to even out the lower end of the spectrum which was sorely lacking in ranks and added a new class under Bronze called Blood. Blood is meant to symbolize that everyone is making you bleed through defeat as well as serve as a warning colour that your rank is very low.

After this sketch I jumped to Illustrator and started tinkering with various symbols, one including a 7-point star that got scrapped later on. In the end, this is what we ended up with.

Much better wouldn't you agree? And because we also calculate statistics for some recent activities such as "recent win ratio" and "recent passing average", recent based on the 13 latest games I also designed a symbol for "Unranked" players, that is, player who have less than a total of 13 games. The rank symbols and shields are all designed in Illustrator for that vector-y goodness, then imported into Photoshop for final adjustments and preparing them for web use.

 Before this it was too easy to confuse an intermediately ranked player with a new player, because both are likely to be titled "Drafting Potential". A limitation in part because of how the Elo rating system is designed and because we decided against having two systems, one rank rating and one experience rating. Although we have three slots for Career Trophies, trophies which can only be achieved through active playing. So I suppose that's something.

I think that will be all of my rank-ramblings for this time. Any questions? Don't hesitate to comment. And in the meantime I will grace you with a preview of update 3.3, adding the much requested, sortable statistics tables. Featuring statistics that aren't available anywhere else, mostly because of lack of space. The cards are pretty crammed with information already.

Thursday, 16 February 2012

The Frustrations of Web Design

Yes, it's been quite a while. And this will alas not be a very long post. So basically here's the short long story..

Got some very nice feedback on my website, and some not so nice.. well actually.. the feedback was still nice, the website, not so much. Yes, it was a bit rushed — coincidently the revised version turned a bit rushed at the end too — and so I it didn't scale very well. In fact, it didn't scale at all. Browsing on pretty much anything smaller than 1680x1050 cut parts of the content of and you couldn't scroll. A pretty piss poor web design job from a web designer in other words. So what did I learn from that? A lot as it turns out. But mostly the importance of planning, as always. So I decided to revise my website, which in this case meant, more or less starting over from scratch, as far as coding was concerned. So I did, with a clear goal in mind. I had to be responsive — a bit of a buzzword I know — and it had to be more awesome. So what was my glorious battle plan you ask? Simple.

Re-design it so that Fiinix Design will scale and flow from the smallest of handheld (but mostly smart phones) to the largest of FullHD desktop displays.

Design it so it will also scale in that particular order.. from small to large. Many responsive design advocates show you how to add media-queries so that a website will scale down and re-position itself, hiding elements as the viewport shrinks. My idea (but I am not alone in this idea) was to design a website that scales up instead. Add things, like a huge background image whenever the viewport is so big that the added http request is negligible.

If you can't see it, you shouldn't have to load it. I forbade myself from using display: none anywhere.
Use as much semantic HTML as possible. Use things like Adjacent Sibling Selectors to target elements instead of classes and id's.

I also considered using SVG images wherever possible, but the size difference was minimal[1] and at least my smart phones browser doesn't seem to support SVG. But I will keep my eyes open for it anyway. If there's support enough for it, the increased quality is reason alone to make the transition.

A part of the base grid was built from the foundation of the work of Andy Taylor, kudos to him, although not much remains of his code.

So, how did my plan pan out? Pretty nicely actually, apart from the IE's refusal to work with min-width's and such, rectified using Scott Jehl's awesomely light respond.js and some minor hiccups I still have to resolve like my hosts iframe versus something. I'm going to test it on other mobiles too, like Windows Phone 7 (please, beije?) and Iphone 4 but.. well.. so far, so good.

For those of you how are curious, the address is as usual fiinixdesign.eu, but for mobile users you are going to have to go straight to http://asphinx.danmed.co.uk/ until I have resolved whatever the issue is.

1. 43.3 KB for an SVG image versus 47.4 KB for a web-optimized PNG. SVGZ clocked in at a minuscule 17.6 KB but I couldn't even get it to show up in Firefox.