Let's re-design 001's GUI!

General discussion relating to everything except 001.
Forum rules
Please do not post questions concerning the 001 software in this forum.
User avatar
Lee
001 Support
 
Joined: Thu Sep 21, 2006 1:59 pm
Location: United Kingdom

Let's re-design 001's GUI!

Postby Lee » Wed Aug 27, 2014 2:53 pm

This is something I've been meaning to do for a while and I've finally set aside the time to do it!

001 is a great engine with a lot of potential and unfortunately it doesn't get the recognition it deserves. It's biggest competitor (Construct2) is an industry standard and one of its most appealing features is its very simplistic and intuitive GUI - something that 001 just can't compete with...yet.

001's GUI is by far the weakest part of 001. Don't get me wrong, Mike is an excellent programmer but he's not much of a GUI designer :P. I thought it might be a good idea to address this as a community - with all of us chipping in to help flush out a brand new 001 GUI that's appealing for both newcomers and veterans alike! I've put together a very rough concept of how this new GUI could work...You may notice that this GUI concept looks very similar to how Construct2 is set up (and you'd be right) but incidentally this is also how a lot of modern applications are set up as well. This is merely a starting point. I'm hoping that users will join the discussion and propose suggestions on how to improve the 001 GUI - either by expanding upon what I've already knocked up or something entirely different.

I also realise that some of these ideas also contribute as feature requests so forgive me for that - I just couldn't resist :P

gui2014a.png

Project Panel - displays all files in a 001 project. This is a fairly standard practice in most applications and there's a reason for that. It allows you to access everything from one central location rather than having to go into separate dialogs that you currently have to with 001.

- 'Manage Resources' is not listed here. Instead a small button next to the '[Project Name]' is included.

Tabbed Maps/Interfaces - wouldn't it be nice to have more than 1 Map/Interface open at any given time? Well, that's where this comes in! Each Map/Interface opens in its own tab allowing a user to quickly switch between them for faster editing.

Objects Panel - this is only really a small tweak to what 001 already does. When you select something like the 'Actor' tool, the list on the left will update to show you all of the Actors on that Map. The Objects panel shows you every object, all of the time. The Objects panel contains all of things you would expect with a few changes:

