Fun and Function with Form Labels

The other day I was talking with our UI designer about the layout they had given me for a modal window I was creating. We where discussing the layout of the form and the size requirements of the modal window (which was quite large).

I took the opportunity to point out that by creating a stand-alone column for field labels, we had forced the wider window. As an option I suggested that we could create a more compact layout with the labels above the fields.

This is really shifting horizontal space for vertical space. On most devices the vertical scroll is easier to use than the horizontal scroll, and therefore preferable.

Of course no one likes a modal window that is larger (in any direction) than the screen size. We moved the modal to a docked panel on the site, and the vertical scroll was much less distracting. It’s interesting how much these changes really improved the feeling of the interface without changing the functionality at all.