Feedback on GDevelop UI


#1

I think GDevelop’s UI could use a bit more polish. I’m not much of a programmer, so for now, I’m going to make some visual sketches about what GDevelop could look like. If you like one of my suggestions, please leave a comment. If you don’t like something, that’s an even better reason to leave a comment! :smiley:

The colors in these images aren’t perfectly accurate - many of my images are slightly less saturated, and haver duller colors. This is due to various color management accidents on my end.

Idea 1: A minor change to the “Create a new project” window.
People tend to read the user interface from top to bottom. When you want to create a new empty project, when you see “Empty project”, you usually click that option to select it. However, when you click on it, GDevelop instantly creates it, on the location that’s defined BELOW the project types. This means that the user might never notice the option even was there.

If the project location was displayed on the top of the window, it would be seen first, and changing it first would be intuitive.
Create-new-project.gif

Idea 2: Making it more clear which tab is active

When there are multiple tabs, they are shown as bright blue buttons. The selected button has a bright purple line below it, and that’s the only thing that marks that button / tab as selected. For clarity’s sake, the selected button could be highlighted in somewhat better. Below, you can see some simple ideas I had. My favourite idea was adding a white highlight INSIDE the button, as seen in the close-up picture.

Blue button - highlight variations - favorite variation.png

Blue button - highlight variations.png

Which variation do you think is the most clear?


#2

Idea 3: Improving various icons and buttons
There are lots of icons, and there’s lots of work to do, but here’s some stuff I’ve been thinking of:

Icons - project window.png

These are very much work in progress, but one of the things that I first noticed when I started using GDevelop was how many buttons there are that are blue squares, with white, horizontal lines in them. That’s what I started looking at, here - how to differentiate all these different icons from each other.

Some things here work very well (I like the green and red highlights on Add and Remove buttons, and a chain icon to mark External objects, scripts etc). Other ideas are don’t work - for example, the project manager icon in here doesn’t work at all. I might use the window frame around it, but the wheel / gear / whatever thing just doesn’t look like anything. The unfold and fold buttons are a decent start, but need a bit more work.

Do you like any of these icons? Are they more clear than the original icons?

icon-updates---first-sketch---gif.gif


#3

Idea 2: Making it more clear which tab is active
Suggestion nr4 is like the current implementation with a contrast more effective, for me it’s useless.
Suggestion nr4 and 5 and 6, the color is more like gd4, gd5 use a new blue.
I think the best is nr1

For the icons im not agree with you, and the only good thing is {} in icon function/extention this Bracket represent more the functions.

In fact I don’t like it, because adding a new color like green or red is very striking. And that must represent things of higher interest.
Red indicates current errors (event sheet, wrong value, etc…)
The whole interface keeps shades of blue, it’s very marked as an identity, broken it with more colors I’m not very fan.
This is my feeling after I have no power over all this ^^
i use gd since 2008, maybe before :mrgreen: , so i know the icons, my regard is biased.


#4

Idea 1: Yes please! This was quite annoying for me when I first started using GD.

Idea 2: Yes. Out of your designs, I also like the one you chose the best, but my additional suggestion would be to keep the fill colour of the active tab, and then change the others to be a more muted grey or something.

Idea 3: I also find myself getting confused about what icon does what (especially the event, sub-event, comment, etc. buttons). So while I’m all for finding better designs for them, I also agree with @Bouh about the red and green colours not really working well here. Also, can we see the changes in a non-animated, side-by-side way (waiting for the GIF to change to compare doesn’t really help)?


#5

Here is a flat comparison. I left out the icons with only small changes, or where the only change was in the colors (green / red).

icon comparison v02.png

Here are some of the things I was testing out:
Simplifying current icons: New, Copy etc. icons don’t need details. Unfold/Fold could be done with less details.
Adding new modifiers: Just like plus and minus symbols marks an icon an add / delete button, a chain icon marks it as an external / linked / referenced object.
Window frame: It might be useful to make all buttons that open new windows distinct from the buttons that do something more immediate. I’m testing the window frame concept on the Project Manager button.

Colors

I understand that adding highlight colors (like green and red) would break GDevelop’s current theme of consistently blue icons. However, that was intentional. There are only so many ways to separate icons from each other, and the three biggest ones are Shape, Size, Value (light/dark) and Color. There are also the amount of details / how busy the picture is. And lastly, there are the details themselves.

