I'm creating a mobile web application for debates. There is a public discussion between two people displayed on a "card", with buttons to tell the other person they made a good point, and to add a new reply. There are also tools related to the user's team, 'flag for importance', private comments, and tagging (text input tags, like Stack Exchange uses). There are probably more tools to come in the future.
I want to create a strong separation between the internal tools (just your team) and the external tools (seen by the other person in the convo). Obviously you wouldn't want to accidentally send a comment meant for your team to the other person. Below are three options I've come up with:
- The first one puts the external tools outside of the conversation, but sacrifices some screen width (in my more detailed mockups it is just 50px). It would be easy to make this work on desktop, and add more tools in the future.
- The second one puts the tools on the bottom of the conversation card to save width, but is close to the reply button and it might be more difficult to add tools in the future.
- This one places a "team" button in the upper right of the card, which brings up a menu when clicked with all the team tools. Not sure how I feel about hiding these tools behind a menu, because we want to encourage people to collaborate often.
So, am I approaching this problem in the right way?