For a Desktop application. Designing this page to add teams and assign players to the teams added. More, allow users to edit teams on the same page.

First: Add a Team. Second: add players to teams and Save all. Third: Allow Editing.

User enters the team name and team info and click Apply button. The Team name gets added to the Drop-down list (Teams), and the Players list on the left populates all players available (they were added using different option). User selects players from the left list and add them to the list on the right (Players in Teams), then Click Save button (Will save in the database).

Now, the issue is when the user comes back to Edit a certain Team. The user has to start by going to the middle of the page (Awkward), to the "Teams" drop-down list and select a team, the Team Name and Team Info text fields (on top of the page) will be filled out. User can change them, and can add or remove players from the list and click Save button again to save changes.


  • I am trying to keep both functionalities in one page. Creating two separate pages (or tabs), one to Add new team, second to edit will fix it.

  • Moving the Drop down list to the top of the page before the text fields (New Team and Team Info) is one way to somehow make it work better. Still not ideal unless someone can provide a way to make it flow naturally.

Any ideas on how to fix this design? make it flow naturally?

Any idea is very appreciated. Thank you!

enter image description here

  • what does the teams drop down do? edit: I've worked on this interaction so often it hurts. First thoughts are the Apply button is redundant. You just need the save button .....and what IS the team drop down for?? – colmcq Nov 1 '17 at 17:08
  • The team drop down saves the Team name after the user clicks Apply. And when the user wants to Edit they go to the drop down list and choose the team they want to edit. – Mo'ath Nov 1 '17 at 17:26
  • Its a really muddled interaction. You want something like a page containing a table of teams and a modal to edit the team and players in it. And in this interaction there is no way to correct errors either. – colmcq Nov 2 '17 at 9:13
  • It is a muddled interaction. one idea i got while discussing with one of the developers is to add a list on the left of the page and remove the drop down list, so if user comes to edit, they can select the team from the list, and if they want to create a new team they will have to overlook the list on the left and go straight to the text fields and start filling out for a new team. That's the best I could have so far, and it is somehow maybe what the first answer here was trying to refer to (I see it is deleted now). – Mo'ath Nov 2 '17 at 16:15

enter image description here

Left hand nav is a navigation menu and on the right is a page for team management that contains a table of available teams. You can create new teams or edit or delete them.

When you edit or create a team a modal appears that lets you control certain attributes of the team such as name, info and who plays for the team.

I've used this pattern in some large government projects and it is less muddled than your interaction

Hope this helps

  • 1
    Thank you. I believe this design is much better than the current awkward design. It does fix the problem. – Mo'ath Nov 2 '17 at 23:14
  • standard pattern used so many goddam times in our projects!! – colmcq Nov 3 '17 at 9:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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