Update 2: Character Panel Changes

By: Tim “Raskolnikov” Lang

Ahh, the good ‘ole Character panel; I think it’s safe to say that over the years it’s turned into a bit of a rat’s nest. The changes started off innocently enough: “Players will love this Cosmetic Inventory system. Where do we put it?” “Hooray, housing is in! Where should we put the housing information?” “Now that we’ve converted a lot of our stats to points, where should we display all of the new stats?” Inevitably, the answer would always be, “Let’s just put it in the Character Panel.” While this did make the Character panel a one-stop shop, it also made it more convoluted and thus more difficult to navigate for newer players.

During Free-to-Play development, one of the many on-going initiatives was “Accessibility.” This was a bit of a catch all for things like the revamp of the Newbie experience, Character Generation, and also the Character panel. Amlug and I worked together on the original spec and came up with several core goals:

• Find a way to condense the stats into “Basic” and “Advanced” groups so as not to overwhelm players with stats that aren’t immediately relevant.
  • ie; Does a new player really care about their “Tactical Critical Hit Avoidance”?
• Update the tooltips for each of the stats so they explain exactly what they do and which classes care about them, as well as making them readable by humans.
• Separate out the Cosmetic Inventory into its own section.
• Remove tabs to avoid feeling overwhelmed when first opening the Character panel.
  • ie; When you open the Character Journal, how many tabs do you see? Fifteen. Fifteen tabs from the moment you hit ‘C’. I mean honestly, you start off on the ‘Character’ tab (bottom tabs) of the ‘Character’ tab (top tabs) of the Character Journal. Unacceptable.

Unfortunately, with all of our other goals for Free-to-Play we weren’t able to update the Character panel as we wished (we were only able to update the tooltips attached to Stats), so we put the changes on hold for the time being. Thankfully, we were able to come back and address the remaining goals for Book 3.

With feedback from many fellow team members, I created a new spec which refined the ideas in the original while the UI team provided us with some great wire-frame mockups. Then, with everything gathered, we began iterating. Arriving at the final product doesn’t happen overnight -- it takes a lot of iteration and discussion. But the process of iterating over a design can be pretty fun (especially when I get to create amazing “dev-art” of my ideas), so let’s walk through the process a bit and see how things progressed.

From the original spec, here was my first attempt at giving the Cosmetic Outfits their own tab:

Mmmm… looks so good; dev-art at its finest! Overall, this is a pretty terrible design. While it does address the goal of having all Cosmetic Outfits visible at once (rather than hidden on tabs), it falls short in several important ways:

• What happens if we want to expand beyond four Outfits?
• The character is still too small, making it difficult to see the details of my outfits.
• The number of buttons and equipment slots is overwhelming and quite cluttered.

When I began working on the updated spec for Book 3 I refined the design significantly: