Why Do We UI Like We UI?

[[DE]Pablo]

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 January 24, 2020 by [DE]Pablo

[Gabbynaru]

Ok, I'm cool with the new UI changes. BUT:

This needs to come back in one way or another. Hovering over abilities just to notice different stat changes is a pain in the butt. The ability stats should always be on display, and the videos, descriptions and all that could be hidden behind a hover or a click on the ability, as that would act as giving a more detailed description. Stats however, we need those on display at all times, because at the end of the day, stats are all that matters in this (and most other) game(s), so obfuscating it is just wasting the players' time.

Also, please hide the end of game stats for other players. They only lead to toxicity. Do display the players own end of game stats (Damage dealt, damage taken, total kills, blah blah), but hide what the other players did. We don't need to know that, and neither does anyone else. All it does is create a stupid sense of competition that shouldn't even exist in a cooperative environment, and that sense of competition brings with it toxic behavior. So just hide it. It's unnecessary and doesn't help in any positive way.

Edited January 24, 2020 by Gabbynaru

[(PSN)corpusbonds]

Well everyone is going to see me, and say “oh it’s THAT Valkyr prime again.” 
 

Cant wait.

[D1videdByZer0]

I think a compromise would be to have a "simple" view and an "advanced" view. The simple view is the default on all new accounts... as someone that has started the game later on (early 2018), the information overload was certainly overwhelming at the start.

However eventually you may WANT that info, so being able to toggle between them may be useful.

On that note another idea (for a simple mode): a simple way to display weapon damage (maybe also adding crit to the average, maybe even shooting speed for a general DPS rating) by just showing a damage total and then a cake diagram that shows the exact division of damage types below it.

Edited January 24, 2020 by D1videdByZer0
clear up I meant damage types

[NightmareT12]

15 minutes ago, [DE]Pablo said:

And finally we are adding more flavour to it by showcasing your whole squad.

Hey.

HEY HEY HEY

Wait a second.

Remember those old dioramas? The ones even Steve said he misses? Do you think we can have them for end of mission again? 😮Seems like a way to show the squad and also the mission we just did, and more than half of them are hooked up. :3

On the other hand, thanks for the interesting read Pablo. I often wish we had more insights like this, since Devstreams can only cover so much. So kudos.

EDIT:

5 minutes ago, Gabbynaru said:

This needs to come back in one way or another. Hovering over abilities just to notice different stat changes is a pain in the butt.

What if it worked exactly like now but we could click a button to swap the stats (Health, etc.) with abilities? That way when we're touching certain stuff we can hide info we might not need in that moment. At the end of the day, the abilities showcase all paramaters already (duration, range, efficiency and strength).

Edited January 24, 2020 by NightmareT12

[(PSN)corpusbonds]

Wait wait wait.. this BETTER be a thing now.

pablo get back here and answer if this will be a thing 

[(XBOX)Shodian]

Oooh, I love that end of mission screen. 😍

[Sannidor]

Super narrow vertical sliders are horrible.

Grabbing them with cursor is a pain, it's always better to just scroll mouse but it's slower than using slider so.... maybe make the interactive part of the slider larger or diamond shaped?

Overall, Warframe UI is a compromise between PC and what must work on consoles, obviously making PC experience worse. We need to make optional everything which can be improved on PC for maximum functionality and visibility. I hope Switch players enjoy the game but I refuse to suffer only because someone ad DE decides all versions must look the same.

[xRufus7x]

2 hours ago, [DE]Pablo said:

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. 

This is good and all until you realize that we are getting more and more universal weapon skins and the skin images replace the default icons. his increases that 10% and will only continue to increase it as time goes on. IMO, either the custom skins should not update the icons, the labels should be on by default or there should be toggles for both to allow the players to chose with either the custom images turned off or the custom labels turned on by default.

Also, until that other 10% is fixed they should be on all the time. Once everything has a unique icon or you are forcing labels on all displays that do not have icons this is going to be a user experience issue.

 

Also, any chance we can get hotkeys for the orbiter functions on PC. Would be nice to not have to navigate through menus and submenus to get to things like the arsenal, mods, foundry, decorations, etc.

 

One final edit, why not push the items and affinity further up the page so more can be displayed, decrease the opacity and make the gaps in between completely see through and grab the dioramas that are gathering dust in the codex and show them in the backround. with the warframes that we are using like they used to display before missions.

Edited January 25, 2020 by xRufus7x

[Kryptonex-EN-]

Those are some nice changes.

I would personally suggest to remove certain confirmation boxes of actions that delay the said action compared to the UI before it was changed, I just feel like it necessarily slows players down. Or at least make it an opt-in kinda thing.

[EoFallen]

When can we see this new ui roll out 

 

[(XBOX)Red Dough Boy]

I think one nice thing would be the ability to pick and choose the UI, some experienced players don't mind the spreadsheet style layout that can overwhelm newer players. 

[Cicasajt]

the old UI seems stupid to you and yet is it so much better than any new UI that got released so far

[Alterworld_]

That Kuva Anku Mag has equipped isn't supposed to be a teaser for anything, right?

Edited January 24, 2020 by Alterworld_

[Ubermacho]

Liking the changes, but would it be possible to get stats that are specific warframes? Fastest ms on volt/gauss, highest spore count on saryn, etc. Highest crit would also be cool to see.

[iPeer]

50 minutes ago, [DE]Pablo said:

And finally we are adding more flavour to it by showcasing your whole squad.

