The Diablo Chronicles: Interface & Controls (Part 1)

  • #1

    After writing several Chronicles describing the evolution of several systems across the three games in the Diablo series, I had still never played the original myself. But for this one I required more information than screenshots and old documents from 2001 could provide. After some consideration I finally installed the game and took it for a spin, and man, Diablo has come a long way since it's first release in 1997. After a quick run through of everything me keyboard could lead me to, a visit to some of the merchants, a look at the bottom of the screen, and some quick fighting in the dungeon I think I'm ready to present this Chronicle on the evolution of the Interface & Controls. Just as a reminder, this is something that I know is very much based on personal opinion, so feel free to disagree with what I personally considers to be improvements and flaws.

    This is part one of a two part Chronicle about Interface & Controls. I'm also out an Index for this Chronicle because of its length. Let's see how that turns out :P


    Index



    The DiabloWiki.com - Character Screen Character Screen contains information about the character, as its name implies, and is a quite convenient way of quickly judging the strength of a character without having to look at the equipment. Its evolution can be summarized as simply including more information, but I think I will go into a bit more detail.




    The original Diablo" class="wiki-link">Diablo"/> Diablo version of this interface, seen to the left in the image, was understandably very simple but still contained almost all information you could need about your character. The top of the screen displayed your Name, DiabloWiki.com - Class Class and Level. The left side displayed your DiabloWiki.com - Attributes Attributes, Health and Mana. The the right side displayed Armor Class, (chance) To Hit, Damage and Resistances. The downside of this interface was that it didn't display all of the different bonuses you could get from your gear, such as damage reduction and life steal.


    The displayed information didn't change particularly from Diablo to DiabloWiki.com - Diablo II Diablo II, and neither did the design, but some additions were made as a result of more complex formulas. DiabloWiki.com - Attack Rating Attack Rating was introduced as a way to improve your chance to hit with a physical attack, and the chance to hit a specific enemy could only be displayed by first attacking that enemy and then hovering your mouse over the Attack Rating. The same thing applied to Defense" class="wiki-link">Defense"/> Defense which was used in the same way as Attack Rating, but to avoid physical attacks. The DiabloWiki.com - Damage Damage display was also changed in order to show the calculated damage of any skill bound to either the left or right mouse button. However, the Diablo II Character Screen was notorious for displaying incorrect damage information and was therefore nearly useless for many characters.


    "If you can't explain it simply, you don't understand it well enough." - Albert Einstein




    Before going into detail more about the DiabloWiki.com - Diablo III Diablo III interface I want to point out that the most recent screenshot (seen to the far right in the image) of the Character Screen is taken from BlizzCon 2010 and is almost a year old. It doesn't even have the most recent Attribute changes applied. But for the sake of having something to write I'm going to base my thoughts on it anyway, regardless of how outdated it is.
    First off, there is a secondary advanced view that displays "everything" and a basic view that also contains a substantial amount of information, confirmed by Bashiok in a tweet. Judging from the casual appearance of the BlizzCon 2010 screen I would say that it is an older version of the basic view.

    Second, whether this applies to the current version or not is unknown, but the Damage display appears to be removed completely. It sort of makes sense because there is no longer any way to quickly scroll through all your skills, and the damage of a skill alone can not be used to determine its strength. My guess is that you will instead simply hover over the skills to see their damage, something that shouldn't be difficult since they are all located on the hotbar at the bottom of the screen. More information about that will be in the next Chronicle.

    Third, also unknown if it still works like this, Resistance percentage is now dependent on your resistance and the level of the monster. The Resistance percentage is displayed by hovering your mouse over the resistance, very similar to how Attack Rating worked in Diablo II. Other images show that more pop-up information is available by hovering over the attributes as well.


    That concludes this section about the Character Screen. The screenshots we have right now of the Diablo III version might not do it justice, but there is actually a newer screenshot of another interface that you will see further into this Chronicle. To the top right of that interface there is something that most likely is of relevance to the Character Screen. Keep reading to find out, or use the Index to jump to the Skill Screen and take a look.








    Not much has been going on in the Inventory Screen area over the years. We have seen the inclusion of more item slots, but beyond that there is not really much to see... Nah, that is not entirely true, though most changes have been fairly subtle.





    At the top of the Inventory Screen are the Equipment Slots. You place your items in these slots to equip them, quite self-explanatory really. DiabloWiki.com - Blizzard North Blizzard North made two changes to this area for Diablo II. The first was to show which items belonged in which slots, something that becomes increasingly important as the number of slots increases. The second was to include the weapon switch which swapped your weapon and offhand item for a second set with the click of a button (or hotkey).



    Blizzard" class="wiki-link">Blizzard"/> Blizzard undid one of these changes for Diablo III by removing the weapon switch, and instead added some pretty art of the class next to the paper doll.

    At the bottom of the screen is the DiabloWiki.com - Inventory Inventory. The items you picked up were arranged here in a Tetris-like grid in Diablo and Diablo II, with items having different shapes and taking up a varying amount of slots depending roughly on their actual size. Initially Blizzard were shooting for a very different system for Diablo III where there was no Tetris-like arrangement of items, but rather a specific number of slots that held one item each, regardless of the actual size of the item. They felt that the management of inventory space and careful arranging of items to optimize that space had no place in a Diablo game.

    The community disagreed, and after a significant uprising they went back to the old system, but reduced the inventory size of items so they only took up a maximum of two slots. This together with the 20 extra slots means that the Inventory is now able to hold many more items than in the previous games, but there is much less management required. However reducing the size of items to two slots meant that certain large items will have their artwork cropped while in the inventory in order to fit inside two small slots. They will still be shown in full glory when placed in an equipment slot, just not in the inventory. Compensating for that is the fact that equipment will now look identical in the inventory and on the character, unlike in the previous games where the artwork often was much more impressive than the equipped item, or the other way around.

    Gold was stored as an item in the first Diablo, effectively making one of the 40 slots unusable, something that was changed in the sequels. Blizzard did something similar in Diablo II with the DiabloWiki.com - Horadric Cube Horadric Cube that took up 4 slots, but thanks to its ability to store items it actually added 12 slots, effectively adding 8 to the total amount. The two optional but very useful Tomes of Identify" class="wiki-link">Identify"/> Identify and Town Portal" class="wiki-link">Town Portal"/> Town Portal that took up two slots each somewhat balanced that out though. It is unknown if there will be these kind of items that are desirable to keep in your inventory at all times, but I can see Scrolls of Identify" class="wiki-link">Scrolls of Identify"/> Scrolls of Identify and Potions definitely being strong contenders.


    We also have the new addition to this interface, the Nephalem Cube" class="wiki-link">Nephalem Cube"/> Nephalem Cube that will be used to break down items into materials used for crafting. The button for this can't be seen in the cropped image at the top, but it can be seen in the full version (with the wrong graphics). The most recent image we have of it makes it look somewhat like the Horadric Cube actually, see for yourselves.

    If this would have been written a bit earlier than two months ago I would have yet another pretty picture right here. Sadly the DiabloWiki.com - Charms Charms and the DiabloWiki.com - Talisman Talisman didn't meet Blizzard's expectations and were cut from development. However they are expected to make a return in one way or another after release. Basically the Charms that were introduced in Diablo II took up inventory slots and therefore sort of worked against the player. Blizzard weren't too pleased with that and wanted to give them a separate container in Diablo III, the Talisman. However, the bonuses granted by the Charms ended up being too boring, and instead of spending a large amount of time fixing them they probably figured that getting the game released had a higher priority, so they put the Charms and the Talisman in the little box of ideas for future content and called it a day.






    The two interfaces described so far have undoubtedly evolved a lot since they first appeared in the original Diablo, but they both pale when compared to the massive overhauls of the Skill Screen.




    I want to start off by saying that this happens to be the only recent screenshot we have of the Diablo III interface, and there are some important things about it that I want to point out, but let's focus on the skills for now.



    The original Diablo didn't have skills, they were called spells instead and had some significant differences. All spells could be learned by any class through a spellbook or cast through charged Staves or Scrolls. When a spell was learned it could be accessed through your Spellbook, pictured in the image above. The Spellbook was divided into four pages with each page containing stronger spells than the previous. (Clarification:) Both the items used to learn spells and the interface seen in the image above were called spellbooks. Rather confusing if you ask me.

    This system didn't work for Diablo II that didn't have spells but rather skills that were (mostly) exclusive to each class. So the spellbook and the spellbooks were replaced by the skill tree as the new way of learning and leveling skills. Another significant improvement was the mouse-over information that saved a lot of space, yet allowed much more information about the skills to be displayed. I assume everyone knows how a skill tree works so I will not go into further detail about that.



    For Diablo III Blizzard went ahead and remade the skill system yet again. Players are now given seven skill slots that unlocks together with new skill tiers as you level up. Each slot can contain one skill from any unlocked skill tier, but it is encouraged to mix the tiers since the low tier skills have no or close to no cooldown while the high tier skills have very long cooldowns, but (I assume) also much high power and/or utility. Last but not least there are DiabloWiki.com - Runestone Runestone slots to the right of learned skills for significant extra customization.

    Now for some speculation. We know that skills are now divided into active skills and passive DiabloWiki.com - Traits Traits. Judging from the image I would guess that the tab with the star opens up the Trait screen and the little arrow opens up the full list of skills. The last button with a character symbol is probably the Character Screen, this is something I find particularly interesting as this could mean that the Skill Screen button will be removed from the hotbar (this one) to save space. In my opinion a change like that is not too far-fetched considering that most people that really care about quick access are probably using hotkeys anyway. I'm not assuming that this will happen, but I consider it a possibility.






    Shop until you Drop


    From one system that has seen many changes to another. The progress of the merchant interface can be divided into two distinct steps. The Diablo to Diablo II step was about integration and usability, and the step onward to Diablo III was more focused on adding the many additional features offered by the DiabloWiki.com - Artisans Artisans in a good way.





    The first version of the merchant interface was almost as simple as one could possibly imagine. The player clicked the merchant and a little list of services appeared. Choosing a service brought up the appropriate interface, and I wish I could include more of these interfaces, but I only had room in the image for the basic shop. As you can see there wasn't much more to it other than the item name, the required level and the gold cost. There were two obvious downsides to this approach, namely:

    1. There was not enough information about certain items. If you wanted to buy a spell you had to make the purchase without knowing anything but its name and requirement, for example. (Thanks to YaeriusFCM for the correction)
    2. Only four items were displayed at once, so a lot of scrolling was necessary to view the entire stock. I'm not sure if this was because of my OS, but scrolling or pulling the bar didn't work, only the small arrows.


    A lot of changes were made to this interface for Diablo II. The list of items was removed and in its place Blizzard North gave us something akin to how items were arranged in the stash, thereby allowing many more items to be displayed at once. By only using mouse-over pop-ups it was also possible to display a lot of information and save space at the same time. There were also some integration improvements done so that you no longer had to switch interface when you wanted to, for example, DiabloWiki.com - repair repair your equipment. The final change was that the interface now only covered half the screen, thereby leaving room to display the Inventory and Equipment Slots at the same time.



    So, what has been done to this interface for the upcoming Diablo III? Well, first of all I once again want to point out that the screenshot is not up to date (Gamescom 2010), but hopefully it will give us a good impression of what is to come.

    So what can we determine from looking at the image? First of all we have the sidebar which houses all of the different services offered by the Artisan, an upgrade from the list that used to appear above the merchants when you clicked on them. Repairing is no longer a little button below the shop, it has its own interface like in the first Diablo (but better of course). Blizzard can get away with doing this thanks to the aforementioned sidebar that makes interface swapping much more efficient.

    I wanted to include all the other interfaces that you can access from the side bar, but I only had room for one, and for consistency I chose the shop. Two things are apparent here. The number of displayed items is drastically reduced, but the amount of information available without hovering your mouse over the items is increased. Because fewer items can be shown there are of course pages. The question is if this system turns out to be better than the stash-like view of Diablo II.

    Imagine that you are a DiabloWiki.com - Barbarian Barbarian and you are specifically looking for axes, because you have points in DiabloWiki.com - Axe Murderer Axe Murderer. In Diablo II you would simply open the weapons tab and quickly locate axes thanks to their distinct size and appearance. With the Diablo III interface it appears like a lot of page swapping might be necessary to reach axes, because not only are there only 10 items per page (18 on the weapons tab in the Diablo II screenshot), but both armor, weapons, shields and consumables appears to be together without tabs separating them. Of course this doesn't necessarily have to be how it looks and works today, but if I were given the choice between the 2010 Diablo III pages and the Diablo II stash-like style, I would go for the Diablo II style only because I can reach my desired item faster.

    Finally we have the addition of a buyback feature that conveniently allows you to get items you sold by accident back. A neat little feature that might even save a monitor or two.






    I know that this has been a very long and probably tough read, it was a very hard topic to summarize, so I will keep this last part as short as possible. This was the first part of two Chronicles about the Interface & Controls of Diablo III and its predecessors. As you probably noticed there was an apparent lack of Controls in this one, which was intentional. This part focused on the parts of the interface that we deal with mostly out of combat, while the next and final part will focus on the interfaces we come in contact with in combat, including control and camera layout. Until then, don't forget the past, without the past there is no future.
  • #2
    Fun read. It based on some outdated info but still very interesting. Gj :wd:
  • #3
    I'm not concerned personally with the new shop interface... I have always felt why bother buying items and wasting gold when I can just go kill s**t and get better items anyway the only time I had really bought from the merchant shop was when I am in dire need of new boots or weapon and even than that was on rare occasions. Other than my 2 cents nice article!
  • #4
    Amazing article, thank you very much for the great read. +1 from me.
  • #5
    Having no way to know how it actually plays, I honestly think that basically all the UI elements look better. Many of the classic ones are rather cramped and overloaded with information in a small area. I hope that they end up being more intuitive to look at and use in Diablo 3, since that's how they appear to me.
  • #6
    Seems kind of pointless to discuss D3 stuff starting from this morning until Aug. 1st. These guys already know the truth about what everything looks like.
  • #7
    Fun article, thanks for putting in the time to write it!
  • #8
    Yeah, fun read. Thank you! Now I can sleep good. Good Night ;)

    Swedish Official Fansite www.Diablo3pvp.se

  • #9
    Very interesting topic of discussion, I have never actually compared the interface between the games before. I can't wait for a proper comparison between the interface that's a bit more revolved around combat and fighting.
    [youtube] T3hMusicGuru
    [playlist] Diablo III Music

    Signature by Caniroth.
  • #10
    "They felt that the management of inventory space and careful arranging of items to optimize that space had no place in a Diablo game.

    The community disagreed, and after a significant uprising they went back to the old system."

    I laughed pretty hard about at this. Blizzard is generally known to COWER at the opinions of the sweaty minority that disparages any minor change to a game in it's sequel. That's why they didn't have unlimited unit selection in SC2, and why they changed Diablo 3's art style.

    Wait...
  • #11
    they have an official icon that i saw in forces last video, here it is http://www.d3sanc.com/wp-content/uploads/2011/07/d32.png
    its small though D;
  • #12
    This was fun to read. I found it funny that I skipped over reading who made the article and could still make out that it was your work simply by how it was written :)

    Gold was stored as an item in the first Diablo, effectively making one of the 40 slots unusable, something that was changed in the sequels.

    Actually it would usually make alot more than 1 slot unusable, as it only stacked up to 5.000 (although a quest reward in the unofficial Hellfire mod made it stack to 10.000). Most of the time you could fill 3/4th of your inventory with your gold, so you'd just leave it in town.

    If you wanted to buy a weapon for example you had to make the purchase without even knowing the damage and dpeed of the weapon, and even though you could see that a Scroll was called Scroll of Inferno, a new player had no way of knowing what Inferno was or even how much damage it dealt.

    Iirc the revelevant stats for weapons were visible in the buy screen but yes this was less than convenient for staves, books and scrolls.
    This signature has been edited by Macros: 25 August 2010 - 04:00 PM
  • #13
    Very interesting topic, a lot was discussed. It is amazing to see how far diablo has come since the original diablo release in 1997 (which was an awesome game anyway). I noticed you mentioned during this post that the new artisan interface (even though it is an old photo) suggests that multiple page scrolling would be needed for weapons etc. In my opinion it wouldn't really bother me all that much, Because it enables you to also browse other weapons that could be available to you and perhaps you could find something else that grabs your attention. Where as if all the weapons where categorized you would end up doing heaps of tab clicking and page changes anyway to view all the weapons that the artisan has to offer. But again that is just my opinion, and again a very interesting topic overall :).
  • #14
    awsome, it`s what you call. evolution.
  • #15
    Awesome writeup Ophion. It's definitely evident that you put a lot of work into these comparisons and analyses. Great stuff!
  • #16
    Good work this is something that I haven't been to sure about.. we still aren't.
    But it will now be quite easy (and fun) to see any changes! SOON™
    // Majk
  • #17
    Nice article!
    I'm almost tempted to install D1 again! :xD:
    About gold: I remember to have completely littered the ground outside the Cathedral entrance.
    And I liked the trill you got when you found a new spellbook!
  • #18
    It is nice to see the evolution of the game!

    Nice work!
  • #19
    Quote from weirdingway

    Seems kind of pointless to discuss D3 stuff starting from this morning until Aug. 1st. These guys already know the truth about what everything looks like.


    We won't know everything about the game before it is released. When we get to see the updated UIs I will definitely cover those as well, but probably not as in-depth :P
  • #20
    Nice article Ophion! I wasn't expecting anything more to read now until august 1st. :) One thing though, I thought Blizz abandoned the idea of having skills and/or traits that only affected a single weapontype?
    walk softly, and carry a big gun
  • To post a comment, please or register a new account.
Posts Quoted:
Reply
Clear All Quotes