[Diablo IV] UI/UX feedback from a graphic designer

As a long time Diablo fan, I really want to see this game succeed.
While I feel I can provide feedback on many aspects of the game, I can see many of my thoughts have already been said by members of the community. As well as considered by the very communicative Diablo IV team.

This brings me to an area that itches me more than others; The art and design.
As someone who’s invested deeply in visual communication, I want to share the way I feel about the current UI of Diablo IV as there’s much to talk about.

I want to start by showing you this image:

https://i.imgur.com/u7fXHcc.jpg

This is a screenshot of MrLlamaSC tilting his head sideways as he tries to read the vertically placed skill category names during the demo :frowning:

Now, don’t get me wrong! I feel like there’s a lot of good to be said on the UI. The assets are some of the most beautiful I’ve ever seen in a video game. But considering how amazing the in-game look is, I feel like the UI/UX is not up to par.

Disclaimer: This is all just one man’s opinion! I do not claim to know better than the development team. I’m just sharing my thoughts based on what was shown in the demo. I understand most of it subject to change.

Here are some points to consider:

Interface materials’ thematical accuracy (mostly positive):

https://i.imgur.com/z8DPHix.jpg

Diablo’s UI has always been as dark and gothic as everything else in it. In Diablo I and II we saw interface panels made of stone, with the information carved into them. They also had trims of metal in them, ornaments that brace the information and make a grid. Diablo’s UI is truly a gothic church.

Diablo III also introduced stained glass as decoration and the use of other materials. In the inventory, paper was used for the “paper doll” and leather was used for the item grid to connote bags.

I see a lot of that coming back to Diablo IV and it’s great. Stained glass art for skill icon means they can “light up” as if light is passing through the glass when they’re active (which I would like to see more of). The skills you gain show up on paper and traits are being set in stone! They even have the traits’ path flow the same way the blood was flowing on the altar in the cinematic trailer! Wow!

Also, in areas where the logs cover the player (like in the social tab), a slight transparency is allowed so you can see a little of what’s going on in-game. I think the same should be done for an empty health / resource globe, where it makes sense. In the edge of the character tab it doesn’t feel as right.

The edgy, dark metal trims that surround the tabs are beautiful! A little overdone in some places like the game cursor or around the health globe, but it generally fits the tone of the game.

In contrast, the diabolical diagrams within the background of the skills tab, the traits tab, and the health / resource globes seem forced, unnecessary and a little cheesy. It’s kind of like stock art was placed to make the tabs seem less empty instead of distributing the information differently or creating new diagrams that complement the flow of information. Diagrams are usually used to display information, not to decorate. Maybe the information itself can be placed in a ritualistic diagram manner?

Another thing to point out is that the overall color value of the paper tab is on a much higher key range than the stone tab. Information on the skills tab seem to pop out while information on the traits tab seem to not pop out as much.

I would also like to see the gargoyle next to the globes interacting with them in some way (like the way he held the globe in the first two games) and not just sitting there.

As well as the red health liquid projecting a bit of red light onto gargoyle. Imagine if the already realistic and physical looking UI elements were affected by the light and shade of other UI elements?

Typography and distribution of information (mostly negative):

https://i.imgur.com/7b25tHz.jpg

This is something that went well with Diablo III and I would like to see Diablo IV take note from that.

The hierarchy and readability of the UI in general could use some work. I don’t know how much they tried with this one, because a lot of the information is subject to change, and typography takes a lot of time and work to perfect. So yeah, maybe it’s obvious, but I’ll point it out anyways.

The typography of this demo continues to haunt me. Tabs always starts with a different looking title. There I find texts of different shapes and sizes. Words choked with outlines and drop-shadow. Unreadable vertical headers. I witness senseless font usage. Serif against san serif. Bright brown backgrounds for pop up tabs. And then, weird text justifications. Unnecessary icons. It burns my eyes. Break my grids. I wake in terror at the thought of it…

I’ll just leave it at that. It’s the thing that stood out the most to me and it really needs fixing.

User experience, navigation and management decisions (mixed):

https://i.imgur.com/dc0ykKt.jpg

I’m not going to push too hard on the Tetris inventory from Diablo I / II, I get why some people don’t like it. But didn’t Diablo III already solve this issue with 1x1 for small and 2x1 for big items? An armor and a ring cannot take the same amount of space! Unless we’re going the World of Warcraft way (1 size fits all and everything is a square icon). Right now, it seems like the design is trying to have the cake and eat it too

