Cambios en el panel por el outfit!

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.</li></ul></li></ul>

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 our 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:



Now we’re getting somewhere. We setup a few meetings to talk to UI and Engineering to find out what was possible and what didn’t make sense. At this point, the noise of Jackson Pollock spinning in his grave was becoming a distraction to the UI team, so they decided to put an end to my dev-art and gave us some great wire-frames:



We really liked the idea of being able to link players to specific Cosmetic Clothing. However, we were also acutely aware of players’ complaints about some of our Store offerings being too in-your-face. So we went through a few more revisions:




Now that we had the core of our design, the UI team created some real mock-ups:



Once we had our finalized mock-ups the Engineering team and UI team began implementing, which gave us our first in-game iteration:




This is what players on our test servers saw (which is very close to the final design). We collected some great feedback, but the largest complaint by far was that the Character panel was no longer a one-stop-shop. Players still wanted to be able to access all of the information from the Character panel they could access previously (ie; Reputation, Housing, The War, etc). So I sat down with Ransroth (Engineer) and Meaghan (UI Artist) to discuss how we could address this complaint, which leads us to our “final” result:
[Note: When I say “final” result I mean “at the time of this writing”. We may adjust certain elements based on additional feedback.]





And there we have it! I know the changes to the Character panel are pretty extreme and will be jarring to everyone initially. But given time I think everyone will come to appreciate how much cleaner and organized everything is. Let’s walk through some of the changes.

Equipment Tab:
Your character is the most important part of the game and we really wanted to call that out in the UI. So rather than scrunching your name and level into a tiny box at the top, we decided to give it some good real estate to better call it out. Along that same line, we significantly increased the size of your character itself so you can more easily see what your character looks like.

We know everyone is very accustomed to opening the Character panel to access nearly everything about their character, so we provided buttons at the bottom of the panel (Skills, Title, Biography, Wallet, House, Reputation, The War, and Hobby) to help existing players as they get used to the new design.


The stats on the old Character panel were very daunting, and we knew we didn’t want to intimidate new players by immediately flooding them with information. We decided to only show the most relevant stats based on the player’s Class

The “Enhance Character” button is a big win for us and for players. We want to make sure players are aware of and easily able to purchase the items for their character that they care about, but we also know players don’t want to see “Buy now!” buttons all over the UIs. The “Enhance Character” button is the perfect solution: a single, unobtrusive button which that allows the inclusion of numerous Store offers we think players are interested in.



Cosmetic Outfits Tab:
Once again, players are given a much larger character to better see their Cosmetic Clothing, with the added functionality of being able to zoom in on your character’s Head, Waist, or Feet. In order to keep the Equipment tab as clean as possible we’ve moved the “visibility” buttons to the Cosmetic Outfits tab.

There are now three additional Cosmetic Outfits available for purchase (the purchase is applied to your account, not per character). And the “Buy Cosmetic Clothing” button keeps the UI looking clean while giving players easier access to Cosmetic items they might be interested in.




Once again, we understand these new UIs will be a jarring change at first and will take some time getting used to. But once that happens we’re confident that when you look back at old screenshots you’ll think “Ugh! How did I ever play with that?” As always, we appreciate any feedback you might have and we hope to continue to improve this UI and others in the future.

I want to send out a big ‘THANK YOU!’ to the Engineers involved: Zyrca and Ransroth, as well as our UI Artist Meaghan Glynn for making the Character panel look great!

Thanks for reading!

-Tim “Raskolnikov” Lang