41 replies to this topic

[sabujo]

Greetings all,

Following the positive opinions regarding my latest mockup on the Warehouse UI layout, I've invested some more time on materializing some ideas that me and other players already had the opportunity to suggest before, but was never considered into production.

After checking the last iteration on the mechlab (on the PTS), one major disappointment I had was regarding Mech Select screen. I never used that screen except on CW (while you wait for a match) because I do prefer the current Mechlab grid view. Bigger, cleaner and despite not being perfect, I find it more useful.

Another letdown was the absence of no mechanism to quickly find modules. What was implemented is simply not enough.

Here is my take on the UI:



Okay, let's break it down, shall we?

Side layered navigation
On the PTS we can already see a better approach on filtering mechs (clan/is, for example) but my initial though was "neat, but how about more?". My approach comprehends the following features:

• Column filtering allows to add/remove filters and groups of filters easily, while keeping everything on one place (and not scattered as the new mech select screen)
  
• It contemplates important functional filters such as:
  
  • Mechs that have modules installed
    
  • Mechs that have engine installed
    
  • Valid Mechs only
    
  • Clan/IS
• It combines additive and multiplication filters. Filters in the same group add between themselves, but the results are based on the intersection of filter groups. Examples:
  
  • (Light AND Medium) (Inner Sphere) (Owned AND Have Modules On)
    
  • (Assault) (Clan AND Inner Sphere) (Owned AND Valid AND Have Modules On)
• It presumes the custom listing feature where you build custom lists composed of the mechs you need. You then can categorize and filter just by that special filter and keep your mechbay uber organized.

Top toolbar


The toolbar combines searching, sorting and display layout.

• The searching is an alternate way to find the mech you need without using filters. Just type "GRA" and all GRAsshopers are isolated among with all other mechs that may have those letters on it's chassis name OR custom name.
  
• Sorting is the same as we have now in the Skills screen (sort by chassis, price, tonnage, etc.)
  
• Display Layout are those two icons that can present a grid view (on the screenshot) or a grouped view (as in the Mech Select screen)

Mech Item


This refer to the grid item that represents a single mech. Here are the general changed I think would benefit the UI:

• Engine Installed is easily identified. You can check if an engine is there, which engine it is and if it can be removed (check Clan engines).
  
• Modules are marked on each item. Color coded for Weapons, Mech and Consumables Modules. You will know at a glance if the mech has modules.
  
• "Configure" button was removed. As it is now it clutters the space. The button should only show up when the mouse is hovering (check Blue and Red items).
  
• Invalid mechs are toned down (red ugly/agressive Invalid label ditched). The invalid mech when hovered turns Red.
  
• Hovered valid items are marked Blue and display Skill Level and a shortcut Button for Mech Tree is now there.
  
• Selected mech is Yellow as usual.
  
• Hero/Champion mechs have a corner marker (check the X5)
  
• Mech picture is only partial visible for added visual impact
  
• Reduced height - fits more rows on screen

Special remarks:

• This is NOT a comprehensive approach and would require more thought into it and testing
  
• I tried to incorporate elements and base layout of the current UI in order for the change to be not so drastic.
  
• Both module filter and module visual indicators DO NOT replace a module/equipment finder tool, but I believe it sure makes a huge leap into better management.

Sorry for the long description but it is important.


Hope you like it!


Edit: Update
After checking some feedback and other contributions, I here present a refinement of the proposal, including a partial approach to modules icons, plus an attempt to stramline all the current mech module icons in order to keep them legible while scaled down to a few pixels width:




The idea is that:

• Mech Module have visible icon slots for they are more important (pricey and gameplay-wise impact)
  
• Weapon Modules and Consumables have small indicators that state if anything is installed there and if there is a module slot (made space for max 4 weapon slots and max 2 consumable)
  
