Rework - GDevelop start page

[Bouh]

Suggestion

Improve the start page by adding stuff and rework the layout for get more content in a better design still easy to read to ensure that the user still reaches his goal quickly.

Context

The First Time User Experience, or FTUE for short is basically for GDevelop the Start Page tab.

The current start page of GDevelop 5 provides the basics over a centered block and buttons inside the footer.
The buttons from the centered block are the most used. It is in order to become familiar with the engine by reading and following some guides and written tutorials.

The next blues buttons are the primary button where the users click most of the time. These buttons have to be always visible in first, it allows to create and open a project.

The buttons from the footer are some extra links for :

• Game showcase (list of games made with GDevelop, in app)
• Community forum (external link)
• Help and Documentation (search bar in app, parse the content from the wiki)
• Networks (external link)
• Languages (change the language of GDevelop, in app)

Objectifs

• Show to the user where he can learn, create and play.
• Have a step by step interface where the users can read from top to the bottom what is possible.
• Allow the user to click on what he wants in a few clicks.

Proposals

Original proposal

Read one of the presentation made by @WishforgeGames about how rethink the FTUE.
Read the presentation online.

Second proposal

Based on the original proposal and how the other software like Adobe, Godot, and do ones, I present some new ideas.

These mockups are containt few new ideas designed with material-UI. These layouts are open to discussions and you are free to edit them with your favorite pixel editor.

What are the users supposed to be interested in?

• Create a new project
• Open a project
• Open a recent project
• Read tutorials
• Watch tutorials
• Step by step tutorials in GDevelop (interactive tutorials) (Feature not available, draft PR here)
• Open existing examples project
• See the games made with GDevelop
• Read the documentation
• Find the community over the networks

The choice of a dialog isn't relevant, imagine that stuff is in the Start Page tab.
The design isn't think for responsive, i don't know how we can redesign it for small screens.

Game Showcase and Community can be added as sub-items in the list on right under Games & Community.

This section allow to setup directly the game settings,by usiing a template for Mobile, Desktop, or setup custom settings.
I think in the blank space we can add the starter projects in a carrousel as a fourth choice after mobile, desktop and custom.

@nilaymaj @4ian

[nilaymaj]

Amazing - the vertical tabs idea is great. With this, the first screen is both simple and powerful. Some suggestions:

Welcome screen

• I don't think the "Open recent" section should be visible on all tabs. It is useful only for existing users who can access it directly from "Welcome" screen.
• We can follow Wishforge's mockup right pane here, having two big buttons for "Create" and "Open". And text below saying "New to GDevelop? Create your first game here" that sends the user to the "Learn" tab. If space permits, we can put a small "... or open a recent project" section below that.

Learn screen

• I'm not completely on board with the "Learn" tab covering everything. I think the tutorials-examples-etc dialog we have right now is more appropriate and this screen should only be a preview into all the learning content GDevelop has. Basically I want to make the "Learn" tab lighter and more direct. Something like this:
  
  The "see more" buttons open the existing tutorials-examples-etc dialog on the correct tab.

New Project
No suggestions here, I think this is spot on. This will require some new features to be added before implementing this UI redesign though.

Examples

• I think we should call this something other than "Examples" if we put it as a separate page in the start page. Someone (new users especially) may think of this as example games made with GDevelop.
• If my suggestions in "Learn screen" above are implemented, maybe this section should instead be kept in that dialog with a button in "Learn" section for opening the dialog. Not sure what the button would say: "...or see examples for specific features"?

If we remove the "Open recent project" from the left pane, we can also use the space there to show the logged in user info (and maybe links to the new Analytics and other features).

What do you think?

[Bouh]

Examples

Example

• I think we should call this something other than "Examples" if we put it as a separate page in the start page. Someone (new users especially) may think of this as example games made with GDevelop.
• If my suggestions in "Learn screen" above are implemented, maybe this section should instead be kept in that dialog with a button in "Learn" section for opening the dialog. Not sure what the button would say: "...or see examples for specific features"?

Some friends of mine thought they were games made with GDevelop.
I had to explain them that they were projects that used a particular feature. So yes this section gives a bad image. Features Example in Learn screen is absolutely the great place for it.

If we remove the "Open recent project" from the left pane, we can also use the space there to show the logged in user info (and maybe links to the new Analytics and other features).

There is no interest other than to know if we are connected to know how many of our exports we have left in the ~~day~~~ h24 past.
And even this information is not very interesting.
We haven't even started to create a game and we are already informed that we have two exports left on the Free Plan.

Besides putting this information in front of us, can misleading to believe that the software is paying because it offers a service and that there are "only" two exports left online.

As for Analytics, I agree, but I imagine that it is really a small number of users who use it.
I'm not sure if I should put a piece of information used by a minority or just put it forward to make it known.
Do you have a mockup of what it could look like?

Welcome screen

I wait for a mockup. I get the idea, just nit on one point:

And text below saying "New to GDevelop? Create your first game here" that sends the user to the "Learn" tab.

An experimented user isn't permit to Learn?
The text "New to GDevelop?" is wrong and hides possibilities to other users that are not new.
It is always in the optics of addressing a user as he is no matter if he is new, old, or fossilized.
In my opinion we have to show links what the user would need, not directly address to a category of users (new/advanced/experimented).
Something like "Learn how to use GDevelop" is i bet better, (also an interrogation mark in a button is weird no?)

