What is an input map and why it is important?

What is an input map?

Essentially, an input map is a document in which the designer writes down all the details they need to deliver to the developers about the inputs in the product. For example, if you design a product that encourages people to be more active. In one of the inputs, the app asks the user for their height. The user must enter a number, so we need to prevent the users from entering letters. There is no easy way to describe this data to the developers on the Figma file (you can write it in the description of the elements, but the developers will need to click on it to see it.

Another example would be if you designed an app that helps people to send small amounts of money. Let’s say the app allows users to send up to 500 euros a day. Think about a user typing 700 euros on the number input “how much you want to send”. Now you want to show them a message below that says they can send up to 500 euros. In that case, the Input map helps you explain to the developer what is the maximum number the user can type, and what message the user will see if they type more than this number.

Why is an input map is important?

Basically, if the information is not communicated in a proper way, it can negatively affect the user experience. I will illustrate this with two examples.

1. I would like to use as an example the app I described above, which allows users to transfer small amounts of money. The app allows users to send up to 500 euros. Suppose you did not explain to the developers that, if a user types more than 500 euros, a message should appear. The message should explain that there is a limit of 500 euros per transaction. A user who wants to send 700 euros may be upset because they will not understand why the app does not allow them to type 700.
2. Another example would be products that calculate large amounts of data. In this type of product, typing an incorrect value can cause the system to crash. This is because the system is unable to compute a large amount of data since it doesn’t have the capacity to do so. As a result, the user may be upset since they will need to restart the program.

Both cases result in a negative user experience.