I'm trying to decide on a button location for an app I'm building. The app basically generates teams using lists of players for a given position.

It feels most natural to me to have the button to generate the teams below the lists, but the lists grow, so the button ends up getting moved around a lot, which doesn't feel good.

Would it be better to put that button next to (or under) "Enrolled players"? Or somewhere else entirely?

Current layout


The question is actually simpler: Does the player list require interaction from the user (i.e selecting players) or are the big lists just for display purposes?

Button placement depends on the users flow. In the case of a typical form for example, the flow is this: input required data > button indicates the action to take when complete

Does the user have any interaction with the big lists? or is that just displaying all available players?

If the lists require interaction:

The button needs to be presented after the input (selecting players etc), and so below the lists is fine. To avoid it getting lost, perhaps consider fixed positioning (i.e always at the bottom of the screen, but they can scroll up and down the lists)?

If the list DON'T require interaction:

Placing the button above the table is perfectly fine, and it will be down to the final design to solve the grouping (i.e making sure the user instinctively understand that the button is a function he can perform on that 'data').


Logically it is a good idea to put the button below the form because that is how people fill out the info - from top to bottom. Then using the button to conclude the task by saving.

Does ADD a player SAVE the player? Labeling and form elements need to be very clear about what they do.

Are you Adding a player or Enrolling them? I recommend sticking to one metaphor. Think about "New Player" VS. "Enrolled Player". Seems like you want to Enroll a New Player and then Save that player's information. Then the new player becomes an enrolled player.

Try putting a link/button by the Enrolled Players heading labeled to the effect of "Enroll a New Player" or simply "+" (highly visible). Then at the bottom of the form have your Save button that kicks off a form validation routine (don't forget about validation).

This is just one solution, best to check with your users to see if they get it.

  • I'm wondering more about the placement of the "Generate teams" button – user1059895 Nov 6 '14 at 23:32
  • I see. You can put the button above the table as well. But be careful about labeling, it still seems vague as to what the user is supposed to do. Definitely want to talk to some users. – Ken Nov 7 '14 at 1:22

Why not both?

Consider these two scenarios:

  1. User has decided to add a few new players. They then want to generate a new team with those players in the roster. They don't care so much about the existing teams, because they were generated before the new changes.
  2. User is looking for a specific team. They want to know if it exists. They go through the list, looking for it. If they find it, flow over. If they get to the bottom and haven't found it, they want to generate a new one.

In the first case, a button at the top will save the user from having to scroll down a huge list to get to his goal.

In the second case, a button at the bottom will save the user from having to scroll up that huge list.


You would have to make sure it's absolutely clear that these are two instances of the same button. Same appearance and same x-coordinates are a must, in my opinion. Other measures might have to be taken. This will need to be tested.

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.