Best way to summarize information that refers to an input

Question

We are building a small tool to compare mortgage terms and their impact on the user's finances in the long term.

We used to have an article explaining several concepts in the tool but opted for a different approach to prevent the user from having to read a full article in order to use the tool. The approach is to put expandable bullet points containing summaries under the tool's inputs like so:

In most cases there will be more than 1 expandable bullet point under each input. Are there better ways to summarize information that has some relationship to the inputs on top of it?

Here's the full design for context.

Answer 1

Input forms with a lot of additional text can get very cluttered. You'd need to think of a proper way of chunking your content, to reduce complexity and avoid confusion about which info belongs to which input field. (Take a look at Gestalt principles on this topic)

That being said, have you considered splitting up the input process into several single steps, similar to a checkout process?

That could be a good opportunity to reduce complexity to the user as they can focus on one step at a time. It also provides you with enough space for additional information without the risk of cluttering your input form. A status tracker (or "progress bar") could be used to guide the user through the process.

Obviously if this approach is useful to you depends on the number of input fields. Personally, I would aim for 3-7 steps max for the user to complete the goal.

Answer 2

I think the folded information is not that bad. Maybe you could design the link less prominent. Another color, a bit indented. In the current draft the eyes get focused from the blue colored link much more, than the input field and its label.