The basic shape of many buttons is a square. Both the plus and minus icons change that into a square overlapped by a circle. If the icons are in the same place (like the ribbon on the top bar), they’re the same size, too. If even the colors are the same, that means there’s very little for me to work with when I want to make them clearly different from each other. Currently, most of their differences are in the small details inside them - a few white lines this way or that way.

icon shape size value etc.png

Adding color would be the easiest way to make the icons more readable. I would try to keep as little color as possible, so that the few places where I do use colors stand out.


#6

Thanks for taking the time to look into the icons design.
I have to admit that I completely ignored the blue/green colour scheme when I designed the icons for my extensions and went with a more comic look.
But I’m also pretty bad at copying other artists styles, so I did my icons just the way they came into my mind.
If you like, you can also look into the icons from GD extensions. They are located here.


#7

Thanks for the link to the icons. There’s lots of stuff to go through, and lots of stuff to think about!

Icons aren’t the only thing I’m going to look at. I’m a bit busy for the rest of January, but once I get more free time, I think I’m going to comb through every part of GDevelop UI and see where things could be improved. For example, I just had trouble getting the Mouse Released event to work, because I didn’t realise I hadn’t set one of its properties - because I didn’t see it!

Light gray text on light gray background… Not the most user-friendly stuff. Here I’m trying some white color under it. It’s not great, but it is a bit more readable.

event editor window - contrast 01.png

Some of the GDevelop devs must have really nice monitors, because they can tell those bright colors apart much better than I can, on my monitor!

Any way, here are some other things I also tried. Darker text color, and another one with darker text, but the focus line under the parameter is blue.

event editor window - contrast 01B.png

event editor window - contrast 01C.png


#8

It’s February, and I have lots of free time now! That means I’m going to start doing some real work on this.

First off, some color analysis of the default color theme. Basically, the script editor uses colors in a different way than the Add Object Variable pop-up window and many other editor windows.

GDevelop - Script editor - Add condition.png

GDevelop - Editor - Add object variable.png

I started by looking at how GDevelop currently uses colors in its different windows and parts. I’ll look at what works, and what doesn’t. Then I made this mock-up.

GDevelop - Script editor - variation 1.png


#9

Here’s another idea I just had, about editing values of conditions or actions:

Currently, the Sigma button or the expression button just opens the expression editor. The button itself is a blue button with a Sigma symbol.
The Sigma button is the same for both numerical variables and text variables. It would be super easy to make those two buttons look different, and at the same time, the button could show that text needs quote marks around it.

And while we’re at it, why not give the variable editing button an actual icon, to replace the three dots?

In fact, just add a button for new objects. Why not? It tells what type of data has to be filled into that field, and since there’s a button, first-time users will know that you can click on it to open the object list. You wouldn’t have to click on the actual button, of course - just clicking the text field would be enough, just like now. But since new users might not know it, having a button won’t hurt.

Script editor - Sigma button variations.png Script editor - Sigma button variations 2.png


#10

This looks awesome, I really like your mockups. The higher contrast in the condition editor makes it way easier to differentiate the single parts of the form. :mrgreen:
Maybe the top most categories on the left (like “Common conditions for all objects”) could be a little darker than the sub categories. Curently the indentation is the only way to see where one category ends and the next one starts.
The more detailed buttons are also a nice addition. Personally I prefer the ones from the lower screenshot. I’m unsure about the brackets though. The icons with brackets look nicer but they might be misleading beginners to put values in brackets.


#11

I like the idea ! Icons are beautiful.
I like the idea because some users who use the action “Modify the value of a variable of an object” make a error because the field Value need expression or number, but he enter Text.
And this icons is more meaningful than just “Value”, and it’s complementary with the error feedback from the new praser.

At a glance we know what type of value is required.

I agree with you !


#12

Thanks for the feedback!

The brackets around the number and text variables can indeed be confusing. I was thinking of mathematical formulas and programming functions, but they aren’t necessary and as you mentioned, they could be confusing to new users.

I’ll start thinking about how the different types of categories (top category, sub category) could be made to look different. Speaking about categories, what do you guys think about reorganizing those categories? For example, what if all the different objects, like Sprite, Tiled Sprite and Text Object were under a single category? It could be at the top, just under the Common conditions for all objects. Maybe “Conditions unique to specific object types”?


#13

Here are some mock-ups about how the make the top-level categories look different from the sub-categories.

The last one is the one that took the most time. In that one, the top category is pretty normal, but the sub-categories each have a new icon. So for example, “Common conditions for all objects” doesn’t have an icon, but “Position”, “Angle”, “Collisions” etc have their own icons.

