Trade menu (revamped trading)

[johnsillings]

**Note: trading will be revamped for the mobile game UX/UI, so this will be a impactful design project.

Please refer to issues logged here: https://github.com/colonistio/design/issues/1. https://github.com/colonistio/design/issues/9 Improvements to trading developed here will likely be ported back to the web-based version of Colonist.**

As a player, how to trade resources should be clear and intuitive. I should know when I'm trading with other players or trading with the bank ("maritime trade").

For maritime trade, I should know how many cards of a certain resource the bank requires in order for me to complete a trade.

For trades with other players, I should know what players have accepted that trade, and be able to finalize the trade with them.

I should know when other players are offering trades and be able to respond to them. I should also be able to counteroffer.

Note: Majority of the older players suggested using Play Catan trading system Note: Check out these bounties for ideas

• Lion: https://discord.com/channels/605233308577562643/1071578806378319964/1071749968915857408
• Yolo: https://discord.com/channels/605233308577562643/1063007082770608218/1063694886919995443
• Platypus: https://discord.com/channels/605233308577562643/1012121319820759223/1012122339904868393
• Prophet: https://discord.com/channels/605233308577562643/953489598401634425/953520347662151712
• Renovic: https://discord.com/channels/605233308577562643/953388611271794838/953511827873095701
• Thommiez: https://discord.com/channels/605233308577562643/953318508203245579/953319387543273542

Steps

• [ ] Look at other multiplayer strategy games with trading mechanics and collect examples in both video & screenshot forms
• [ ] Brainstorm and list multiple designs that meet the acceptance criteria of the task to a satisfactory level.
• [ ] For each design rate values below from 0 to 5
  • Clarity: How clear is it: https://www.liamcharlton.com/post/signs-feedback-and-the-ux
  • Ease of use: Number of needed interactions with the UI, complexity of interactions, number of hands needed to complete the actions, thumb zone etc.
  • Acceptance criteria met:
• [ ] Implement changes to update the rating values of the above designs
• [ ] Identify any new player issues that may arise from each of your rough designs and the potential for them to be mitigated.
• [ ] Decide on 1-2 designs that have the greatest potential to work by analyzing the results from previous steps.
• [ ] Share all your results from the previous steps with the team in a table containing concise information; It’s important to also show your thought process for the design decisions you have made.
• [ ] Get the greenlight from project owners to start work on a detailed Figma prototype for one of the high potential rough designs.

Acceptance criteria:

• [ ] Great care should be taken to make trading clear and intuitive. The current plan for this feature is to update the browser-based version of Colonist with this new, revamped trading design.
• [ ] Players should know when they are offering a trade to other players or trading with the bank.
• [ ] Players who initiate trades should know which other players have accepted, rejected, or not responded to the trade.
• [ ] When players' initiated trades are accepted by multiple players, they should be able to choose which player they want to trade with. They should have access to contextual information (map, scoreboard) so they can make an informed decision.
• [ ] Players who initiate trades should know how many resources the bank requires for a maritime trade.
• [ ] Players should be able to respond to trades by accepting, rejecting, or counter-offering.

[johnsillings]

cc: @samgawaran re: https://github.com/colonistio/design/issues/309

I went through the bounty-submissions from Discord that @demiculus linked, and these are the problems users are complaining about:

• I don't know about trading with the bank / it needs to be clearer that I can trade with the bank
• I want to do a "wild card" or open-ended trade, but I can't
• I don't understand what ports do / how ports work
• I don't know which ports I control

Solving for these should be top of mind with the new designs!

Some ideas:

• I don't know about trading with the bank / it needs to be clearer that I can trade with the bank
  • Bank auto-suggests trades?
  • Add bank icon somewhere in trade UI? (maybe near bank/maritime trade ratios?)
  • Separate button for bank trades?
• I want to do a "wild card" or open-ended trade, but I can't
  • Add "question mark" cards to trade menus to represent wild card?
  • Auto-populate a wild card in trade if a trade isn't completely specified?
• I don't understand what ports do / how ports work
  • Add port icons somewhere in trade UI, if the player has ports?
  • Tooltip / hover (on desktop) in trade UI?
• I don't know which ports I control
  • Add port icons somewhere in trade UI, if the player has ports?

[johnsillings]

Design studies from Monopoly

Trade explainer: https://imgur.com/9OAPm2N Choose player to trade with: https://imgur.com/LRlQTcg Choose what property to trade: https://imgur.com/URRT6G6 Trade confirmation in status bar: https://imgur.com/yg3C8wN

It seems like we've been pretty resistant to adding text for clarification (unless hidden in a tooltip), but this is an example of a fairly verbose trade menu for us to consider.

[demiculus]

It seems like we've been pretty resistant to adding text for clarification (unless hidden in a tooltip), but this is an example of a fairly verbose trade menu for us to consider.

Watch this: https://www.youtube.com/watch?v=BCPcn-Q5nKE Games should teach how to play by playing. Here is an okay example https://schoolbreak.io/ (open in incognito if you dont end up on the tutorial screen) I'm saying its an okay example because the player learns by playing the tutorial. Best games, the player does not know they are in the tutorial.