Full width of the textbox on the screen or not [duplicate]

Question

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

Answer 1

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.

Answer 2

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.