Idea: Cleaner startpage

[tooomm]

When a new user (or even a veteran) join the page and want to play some games, the UI is very comprehensive currently.
There is a lot of text and many things want your attention. It takes a while to get used to it and get comfortable.

I took a look at how the overwhelming initial impression can get streamlined to focus on the most important basics and be more supportive without changing too much and interrupting the known experience and build on what users know already.
Came up with a mock-up after this steps:

• Find a more suitable location for specific explanations that are only relevant in certain situations (optimize for the vast majority)

  • Move collection information next to their context/settings
    Also, in my experience within various communities, users mostly don't upload collections
    

  • Basic setup information for new users to get them started are ideally not be needed if the UI is intuitive, something tricky to archive. On the other hand, there should be some help for new users somewhere!
    However, the fundamental steps on how to use the page are very prominent (yet barely read imo) currently.
    I opted to move them to their own modal and gave them the most prominent location in the help section. The link could even be stressed more with an icon or other text formatting.
    
    (only a pic of an interim step to understand the process better)

• Restructure elements a bit to stress important information more (e.g. news to the left to recognize updates immediatly, supportive panel and tools always at the same right location with a different background, relocate public games, everything a bit more centered with more clearance)
  

The head and tag line could be adjusted as well to better match the new layout.
This is only a quick draft to show a potential route of course.

• A Discord and GitHub icon (font awesome) with links to the community/repo in the footer would be nice, too
  
  The news section could probably be thinned out a bit as well.

I'm more than happy to receive feedback and other suggestions!

---

Comparison

Old:

New (Mockup):

[Senryoku]

Implemented some of the proposed changes here #248 ; Will experiment more later.

[tooomm]

To document state and progress of #248 (Merged):

First iteration:

• Move Basic Setup and Collection Import widgets to own modals
• Updates in Help widget
• Reorder widgets layout
• Updates in Footer

Modals

---

Update:

• More widgets layout updates
• Updates in Footer
• Updates in Modals

Modals

---

Update2:

• Updates in Help and Tools widget
• Updates in Footer

Modals unchanged.

---

Final state:

• Update buttons in settings at top

Modals unchanged.

[tooomm]

Step 1 is finished. :)
Looking forward to the initial feedback people might drop about it. I think it's a very solid start.

As we realized in the PR when discussing ideas and other solutions, the crowded settings panel on top are a concern and lead to problems for further improvements.

What do you think about this?
The setting for the draft timer is rarely adjusted and a kinda specific setting - it should be where the other advanced and detailed settings are... in the Additional Session Settings modal (Draft Specific Settings category). The settings then still have the most basic and important settings to start a game quickly.
Then there is only the Bot option left which we can easily find a nice alternative place for:

• currently:
  
• mockup:
  
  Instead the [ + ] button (probably a [ - ] one would be needed as well), there are other options like using the user-plus (and -minus) icon.
  
  Another option I like is, using the user-astronaut or robot icon and keep the same input box for numbers and increment/decrement option as currently:
  

The input fields for User Name and Session ID (especially the last one) could probably be smaller without causing issues as well.
The Session ID one can display crazy 24/25 digits at once before starting to cut off for me.

[tooomm]

Another simple improvement:

The enable/disable notifications check box could be an icon toggle and save space - like the enable/disable sound one:

The bell icon is widely used for notifications in apps and on webpages: bell and bell-slash

[Senryoku]

Yes, that's better f8c4d9d