I'm designing a web application where a user needs to add more then 15 football players in a list. For each player user needs to enter values in 8 different fields in each row. It is usually about 50% of all players with no values for any of the fields.

enter image description here

The columns (will be replaced by icons) are:

  • Number: 1-99
  • Goals: 1-20 number of goals
  • Assists: 1-20 number of goals
  • Yellow: 1-120 minute
  • Second Yellow: 1-120 minute
  • Red: 1-120 minute
  • In: 1-120 minute
  • Out: 1-120 minute

My questions are this:

What is the best way for user to enter a value in my case? Keyboard, numeric-stepper...?

How to mark for users that they need to enter a number of goals/assists and not a minute when a goal is scored what is usually users first assumption?

Some other suggestions for design?

  • Are these intended to be live during the game, like as a goal is scored increment one, or after the game, where the user would just enter the final number of goals?
    – DasBeasto
    Feb 8, 2016 at 18:11
  • It's a match summary after the game so the user needs to enter the final number of goals.
    – Del boy
    Feb 8, 2016 at 19:15
  • I am also curious why you don't record both the number of goals and the time when it is scored, as it seems to be important information, especially since you record the number and time of the yellow/red cards.
    – Michael Lai
    Feb 8, 2016 at 22:20
  • This is the step 1 (home team), after that coming step 2 (away team) and after that there is step 3 (Match info). If we suppose that one player scored 4 goals, it will be very difficult to adjust UI. If in the match were own goals it will be also difficult to add that in the step 1. Because of that I set the field "Who scored" under step 3. So when the match summary is created, in the line up you can see how many goals the player was scored and direct under the match result you can see who scored and when.
    – Del boy
    Feb 9, 2016 at 11:48

3 Answers 3


I think you should be structuring your data better for inputting. Firstly you're mixing data that doesn't change over the season (number, name) with data that changes every game.

So firstly I'd split those two creating the team first, and further for the team categories keeper, defender etc is more common than just keeper or not.

enter image description here

As a first draft of the en-masse number inputting - you can simply put labels over the top to indicate Total vs Mins and widen the mins inputs.

enter image description here

However going further, you might want to break out the input even more to have specialised inputs for them, e.g. for the Goals / Assists, you just need a simple toggle to indicate the number of goals / assists which should allow a fairly efficient input.

enter image description here

Then for Cards / Substitutions, it depends on whether you people want to input the data one player at a time or all the cards at once and then all the substitutions at once. If you want by player - then just put them all on one tab - then users can tab along the lines. If you want be card / substitution then put them in separate tabs.

  • This is a beta version which still does not includes a login function so the users will not be able to save all the players for the next match. I will definitely break out the input even more like you suggested to me on the second mock-up.
    – Del boy
    Feb 14, 2016 at 22:05

There are a lot of different considerations involved when you are talking about the 'best way' for a user to enter a value, especially when you have many fields and many line items to enter. So rather than to provide an answer, here are some factors that you should take into consideration:

  • Are you aiming for accuracy or speed because what you gain in accuracy can often result in a loss of speed. Decide what the risk and loss of either will mean for your application, and determine the best trade-off
  • Are you entering information in bulk, or is it entered in real-time because sometimes the nature of the data entry makes it difficult to improve speed or accuracy, so you can consider changes in process that will help improve interface design decisions
  • If you want to increase speed then try to create the same type of interaction often (i.e. same UI element for input), as long as the data is similar enough that you don't end up spending more time entering information when using another UI component will be faster
  • If you want to increase accuracy then try to limit the input options to those that make sense or filter them by rules or other dependent input fields so the opportunity to enter in a wrong value is reduced
  • Depending on the nature of the data, you might also consider grouping items that are closely related to make the entry more fluent, so if the raw data is recorded in chronological order, then it would be easier to record a time then label the event (e.g. 25th min, goal; 30th min, yellow card rather than goal, 25th min; yellow card 30th min)
  • If most of the players don't have any values (either because they are not in the first team or didn't get any game time), then why not use a conditional input to open up more fields instead of showing everything at once (e.g. reveal more field when first team is selected, or when there is a value in the 'In' field)
  • It might also help to be able to filter or sort the rows of data for faster entry of related rows (e.g. players that didn't play), especially if you have to save and come back to complete the entry later (e.g. entering player names first and then after the match is completed the relevant information)
  • Thanks for the factors, I will take them into consideration. I was actually considered about a conditional input to open up more fields instead of showing everything at once, something like this postimg.org/image/8cpe9hkkl . But than it will include more clicks. Goals and assists need to represent as a number (2 goals, 1 assist and a Yellow card 25 min.). It want to find some balance between accuracy and speed. Now the only thing that makes problem with accuracy is that users try to enter a number of minutes in the field for goals and assists. Maybe to group those two like you said
    – Del boy
    Feb 9, 2016 at 15:15

In order to allow data to be entered quickly, I would recommend allowing keyboard input, much like an Excel spreadsheet. Pressing enter or tab should advance to the next box to reduce the need for the user to switch between keyboard and mouse. I would however recommended including up/down buttons in the "goals" and "assists" boxes, to make it easy to change values once they have been entered.

As to the second part of your question, having a default value in the box would help, as would adding the word "count" or "number" to either the input box or the column.

  • Did you mean an up/down button with each column or just with the columns "goals" and "assists"?
    – Del boy
    Feb 9, 2016 at 11:55
  • Without knowing exactly the details of the project it's hard to say, but just goals and assists would probably make sense. Feb 10, 2016 at 21:19

Your Answer

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

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