- 'Comments' are not listed here (but can still be created by clicking the orange comment button on the 'Objects' bar.
- Doors have been merged with Actors.
- Blocking has been merged with Zones.
- 'Templates' are Actor Templates (though ideally templates should be expanded upon to allow Fields as well).

Another idea for this set up is to allow users to drag and drop objects onto their respective Maps/Interfaces. If you look at the example here you can see the cursor selecting 'Character 1' - this character is then dragged onto the Map to create a new instance of that Actor. 'Routes' are then displayed underneath a selected Actor to bring up the usual Routes panel (that replaces the Project panel. Alternatively the Routes panel could just show up automatically - as it stands at the moment, the Routes panel and Actors list panel share the same space in 001).

Layers Panel - a nice little addition that allows for better management of layers in both Maps and Interfaces. Naturally this would tie in with parallaxing as well. The user should be able to create, move and delete layers which would make it far more enjoyable than the way it currently works.

gui2014b.png

Collapse/Re-open Panels - users should be able to resize a panels width as well as also collapse/re-open them (useful for users with lower resolutions, so they can maximise their available environment space).

Variables/Switches Moved - the scripting window just shows the movement of the Variables/Switches dialog which may be better suited here, given the fact that they're used for scripting.

gui2014c.png

Properties Panel - again, a fairly common practice in modern applications. Rather than relying on bloated dialogs, 001 could instead make use of a Properties panel (that replaces the Project panel) when editing various objects, like Actors. In addition, a small description box at the bottom (that Construct2 and applications like Visual Studio have) that explains what each property does would be extremely useful for newcomers!

Incidentally, the following dialogs have moved into the Actor's Properties panel (all of these can still be accessed through the Main Menu as usual):

- Statistics
- Areas of Equipment
- Team Alliances

These can still be left as dialogs (or potentially merged with the Actor properties). Ideally they should be left as dialogs and are just made accessible through the Actor properties panel (so the properties panel doesn't become too bloated with options).

Other dialogs have been moved into the Project's own properties (all of these can still be accessed through the Main Menu as usual):

- Game Settings
- Legacy Settings
- Startup Menu Settings
- Visual Settings
- Player & Party
- System Triggers
- Controls
- Input Triggers

gui2014d.png

Draw Panel - exactly the same as it is currently, only now it's moved over to the right and can be toggled on/off by a button on the 'Objects' bar (which becomes the 'Draw' bar respectively). All of the drawing tools are displayed in a toolbar down the left hand side and all of the tile-sets are then displayed on the right.
Lee - 001 Community Manager

User avatar
Dunce
001 Forum Master
 
Joined: Sun Apr 08, 2007 3:33 am
Location: Arkansas, USA

Re: Let's re-design 001's GUI!

Postby Dunce » Wed Aug 27, 2014 5:34 pm

This seems like it would only saturate the screen and confuse new people with where to start. The industry standard design just seems so unappealing and space wasting to me.

How would mapping tools be changed? If there's no longer any buttons, would you just expand a section in the list box to select that tool? That brings on problems of long lists where you have to search for the list's parent. Even the project section would suffer from that. You'd be constantly expanding and collapsing lists and it would be more frustrating and time consuming.


Tabbed maps/interfaces is something Mike has talked about doing. Which would be cool.
Image

User avatar
Lee
001 Support
 
Joined: Thu Sep 21, 2006 1:59 pm
Location: United Kingdom

Re: Let's re-design 001's GUI!

Postby Lee » Wed Aug 27, 2014 6:52 pm

Dunce wrote:This seems like it would only saturate the screen and confuse new people with where to start. The industry standard design just seems so unappealing and space wasting to me.


That's part of the reason that makes it great. Since it's an industry standard, it's familiar. I'm more biased about this though, since I prefer panels over dialogs :P.

Dunce wrote:How would mapping tools be changed? If there's no longer any buttons, would you just expand a section in the list box to select that tool?


The idea behind this is that it essentially removes the need for separate tools, as each Object can be edited in the same Properties panel. So you'd just select an Object on your Map/Interface (regardless of if its an Actor, Light, etc.) and then be able to edit it without having to make sure you've selected the right tool first. In terms of creation, new instances of Objects can just be dragged/dropped onto the Map/Interface - though a single button could also be introduced to do this also, where you get a selection of the type of Object you want to create.

Dunce wrote:That brings on problems of long lists where you have to search for the list's parent. Even the project section would suffer from that. You'd be constantly expanding and collapsing lists and it would be more frustrating and time consuming.


...But that's how 001 currently works. Folder management is exactly this - treeviews and collapsing folders. The only difference is that instead of having them all in different dialogs, they're all in the same place - so you can edit different types of files without having to keep opening/closing different dialogs. It would also assist larger projects (if a search function were to exist) as Unity uses a similar set up. It'd be nice to be able to search through everything in one go, rather than having to search through each dialog one at a time.
Lee - 001 Community Manager

User avatar
Dunce
001 Forum Master
 
Joined: Sun Apr 08, 2007 3:33 am
Location: Arkansas, USA

Re: Let's re-design 001's GUI!

Postby Dunce » Wed Aug 27, 2014 7:15 pm

Lee wrote:
Dunce wrote:That brings on problems of long lists where you have to search for the list's parent. Even the project section would suffer from that. You'd be constantly expanding and collapsing lists and it would be more frustrating and time consuming.


...But that's how 001 currently works. Folder management is exactly this - treeviews and collapsing folders. The only difference is that instead of having them all in different dialogs, they're all in the same place - so you can edit different types of files without having to keep opening/closing different dialogs. It would also assist larger projects (if a search function were to exist) as Unity uses a similar set up. It'd be nice to be able to search through everything in one go, rather than having to search through each dialog one at a time.

Though it's quite a lot easier to press a button in an anchored toolbar to switch between lists, than to expand/collapse parents. It's doesn't feel user friendly.

The main problem I have with it is just how 001 works. There's a lot of options pertaining to certain types of objects and most can't currently be generalized to a properties sidebar. Even if most options could be generalized, would sticking all those options onto a sidebar have any more usability? I get that it makes things readily available, but currently we know that most of the options(because Actor Templates have some tabs and pop ups) are fully shown on their main pop ups, but the sidebar would most likely cut off options on most screens and have people scroll down to see more.

Also take the Sprites window as an example. How would that fit into the side bar?


Now thinking about it at different angle, if you're suggesting a UI where the many pop ups are in a tabbed format, that would be nice. I think 001 current's UI plus having the resource buttons open or switch to their respective tabs would be wonderful.
Image

User avatar
Lee
001 Support
 
Joined: Thu Sep 21, 2006 1:59 pm
Location: United Kingdom

Re: Let's re-design 001's GUI!

Postby Lee » Wed Aug 27, 2014 8:06 pm

Dunce wrote:Now thinking about it at different angle, if you're suggesting a UI where the many pop ups are in a tabbed format, that would be nice. I think 001 current's UI plus having the resource buttons open or switch to their respective tabs would be wonderful.


That's a neat idea. I think part of 001's GUI problems is that every dialog is completely different. Having a more uninformed dialog with tabs would look a lot better and it wouldn't be as much of a radical change as panels would be. I'll have a tinker around with this and see what I come up with.
Lee - 001 Community Manager

User avatar
Danny
001 Forum Master
 
Joined: Tue Jul 12, 2011 7:14 am

Re: Let's re-design 001's GUI!

Postby Danny » Wed Aug 27, 2014 8:06 pm

For some reason i like the panel on the left with the maps, interfaces, sprites etc where a menu pops down, seems a little easier to understand where everything is.

User avatar
Dunce
001 Forum Master
 
Joined: Sun Apr 08, 2007 3:33 am
Location: Arkansas, USA

Re: Let's re-design 001's GUI!

Postby Dunce » Wed Aug 27, 2014 9:18 pm

Danny wrote:For some reason i like the panel on the left with the maps, interfaces, sprites etc where a menu pops down, seems a little easier to understand where everything is.
001 used to be that way, though.
Image

User avatar
Danny
001 Forum Master
 
Joined: Tue Jul 12, 2011 7:14 am

Re: Let's re-design 001's GUI!

Postby Danny » Wed Aug 27, 2014 10:53 pm

Well that way seems easier to understand and as everything neatly in one place, why was it changed?

User avatar
Lee
001 Support
 
Joined: Thu Sep 21, 2006 1:59 pm
Location: United Kingdom

Re: Let's re-design 001's GUI!

Postby Lee » Thu Aug 28, 2014 8:25 am

So I've had a little play around and this is what I came up with. Rather than try and cram everything into a single dialog I've instead opted for a group method where similar dialogs are bunched together into a single, uniformed dialog with tabs running along the top. So this is an idea of what the 'Resource' dialog might look like. For the sake of this example, Doors have been merged with Sprites.

resource_dialog.jpg

Each resource icon on the main tool bar would then open this dialog and select the appropriate tab. So in the example here, the user would click on the 'Tile-Sets' icon and it would open the tile-sets tab. With the added space of this uniformed dialog it would allow for certain things to become visible that are otherwise tucked away inside yet another dialog (in this case the Tile-Set Extractor). Alternatively, without it, it would look like this:

resource_dialog2.jpg

This change would ultimately reduce the 20 or so individual dialogs into about 3 or 4 uniformed ones that all share a similar appearance.
Lee - 001 Community Manager

User avatar
Dunce
001 Forum Master
 
Joined: Sun Apr 08, 2007 3:33 am
Location: Arkansas, USA

Re: Let's re-design 001's GUI!

Postby Dunce » Thu Aug 28, 2014 9:17 am

Now that is something that could work. I can get behind this, because I know the pain of having to close one resource window to open another.

Danny wrote:Well that way seems easier to understand and as everything neatly in one place, why was it changed?

Because it was tedious and options were hidden most times. If you had a ton of maps, you'd have to collapse the maps folder just to see the other options a little quicker. The UI now lets you see every available resource editor clearly on the main screen.
Image

User avatar
nemonix
001 Supporter
 
Joined: Tue Dec 16, 2014 5:34 pm
Location: Hamburg/Germany

Re: Let's re-design 001's GUI!

Postby nemonix » Thu Dec 18, 2014 2:51 am

(no feature requests - just brainstorming)

I agree with the panelconcept
Get all files that belong to the project in one place
Is a good step I think.
There are nice demonstration projects
and i I thought about looks easy
but it takes time for me to get where is every single script
and figuring out how all is connected
maybe im just to new in gamedevelopment

I thought about tutorials even would be more easy to write for me
if new users can access all active objects/events in on place/list

I just love writing tutorial thats why
I thought about there can be also a option to hide some things based on userlevel

- Tabbed Maps/Interfaces
I thought about would be nice to open the scripts and variable windows in tabs

- Objects Panel
I can work with the object-icons on top
but I would prefer it in a tools-panel
rearangeble panels and
layerpanels would be nice too

The first day I test 001
my firefox got 10 open tabs to the subscription page
(can it be one?)

First time i read the word parental
i thought its educational software only
Last edited by nemonix on Sun Dec 21, 2014 8:30 pm, edited 2 times in total.
i guess its a typo will fix it asap

User avatar
2cool4me4
001 Subscriber
 
Joined: Sun Jan 24, 2010 2:08 pm

Re: Let's re-design 001's GUI!

Postby 2cool4me4 » Sun Dec 21, 2014 12:03 pm

maybe there can be a option to hide some things based on userlevel


There are options in the script editor to not show more advanced scripting options. So someone can ease into scripting using the more basic nodes.

But I would prefer it in a tools-panel


I'm unsure about this. More often than not on low-resolution screens, having many panels gets in the way. Especially if it isn't resizable a la paint.net.

Better as a plugin if there is a plugin-API


A plugin API has come up for discussion before, but has been dismissed for the time being.

Not every disabled button should open the browser
Here I can see sense for a dialog hehe
The first day I test 001
my firefox got 10 open tabs to the subscription page


This has also come up for discussion. Mike states that it's the way he gets most of his subscribers, though.

same for the parental functions
to read the word parents in a software
let people may think its educational software
like scratch


Maybe a separate download with the parental controls option? I know, yet another thing to compile.
Once you have mastered the :usevalue:, you are a truly awesome 001er.

User avatar
nemonix
001 Supporter
 
Joined: Tue Dec 16, 2014 5:34 pm
Location: Hamburg/Germany

Re: Let's re-design 001's GUI!

Postby nemonix » Sun Dec 21, 2014 1:08 pm

2cool4me4 wrote:There are options in the script editor to not show more advanced scripting options.
So someone can ease into scripting using the more basic nodes.

bring this concept to the setting screens sounds nice
Example: 3 layers
1.Beginner - show just simple functions - To understand the maingui
2.Basic - show most common stuff and settings - hide thinks that complex - Most People will use this
3.Advanced - show the beast

But I would prefer it in a tools-panel

2cool4me4 wrote:I'm unsure about this. More often than not on low-resolution screens,
having many panels gets in the way.
Especially if it isn't resizable a la paint.net.

Making Panels dockable and rezisable will sove this
(user can arrange the panels and save the layout - there can be a netbooklayout)

Better as a plugin if there is a plugin-API

2cool4me4 wrote:A plugin API has come up for discussion before,
but has been dismissed for the time being.

ok

my firefox got 10 open tabs to the subscription page

2cool4me4 wrote:This has also come up for discussion. Mike states that it's the way he gets most of his subscribers, though.

thats a reason
Why not add a trial for the subscriber version
(When the trail expire the disabled function get greyed out)

same for the parental functions
To read the word parents in a software
Let people may think its educational software
Like scratch

2cool4me4 wrote:Maybe a separate download with the parental controls option?
I know, yet another thing to compile.

And maybe a Schoolversion
(with teacherfunctions where he can send messages to the clients and see debugger-output)
Last edited by nemonix on Sun Dec 21, 2014 8:43 pm, edited 1 time in total.
i guess its a typo will fix it asap

User avatar
2cool4me4
001 Subscriber
 
Joined: Sun Jan 24, 2010 2:08 pm

Re: Let's re-design 001's GUI!

Postby 2cool4me4 » Sun Dec 21, 2014 1:21 pm

2. Schoolversion


001 already has an educational version.

Unfortunately, I don't have any good response for your other points. They're all good ideas, but that's a lot of programming work.
Once you have mastered the :usevalue:, you are a truly awesome 001er.

User avatar
Scaveleon
001 Translator
 
Joined: Thu Aug 09, 2007 4:15 pm
Location: Scandinavia

Re: Let's re-design 001's GUI!

Postby Scaveleon » Sun Dec 21, 2014 5:29 pm

2cool4me4 wrote:Unfortunately, I don't have any good response for your other points. They're all good ideas, but that's a lot of programming work.

My response would be that I don't think it's worth it, considering the size of our already overloaded development team. :roll: I have difficulty envisioning how much easier we can make the usage of the program - in the end, it's down to preference and the fact people learn how to use programs differently.

The interfaces gets redesigned when the newest features demands it. A natural evolution, of sorts.
MIV wrote:It's definitely not The Epic Game of Loladin as the screenshot said.
Nor is it The Epic Game of Loladin Happy Face.

SoundCloud
Project blog

User avatar
Tabula Rasa
001 Forum Master
 
Joined: Sun Jul 20, 2008 11:36 pm
Location: A place between mind and matter.

Re: Let's re-design 001's GUI!

Postby Tabula Rasa » Tue Feb 03, 2015 7:53 pm

I think the GUI is fine, but then again, I've been using the software for about 8 years, so maybe I've gotten used to it.
Image


Return to General Discussion

Who is online

Users browsing this forum: No registered users