3

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.
img1
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:

img2
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.

5

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.