This Details section breaks fundamental design principles. A poorly designed form can have a significant impact on the overall user experience, but there are many simple solutions that I propose to drastically improve the usability.
The form spans across 4 columns, non of which are dependent on each other ie. city, state, zip. This makes it challenging for the user to process and disrupts their vertical momentum. I addressed this by making the form one column.
Error State or Required Field?
The red marker used to indicate a required field is not commonly used in data entry interfaces and therefore creates confusion because it is not what the user would expect. Also, it could easily be misinterpreted as an error. To address this I removed the red markers and simply stated which fields were optional.
This page is divided into 4 sections but it is unclear why. A lack of headers makes this design choice feel arbitrary. To address this I added headers to make the form feel less overwhelming and help the user navigate the form quicker.
Primary vs Secondary Actions
The action buttons that are bundled in a row at the bottom of this section barely differentiate between primary and secondary actions. I reorganized and restyled them to help the user immediately recognize the hierarchy of the buttons.
The new form should be easier to process. Clearly marked collapsable and expandable sections, familiar formatting, and clear hierarchy of content all contribute to the improved usability of this data entry interface.
Apply the new tile to the Expenses section
Review remaining elements of Expenses before moving on to Expense Details