Sneak Peak at UI 2.0 - Check It Out!!!!

Thread in 'Official 'Mech News' started by Michael, May 8, 2013.

  1. Michael

    Michael Grand Poobah

    4,835
    829
    234
    Original Source HERE

    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:
    • And a 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.

    [​IMG]

    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)

    [img width=600 height=271]http://i.imgur.com/rGmbPWU.jpg[/img]

    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:

    [img width=600 height=404]http://i.imgur.com/ndRF6TN.jpg[/img]

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

    [img width=600 height=94]http://i.imgur.com/mMxvZck.jpg[/img]

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


    [img width=600 height=204]http://i.imgur.com/mZtSQAK.jpg[/img]

    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.

    [img width=600 height=420]http://i.imgur.com/i7S1axD.jpg[/img]

    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.


    [img width=600 height=337]http://i.imgur.com/uLVx0hw.jpg[/img]

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

    Note the sell button!
     
  2. Michael

    Michael Grand Poobah

    4,835
    829
    234
    [​IMG]

    Mech Details

    [img width=650 height=365]http://i.imgur.com/XShPqRd.jpg[/img]

    Item Details

    [img width=650 height=365]http://i.imgur.com/S9rsGm0.jpg[/img]

    Configure Loadout

    [img width=650 height=365]http://i.imgur.com/ljKmQ0Y.jpg[/img]

    Equipment

    [img width=650 height=365]http://i.imgur.com/0jTc1Go.jpg[/img]

    Camo Spec

    [img width=650 height=365]http://i.imgur.com/V3UkhXy.jpg[/img]

    Configure Weapon Groups!
    [img width=650 height=365]http://i.imgur.com/GjVrPzj.jpg[/img]

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

    Mech Quriks Visualization

    [img width=650 height=365]http://i.imgur.com/EoyBTCo.jpg[/img]
     
  3. Tuku

    Tuku Well-Known Member

    217
    2
    25
    This looks very very good :) GIVE IT TO ME NAOW!!!!!
     
  4. skribs

    skribs Min-Max Maniac

    1,685
    164
    48
    I do hope that the LLs are a placeholder for the icons, and they intend to stack weapons of the same type. Also, did anyone else notice the weapons on that Atlas? Medium lasers and STD lasers!

    This looks like a good improvement, especially the ability to filter and sort your mechs. I have 20 now and its a nuissance, I can't imagine what it will be like when I have 50 or more.
     
  5. Tuku

    Tuku Well-Known Member

    217
    2
    25
    lol all of these pictures are Mockups not screencaps so I am sure they tossed some funny stuff in there for the hell of it (Atlas D with a 17m JJ range)
     
  6. ReconSaint

    ReconSaint Star Lord

    184
    21
    127
    God that looks sexy as hell...
     
  7. Durant Carlyle

    Durant Carlyle Star Lord

    114
    4
    125
    Those are the stats for a stock JR7-D Jenner. Just swap the labels for Tonnage and Armor, and use the pre-nerf missile damage. Of course, the speed is wrong too, but what can you do?

    I like it. I'm hoping they give the option of manually allocating criticals for ES and FF -- the auto-allocation bugs me.
     
  8. Morgana

    Morgana Dispossessed

    Nice to see that we will be able to configure our weapons groups via UI rather than in-game. This sure looks SWEET!
     
  9. Michael

    Michael Grand Poobah

    4,835
    829
    234
    Updated the 2nd post with Mech Quirks Visualization!

    [​IMG]
     
  10. Darkblood

    Darkblood Active Member

    50
    0
    12
    This one is very nice! Specially the plots showing acceleration not to be linear (assuming that's real data)
     
  11. Michael

    Michael Grand Poobah

    4,835
    829
    234
    [​IMG]

    Here is what the SKILLS portion could look like (their concept work)
     
  12. YaoYaoYiffy

    YaoYaoYiffy Active Member

    81
    0
    7
    Some very cool UI changes that'll really snazzy-up the game some. Hopefully the mechbay gets a lot easier to use as well. It's ironic, but right now the out-of-game mech building tools like Smurfy and Mechromancer are easier to use and more informative than the game itself!
     
  13. Moonsword

    Moonsword Star Lord

    143
    3
    125
    That is a lot of heat containment, must be able to fire PPCs a lot with that much heat containment :p
     
  14. Michael

    Michael Grand Poobah

    4,835
    829
    234
    [​IMG]

    Work in Progress: Player Chat Interface based upon Player Feedback
     
  15. Cpt Chattahah

    Cpt Chattahah Min-Max Maniac

    2,280
    303
    63
    Really hope they implement this...
     
  16. enileph

    enileph Star Lord

    4,203
    518
    201
    I wish they can allow for organizing and renaming for mech. I don't mind paying a few MC for renaming, something less than around 10MC obviously.

    Also, still waiting for decals.
     
  17. The Verge

    The Verge Moderator Staff Member

    4,367
    497
    231
    That chat window looks fantastic!
     
top-fast
top-fast
top-fast
top-fast