Mobile App: Lobby (Toggles) Studies

[samgawaran]

Summary

Besides the homepage, Lobby is our next most important screen and doesn't have a portrait version in our current app. Here are some studies on how we could incorporate it

Goal of this Submission: Translate what we currently have in the website as close to the website as much as possible. For new ideas that may be hard to implement, create a separate submission for it to discuss it further.

What we have now on Portrait:

Studies

Studies that are direct translations from Desktop

Toggle from App Homepage vs Current Desktop Toggle

• I recommend using Toggle from App Homepage
  • consistent with our homepage in the app. Using a different toggle for our Lobby may confuse players that its a different behavior, furthermore we should update the lobby toggle in the desktop to use the newer toggles

Study base from Homepage Carousel

• I'm putting this study here this since we already agreed to optimize the use of the carousel style in the homepage,

Pros:

• Game modes acts as a filter We don't have to show what Game mode it is in the rooms since its already on top.
• one size fits all rooms on the previous study, some of the map and expansion names are long so we need to increase the size of the rooms. Removing the game modes open up enough space to show it in a standard height

Cons:

• Takes too much space, further optimization is needed. Would we allow smaller icon selections? this can be discussed if we want to do this kind of selection for the lobby

Decisions to make

• What toggle would we use for Room and Spectate?
• Do we need a toggle for room and spectate?
  • current desktop behavior has a toggle for it so it makes sense include it here. But I think it can just be an icon or a filter, we can talk more about it once we do the MVP
• Should we optimize the carousel feature here and use it for the lobby?
  • also here, not entirely a carousel but we can do something that resembles our current desktop rules page selection: https://prnt.sc/ZaLGz2QWkgti and optimize it for mobile

Related Links

• https://github.com/colonistio/design/issues/226

Submission Checklist

• [x] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

Reviewers

@demiculus @JuanRoman77 @woodifred @5econds

[JuanRoman77]

1. A toggle it's a digital switch that usually means two different/opposite options for the same item/element. For example on/off, enable/disable, monthly/annual, etc.
2. A tab indicates access to a different page or area, allowing the user to navigate into new content or information. There can be unlimited tabs in a single page.

Even though both pages show a list of rooms, the action the user can take on each is different. Plus we need to think long term: we might add more tabs into the lobby in the future (Friends, Tournaments, City, etc.).

This is why I believe that the current tabs layout is a better fit for Rooms & Spectate than a toggle.

[demiculus]

Go with this Default Toggle In Desktop version.

This submission doesn't consider a lot of stuff. But no need to optimize it atm. Continue with room creation