3

Video Showcase: https://youtu.be/-oltrd0NZXo

Legend:

Hi, I am looking for tips or examples on how to create a menu for a local-multiplayer game.

The game is accessible by joysticks and keyboard, but I am mainly focused on joystick access.

In the menu players can choose their colour.

After they choose their colour the game can be started.

What we've done so far is:

  • Screen in the beginning: enter image description here
  • First player joined with LS2, they can select colour with LS1. Second player joined with RS2 on same joystick! Two players can play using same joystick. They selected "R" with RS1. Players can change their selection with Stick Y: enter image description here
  • If many players join at same time - they can find themselves by watching tilt. Theirs slot tilt when they are moving Stick Y/X: enter image description here

Current solution with tilt works fine with up to 6 people, but there can be 16 slots.

We have tested menu with 15 friends. It is too much chaos and you can not find your slot fast enough by using tilt.

Do you have any suggestions on how to design this menu better? Maybe you know of a game that solved a similar problem? Remember that two players can play the game with one joystick.

I have included information about "key-map" (what keys do what) because I think it might be important.

3
  • Can you provide us with additional defiinitions? See take.ms/erFd6
    – JakubTutaj
    May 14, 2017 at 7:59
  • 1
    Also, by local-multiplayer do you mean that 16 players will look at the single screen in one room at the same time?
    – JakubTutaj
    May 14, 2017 at 8:02
  • @JakubTutaj This one element (I call it "slot") is for one player. Right now there is 8 slots visible but there will be possibility play this game by 16 people. I thought that additional slots become visible after 8 slots will be used. Color and letter is player identity, gray color/letter is inactive or disabled element. I have added video, maybe it will help youtu.be/-oltrd0NZXo May 14, 2017 at 9:26

4 Answers 4

3
+100

Only show the current controllers being selected.

Given the large amount of options (up to 16 players on up to 16 different controllers), it is best to only show the active controllers.

There are a few things I'd like to focus on.

  • Give context; tell the user what to do and how many slots have been taken.
  • Move completed elements out of the way to make room for active slots.
  • Have a clear call-to-action to speed up slot selection.
  • Faster slot selection limits the chance of having too many active slots at the same time and shortens the time with a lot of active slots if it so happens.

See the image below.

The image below is the entry point of your controller selection screen. There are no active controllers, so there is not a list of 16 slots. The only visible elements are:

  • Call-to-action to join the game.
  • Total amount of active players (0/16 in this example).

This greatly simplifies the controller selection screen.

enter image description here

Now, what happens when someone presses a button to join? The flow below shows the three steps of joining the game. At first the player only sees the call-to-action (see image above and flow below). After joining, the user sees the same selection of colours as in your video.

When the user is finished selecting a color, the player box is made smaller and moved to the top of the screen to make room for other players.

enter image description here

The image below shows the above mentioned flow and screen in a larger flow of three screens.

  1. No active players. There are currently no players selecting a controller and color. This is shown by the '0/16 spots taken' label and in the absence of slots on screen.
  2. A player has joined. There's one player selecting his controller and colour. This is shown by the '1/16 spots taken' label and in the one active slot. The active slot also displays the paired controller. This works well with consoles (XOne/PS4) because the controllers have hardware that show the controller number.
  3. A player is finished selecting his controller and colour. This is shown by the '1/16 spots taken' label and with the smaller 'finished' slot in the top of the screen.

enter image description here

The final images below show a more busy screen of multiple players selecting controllers and colours at the same time.

enter image description here

1

There are 8 slots in the video, and assuming every two slots is occupied by a single controller, i.e two players in a controller. We have 4 controllers and 8 players.

And as you said, if there were to be 16 slots , we will have 8 controllers and 16 players !

Now i am not sure about the nature of the game, but we can safely assume the left and right sections of the controller are going to used by two different players (or two different characters controlled by a single player? ).

First off, it will be better if you split the menu in sections. i.e Divide the menu into pairs, in such a way it is intuitive for the user .

For example , if User A with Controller A presses L2 he joins the first section's first slot.

Now if User B with Controller B presses L2 , skip a slot in section A and go to the second section's first slot . i.e slot 3.

In this way , it can be shown that each controller can accommodate 2 players at a given time. Show a info on the First section's second slot , say "Press R2 for Player 2" , so that the User A can know he can bring in another player.

And also as you had said, the tilt can be a problem if many people are there in the party. This can be partially solved by color coding them into distinct sections or naming the controllers in each section (but i guess XBOX controllers dont have controller identification like Dualshock does) and also by providing rumble feedback. This will enable the users to guess which section they have joined.

Also , in the video the space occupied by the joystick layout can be used for other sections for the players, maybe flyout the layout when someone presses and hold a button .

mockup

download bmml source – Wireframes created with Balsamiq Mockups

i hope this helps :)

3
  • 1
    Two players on same joystick are independent. Theoretically there could be 16 players with 16 joysticks or 16 players on 15 joysticks (1 joystick with two players). Grouping slots by controllers will not work in this case, but "annotating" slots with controller name could help! If one of player know his slot (with controller name) he can tell person (person whom he shares joystick) to search for same "annotation". Due to technical reasons rumble feedback in most cases will not work on PC (it will work on xbox, PS3/4). May 15, 2017 at 12:16
  • What do you mean by "flyout the layout"? There have to be instruction somewhere about how to join, how to change colour and how to select colour. May 15, 2017 at 12:19
  • True, but for a lobby UI , wont a small legend in the bottom of the screen help instead of a full fledged controller layout?
    – semuzaboi
    May 16, 2017 at 6:36
1

I think the problem lies with 'where user start on the slot selection screen'.

Taking into account the worst-case scenario where 16 players are using 16 or 8 joystick and enter screen at same time. All the 16 player start on the slot selection screen not knowing where then stand. There is no sense of navigation to slot when any user presses keys on controller or keyboard. And hence the so called CHAOS in understanding which slot is with which controller.

Breaking the solution to your problem in 3 steps:

  1. Visual cue for Entry point on screen
  2. Navigation to slots
  3. Selection/locking slot

These 3 steps can be easily explained by seeing how other successful local-multiplayer games solve this problem. For example FIFA 13

Step 1: Visual cue for Entry point on screen

enter image description here See how controllers are displayed in the middle of the slots. This gives indication to players where the starting line is.

Step 2: Movement to slots

(In above image) In addition to the starting position, the direction in which player has to move is also displayed.

Step 3: Selection/locking slot enter image description here I believe you have covered this pretty well in your current experience. The tilting of slots is a good way to go. In addition to tilting the slots, user would also know which slot is selected or locked when he/she selects a letter on the slot.

So by adding a starting line and navigation to slot you can solve your problem

p.s: I think in above scenario key-map is very much needed

0

"We have tested menu with 15 friends. It is too much chaos and you can not find your slot fast enough by using tilt."

so here is a tip:

  • tilt is slow (human can do 2Hz max), dont use the tilt to do actions that are frequent.
  • clicking is fast (6Hz max), use the click to do actions that are frequent

that will ease usability...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.