The Evolution of UI: An Exploration of the Elder Scrolls Series

The Elder Scrolls series, by Bethesda Softworks, has been in the gaming scene since 1994. In the past 22 years, the game's graphics and user interface have changed tremendously, from The Elder Scrolls Arena (1994) to The Elder Scrolls Online (2014). This post explores how the interface has changed over time and with new technology.

The first two installments in this series, The Elder Scrolls Arena and The Elder Scrolls II: Daggerfall (1996), were made for MS-DOS only, and featured similar UIs. Both Arena and Daggerfall displayed their main UI on the bottom of the screen, taking up approximately the same space. With the icons in Arena, players could draw/sheathe their weapon, steal, check their status (poisoned and such), access their spells, see their journal, rest, or view a world/local map.

Left, The Elder Scrolls Arena (1994) ; Right, The Elder Scrolls II: Daggerfall (1996)

Daggerfall made a few changes, including adding an 'interact' icon that displayed how the player could interact with the world in front of him/her (talk, observe, pick up objects, steal/unlock). Daggerfall also allowed players to access their inventory by clicking on the money bags icon in the UI or by pressing F6. This was an improvement upon Arena, in which the player could only access their items by clicking on their character's portrait and then navigating to the 'Equipment' sub-menu.

Arena's inventory included all items in a list, and Daggerfall's segmented out item types.

Daggerfall also improved upon inventory management, allowing players to more clearly see which items they had in their inventory and to separate items by type (weapons & Armor, magic items, etc.) Players could view the stat improvements of their items by equipping items and watching the numbers floating next to their characters grow or shrink. The next installment in the series, The Elder Scrolls III: Morrowind (2002), again changed the look and feel of the inventory.

Morrowind inventory window, on top of the map

While Morrowind kept the full-body demonstration of a character's equipment, it removed the floating numbers and the necessity of equipping an item to view its bonuses. Instead, a player could hover her or his mouse over a item to view its stats before deciding whether to equip it. Morrowind also kept Daggerfall's addition of separating out item types (All, Weapons, Apparel, Magic, Misc.)

Morrowind took a very different approach to how it displayed the inventory and other sets of information. Unlike its predecessors, which displayed maps, character sheets, etc. full-screen, Morrowind put all of its information sets in adjustable, windowed boxes. Players could see all of their information sets simultaneously if they so desired. Players could not, however, press a key to open only one of these windows - unless the player had toggled off certain windows, it was all or nothing.

Morrowind also changed the interaction feature significantly, shifting the action from direct (the player presses a button to set whether they're in talk or steal mode) to contextual. In the first few minutes, the player learns she or he can press Spacebar to open doors, talk to NPCs, and pick up items. Instead of requesting player input, Morrowind determined what type of interaction mode the player was in, and changed the effect of the Spacebar accordingly.

The implementation of contextual buttons in Morrowind may not have stemmed from Bethesda's innovation, but instead from necessity and a changing market. The new millennium ushered in an age of console gaming, with the release of the Playstation 2 in 2000 and the XBox in 2001. Morrowind was the first Elder Scrolls game designed for consoles - and contextual, multi-purpose buttons were necessary for console games.

One interesting part of Morrowind's UI design is the difference between the PC and console version.

PC, left; XBox, right

The designs are so different, they almost look like different games. The PC's design was simply not practical on the console, and thus a new design was made. Players could open a specific menu and then toggle between menus with the left and right triggers.

Morrowind's successor, The Elder Scrolls IV: Oblivion (2006), was clearly designed with a console-first perspective.

Oblivion Inventory Example

Oblivion condensed information sets, removing the player's ability to change window sizes and pin information to the screen. Instead, players could access information all in one panel (the "Journal") if they pressed Tab.

The Journal's design - tabs with sub-tabs - lent itself to controller navigation. Console-based players could use the left and right triggers to access the main navigation (resources, items, spells, map), and left stick to navigate the sub-tabs.

Some* PC gamers were frustrated by the change and console-focused design. In Morrowind, their information was one click away - and now they had to navigate multiple menus. Oblivion also had few keybindings for PC menu navigation. While there were technically keybindings to main Journal sections (F1 for character, F2 for items... etc.), there were no bindings available for Journal sub-sections. (*Well, at least one. I found a rant about Morrowind vs. Oblivion I found interesting.)

Oblivion made other changes to the UI as well. The game revived and adapted Arena's item list format into a sortable table and displayed important item information in columns (which previously could only be viewed by hovering the mouse over an item). Placing items in a table format better allowed players to view and compare objects in their inventory.

The Elder Scrolls V: Skyrim (2011) returned fully to lists for its inventory management, much to the chagrin of PC gamers. Skyrim's modding community came to the rescue and created SkyUI, a PC-friendly UI. SkyUI retained Oblivion's sortable table format.

Console version left, PC version right

Skyrim also had logical keybindings for PC gamers: M for map, J for Journal, I for Inventory, versus having players press the function keys. Like in the PC version of Morrowind, players could again access menus separated from the main journal. The PC version of The Elder Scrolls Online (2014) took an approach similar to the SkyUI setup and also increased the number of keybindings a player can use to access information.

In summary, The Elder Scrolls has aged well over 22 years. It has kept true to its action-adventure spirit, and has kept key elements of the HUD in each design. Every release of The Elder Scrolls has shown a player's health/mana/stamina and some navigation method (compass or mini-map) as the basic HUD. Check out how the HUD has evolved over time.

The Elder Scrolls Arena (1994), left; The Elder Scrolls II: Daggerfall (1996), right

The Elder Scrolls III: Morrowind (2002), left; The Elder Scrolls IV: Oblivion (2006), right

The Elder Scrolls V: Skyrim (2011), left; The Elder Scrolls Online (2014), right

With rumors swirling of The Elder Scrolls VI in the next few years, we'll see what kind of UI the future holds.

__________

Thanks for reading! That was a doozy of a post to write, but it was fun to go back in time and see how interfaces have changed over time, and to think about what the design decisions might've been. I was especially surprised to see the stark difference between the PC Morrowind and XBox Morrowind. I also chose not go into detail for ESO or to review Battlespire or Redguard just to keep it brief. Well, relatively brief.

Now if you excuse me, I need to go kill some dragons. I'll see you in the New Year!