What's the best way to tell a user that the field is a textbox?

Question

The situation:
I have to tell the user that those fields are actually a textbox and they have to enter something in that, the one before the red square (amount) is readonly and can't be changed. I need a smart way to differentiate those fields.

Also you probably can notice that this view is divided in 3 sections after the HR tag. Those are dropdowns and it's not clear that they contains something. In another view I added an icon on the left like this:


I think they needs more than an icon or it's good enough like this?

Have some suggestions?

NB: I can do whatever i want with the css and I don't have any limitations. Also the project has font-awesome and ionic icons installed. I'm using the ionic framework.

Answer 1

That is a very broad, but interesting question. To be honest, I'd simply follow an established set of design guidelines than try to re-invent the wheel. You also appear to be overthinking this a little bit. Of course text input needs to be styled accordingly (border, shadow, size, etc.) and inactive fields have to be displayed differently (e.g. grayed out). Still, I'd simply like to point you to the material design guidelines as they cover all of these basics pretty handily:

https://material.google.com/components/text-fields.html

For something that's not already been done and researched many times you can only really follow some basic principles and then follow an iterative process to continually improve whatever you're building. Shneiderman's golden rules are fine, but so are many other similar ones.

https://www.interaction-design.org/literature/article/shneiderman-s-eight-golden-rules-will-help-you-design-better-interfaces