This image right here showcases people's main issue with your current progress towards your rework of the UI. This screen as a whole looks really nice, but: Those items at the bottom? Yeah, I have no idea what 3 of those are without hovering because items labels are disabled by default. Other games can get away with this because their items are visibly different from each other, but in Warframe every single part of the same type looks exactly the same (don't even get me started on the relics themselves). Reworking your UI to make it functionally and visibly better is great, but removing information from the user is not. Several UIs in the game that have been remastered have this issue. Lots of space to use, but nothing in that space, instead all the info is hidden behind a hover, such as the market; why do I need to hover over "Buy" to see a weapon's stats? It should be right there for me to see without jumping through hoops.

 

I'll be honest, I missed this on my first read through:

50 minutes ago, [DE]Pablo said:

Our logic was that 90% of our items have very recognizable icons

Are we playing the same game here? This is a joke, right?

Edited January 24, 2020 by iPeer
90% recognisable icons... lol

[Hello]

Interesting thing to read through Pablo! I will touch on a couple things, with opinions or answers throughout your post.

In terms of Item Labels. Cleaner isn't always better. Sure I like something being organized, however with item labels, it's a nightmare with having them off. At least we do have the option to turn those on and I will always leave them on while we have the option.

Hold to confirm. I'm indifferent about this one. There are times where it's okay, however there are times where I absolutely don't like it. Let's use revolite for the omni tool. We run out, so we're sitting there +50 at a time 6 times in a row refilling it. If it was just click to confirm, much better or at least top it off completely if we're in the dry dock. I can't say I would like this for other things, for example the foundry. If I'm crafting energy pads, ciphers, the Plague Star things or gems. I don't want to have this hold and watch some slow animation every 60 seconds for 5 different items I'm crafting. It's as simple as click + enter, great it's crafting.

The extractor idea is appealing, would there be a claim all and redeploy type of option? I would craft extractors and start using them.

The end of mission thing, I'm a bit iffy on. I like the squad. I like the idea of showing how many mods we have in the result screen. However it feels a little busy. That's just from a screenshot though, so I would be curious to see it first hand at some point.

[Dark_Lugia]

I don´t like a hold to confirm option; for console games it´s kinda okay, but I really dislike it in PC games since it feels mostly clunky and unnecessary.
For me PC inputs have to be clear and fast, on console I have more problems beeing as accurate as on PC so I don´t mind a "failsave" over there.

But I like the idea of making the UI more uniform across the board.

Edited January 24, 2020 by Dark_Lugia

[kapn655321]

Thanks for checking in with us, Pablo. You're a good man, and handsome one to boot. Best of luck with the UI work, I look forward to seeing what you guys come up with.

[GrowthProfitGrofit]

"5 Crewships Sabotaged"

Just want to say that I would be taking the time to personally praise whichever player gets this award at the end of every mission, that's a huge improvement to the UI just for that one detail.

[hoojiwana]

I don't like that the entire top half of the end of mission screen is functionally wasted. I don't need to see who my squad is, I just played with them. That just leads to forcing that scroll bar on the affinity gained section which if someone wants to quickly check in-mission using Tab or P (or whatever the console bind is) they have to spend more time fiddling around with something that is current at-a-glance.

[Kylo.]

Was wondering if there could be a setting to show all the information all the time, for people that want to see all the information, but you said you don't like binary settings. 

[Amontadillo]

please make use of all the empty space you have. there's a lot of it. too much of it.

 

 

please add a searchbar to the navigation screen.

 

 

item labels need to be on by default, end of story.

[Stupercrossman]

These new UI changes are actually looking pretty sick. I look forward to the clean up!

Right now we can only see progress for weapons if we have a blueprint. By hovering over a blueprint I can see it's resource costs, parts cost, if I've mastered it before, if I own one already etc. In the context of prime weapons, I'd like to see this extend to their parts, so that when I hover over a Paris Prime String (for example) the same box shows up telling me what's necessary for the Paris Prime, rather than it just telling me the String is a part used for the Paris Prime. This way I can easily track progress on the parts I have/need for my prime items without needing the blueprint first. This can be said for Warframes as well.

Thanks!

[Arkennstar]

15 minutes ago, [DE]Pablo said:

The choice that drives us

The two most common types of feedback we get are

     1. Need more information
     2. This is overwhelming

 

 

I want to say here, more important than both those to a user is ALWAYS, "Convenience"

The main objective to a UI as far as design considerations are in question, is to have the user click mouse or press buttons, or move their cursor as few times as possible. One of the examples of a bad change in said regard is the Tab switching when viewing weapon stats or details regarding costs, description and stats of weapons in markets or cred store, etc. Unlike the previous system where when you clicked on a weapon, the stats and every useful info needed was right there. Now one has to click through 2-3 stages to get to the info they want. Worse yet, switch back and forth if they want to revisit any information.

While overwhelming UI is a bit of a problem, its far less of a problem than inconvenience and wasted time needed to sift through unnecessary stages of a UI. Extra information can be disregarded. For example, if I need to look at and compare a weapon's primary and secondary fire stats, if its a single step UI, all I do is click on the weapon and all the information I need is in front of me. I can simply choose to not look at the weapon cost, blueprint cost, resources needed to craft it, etc. Thats a choice for the user. Now if I had to see the resources needed for the BP, again, one click and I have the info I need and disregard the stats. 

You can make bolder or glowing titles for each section so that the user can navigate by sight on which section they want to look at and where its located, but making the user, click, press buttons, hover around just to look at a small bit of information is not good UI design.

 

Hope you consider this in your design choices.