It would also be possible to do it the other way round - showing an icon for the top-level categories like “Common conditions for all objects”, “Text objects”, “Scenes” and so on, but not for the lower-level categories. I ended up spending quite a bit of time on this, so I didn’t end up doing that.

Why did this take so much time, then? Because I realized all the icons for all the properties need to be reworked, too! :unamused: :smiley:
Condition list - making categories and subcategories different.png


#14

Here’s more stuff for the event editing side of things.

White space or negative space is the amount of empty space around things. On a wide screen (mine is 1920x1080) the GDevelop events become very, VERY wide. The conditions can be 80 characters long, which is on the upper end of what is
comfortable to read, while the actions can be up to 160 characters wide! That’s uncomortable to read.

I added margins to the left and right sides of the code editor, I added margins to each individual condition and action block.

There are two other things I don’t like about the event sheet. First, when you first open it, it’s empty and you can’t do anything with it. Second, when you scroll down, the last actions are at the very bottom of the screen. It looks ugly, and if you could see some empty space there instead, it’d visuall tell you that you reached the end of the event sheet.
So I added some buttons that are under the events. They tell you what to do when you first open the page, and once you scroll down, they add a bit of margin and padding down there.
white-space-v2C-smaller.jpg
white-space-v2-smaller.jpg
white-space-v2B-smaller.jpg


#15

I did a mock-up of what the Add an action/condition window might look like, earlier. Here’s the same thing adapted for the Dark theme.
GDevelop - Script editor - variation 5 - Dark theme.png

Closed categories have the same color as the background. Actions and conditions visible on the categories have the same medium gray highlight color that is used to mark editable fields and areas (similar to White on the light theme). The selected action in the category list has a blue selection outline.

Changes in the UI code would most likely cause changes in both the dark theme and the light theme, so both have to be considered before anything is changed.


#16

GDevelop uses lots of different colors on its icons. Some icons are pale, some are bright. Some colors are muted and dull, others vivid and saturated. The buttons to open object and object group editors are slightly less saturated and more pale, while the other icons here are a bit more saturated and more vivid.

comparison.jpg

I’m testing those out. The problem is, they have to work against all sorts of different background colors. Here are the light blue base colors:

Icon colors v 1.png

1: Pale colors
2: Bright and saturated colors
3: The blue used in the new GDevelop logo

The dark purples are easy, in comparison. There’s only one hue of purple. Here’s a quick comparison - note that all of these purples are the same, they’re just seen in pairs, against different backgrounds.
Icon colors - purples v 1.png

All the icons currently use a darker shadow on the bottom left corner. I might leave that out for some icons, like undo and redo, that don’t have smaller shapes where just parts of the shadow are visible.

It would also be possible to change the strength of the shadow on these icons. I think the current setting is fine. Also, hue is a very minor design decision, so I think I’ll just go with pale blue number 3, the one used in the new GDevelop logo.


#17

You make a good analyses !
I’m going to need you for my future video extention, i will need your help for create some icons.
I’ll keep you informed as to which icons i needed.
In accordance with GDevelop’s colors of course :wink:


#18

Sure!

Once I’ve done some thinking and decided what sort of icons to make, I’ll most likely write up a simple style guide about it. I could also do a small tutorial about how to do the icons in a vector format, and create sample files in multiple different formats. At least Photoshop and Gimp formats, maybe Inkscape and Krita too.


#19

Here’s one version of my mock-up implemented in GDevelop. It’s mostly done with themes, with one change in the actual code. The rows in the code editor were 1 pixel too close to each other, so I pushed them a bit further apart. I’m not sure if it’s something I broke with CSS styling, or if it’s something that’s actually been broken in the main GDevelop, but has gone unnoticed.

Any way, GDevelop UI is done with CSS, and it gets super complicated very quickly! Moving the vertical scrollbar to the side of the window is surprisingly difficult. Adding some empty space at the bottom of the event sheet is surprisingly complicated. Accidentally removing the little arrows that collapse and expand nested events? It’s so easy I’m not not sure how I did it! :smiley: Still, it’s a start!
theme test.jpg


#20

Some icon stuff: mock-ups for variable icons and object / object group icons, that could be used in the event sheet descriptions.
Icon-mockups - Variables.png

Icon-mockups - Objects.png

Edit:
and variables with scope

Icon-mockups - Variables with scope 1.png