Welcome
Ladies and Gents:

These forums are now closed and registration disabled.

Please join us at our new forum on Proboards. Our hope is that these new forums are more stable, provide more and better features, and allow continuation of the project forums in a safer, more secure, long term environment.

me3explorer.proboards.com

--The ME3Explorer Team

Sir and Gift | New GUI MockUp

Development board for ME3Explorer tools. Please try to keep discussions for each tool inside its own thread.

Which new GUI do you like the best? (see link in the OP to take you to a 3-way comparison)

Poll ended at 18 Apr 2016, 17:15

Version 1 -- the original, more basic
0
No votes
Version 2 -- the newest version with MDI, a little fancy
1
17%
Version 3 -- no MDI, much fancier, tools will all be separate programs in windows
5
83%
Version 4 -- like v3, but a test run of the sidebar in a horizontal orientation
0
No votes
 
Total votes : 6

Sir and Gift | New GUI MockUp

Postby giftfish » 17 Mar 2016, 20:56

POLL VOTING POST LINK >>> new-gui-mockup-t2314-80.html#p23201

------------

NEW GUI MOCK UP

A GUI overhaul is something Heff and I talked about awhile back, and after SirCxyrtyx recently mentioned the same thing, I just had to get some ideas down "on paper" so to speak.

The toolset has a few key problems (short of WinForms itself, lol):

  • The main menu top bar interferes with individual tool menus, once a tool is opened. They blend together and it's not obvious to new users where one stops and the other starts. For example, "File" should never be in the middle of the top menu bar, it should always be on the left, as that's where users expect it to be. In addition, it means we often have 3 layers of menus stacked on top of the toolset. Again, not intuitive -- and it ends up looking messy.
  • Every tool looks different; the GUI across tools is not unified at all. The intent of menu options and how to do things are not obvious. This is what happens when everything is done piecemeal and there was no plan created at the beginning of the project.
  • It's, well... not very pretty. It's much better than it used to be, but still very dated. Partly due to the above.

So, the first thing I decided to work on was the main window and how to fix issue #1 above, as well as make things a bit prettier and more user-friendly.


Before the mock ups, here's what we currently have, with PCCEd2 open. Immediately we see the issue with "File" being in the middle of the screen, at the same "level" as the main menu options. Not intuitive.
Spoiler:
Image

What solves this problem and so many others, is if we move the Main Menu to the side, like this:

Spoiler:
Image

With the relocation of the Main Menu to the left we now achieve the following:
  • Icons can be associated with each menu category, making it more user-friendly
  • Tool menus can now start on the upper left, like they should
  • Revision/version becomes a bit more obvious
  • More obvious links to all associated ME3Exp sites
  • Renamed to "Mass Effect Explorer" to account for ME1 and ME2
  • Unifies all "engines" into the same menu scheme
  • Taskbar remains at the bottom
  • Above the taskbar is a "infobar" that will be used for all tools. It will contain relevant text on the left, and a progress bar on the right. The Progress bar will have accompanying text that describes the operation: "Name X Added to position #.", "File Saved.", "BIN Replaced.", etc. No more dialogue boxes have to be added.
  • Design allows for more modern menu expanding operation

Here's what it would look like upon opening (Windows 7, obviously):
Spoiler:
Image

I've done a bit of tweaking to the category names to make them more explanatory.

  • User Tools changed to Mod Installation
  • Developer Tools changed to Mod Creation
  • Utilities removed from the User Tools category
  • Options changed to Settings
  • About as its own menu option

When clicking on a menu option, a pane appears over the toolset desktop; the exact animation used to do this is flexible. The pane can be opaque or semi-translucent like I've done below. For the most part I've kept the existing tool names and locations, but I've adjusted a couple just to give an idea of how things can be reorganized. There are likely Developer Tools that can go into Utilities, or that can be removed from the toolset completely. There are also Settings that should be adjusted. All of this should be addressed as part of the GUI redesign. FYI, the 4 options under the versioning are links.

Spoiler:
Image
Image
Image
Image
Image

A couple other details:

  • Yes, I realize that ModMaker and TPF Tools can also make mods. HOWEVER, their primary function is to install mods. These are THE two main tools for users in the toolset. They are what 95% of our user base uses. Let's pull them out into their own home.
  • Texplorer gets moved into the Mod Creation section, since that's it's primary purpose is to browse and extract textures. Image Engine is moved to Utilities, since that's what it is; same with Plot Database, TOC Updaters, and Asset Explorer. The latter could even be removed as part of the overhaul. The wiki TOC would be edited to match this new menu scheme.
  • The "1 2 3" after PCC Editor is an example of how we could implement game variations for the tool, assuming they can't be bundled into the same tool (like Texplorer).
  • Obviously there are a lot of ways the information can be laid out inside the menu. I've kept it relatively simple for now, just so folks could see the basic idea.
  • Fonts and icons can be changed, but need to be easy to read. I intended to use a couple different ones, but forgot. I'd suggest no more than 3: Main Menu names, tool names, general text. I think it's good to keep the icons very simple and minimalistic.
  • Colors of icons/text should change when scrolled over. Probably from the dark gray to a blue to compliment the flyout menu background and the current wallpaper.
  • Another thing we could consider is to build the Progress Bar into the right side of the Taskbar.

