Mobile App: Create Room (Studies) Merged Soren+Sam Idea

[samgawaran]

Goals

Main

• Users can easily invite friends
• Users can easily start games

Sub

• Allow users to easily customize game
• Allow users to kick and accept a certain types of players (low/high karma..)
• Make users aware of different modes to convert them to paying users

Needs

Both on Room Lobby/Settings

• a button to start the game
• a button/link to invite friends Settings
• from https://github.com/colonistio/design/issues/275, use sliders
  • Expansions
  • Maps
  • Private Game, Hide Bank Cards, Friendly Robber
  • Dice
  • Game Speed, Bot Speed
  • Max players, VP to Win, Card Discard Limit Lobby
  • Own, Guest states
  • Avatar
  • Username
  • Karma
  • Color

    Principles

    Consistency Efficiency Visibility of system status User Control and Freedom

Research

Research is done here: https://github.com/colonistio/design/issues/274

Solutions

• All of the solutions uses 360x640 aspect ratio
• All of them use the sliders based from Soren's idea but adjusted to better fit the existing sliders we have in the website
• On all solutions, the host is automatically "ready" since they will also start the game. They can't start the game as long as another player is not ready yet.

Solution 1A: 2-Step Create Room

Prototype Link: https://www.figma.com/proto/4sPdkWQrqoiGgFkMLtVSqr/Colonist-UI%2FUX-App?page-id=442%3A62785&node-id=818%3A107513&viewport=-6808%2C-5364%2C0.25&scaling=min-zoom&starting-point-node-id=818%3A107513

Followed Principles: User Control and Freedom, Visibility of System Status Ignored Principles: Consistency (Website)

• Host needs to create the room first before it comes out to the Lobby/or available for an invite link. This way players have more time to adjust their game setting without constantly being asked to Get Ready
• Player list - adjusted this one from the original my previous iteration, only reason why I did the long playerlist is to consider long player names like WWWWWWWWWWW, but how many players have names like that? it doesn't make sense to sacrifice the UI for a small minority of players. and with these design, we can fit 2 players in a single row
  • Removed Ready, Not Ready, I think our X and Check icon is enough of an indicator
  • For players who are Ready, there player box will be highlighted by a white outline
• No need to create Guest state for the Settings since we have the simplified view here

Solution 1B: - 2-Step Create Room

Followed Principles: User Control and Freedom, Visibility of System Status Ignored Principles: Consistency (Website)

• Similar to 1A, but I removed the flow where the host would be directed to the 1st screen.
• Retained the player list I did for the previous iteration so you can check out the difference, though I prefer the one in 1A

Solution 2: - Slide Up/Down Playerlist Slider

Followed Principles: User Control and Freedom, Visibility of System Status, Efficiency Ignored Principles: Consistency (Website)

• polished version of my original proposed solution in the prev. iteration and merged it with how Soren created the room settings.
• Mobile native behavior of sliding to expand a form.
• Removes the additional step from 1A/1B

Conclusion

Proposed Solution: Solution 2: - Slide Up/Down Slider

Benefits:

• Mobile native interaction
• Lesser clicks to start a game
• Satisfy our main goals (can invite friends, can easily start games) first, invite link has its own space at the top, Start/Ready CTA has its own space at the bottom
• meet our sub goals (customize games, see player karma etc.) and beautify our existing create room screen

Potential Risks:

• much more complex than our current flow = could have longer dev time

Considered

• [x] This proposal fits company vision
• [x] This proposal is impactful according to Prioritizer Sheet
• [x] This submission abides by Des-lvl-1, Des-lvl-2 & Des-lvl-3

Reviewers

@demiculus @JuanRoman77 @woodifred @5econds

[soeanski]

Overall I like solution 1A the most. I think you used the available space much better than previous iterations did while keeping things relatively clear and ensuring usability of most elements. Some things have to be adjusted.

Here are some of my thoughts:

Overall