I still think that managing big item graphics in the inventory creates a more intimate experience that’s grounded in the reality of adventuring. Small item icons make them seem less important than they are. Show us those beautiful item graphics that your team created! They really look great. I can’t imagine those tiny icons with more than 2 sockets in them either.

Character tabs (Inventory, Skills, Traits) and Game tabs (Map & Journal, Social, Game) are properly separated. They also seem easy to navigate. The exception from what I’ve noticed, is the inventory which has a scroll down bar on the left! Most of the people I saw play the game didn’t even notice it. I would much rather have different category of items separated into clickable tabs, the same way everything else is. Scrolling down is very out of place.

Regarding the gameplay UI; I’m fine with breaking from the symmetrical health / resource globes being on each side of the screen. This creates two evenly sized clusters on the bottom left and top right sides of the screen. It also doesn’t come in the way of the character tabs, which is great.

Combat user interface (mixed):

https://i.imgur.com/gS2gjEE.jpg

My favorite thing is the little icons that imply boss modifiers, like cold enchanted or shadow enchanted! It’s visual communication at it’s finest. In the previous games, by the time you read “Cursed, Extra Strong, Fire Enchanted”, you were already dead. So that’s a huge plus!

I’m also happy to see there’s no overlaying map to cover up the combat. Keep the mini map going, it’s not that hard to get used to.

The rest of it is a little uninventive. Maybe monsters’ health can also be a round globe? Maybe monsters’ names can be inside their health bar to make it more readable and take up less space. I think more effort should be made to keep the combat area clean from UI as much as possible. This includes monster levels, the flashes that appear when you hit them and the floating numbers that pop out of them.

I also noticed that elites don’t have much to make them look elite, like a fancy health bar or text. Only world bosses have those.

Okay. I’m done. Please share your thought :slight_smile:

3 Likes

I would love that. It would look really good. Also, the glass of the hp bar and the skills, could let us see through them.

That could be great. And it could have a function, maybe if the put the skills and traits together, and create nodes between skills and traits. Could have traits that are augments for specific skills and others that create synergy between skills.

And i know, it would start to look like PoE, but this one would be less complex.

Yeah, a translucent globe would look better than the current opaque one with the symbols. I’m not sure why they changed that.

I respect the decision to separate traits and skills, but I agree that a new way to display them is preferable. And if traits and skills are affected by one another, then surely they need to find a way to visualize that.

llama is sooooo cuuuuuuute <3 (im a straight guy)

im against this whole “skill list” design anyway
they should bring back the good old tree, also for the active skills