Obviously, this doesn't account for the tools themselves. Each one will need to be revamped separately, which is another reason why we want to remove deprecated tools. The more we have, the more we have to maintain.

Discuss :)
User avatar
giftfish
Toolset Developer
 
Posts: 1247
Joined: 08 Jan 2016, 02:35
Has thanked: 129 time
Have thanks: 75 time

Re: New GUI MockUp

Postby CreeperLava » 17 Mar 2016, 21:29

I don't have a lot of time to write a complete opinion, so please bear with my quick points :).
- I like the idea of a side-bar, always present and consistent in all the tools. What I don't like, however, is the big buttons. It's something I dislike generally in computer GUIs, as it looks like something designed for mobile and takes too much place. Not sure how I would avoid that without having little buttons and a lot of white space. Vertical text wouldn't look good either. I'll have to think about it some more.
- I'm not sure the menu idea you show is even doable is winforms, it probably doesn't support transparency. I'd keep the old dropdown menus, just link them to the new sidebar buttons instead. Also, the old dropdown menus don't take the whole window :). I'm all about saving space and avoiding clutter, as you can see^^.
- A GUI overhaul is probably a good idea, and can have a great impact (like your icons), but it takes a lot of work and I fear for KFreon's sanity at this point^^. Is this a priority for the stable or something to consider afterwards ?
User avatar
CreeperLava
User
 
Posts: 844
Joined: 07 Feb 2015, 21:52
Has thanked: 119 time
Have thanks: 83 time

Re: New GUI MockUp

Postby giftfish » 17 Mar 2016, 22:48

@Creeper --

1. This is AFTER the stable, like I mentioned to Sir in the News thread.

2. This is when we ditch WinForms altogether and move to another system. It would likely be something SirCxyrtyx and Heff would tackle; they've both expressed interest in overhauling the toolset GUI. The overhaul would be needed for all tools, but K's tools would remain in their own "GUI-world", controlled by him until if/when he wants to make changes. Generally, K doesn't edit the rest of the toolset tools; Sir and Heff do now that WV is gone. This obviously isn't b/c K can't, it's b/c MM/TPF Tools/Texplorer are extremely labor-intensive tools and those are the ones he's decided to work on; he also barely has time for them as it is, lol.

3. As far as the side-menu icon sizes, scaling itself is something that will have to be discussed and decided upon. I specifically made them that size so they would fill the size I made the toolset window. Scaling the window would obviously make them larger/smaller OR would result in "white space" underneath. If we go with the whitespace concept and don't implement scaling, then the icons can be made whatever size we want. Regardless of which way we go, we'll also need to account for monitor scaling and the UHD monitors that are now available.

------

To be clear, this will be a huge, huge project. Like I said, this is not only re-doing the main window. This is overhauling the layout of every single tool to try to create a more unified concept, pleasing GUI, and intuitive design. The best way to do something like this is to challenge the way everything currently works. How information is displayed, edited -- everything. This is why culling the toolset should be part of the goal. This has already been done for the User Tools, as part of me writing the wiki; many un-/little-used tools were purged in the process. After the stable it will be time to do the same thing with the Dev Tools. It will likely take several months. If Sir/Heff want to do it, then great. If not, then things will stay as they are.
User avatar
giftfish
Toolset Developer
 
Posts: 1247
Joined: 08 Jan 2016, 02:35
Has thanked: 129 time
Have thanks: 75 time

Re: New GUI MockUp

Postby SirCxyrtyx » 17 Mar 2016, 23:27

I'm liking it. Will absolutely require a shift to WPF.

A few questions/comments:
  • What happens if the window is resized to be shorter than the sidebar? Do we just disallow that?
  • Any reason you ditched the icons next to the tool names? I think those are actually somewhat useful in quickly finding the tool you're looking for.
  • I think possibly the most ambitious part of this is where you've dispensed with ME1/2Explorer and made their tools launchable from the same menu as the ME3 ones.
User avatar
SirCxyrtyx
Toolset Lead
 
Posts: 345
Joined: 16 Apr 2014, 00:20
Has thanked: 28 time
Have thanks: 288 time

Re: New GUI MockUp

Postby giftfish » 17 Mar 2016, 23:43

SirCxyrtyx wrote:I'm liking it. Will absolutely require a shift to WPF.