Learn screen

I LOVE it.

[nilaymaj]

There is no interest other than to know if we are connected to know how many of our exports we have left in the ~~day~~~ h24 past.
And even this information is not very interesting.
We haven't even started to create a game and we are already informed that we have two exports left on the Free Plan.

Agreed, showing exports left is absolutely bad, I dont want to do that. My idea was to show only the user name and button for opening the Analytics things. But on second thought, it doesn't seem a good idea anymore. Lets leave it then.

An experimented user isn't permit to Learn?
The text "New to GDevelop?" is wrong and hides possibilities to other users that are not new.
It is always in the optics of addressing a user as he is no matter if he is new, old, or fossilized.
In my opinion we have to show links what the user would need, not directly address to a category of users (new/advanced/experimented).
Something like "Learn how to use GDevelop" is i bet better, (also an interrogation mark in a button is weird no?)

An experienced user is definitely allowed to learn, but then that user is not really someone you have to worry about. If a regular user wants to learn something, that user can click on the Learn tab.

My idea was to add a button that has the sole purpose of onboarding a new user. While a new user can see the Learn tab and go to it, a button like this will make him/her feel much more comfortable.

Note that the message does not say "New to GDevelop? Learn here". The second part of the message says "create your first game here", so that button is never really intended for a regular user anyway.

Also, I think an interrogation mark is common in these kinds of first-time buttons. I'll show you some examples tomorrow (and the mockup for Welcome tab).

I LOVE it.

Thanks a lot!

[nilaymaj]

Here's a mockup for the Welcome tab:

Regarding the "New to XYZ?" thing, now that I'm actively trying to find an example, I can't find one 😅. But a Google search did give me an example:

My idea is similar to the "Already have an account? Log in" button/link. I think such labels improve the user experience especially for new users. The rest I've already mentioned in my previous message - the button/link is only targeted towards first-time users, and regular users are mostly familiar enough to just go to the Learn tab for any resources they need.

If you're still not convinced, your design is great for me too!

[Silver-Streak]

Wow, one of the feature requests I was going to submit was "New project" had users select "Retro Style (Pixel Perfect movement, nearest neighbor scaling)" or "Modern Style (Interpolated movement, linear scaling)"

This covers all of that and more in a much better form.

[Bouh]

I see the interest of this question now. The mockup is great, let me reproduce all layouts in an app like Figma for try what looks like the navigation betweens the screens. I think I can ping wishforgeGame for keep him informed, maybe he have some others suggestions.

[nilaymaj]

I don't find it justified from a UX point of view. If it more convenient why not. ... The idea was also to reduce these window/dialog not justified IMO.

I understand your point. While I also don't like nested dialogs, I think a single dialog is sometimes useful to organize content in a better way. But in this case maybe it's okay to keep all the learning content on the start page.

Some other small things:

• I think the "Examples" tab be a sub-tab inside "Learn". And with a different name like "Feature Examples", as discussed earlier. (sorry if you are already doing this)
• What does the "Community" tab do?
• Where are you planning to show the Games Showcase? It does not fit in any of the tabs right now.

can hear that there are problems related to the code for integrate it.
How complicated is this ? (Maybe the sub-tabs is hard to add?)

The sub-tabs is probably the most difficult part here, but it's still easy to do I think, so no problem with that. Anyway, we should not try to cut relevant features just because the code is hard to integrate - it's the job of the code to achieve the goal, after all.

[Bouh]

• I completely forgot the "Feature Examples" part, you did well to remind me!

• "Game showcase" is already at the bottom left of the page by default on Master.
  I think it would be nice to have it in the start page menu but I have a problem to integrate it because I don't know where to put the list of filters.
  I put the list in a random place for the moment. Someone have an idea?
  

• "Community tab" is a section that shows the social networks, but especially the forum, and the Github, it should also be an entry point for people who would like to contribute to GDevelop. I was thinking of putting a link for this page.

I'll make the changes in the next few hours.

[Bouh]

Changes are done, let me know :)

Click me for try!

• I've added a description when you click on a tutorial.
• Added Feature examples in Learn.
• More rounded buttons
• Added Community.
• Added Game showcase, i'am not fan about the filter list, idk what do to.
• For Feature examples & Tutorials we have a cloud chips, but as the filters from Game showcase, idk...

2021-04-28.21-43-05.mp4

[Silver-Streak]

The only feedback I have is one I'm not sure on.

I kind of wonder if New Project should be above Learn in the list. However, I'm conflicted about this and keep going back and forth about it, since there's a button for it on the Welcome page anyway.

[Bouh]

I placed Learn before because new users who discover GD will read the menu from top to bottom.
It's also a very sneaky way to say go learn before creating a project :p.
No kidding, I think it's important to learn before doing something, because when you don't know how to do something, you experiment or you rage quit and say "meh it's not working..."
It's a very basic reaction, but not all people take the time to look for information about why the thing doesn't work so the Learn section from the beginning will better educate future users.
When people who already know GD will directly click to the big central button without read again the menu.