devtrackers.gg
Summary
Over the past year and a half, we have been steadily working on revamping the UI in the game to use the themes and backgrounds, while also using this opportunity to improve the functionality of them.
This is a very very long process, Warframe has almost 200 screens, and we are often adding more to support new content, so it will take a long time to complete this journey. When we started 131 screens needed reskinning, now we have 70 more to go. Seemed like a good time to touch base to talk about why we are doing this process, and how we come to some of the decisions we make while working on these.
The choice that drives us
The two most common types of feedback we get are
1. Need more information
2. This is overwhelming
These two are generally the forces that pull us in opposite directions. On rare occasions, you can find some solutions that make a screen less overwhelming, without having to lower the amount of information displayed at once, but for the most part, these are two conflicting objectives.
The compromise we arrived at to try and circle this square, was to use a variant of progressive disclosure, which in practice means we add more information, but put it behind rollovers or clicks.
Abilities Screen
As an example, let's talk about the abilities screen. I chose this one, because I remember at the time of this change, there were a lot of upset Tenno, and I imagine some of you remain so. So it seems like a good one to explain why we did what we did.
A common approach in UX is to treat it as a conversation, in this case the player clicked on abilities, so they are asking “What are Chromas abilities?” And our answer was to show you a small picture of each one, giving you all the stats, full description, how they are affected by mods, etc. In a conversation, our answer should have been closer to “These are the abilities, do you want to know more about any of them?” then the player can say which one they want to know about. The old screen is closer to a spreadsheet, which can be a very useful and powerful tool for someone that is familiar with the data, but overwhelming for someone trying to get familiar with it.
The new version essentially follows the conversation structure, by showing you 6 options for you to decide which one you want to hear about: Passive, abilities or tips. While at the same time putting the fiction of the Warframe front and center by using the diorama.
Does it achieve the other end of the deal by adding more information?
By making the display of abilities be one at a time, it empowered us to add videos to each one, which explain the ability much better than the old images ever could. Before this change descriptions had to be extremely short, because of the limited space for text, but now if you look at Gauss for example, his descriptions are quite a bit more detailed than we could afford in the past. Similarly with space for stats, it was one of the main hurdles to adding Augment stats. New version also allows the space to show OLD > NEW stat side by side, before you had to toggle the button to see the change. And the addition of Tips, served as a place to expose players to certain synergies or ability quirks, that before were only on the wiki.
The tooltip
Earlier I talked about treating UX as a conversation, expanding on that, it is not always the same conversation. “What are Chromas abilities?” is what someone newer to Chroma would ask, but what a Dragon master was asking when clicking on the abilities screen, really was closer to “What are the effects of my Mod choices on Chroma?”. Undeniably, the screen’s answer to this question is more cumbersome, since you can’t at a glance see them all anymore. So what we did to address this, was to change where that conversation takes place, by adding it directly to the upgrade screen, removing the need for you to go back and forth between the screens.
A big win from moving to a tooltip approach is that the functionality done for this, is much more portable than it used to be, if we wanted to have ability stats in the upgrade screen before we needed to do an entirely separate design and code solution for it, and given the limited space in that screen, it never came to be. But now that it is on the tooltip, we were able to fit it not only there but in the market, the arsenal and even the screen where you choose your first frame during the intro tutorial.
How this applies to future stuff
Extrapolating from this past decision to future ones, you can imagine how this approach will affect things like the arsenal. Right now when picking weapons you can see their icon, name, rank, Lens and Forma count or mastery. We haven’t designed this yet, so I don’t know for sure that this would be the change, but I imagine we would no longer show the Lens or the Forma on the grid, and instead have those on the tooltip. And then the tooltip would have additional information that isn't there today, like if it has Catalyst, an Exillus adapter, Mastery requirement, weapon description and stats, the last two you currently see on click. So again, hiding some information behind player actions, but adding more information is our general approach.
But even this simple example raises other questions. For example, hiding Forma behind hover is likely not a big deal since it’s used more for completionist purposes, so not very time sensitive. But hiding the Lens is a bigger deal, since you sometimes want to choose a weapon to get some Naramon Focus, and hovering over them to find one can be annoying, can use search bar, but still. Lens also has the advantage of only showing when there is one installed, so it doesn’t contribute to clutter, so there’s arguments to be made to keep it, even if it goes counter to all the other stuff I said haha. Which is my not very subtle way of saying there’s no one solution to every problem we encounter and we got to try and keep analyzing them case by case, and when we miss the mark we know we got you to remind us.
So that’s the big one, the main thing that guides a lot of what we are doing. But I also want to talk about some other smaller, but important, things.
Consistency
With as many systems and as many screens as we’ve had over the years, we didn't always come up with the same solution to similar challenges, and that means inconsistency, for example a very basic thing, how do you display an element and it’s information in a grid.
Click takes you to screen with new info Info on right side 
Info on the Top Info on the top AND right
Info inside the element Stacking horizontal grids
We have been changing most screens to grid on left, details on right. You can see a lot of the examples above we have already reworked. We’ve been trying, not always succeeding, to remove this and other inconsistencies as we rework the screens.
Why is item labels a setting? And why is it off by default?
Not gonna lie, sometimes I ask myself this very question too 😅. Our logic was that 90% of our items have very recognizable icons, we looked at some of our contemporaries at the time and none of them had labels for items, and most of them had smaller, less unique icons than we did, so we felt comfortable removing labels. Of course I said 90%, the other 10% is not so great, clear cases are Relic icons and weapon component icons, for the latter we do have a desired solution that adds the resulting item icon to a corner, but this task keeps getting pushed further and further down the queue, it is in the wishlist tho. And for the Relics we force the labels on always.
Is this a good solution? Does it help in any way to keep the screen somewhat cleaner without them? The honest answer is we can’t know for sure. Personally I play without labels on and I don’t miss them. But when we do find a case where they are sorely missed, like recently in the Avionics scrapping screen, we force the labels on.
Why does the new Railjack UI use hold to confirm?
This is another new thing we are trying with Railjack UI, confirmation popups are tried and true, but they do have some disadvantages, for example this one from polarizing Revenant.
It tells me what will happen, but also it hides the context of what I did, I can't see the slot I polarized or the polarity I chose, I have found myself cancelling out of this out of fear that I selected the wrong polarity. Hold to confirm would preserve the context, so as you hold, you would be able see the slot and the polarity you selected.
Another downside of confirmation popups is that since there’s so many of them, most people stop reading them. If you only saw them on rare occasions, you'd be more likely to pay attention to what they say. I’ve gotten a request, twice now, to implement a special dialog for when you polarize a slot into the same polarity it already had. That actually has been in the game for years, but since it’s a popup amongst a sea of popups, people don’t notice it.
Does this mean we will start spreading hold to confirm all over the place? I don’t rightly know to be honest. In big part it will depend on your responses down below 😀 And that's mostly why I wanted to write this wall of text, I want you to understand why we do what we do, but at the end of the day we make it for you, so hopefully knowing our reasoning you can help guide us down the right road.
Last, but not least I wanted to share some of the screens we are currently working on, these are complicated ones, so don’t expect them super soon, but they are in the works.
World State Panel
We are not looking to reinvent the wheel, mostly will get themes, fix some issues like how mods show up as stretched images or how rolling over Invasions or Sorties can make the scroll bar go nuts. We are adding a bit of functionality by moving the resource drones into a tab here, so you will now be able to see where they are, along with their status, at a glance.
Mastery tests
The pre and post Mastery test screens are also being redone along with the new Mastery badges that were previewed a while back in a Devstream. We added a button to practice the test directly from here. Along with adding some tips to explain what is Mastery Rank and why do you want it for newer players.
End of mission
We are changing the end of mission screen quite a bit, first, by consolidating the mod and item sections into a single grid and increasing how many items you see at first glance from 6 to 10. Syndicates and Item Affinity are also being put together into a progress section that will show Focus, Intrinsics, etc.
Stats are being moved into their own section with a few added ones like healing done, crowd control time and damage prevented.
And we are introducing special recognition for things done during the mission, for example you might’ve found a lot of the Syndicate Medallions, revived your allies or put out a lot of fires in Railjack. We want to recognize that you aided your team there and who did the most damage isn’t the only thing that matters.
And finally we are adding more flavour to it by showcasing your whole squad.
So you made it this far!
As we reach the end of this 10 pager, the amount of information to digest is Grendel-size. As we mentioned earlier, a common approach in UX is to treat it as a conversation (a player clicking on abilities is asking “What are Chromas abilities?”). In the case of this Dev Workshop, a player might be asking ‘How is DE approaching their UI designs”, and now you have the answer! A lot of Warframe’s DNA has mutated over the years by reacting to not only what players say about the game, but how the game is actually being used (stats!). We will use both these pillars as we continue on our 200-screen journey.
Update
I have been reading all the responses, and I will keep on revieweing during the weekend, but just to touch on some of the common things I'm seeing:
Item Labels: A few of you made a very good point, that even if most items have unique icons, the ones that don't (relics and Prime parts) are very important items, specially for trading. Also lots of good points about how much harder icons are to learn when you can't put a name to the face.
End of mission: There will be item counts just like in any other grid, the mock is essentially just saying, space for 10 things. Also a title and whatnot, the mock is still WIP and generally they also change as we implement. In both sections we would have sorting, so if you got Intrinsics that would be sorted to the top of progression, if you were doing a Simaris daily his rep would sort up, but if you jsut scanned a few enemies it would be lower down. So hopefully with this, 6 slots is enough to show you the important stuff you got that mission.
Setting for two UIs: This isn't really something viable, as I mentioned we have around 200 screens, the amount of work it would take to maintain an old and new ui is jsut not possible for or team.
Some bugs: Caught a few references to bugs in your replies, we'll gt qa to look and log those.
Edited by [DE]Pablo