A few questions/comments:
  • What happens if the window is resized to be shorter than the sidebar? Do we just disallow that?
  • Any reason you ditched the icons next to the tool names? I think those are actually somewhat useful in quickly finding the tool you're looking for.
  • I think possibly the most ambitious part of this is where you've dispensed with ME1/2Explorer and made their tools launchable from the same menu as the ME3 ones.


1. Yeah, I'd say having a minimum window size is probably a good idea. Usage becomes totally impractical otherwise.

2. Icons will be there. That was part laziness and part just due to me still doing a lot of brainstorming about how the menu will look once it opens. I'm not a fan of a lot of "floating" text. It definitely needs more structure than what I have set up so far, but I wanted folks to see a general idea of what I was going for. I'll do a more detailed mockup of one menu this weekend. Expect more variations in shading, vertical lines or borders, and that sort of thing.

3. Yeah, I was wondering about that. But, using ME1 Package Editor for example, is making that launch from "PCC Editor | 1" a lot different than launching it from inside ME1Explorer? These are the types of things I don't really understand due to a non-existent coding background. To me, it's just moving of a menu link, but from what you're saying, it's more complex due to everything that launches with ME1Explorer, perhaps?

Btw, what do you think about the scaling aspect in regards to the size menu? Do we choose a static size that we like the best and end up with white space, or do we make the entire things scale? Or something in between?
User avatar
giftfish
Toolset Developer
 
Posts: 1247
Joined: 08 Jan 2016, 02:35
Has thanked: 129 time
Have thanks: 75 time

Re: New GUI MockUp

Postby SirCxyrtyx » 18 Mar 2016, 00:24

I think white space below the menu is the way to go. If we scale them up, the buttons will just get cartoonishly large.

it's more complex due to everything that launches with ME1Explorer, perhaps?

yeah, pretty much. Kfreon's code has its own PCC handlers and Property reader that works with all three games through some stacktracing magic. I could probably transition a lot of tools to using those, and create similarly game-agnostic classes for other stuff. There are some things though, where I'm not sure how it would be handled properly. Stuff like dealing with tlks, which is so different in ME1. It's possible that all these woes could be solved through judicious use of interfaces and reflection and other coding wizardry. But yeah, a bit more complicated than moving the menu link.
User avatar
SirCxyrtyx
Toolset Lead
 
Posts: 345
Joined: 16 Apr 2014, 00:20
Has thanked: 28 time
Have thanks: 288 time

Re: New GUI MockUp

Postby giftfish » 18 Mar 2016, 00:37

SirCxyrtyx wrote:I think white space below the menu is the way to go. If we scale them up, the buttons will just get cartoonishly large.

it's more complex due to everything that launches with ME1Explorer, perhaps?

yeah, pretty much. Kfreon's code has its own PCC handlers and Property reader that works with all three games through some stacktracing magic. I could probably transition a lot of tools to using those, and create similarly game-agnostic classes for other stuff. There are some things though, where I'm not sure how it would be handled properly. Stuff like dealing with tlks, which is so different in ME1. It's possible that all these woes could be solved through judicious use of interfaces and reflection and other coding wizardry. But yeah, a bit more complicated than moving the menu link.


Got it.

I can do another mock up of the main window, then, too, to reflect the white space and new icon sizes.

Let's talk more about icons. Especially with respect to all the issues we've had with DPI scaling recently, 4K monitors, etc. The ones in the mockups right now are 72x72. This isn't a standard size; I chose it b/c it worked with the specific proportions I was working with, so I'd probably downsize it to 64x64.

I'm also working under the assumption that the side menu icon sets will need to be icons like the others I've made, so that Windows can choose different sizes when people adjust their monitor scaling/resolution. Is this correct? If that's the case, is 64x64 okay or is there a better default size to use? What's the maximum size in the set? Still 256, or can we go up to 512 now, with 4K monitors?

Also, FYI, I incorporated these icons into the mock-up pretty quick and dirty-like. I'll make sure final copies have smooth edges, etc.
User avatar
giftfish
Toolset Developer
 
Posts: 1247
Joined: 08 Jan 2016, 02:35
Has thanked: 129 time
Have thanks: 75 time

Re: New GUI MockUp

Postby CreeperLava » 18 Mar 2016, 08:11

giftfish wrote:@Creeper --
1. This is AFTER the stable, like I mentioned to Sir in the News thread.

2. This is when we ditch WinForms altogether and move to another system. It would likely be something SirCxyrtyx and Heff would tackle; they've both expressed interest in overhauling the toolset GUI. The overhaul would be needed for all tools, but K's tools would remain in their own "GUI-world", controlled by him until if/when he wants to make changes. Generally, K doesn't edit the rest of the toolset tools; Sir and Heff do now that WV is gone. This obviously isn't b/c K can't, it's b/c MM/TPF Tools/Texplorer are extremely labor-intensive tools and those are the ones he's decided to work on; he also barely has time for them as it is, lol.

