For example, let's imagine a simple exercise tracking app. There's a field where the user can input the target score (the score he wishes to obtain).

Then, after exercising, the user is presented a field asking what score was actually obtained. On the same field, I need a way to show the "target" value, as well as the input value.

For now, I've thought of showing the target value as a suffix, but I fear it isn't obvious.

Example of field with suggested value

I could also simply show the target value in the field's label: "Score (1000)"

Is there a more user-friendly approach?

  • 1
    In both the screenshot and the label example you give, you don't make it at all clear what the significance of the number "1000" is. What are you hoping to achieve by squeezing this additional information into the same field?
    – Kit Grose
    Mar 12 '21 at 2:57

I'm assuming it to be a "Mobile App" considering the example. If so, rethink the UI element itself. Maybe a "slider"?

Either way, it is good to show the "Target" and "Achieved" score separately for easy demarcation, comparison purposes and also to give the user a sense of accomplishment.


Just giving quick answers here! And you can consider leaving the interface as-is what you've designed, if it's widely applied in the application, users will figure out later.

  1. You can consider having a small help icon beside Score to let users know that 1000 is a target
  2. You can consider placing a smaller text label Target above 1000 to show that this is a target number
  3. Color coding the actual code to reflect for example red color for below target and green color for reaching the target
  • those are great ideas thanks
    – Simon Tran
    Mar 14 '21 at 5:21
  • Color coding is not accessible. Please be mindful of the portion of the population who is colorblind, or otherwise visually impaired.
    – Laurel
    Nov 26 '21 at 18:35

Having taken inputs from the user, you can take a more visual approach to show the goal vs actuals. Below is a suggestion, that is based on the Bullet Graph by Stephen Few.

As suggested, you can also add zones as I have shown, to help the user easily see where he or she resides currently and what is an ideal place to be (and the steps that need to be taken to reach there).

1000 is the target, and 670 is the actuals. It also allows to nicely capture overshoots. Hope this helps!

enter image description here

  • I fear that this would take too much space. In a single page, there might be more than 10 fields. The fields must accept input from the user and display the target value as reference.
    – Simon Tran
    Mar 14 '21 at 5:23

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.