0

This question already has an answer here:

Apologies if this comes as a naive question.

From design point of view basically a textbox control (or any control) in a grid container, does it makes sense to have a textbox in fullwidth of the screen.

For e.g. if we have a form with one textbox. On full destkop screen it would look weird to have a textbox to the full length of the screen. The same textbox would look good (or ok) on mobile devices.

Any thoughts or suggestions?

Using flex instead grid would help in this?

Thanks

marked as duplicate by locationunknown, dennislees, Shreyas Tripathy, Midas, Wanda Apr 15 at 9:40

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

2

I think the best way to answer this would be from the Aesthetic-Usability Effect perspective

https://www.nngroup.com/articles/aesthetic-usability-effect/

In the page design system that the textbox control is situated in, what would be the best alignment and positioning that it would keep/enhance the pages aesthetics.

You could also follow these guiding principles:

https://en.wikipedia.org/wiki/Principles_of_user_interface_design

http://bokardo.com/principles-of-user-interface-design/

https://www.usability.gov/what-and-why/user-interface-design.html

Hope this helps.

1

It of course depends. Personally I try to avoid full width controls on mobile. I like to leave a gutter that allows for a safe scrolling gesture space. It can be less appealing aesthetically but it keeps users feeling in control, e.g. less accidental input focus.

It also depends how much information you want from the user. Bigger inputs ask for bigger input.

There is also a general rule of line length, 2-3 alphabets per line which becomes uncomfortable to violate.

In summary I would stay true to your design outside of the form but treat each input with consideration at multiple resolutions.

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