I'm designing a wireframe for a mobile app for logging materials. One of the features needs to be able to log the makeup of a material.

fx in the case of a technical fabric the composition can look something like:

30% WO, 30% CO, 20% AC, 10% PU, 10% WS

tallying to 100%

My main thinking sofar has been making an add button at the button at the bottom of the screen and then have the user add each individual part until the full composition is reached.

However where I'm unsure is how to make sure the full tally is 100% - not more not less, what sort of feedback? But also how I would lay this out on the phone screen if I use a list and an add button?

Does anyone know of any apps that deals with something similar or know best practise for something like this?

  • It would really help if you tried to sketch your interaction out.
    – Nash
    May 12, 2021 at 12:06

2 Answers 2


This made me think about the My Coffee app we have at the office, you can create recipes with sliders that create a total output.

wmf my coffee app

  • How do you add a new ingredient in this UI?
    – Nash
    May 12, 2021 at 13:21
  • Love this! just add a button below the last slider called "Add Material" clicking on it can either create a row or open a model where user can select from a list of predefined materials May 13, 2021 at 8:27
  • Actually realised the adding more ingredients could just be done by an add button and a popup with a dropdown or similiar - I think the question is more how would you elegantly delete items once they're added ? May 13, 2021 at 10:27

The use case reminds me of partitioning software such as gparted. You have a disk with finite space and you can partition it into different segments. You also always have a section "unallocated" which is the rest of the available space. Maybe you can borrow from that UI. gparted ui

  • That is true - thank you for highlighting this May 13, 2021 at 10:14

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.