My team are working on a 'predict the scores of the games' promotion for our business.

We are debating how you enter the scores themselves, we have 2 solutions:

A. A button either side of the number to increase/decrease the number for the score. B. A standard text entry field to enter the number.

Which is the best route?

  • Another possibility would be a strip across the width of the screen with the scores on: _0__1__2__3__4__5__6__7__8__9__... (probably with the ability to scroll in or switch to larger numbers on from the right). – TripeHound Apr 24 '18 at 14:31

Assuming you're talking about Association Football (or "soccer"), the average number of goals per match is 2.6. This relatively small number would be a good opportunity to use steppers.

Your users could use something like the following (which I've recommended in another answer as well):

numeric stepper

This allows your users to increment/decrement the scores to select their desired values, but also allows them to explicitly type it if they prefer.


download bmml source – Wireframes created with Balsamiq Mockups

  • Do you think this could cause a cluttered UI, in particular for mobile? – UIO Apr 24 '18 at 14:32
  • Personally, I think I'd prefer it. That way, if I'm trying to add scores for several teams at once, I wouldn't have to bother with the keyboard potentially appearing and disappearing several times as I enter my score predictions. Again, I think the main thing working in your favor here is that the average number of goals per match is only 2.6, so really that's the average number of taps a user would have to do per score prediction. I'd say that's an acceptable number, but user testing would be enlightening here. – maxathousand Apr 24 '18 at 14:36
  • Added a mobile wireframe. – maxathousand Apr 24 '18 at 14:44
  • Ah yes I see your point. I think what you've proposed is spot on, the combination of the suggestions we have. Thank you for your answer :) – UIO Apr 24 '18 at 14:46
  • No problem! Obviously, make sure the buttons are large enough to tap easily... I realize the wireframe makes them look too small. – maxathousand Apr 24 '18 at 14:49

Surely it'd be easier to have text input fields that automatically jump to the next input once a score has been entered?

See http://jsfiddle.net/4rj6rv5p/3/ (assuming no-one's going to enter a score bigger than 9)

Using the venerable Keystroke Level Model that's only N Keypress operations (where N is the number of scores) as opposed to having to press the up/down spinners S times (where S = the total of all scores), plus the N mouse/finger navigations to each control

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.