How to Get Tips for Improving Test Page Input Fields

A designer created a test page and wanted to know how they could make the input fields look more appealing. The page is a form for the user to complete. It would have a company logo, three h2 headers and a drag and drop option for uploading files. There are three h3 headers for the categories of information that the user is to input. Those include supplier stats, company stats and customer stats.

The input fields have labels. Some of them have a drop-down option, such as selecting the year for the invoice. The designer wants to know how they can make the input fields look better. One person responded with a long list of specific tips on how to improve the layout. Their first tip was getting the typography hierarchy correct. Their second tip related to not repeating the label in the placeholder text. A third tip was about doubling the white space between the bottom of the input field and the top of the next row's header. This person also added a fourth tip about how the icon should be centered around drag and drop. Their last tip was about figuring out whether 'Parameters', 'Accounting' and 'Finance' were titles, tabs or progress indicators.

Another person wrote back and suggested adding more space above the labels. Someone else added a suggestion to just use one column. They stated that most website users are familiar with and comfortable with scrolling, and just having one column would look better.

A different person also had a long list of comments for the original poster. Their list included establishing a visual relationship between the tabs. They added a suggestion to encase a drag and drop area. Their next tip was to make a select files button. They also thought the original poster should increase the margin between the field columns. Their other suggestion included adopting a floating label design in order to get rid of redundant words, reducing the field label size, increasing the font weight on the buttons, increasing the vertical white space and centering the generate button for more visual impact. For more information click here https://imgur.com/a/feQWViH.