• The invite a friends element could be to be more visible
• How do you remove players from a lobby as host?
• Visual hierarchy is not the best in the game creation context. I think a "Create Game" headline of some sort or another way to show hierarchy would make things look better and easier to scan.
• In the idea with the bottom drawer: putting it above the "Start Game" Button could make players insecure about using it because they could run the risk of accidentally starting the game.
• Also I thing showing Guest players the different sliders as means to give them information about the lobby state is not the ideal way to convey this information about the lobby. A player should not have to scroll to see all lobby settings, that is too much effort.
• I don't think we need these 3 buttons inside/next to the chat bar
• In all 3 cases the color dropdown with the buildings next to it looks a bit cluttered, maybe you could find another arrangement of the player displays that makes things a bit better looking / easier to digest

Some smaller UI element issues: Game Creation Context

• The outline of the slider needs to have a different corner radius (1 less).
• "Preview" is not a CTA yet "Get Expansions" is. I think they should not have the same style if they can't be grouped together.
• The "Game Mode" dropdown looks out of place visually (no rounded corners, different colors).
• If you keep the font size inside the dropdown 14px the additional "(owned)" which is currently appended to game modes that you bought, will not fit.
• There should be a drop shadow in place for the element that the "Create Room" Button sits on so it is easier to see that it cover scrollable content.
• The numbers at the end of the slider should be left aligned. I know it looks better next to the scroll bar, but the "8" from the "Max Players" slider looks out of place compared to the other and it's not quite as well readable
• The scrollbar ends randomly above the "Card Discard Limit" slider or am I missing something?

Room/Lobby Context

• Elements inside the room need some corner radius, looks a bit strict/harsh, not enough like a game
• The dropshadow on the copy invite link button is too big imo
• Scrollable content should be indicated as such by showing just the edge of the next element (player display) that is not visible anymore.
• In my opinion we should use different font weights or sizes in the chat window to differentiate between player and chat message
• The active state of the segmented button (Settings/Players) could be more obvious
• The distance between this segmented button and the player list / options should not be 33% (4px) of the the distance between player list / options and chat (12px) but most likely half of it (8px)
• Font size in chat could be smaller
• In solution 3 where you have the drawer that comes up all elements should visibly sit on this drawer. Right now it has the same color as the cards have and between the cards there is lighter background color which is not the drawer color. It is not clear where the drawer starts / ends

[samgawaran]

Forgot to write my answers on the feedback from before and in here: https://github.com/colonistio/design/issues/274#issuecomment-1399423599

Remove the trash and volume icon in the chatbar

I can't, it's the option that we allow on the desktop. unless we remove those then this one should also have that ability also.

Ignoring Add Bot for Host

same as above, host have that option so it should also be shown in the mockup here

besides that, I'd adjusted all of the solutions above based on that prior feedback

======== https://github.com/colonistio/design/issues/280#issuecomment-1401549936

How do you remove players from a lobby as host?

same implementation in desktop, after we decided on a solution, I'll do the iOS sizes and these scenarios

Feedbacks why Solution 1A is better

Good idea, in a sense, I would say solution 1A is more UX-friendly compared to Solution 2, but I think this solution, makes it easier for players to start the game due to lesser clicks, I'm okay with all of the solutions though so let me know what route we're going for @demiculus

Game Creation Context

• the word Preview is in the current implementation for Maps
• Scrollbar ending randomly I get what you mean but I find it hard to focus on the scrollbar for the mockup so I just used what the existing is on the desktop. and if you check the prototype than you'll find that its actually scrollable.
• Slider text should be left aligned I disagree, I think its more important that there's no empty space on that side as to have balance.

Room/Lobby Context

• Elements inside the room need some corner radius, looks a bit strict/harsh, not enough like a game is this for the player list? it has a 4px corner radius, I think going for a bit more will make it off-brand on the desktop version.

• We should use ifferent font weights or sizes in the chat window to differentiate between player and chat message - I agree, maybe making it all player details on bold will make it look better.

• active state of the segmented button (Settings/Players) could be more obvious - thats the current implementation on Desktop, we shouldn't stray too far away from it. We can however propose a change on how it will look in the future

on all other comments, I agree