Best design for a list with 8 fields for numeric input in a same row

Question

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.

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?

Answer 1

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.

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.

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.

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.

Answer 2

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)

Answer 3

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.