Hi Romak.
I love when professionals from all backgrounds give feedback. You have an eye for details that add to the game experience. Thank you very much for the images and for the work. This is exactly the type of constructive feedback Blizzard needs to work.
Here are my thoughts about your points:

  • Horizontal talent tree: agreed, text should not be rotated I think. No need boxes to display a number, I think these specific barbarian spells look way too cartoony just like diablo 3. The ones from the other classes look better.
  • I think Metal or stone fits any culture and is more timeless. Paper look is too connotated, too west medieval connotated, and over used in RPG games
  • I think the UI can easily get rid of some frames, they are either too thick or too many in shapes, color or style.
  • I disagree with the metal frame which does not seem to match any specific historical artstyle.
  • Glass decoration looks amazing, though I’m not sure it should look so colorful. The colors must pop up in the combat view. UI shouln’t look too intrusive. Perhaps the icons could remain desaturated when not highlighted, and colorful when highlighted.
  • Skill tree path: agreed, it looks gorgeous but I would remove the red path. I think there is no need colors to differentiate categories. A path or a stone can look extruded with shade and highlights (just like a cobble stone going town or up from the ground). If an icon needs color to be understood, then the icon is not comprehensible and clear enough.
  • Agreed on your line In contrast, the diabolical diagrams within the background of the skills tab, the traits tab, and the health / resource globes seem forced, unnecessary and a little cheesy
  • I’m not sure the UI should have both paper and stone. a game needs structure
    I have some similar notes
  • Gargoyle interacting? You have to be careful with static elements, they have to look timeless. It has to look like a jewel. Animating can make it look repetitive. Perhaps when life reach 0, the gargoyle could take a very slight different posture. But I like the idea in general for other aspects of the game with which the player could interact: corpses, objects in towns or npc’s, or just hover on buttons like in d2 close button.
    -Typography and distribution of information. Agree with you I think it’s mostly negative. Agree with all your points.
  • Tetris inventory? I think it must come back for both adding a layer of management, and for the immersion of the game. (explained in my thread)
  • Same how labels describe an item (It must look simpler and no need to repeat the image of the item. An item must not have an icon, an item must be considered as an IMAGE, the image is the item. (also explained in my thread)
  • Agreed it makes sense to have both ressources next to each other. It’s a brave move from the developers.
  • I disagree about the “no overlaying map to cover up combat”. Beautiful design is most of the time functional, and overlaying maps is also important for competitive gameplay (Also explained in my thread)

I would really appreciate if you can also comment my art style thread, I also wrote about UI and labels. Iit took me a lot of efforts to breakdown and document my feedback:

2 Likes

Thank you for taking the time and replying to my points!
The more opinions, the merrier.

Horizontal talent tree: agreed, text should not be rotated I think. No need boxes to display a number, I think these specific barbarian spells look way too cartoony just like diablo 3. The ones from the other classes look better.

Agreed. The layout needs to change. The barbarian icons are kind of okay, except for the ones that display faces, I think. It reminds me of the shouting icons from mobile games.

I think Metal or stone fits any culture and is more timeless. Paper look is too connotated, too west medieval connotated, and over used in RPG games

I’m a little mixed about the paper and leather. I don’t like the way it looks now, with glass icons appearing on paper (lol wat), but perhaps they can find a new way to use them. And like I said, the contrast in paper color and stone / metal color is too drastic.

I think the UI can easily get rid of some frames, they are either too thick or too many in shapes, color or style.
I disagree with the metal frame which does not seem to match any specific historical artstyle.

Well, I think they look kind of nice! Maybe a little too pointy and thick though. More detail and less pointy parts, like the ones in Diablo II would perhaps be better.

Glass decoration looks amazing, though I’m not sure it should look so colorful. The colors must pop up in the combat view. UI shouln’t look too intrusive. Perhaps the icons could remain desaturated when not highlighted, and colorful when highlighted.

Agreed. This is true to the color of items’ background as well.

Skill tree path: agreed, it looks gorgeous but I would remove the red path. I think there is no need colors to differentiate categories. A path or a stone can look extruded with shade and highlights (just like a cobble stone going town or up from the ground). If an icon needs color to be understood, then the icon is not comprehensible and clear enough.

I like the idea, but not the execution of it. The traits tab has a lot of saturation and value problems that I think can be fixed.

Agreed on your line In contrast, the diabolical diagrams within the background of the skills tab, the traits tab, and the health / resource globes seem forced, unnecessary and a little cheesy

I cringed a little when I first saw that.

I’m not sure the UI should have both paper and stone. a game needs structure
I have some similar notes

If they can’t find a way to make them look similar in color and tone, then I agree.

Gargoyle interacting? You have to be careful with static elements, they have to look timeless. It has to look like a jewel. Animating can make it look repetitive. Perhaps when life reach 0, the gargoyle could take a very slight different posture. But I like the idea in general for other aspects of the game with which the player could interact: corpses, objects in towns or npc’s, or just hover on buttons like in d2 close button.

Oh I wasn’t talking about animating it! God no. In Diablo I / II the gargoyle is holding the globe and is static. It would look cool if he had his hand on it or was looking at it. That’s all. Right now he’s just looking down at the edge of the screen.

Typography and distribution of information. Agree with you I think it’s mostly negative. Agree with all your points.

And again, I think they weren’t even trying becuase a lot of information is subjecy to change. But some things really had no excuse.

Tetris inventory? I think it must come back for both adding a layer of management, and for the immersion of the game. (explained in my thread)

I’m a huge fan of the tetris inventory!! But I heard some people don’t like it for some reason :frowning: At the very least make the items bigger.

Same how labels describe an item (It must look simpler and no need to repeat the image of the item. An item must not have an icon, an item must be considered as an IMAGE, the image is the item. (also explained in my thread)

Completely agreed. The item description that pops on hover is horrendous in every regard.

Agreed it makes sense to have both ressources next to each other. It’s a brave move from the developers.

Yeah, I like that they aren’t afraid to change things for the better.

I disagree about the “no overlaying map to cover up combat”. Beautiful design is most of the time functional, and overlaying maps is also important for competitive gameplay (Also explained in my thread)

So far I haven’t seen a compelling arguement in favor of them. I will head over to your feedback page in a few hours and see if you can convince me :slight_smile: Thank you again for your time!

3 Likes

I’m not agree with this. I think we should have choice. Overlaying a map in low opacity is sometimes very usefull. And a lot of people like to use it specialy in ARPG.

1 Like

I agree with this, why one thing or the other if we can have both. Just need an option (could be a button at the edge of the mini-map or something one can change fast (could also be different keys) between them.

Other details I forgot to mention those

  • The flag banner in the inventory tab looks cartoony and does not fit with other cultures (4th icon) https://i.imgur.com/dc0ykKt.jpg
  • The scrollbar must indeed go and be replaced by Tabs.
  • I prefer the diablo font from d1d2. D3’s diablo font feels more modern and smoother, don’t you think?

Also,
I uploaded and edited the character selection screen:
https://ibb.co/y5ZKpKm

  • Removed the moonlight because it’s a too “vampire” style that does not belong to Diablo
  • Removed the cartoony trees to make the trees more believable and immersive
  • made the background more shallow because the shapes were distracting the eye.
  • Reduced the infinite horizon which looked high-fantasy, like a fantastic world to discover. Instead, the idea is not to make the surroundings perceptible. To keep the questions unanswered.

Sorry without sources it’s hard to edit, it’s a too dark, it could be lighter.
Curious to know your opinion on this Romak.

2 Likes

The overlaying map in Diablo was originally inspired by a sci-fi game set in space. It also feels that way. I agree with the functionality of it, but I feel like it’s the kind of power that is better to take away from the player

The concept of the overlay map is indeed from a sci-fi FPS yes, but not the execution of it. In Diablo, it looks like it’s pencil handmade and shaky, a style that fits the franchise in my opinion.

If you look at the POE, the overlay map lines looks sharp and smooth like the SCI-FI fps which David Brevik took inspiration from.

I’m personally not a UI/UX person but as gaming-experience would like my popups as transparent and as cornery as possible, to potentially open inventory during fights or maybe change a skill or two (if possible)

The “popup covers screen” not a fan of that… Everything else is kind of… details tbh, well, as long as they don’t use sharp-solid colors and use dimmed versions it’s fine… :thinking: :smiley:

I agree about the banner. Note that this is a banner depiction inside stained glass! Which is way overdone in my opinion and doesn’t make much sense.

I’m used to the old Diablo font so of course I’d love to see it make a comeback. However, I noticed some new players have a hard time reading it. Look in Diablo II for example: the number 5 looks like the numbner 6 to some people. So I get the change to a more modern look, but I also wanna see it tilted a little to the more gothic side of things. And of course, reduce the number of fonts because there are currently way too many.

Oh wow! Yeah, I like your version better. Less unnecessary scenery.
Another thing to point out is the red light coming from the bonfire. It’s a little too red in my taste.

2 Likes

You must really hate real trees and nature then. As someone who lives in Ireland those are pretty accurate renderings of trees that grow here. Native Irish oak trees tend look like this, trees in general have such a variety of shapes though, shaped by the environment they grow in. Sanctuary is an odd place and doesn’t necessarily obey our “perceptions” of nature and what we consider natural.

I agree on your points about the fire though, I feel it could be a little brighter, but then all you “dark” Diablo types will scream “OMG ITS GOT YELLOW AND LIGHT BURN IT WE MUST BE DARK!”.

Also I like the fact that this feels like a party resting before heading out on Adventure into some unknown ruins.

I’m sure we’ll see changes though and don’t forget there are also at least 2 more classes that need to fit in here.

Not everything needs to be Dark and Mysterious to make it Diablo. I do think a more enclosed space for the meeting of the group would work better like a ruined tower, that way we avoid the horizon issue and it’s not just “black”, and they can show off some awesome architecture instead.

As you said, they “tend” to look like ones, but the lines are exaggerated like in this video (The sequence from 5:05)

Also notice how they want to make the rock look fantastic and dramatic.

It make them look like caricatures.
If you want the campfire character selection to look special, don’t emphasis too much the background. The foreground has to look special, and the background should neutrally support it (whether the trees are accurate or not, irish trees are connotated because of their shape)

It’s a pitfall we see too often in video games, some areas of the demo look too wealthy or too dense, too fantastic.

https://tinyurl.com/rvxnpue
The majority of areas should be more homogenous and natural: https://ibb.co/6RwbxWx

This is about the believability of the word. When an area looks too fantastic and impressive, it does not serve immersion, and it’s unfortunately what happened in diablo 3.

That’s why I think it’s hard to work with horizons. I don’t think it’s good to have multiple archetypes blended together. they don’t support a believable world, but rather something fantastic.

1 Like

Half of D2 was pretty bright and/colorful. But don’t tell those guys that.