UI Improvement Ideas

[Hyperion2400]

I have a couple of ideas how to condense the UI so that it fits on one page and how to reduce clutter.

I know that nobody asked, so feel free to ignore. 😂

Ideas ordered from small to big change:

• Remove the "Choose" button next to the template select field because it serves no purpose. The select field itself is clickable.
• Remove the "CORE" option under platforms since it's always included and it's not actually a target platform.
• Move the Android SDK field to the platform dialog to condense the main panel. It makes sense contextually as well.
• Merge selected third party extensions with official extensions and rearrange remaining elements as shown in mockup. The distinction between official and third-party extension is still made in the extension dialog. Alternatively you can add another list box for selected third-party extensions and move the list to another dialog

When in doubt I would use the Spring Initializr as a reference since it has very similar requirements: https://start.spring.io/

Main Panel Mockup

Extension Dialog Mockup

[tommyettinger]

These seem like good ideas. I would be reliant on @raeleus to actually pull them off, probably; I'm not that good with scene2d.ui in general. I'm not unhappy with how things are right now, though.

[raeleus]

The choose button is necessary for clarity. Some people need text clues and especially so with my simplified UI.

Removing Core hides information from users and is carried over from setup gui's from the past. If you look at the lwjgl customizer, it also has mandatory options visible in the setup.

If I recall, the android sdk was moved to where it is so it doesn't interrupt the flow of the wizard setup.

The third party options are separated for the flow of the app and to keep with the tradition of the previous gui's. Your mockup wouldn't work well at the smaller windows sizes I designed this to support. It would also require significant restructuring of the app and a testing period.

Thanks for the suggestions. I'm not willing to implement them. It will be a lot of work and I don't believe it will help with clarity. It will also invalidate the existing tutorials which still work well for new users despite many new versions of liftoff since its inception.

[Hyperion2400]

Thanks for taking the time to evaluate my suggestions. I can see there is not much wiggle room, but I'm going to reply to your points just for the sake of the discussion.

First of all I would gladly contribute PRs for approved changes. The changes could be done in small incremental steps which can stand on their own instead of one big overhaul.

Flow: As someone with fresh eyes I don't find the current UI provides much clarity or flow. You can still have flow with enough familiarity, but it's hard to beat the clarity and flow of a one-page setup tool, especially since the current multi-page layout groups some things that don't belong together and separates others that do.

Third-party extensions: From a technical aspect official and third-party extensions are both extensions/dependencies, so I find it reduces flow to separate them to a point where you have official extensions grouped with unrelated things like platforms and templates instead of third-party extensions.
Tradition alone is not a good reason to keep things the way they are and the old setup tool was a one-pager anyway.
The point about existing tutorials is valid. Although most tutorials I've seen entirely skip third-party extensions making it hard to justify an non-optional page for them.

Size: The mockup I posted is not larger in height than the current UI. It's only larger in width but still below 1024px without the decorative margin. It's only one suggestion anyway. There are options to reduce the size.

Choose button: Clicking on a select element to change its value is a very common UI convention that any PC user is familiar with. Going against the convention reduces clarity. It's also the only element and the least deserving one to receive such a hint. The unconventional list boxes have none, neither does the rather mysterious icon button that deletes the project folder contents.

[Frosty-J]

The current version has a one-page mode but for some reason only when the window is maximised. Even at very large sizes, it won't switch if restored. It's not as clean as your mock-up anyway (in part due to how much space is given to third-party extensions, as you brought up).

I agree regarding the "choose" button. To me, the template selection's arrow indicates it is a dropdown menu. But upon clicking it, a modal opens? If it were actually a dropdown, I would read the button as a confirmation button.

The project path is also funny - it's a rectangle like a text field but clicking it opens a file dialogue instead of allowing text entry. If the user shouldn't be able to type/paste a path, I would say Google Drive is an example of an application which makes this clearer. Both in terms of the icon, and the label for selecting a path. The folder icon in Liftoff is similar to the one Windows uses when creating a new folder, except we're not creating a new folder - I don't know of a standardised icon to use for this purpose but I guess an open folder like IntelliJ IDEA uses () would be an improvement.

So maybe you can address that as well. I wouldn't mind if the delete button were to go in the process - it's a liability.