• Now, aiming for the sky: Engines and Mech Modules would be draggable between mechs. (wouldn't it be sweet?

Regarding the icons, this is not a proposal (as this requires to be more reflected on) but just to make a point. In my point of view, a new symbolic language would be needed for fast recognition in low resolutions and (hopefully) in game as well. By using different shapes that point to a category and consistent iconography, things can get better and more flexible to be used all around the interface.

Edited by sabujo, 11 May 2015 - 05:58 AM.

[sabujo]

Just to clarify:

• Yellow mech is selected and is ready to battle
  
• Red mech is a mouse-hovered state of an Invalid build
  
• Blue mech is a mouse-hovered state of a VALID build
  
• Dark mech is an invalid build

Edited by sabujo, 08 May 2015 - 07:17 PM.

[Targetloc]

That is a pretty good layout.

[Tarogato]

I like the sidebar and the topbar. I would also suggest a behaviour where if you click on the text, it switches to only that filter and if you click on the box next to it, it simply toggles that filter on and off. For instance, you click on LIGHT, it shows only light mechs, but if you clicked on the box, it's simply adds light mechs to the view. (unless it was already checked and you clicked to uncheck/hide them)

I really don't like your grid layout though. It feels way too complicated and cluttered. I much prefer the simple ugly red INVALID bar - it's easy to gauge at a glance. Also, I prefer the full-model view of mechs in the icons, not the cropped shots. I don't think it's necessary to show engines at all, I'd can that idea. Modules, yes, but I don't quite like the way you tried to do it.

[Tarogato]

The Mech Tree button is unnecessary - going through the Skills tab works just fine. The positions of the names doesn't need to be changed, the XP marker and champion/hero status doesn't need to be changed, ...

If you're going to add module indicators, do it like this:



Incredibly simple, easy to read, you can mouse over each module icon to get a popup that says what that module is and what it does in case you forget what the icons are (would be necessarily for weapon modules that all look the same), and most importantly it's easy to see what mechs have what at a glance. It could be done cleaner with better module icons (even smaller perhaps, and not all blurry since I just shrunk them down without making them myself).

Bonus points if you could click and drag modules from one mech to another by grabbing these icons and the module slots were colour-coded according to whether they are for consumable, mech, and weapon. :3

Edited by Tarogato, 08 May 2015 - 09:43 PM.

[sabujo]

Tarogato, on 08 May 2015 - 09:41 PM, said:

The Mech Tree button is unnecessary - going through the Skills tab works just fine. The positions of the names doesn't need to be changed, the XP marker and champion/hero status doesn't need to be changed, ...

If you're going to add module indicators, do it like this:



Incredibly simple, easy to read, you can mouse over each module icon to get a popup that says what that module is and what it does in case you forget what the icons are (would be necessarily for weapon modules that all look the same), and most importantly it's easy to see what mechs have what at a glance. It could be done cleaner with better module icons (even smaller perhaps, and not all blurry since I just shrunk them down without making them myself).

Bonus points if you could click and drag modules from one mech to another by grabbing these icons and the module slots were colour-coded according to whether they are for consumable, mech, and weapon. :3

Thanks for the feedback. Your approach is certainly valid and requires less effort to implement. One thing that bugs me, besides the Invalid "slap in the face", are the configure buttons repeat all over the place. That and the "Owned 0" in other screens. My changes tried to reflect that. As for element positioning, it's an alternative that can be used to estimulate new approaches, but there are aspects truly most important.

I your like the vertical layout, but I am still unsure if the explicit usage of the module icons (at least by using the scaled down versions of them) is that necessary. Testing is required, for certain!

[Troutmonkey]

Tarogato, on 08 May 2015 - 09:41 PM, said:

The Mech Tree button is unnecessary - going through the Skills tab works just fine. The positions of the names doesn't need to be changed, the XP marker and champion/hero status doesn't need to be changed, ...

If you're going to add module indicators, do it like this:



Incredibly simple, easy to read, you can mouse over each module icon to get a popup that says what that module is and what it does in case you forget what the icons are (would be necessarily for weapon modules that all look the same), and most importantly it's easy to see what mechs have what at a glance. It could be done cleaner with better module icons (even smaller perhaps, and not all blurry since I just shrunk them down without making them myself).

Bonus points if you could click and drag modules from one mech to another by grabbing these icons and the module slots were colour-coded according to whether they are for consumable, mech, and weapon. :3

I have a feeling that those icons are far too small and detailed to be of use to most people, especially at higher resolutions. They don't look very nice when scaled that small.

[Tarogato]

Troutmonkey, on 11 May 2015 - 03:31 AM, said:

I have a feeling that those icons are far too small and detailed to be of use to most people, especially at higher resolutions. They don't look very nice when scaled that small.

Exactly, because I scaled them instead of making them by hand, pixel by pixel so that they would look nice. They don't even need to necessarily be that small, there could feasibly be two columns, or the single column could extend down toward the Configure button and be a little wider to accommodate slightly larger icons. The point is, you can easily see that the mech has modules in it and you can hover over to see what module it is if you can't read the icon. No need to go into the mechlab and edit the modules just to see what (if anything) is in it.

[Troutmonkey]

sabujo, on 08 May 2015 - 07:01 PM, said:

Hope you like it!

I took some liberties with the design of what I like from both yours and MoonUnitBeta.

I prefer his mech portraits, and like have the configure button available. I also like how yours is shorter and shows more information about the engine and modules.

The way you have the mech sorting on the left is fantastic, but it needs a "Select All" option there somewhere. I would go one step further and add a collapsible title for weight categories when ALL is selected (expanded by default, of course).

[pyrocomp]

I'd say that MoonUnitBeta's icons plus initial idea would be a good combination. I think module icons is a very good idea, but to make those easily distinguishable will take some effort.

[pyrocomp]

Tarogato, on 08 May 2015 - 08:56 PM, said:

I like the sidebar and the topbar. I would also suggest a behaviour where if you click on the text, it switches to only that filter and if you click on the box next to it, it simply toggles that filter on and off. For instance, you click on LIGHT, it shows only light mechs, but if you clicked on the box, it's simply adds light mechs to the view. (unless it was already checked and you clicked to uncheck/hide them)

I'd say that it will be better to ask for Shift+Click functionality here. Same with omnipods and anywhere else. It'll be quite intuitive (normal for any OS and almost any software).

[Lily from animove]

better would be that all categories unmarked means all are enabled by default, because honestly, how often do you deactive "lights"?

if any you want to fastfilter for a specific class, then you want "lights only" but with chekcboxes and all 4 being marked as default, this menas 3 clicks.

instead, make "no marked checkbox" showing all mechs.

Becaue no checkbox means: no filter.
1 to n checkboxes per category means A OR B OR C OR D as filter option.
And checkboxes in different categories are then "AND"s
also, filters like "owned" should be remembered when leaving the game (can be stored on client side)

But I would suggest in the upper screen, that invalid mechs do not get simply dark, they should be marked with a red rame or such.

Edited by Lily from animove, 11 May 2015 - 05:38 AM.

[sabujo]

Troutmonkey, on 11 May 2015 - 04:08 AM, said:

I took some liberties with the design of what I like from both yours and MoonUnitBeta.

I prefer his mech portraits, and like have the configure button available. I also like how yours is shorter and shows more information about the engine and modules.

Seems a valid alternative, indeed. Although I am not a fan of the visible button because it only adds distraction when the grid is full. Thing is: you need to move your mouse there anyway, why not making it show up only when mouse over?

Troutmonkey, on 11 May 2015 - 04:08 AM, said:

The way you have the mech sorting on the left is fantastic, but it needs a "Select All" option there somewhere. I would go one step further and add a collapsible title for weight categories when ALL is selected (expanded by default, of course).

What it needs is a 'Reset filters' button. As it is now, all are selected. It combines all classes (let's say this is the main filter) that are Owned. If you take the 'Owned' out, it shows everything, even the mechs you have not purchased yet. In this filter system, the more you click among filter groups, the narrower the selection will be. If you combine multiple filters from one group it adds (more results) but if you activate any option of another filter group, it intersects (less results).

[sabujo]

Lily from animove, on 11 May 2015 - 05:31 AM, said:

better would be that all categories unmarked means all are enabled by default, because honestly, how often do you deactive "lights"?

I see you point. You say it's more common to want to restrict to a single category (just lights, for example), rather than deactivating one and keeping the other three active? I think it makes sense, yes. In this case, selecting all or selecting none would produce the same result but the difference resides on how the next action will be. Nice observation, thank you.

[sabujo]

pyrocomp, on 11 May 2015 - 05:11 AM, said:

I'd say that MoonUnitBeta's icons plus initial idea would be a good combination. I think module icons is a very good idea, but to make those easily distinguishable will take some effort.

Fully agree on that!

Just updated the original post with the following:

After checking some feedback and other contributions, I here present a refinement of the proposal, including a partial approach to modules icons, plus an attempt to stramline all the current mech module icons in order to keep them legible while scaled down to a few pixels width:




The idea is that:

• Mech Module have visible icon slots for they are more important (pricey and gameplay-wise impact)
  
• Weapon Modules and Consumables have small indicators that state if anything is installed there and if there is a module slot (made space for max 4 weapon slots and max 2 consumable)
  
• Now, aiming for the sky: Engines and Mech Modules would be draggable between mechs. (wouldn't it be sweet?

Regarding the icons, this is not a proposal (as this requires to be more reflected on) but just to make a point. In my point of view, a new symbolic language would be needed for fast recognition in low resolutions and (hopefully) in game as well. By using different shapes that point to a category and consistent iconography, things can get better and more flexible to be used all around the interface.

[WhoopieMonster]

I do really like your suggestions. I think iconography is really important in this day and age. So many apps, websites, and applications are doing away with the traditional labled button. I am currently reworking my work systems to utalise icons and colour codes. The impact cannot be understated for the user.

One question, how do you see your weapon slots system working on mechs that have the full 16 weapon slots?

Keep up the good work!

[sabujo]

WhoopieMonster, on 11 May 2015 - 06:06 AM, said:

One question, how do you see your weapon slots system working on mechs that have the full 16 weapon slots?

Hum, but the maximum number of weapon slots seems to be 4 (as in the Locusts 3+1, for example). What do you mean by 16?
If the number of max slots go up to 5 or 6, the interface needs to accommodate that even if it disrupts the elegance (replacing the dots for a number, for instance).

[Troutmonkey]

sabujo, on 11 May 2015 - 05:43 AM, said:

Seems a valid alternative, indeed. Although I am not a fan of the visible button because it only adds distraction when the grid is full. Thing is: you need to move your mouse there anyway, why not making it show up only when mouse over?

Good point. As long as the mouse over is instant I'm okay with this.

sabujo, on 11 May 2015 - 05:47 AM, said:

I see you point. You say it's more common to want to restrict to a single category (just lights, for example), rather than deactivating one and keeping the other three active? I think it makes sense, yes. In this case, selecting all or selecting none would produce the same result but the difference resides on how the next action will be. Nice observation, thank you.

As said above. Standard software behaviour would be click on the row to only select that category, or click on the tick box to check/uncheck that category. That way if I want to see just lights I would click "Lights", and then if I wanted to see heavies I would click "Heavies" and it would uncheck all other categories. If I wanted to see Lights and Heavies I would click Heavies and then click the check mark next to Lights, enabling both.

[Troutmonkey]

sabujo, on 11 May 2015 - 05:59 AM, said:

After checking some feedback and other contributions, I here present a refinement of the proposal, including a partial approach to modules icons, plus an attempt to stramline all the current mech module icons in order to keep them legible while scaled down to a few pixels width:

These icons are nice, and I like the idea, but at the same time I feel we're trying to put too much information into this small preview. I wonder if it would be worth putting the Pilot Skill icon where the module icons are, and then move the module icons into the hover over state.

[Lily from animove]

sabujo, on 11 May 2015 - 05:47 AM, said:

I see you point. You say it's more common to want to restrict to a single category (just lights, for example), rather than deactivating one and keeping the other three active? I think it makes sense, yes. In this case, selecting all or selecting none would produce the same result but the difference resides on how the next action will be. Nice observation, thank you.

you can simply add another checkbox at the category bar, and when one clicks it it does select/deselect all. which then would be an easy way to get all. (Like its often the case in emails and PM systems such as here in the forum)

Edited by Lily from animove, 11 May 2015 - 06:35 AM.