In an internal retirement site, I am working on improving the flow that employees go through to change their contribution amounts.
One challenge is that users can contribute both pre-tax and after-tax--previously the relationship between the two was unclear. I need (and want) to show both the contribution percentage AND the estimated amount taken out of their paycheck. I'd like to give the user the option to edit either the percentage or the dollar amount. I'd also like to show what their current settings are, and indicate that they're editable.
This is what I have so far:
What would make the relationship between the percentage and the dollar amount more clear? And what would help reveal the existing amounts in all the categories and allow the user to edit the fields?
Update: Ok, I tried a new version with radio buttons (because I'm not a dropdown fan, especially for touch situations)
The idea here is that with the radio button it would toggle between what is editable. I want to make sure that users see the other unit results as they change the numbers so they can see the effect. However, I think I would like this better if American conventions said that percentages and dollar symbols would be on the same side. Alignment makes this challenging.