My bad, forget what I said then^^. Any news about Heff by the way ? I haven't seen him in a while.

giftfish wrote:3. As far as the side-menu icon sizes, scaling itself is something that will have to be discussed and decided upon. I specifically made them that size so they would fill the size I made the toolset window. Scaling the window would obviously make them larger/smaller OR would result in "white space" underneath. If we go with the whitespace concept and don't implement scaling, then the icons can be made whatever size we want. Regardless of which way we go, we'll also need to account for monitor scaling and the UHD monitors that are now available.

If we go for whitespace, and just slim the sidebar to say 32px, you could add more buttons to the bar. Like, have a button for each sub-category of dev tools (general, dialogue, meshes, textures...). And have a bar to separate user tools from dev tools.
Like that :
[User Tools] -> Submenu to Image Engine, Texplorer, TPF/DDS, etc
----- //A visible bar to separate the user stuff from the dev stuff
[Dev Tools] //Here you have more buttons, since there are way more tools in that section, and separating them by category avoids to clutter a menu with dozens of entries. Just like you made categories in your screenshot
[General]
[Coalesced]
[Meshes]
...
----
[Misc Buttons]

What could be interesting too, would be to have a menu instead of a wikia button, with direct links to the articles. And have that menu be organized just like the screenshot you posted above, with all the tools displayed.
User avatar
CreeperLava
User
 
Posts: 844
Joined: 07 Feb 2015, 21:52
Has thanked: 119 time
Have thanks: 83 time

Re: New GUI MockUp

Postby KFreon » 18 Mar 2016, 22:41

I'm pretty impressed that those UI's were done up with a graphics program instead of and IDE. They looks pretty sweet.
Some thoughts/opinions:
- Kinda like the sidebar. Screens are almost always horizontal so we have more horizontal than vertical space. BUT there's just something I don't like. It might be that things are buried in menu levels, I dunno.
- LOVE the transparency thing over the top, that's awesome and practical.
- Menus in that transparancy though might be too tightly packed, hard to see the one you want. Maybe thumbnails of the tools would be nice. Maybe even the menu runs in one column with large image of the tool on the right or something.
- Search and "most used" or "Favourites" would be nice.
- The "start Page" i.e. first opening the toolset might have that most used tools thing, just a tiling of the top used tools so you don't have to menu dig.
- I'd have at least 512x512 icons, maybe even 1k icons. WPF can scale images really well, so having large images scale down for smaller monitors/DPI's is absolutely no issue.
- DEFINITELY have a statically sized menu bar. Users expect more space when expanding windows, not the same proportioned space.
- Love the version indicator and wiki links and stuff.
- Definitely have only the one laucher i.e. don't seperate out the ME1 tools from the ME2 tools, but then make real sure it's obvious which is which.


@sir: I've already merged some classes in my WPF branch if you wanted to dig around those. Be warned, they're probably incomplete and broken, but they're close.

tl;dr: Looks sweet and a bunch of good ideas. Something about sidebars/menus rubs me the wrong way though.
User avatar
KFreon
Toolset Developer
 
Posts: 1665
Joined: 16 Apr 2013, 00:57
Has thanked: 83 time
Have thanks: 520 time

Re: New GUI MockUp

Postby giftfish » 18 Mar 2016, 23:20

@K --

1. Thanks for the clarification on the icons; that's very helpful. I'll probably end up working off some free ones, but then making them from scratch. Most of the free icon sites limit the largest size to 256x256; larger rez and you have to pay. Upscaling is always problematic, of course. Shouldn't be too much of a problem if I just scale and then fine tune with the Pathing tool, though. Another good reason to keep them simple and monochromatic. I'll do 512px. I doubt we'd even need that at 4K, even with scaling.

2. I like the Favorites idea. I can definitely include that. Maybe what we'd need then is the ability to right-click a tool name and then "Add to Favorites". Then we could basically just make the tool open to Favorites, if we want. If no Favorites are set, then it just opens to the standard wallpaper background.

3. I'll be tweaking the sidebar a bunch, now that I know we want the icons smaller. I also like one of Creepers ideas about having categories expand from the main sidebar button. Either underneath it, or to the side. That would help omit some of the clutter on the transparent window and keep things cleaner and simpler. I'll be throwing in the icons, too; was trying to save time on this first run through. The next sample flyout menu I make will be more detailed, but I'll only do one; not all. I'll also use some different fonts, since I forgot about that for this version.
User avatar
giftfish
Toolset Developer
 
Posts: 1247
Joined: 08 Jan 2016, 02:35
Has thanked: 129 time
Have thanks: 75 time

Next

Return to ME3Explorer Toolset Development

Who is online

Users browsing this forum: No registered users and 1 guest

suspicion-preferred