15 replies to this topic

[Bryan Ekman]

Let's get started!

UI 2.0 is a significant overhaul of the existing MWO user interface, both on the surface and under the hood.

Three main goals:

• Reduce friction for new players.
  
• Communicate information in a clear and simple manner.
  
• Make each screen relevant to the task at hand (contextual).

And one bonus goal:

• Make the Front End a little more sexy.

General Improvements

• Full support for Windowed, Full Screen, and Full Window view modes.
  
• Supports standard game resolutions 1024x768 to 1920x1200.
  
• More dynamic, lots of nice transitions, takes advantage of Scaleform and Flash animations.
  
• Supports element locking, useful for new players and tutorials.
  
• Frames-safe for 4:3 resolutions.
  
• New behind the scene UI architecture reduces bad states, improves stability, and reliability.
  
• Faster.

NOTE: The following images are mock-ups (not screen shots). They represent Work In Progress (WIP) concepts that are subject to change. The data and item images found within these screens is not correct, and place holder only.






Elements

1 Horizontal Navigation Bar
2 Utility Bar
3 Vertical Navigation Bar
4 Contextual Status Menu
5 At-a-glance BattleMech Details
6 List Filtering
7 Compare Tool
8 List Item
9 Mech Efficiency Status

Overview

• The horizontal navigation bar (1) has been made larger and easier to read.
  
• The previous horizontal sub-nav bar has been replaced by a vertical nav bar (3).
  
• The previous status bar has been split into the new utility bar (2) and the contextual status menu (4).
  
• The previous two `Mech detail elements have been reworked slightly and separated (5). The Mech Detail screen gives players a much better overall view of the Mech loadout.
  
• Standardized list element for all store and MechLab interfaces. Includes the ability to filter based on common concepts like A-Z, Price High to Low, Owned, Not Owned, In-Game, etc. (6).
  
• Easy compare functionality standard throughout the UI. (7)
  
• Standard list elements (8) showing Selected, Readied, Sale Status, In-Game Status, Price information, buy and configure buttons, and the Mech type and Name.
  
• Current Mech Efficiency status – Basic, Elite, Master. (9)

Please direct your feedback here!

[Bryan Ekman]

As you can see in the above image, we have moved the main navigation elements around. This follows our new principal navigation flow as seen below:



The horizontal navigation bar (1) will inform (change) the vertical navigation bar (2), which in turn changes the main view.

[Bryan Ekman]

Menu and Social buttons have been replace by Logout and Settings, along with a new global chat/social interface similar to Steam.

[Bryan Ekman]

The old status bar has been split, with relevant meta data (MC, CB, GXP), being moved to a Contextual Status Menu that changes depending on which screen you are currently in. The current view expresses the MechLab Status Menu.

[Bryan Ekman]

The new Mech Selection screen is much more streamlined, allowing players to quickly find, select, modify, buy, and sell their equipment.

This common list view element is used throughout the MechLab and Store interfaces. No longer will players need to learn 3-5 different ways to modify or view information about their items.

Note how we have used the vertical nav bar to sort Mechs by class! Further refinement can be down by using drop down list view filters.

Buying BatlteMechs and MechBays has never been more easy.

[Bryan Ekman]

Players can will be able to quickly compare Mechs and Items, using the compare tool.

Note the sell button!

[Bryan Ekman]

Mech Details



Item Details



Configure Loadout



Equipment



Camo Spec



Configure Weapon Groups!

[Bryan Ekman]

Reworked Pilot Lab makes finding, navigating, and upgrading MechTree much easier.

Please direct your feedback here!

Edited by Niko Snow, 08 May 2013 - 01:40 PM.

[Bryan Ekman]

Updated Item Color Coding.

NOTE: The colors are for demo purposes only, and NOT final.

[Bryan Ekman]

We have visualized the Mech Quirks.

[Bryan Ekman]

Tweaks based on player feedback.

[Bryan Ekman]

WIP Skills

Please join us in the feedback thread to discuss further.

[Bryan Ekman]

WIP Chat and Friend Interfaces. Updated based off player feedback and here.

[Bryan Ekman]

The above screen shot demonstrates some of the channel functionality. NOTE: THE ACTUAL CHANNELS ARE PLACE HOLDER.



Here you can see some improvements to the chat window - timestamp and user name. Along with a VERY early work in progress group interface window.

[Bryan Ekman]

Graphical Group view - note the DropShip icon. This allows players to see what BattleMechs you are bringing to the fight.

[Bryan Ekman]

DropShip inspect functionality.

With future game updates, players will be able to bring a number of mechs with them to the battlefield. This inspect tool allows leaders and players to quickly see what they have at their disposal. More info will be released in the future about this new lobby functionality.