I have a web form with several buttons - for saving/restoring drafts & also a submit button. It has the capability to display alerts when drafts get saved/restored. In the screenshot, an alert is visible.

I've obscured the sensitive info - most of the fields are just for text entry. A few may become dropdown lists at some point. I'm more concerned about layout for now. The form will only be filled in on desktops but the design is responsive anyway, just in case.

I feel like it's a bit unintuitive but I'm not sure how best to lay out the form. Any advice would be appreciated and I can provide more screenshots etc if necessary.

Form as it appears by default: Form

When an alert is displayed: Alert

closed as off-topic by maxathousand, locationunknown, Andrew Martin, Ken Mohnkern, JonW Jul 19 '18 at 9:48

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Site Reviews are off-topic because questions here are expected to be relevant for a variety of people in the same situation. Reviewing a site, flow or interface only helps one person at a specific time. Instead try to ask a focused question about a particular aspect of the design that solicits solutions, not opinions." – locationunknown, Ken Mohnkern, JonW
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Welcome to UX.SE, Mr JF! Thanks for including a screenshot, but why are your field labels considered "sensitive info"? Based on the ones that I can still manage to read, they don't appear to be sensitive at all. Also, forms and layouts have a lot to do with information architecture, or the way that information is arranged and presented in a meaningful way. We have no chance of providing feedback if we have little or no idea of what it is we're looking at. Unless you can provide us with a better image, or a more focused problem, I'm afraid this might be considered too broad to be able to answer – maxathousand Jul 17 '18 at 17:42
  • @maxathousand Fair point, well made! I have uploaded a new image. :) – Syntax Error Jul 17 '18 at 21:29
  • There are so many things that could be done to 'improve' this form but you really should be testing them with your user to find which are the correct steps to take. You may find that the order of the fields needs to change, I would certainly suggest looking at some sort of hierarchy for your buttons, and you might find some changes in terminology more helpful but these are all dependant on what your users perceive. – Andrew Martin Jul 18 '18 at 8:26
  • In "Delete All Drafts", does "all drafts" refer to "multiple drafts of the current "document"" or "the [single] draft of multiple "documents""? If the latter, my first instinct is it shouldn't be on the document-specific page, but a "collection of documents" page. (And if the former, I presume the "Restore Draft" button displays a list of earlier drafts?) – TripeHound Jul 18 '18 at 16:07

There's a few things in your design that can hamper UX. The most pressing one is your form structural layout. You currently have split your form into a left and right column.

Forms should never consist of more than one column. One of the problems with form fields in multiple columns is that your users are likely to interpret the fields inconsistently. If a form has horizontally adjacent fields, the user must scan in Z patterns, slowing the speed of comprehension and muddying the clear path to completion. But if a form is in a single column, the path to completion is a straight line down the page. Source.

Form structure

A form is a conversation. This means you need to structure the form in a logical question/response manner. A way to do this is by clustering related fields. Your form seems to have a clear 'meeting details' and 'meeting results' structure. You can make it easier to scan the page if you cluster these topics accordingly.

enter image description here

Another thing: Your status message appears on the left, above the content of the left column. This implies it is connected to this content, when in reality it is a response to an action taken in the right column. Moving this to the top of the page will reinforce that the message applies to the entirety of the page, rather than only the left part.

If you want users to be able to save at any time, regardless where they're at in the form, you can opt for a sticky bar at the top featuring the controls to save, restore and delete drafts.

You can also choose to alter the appearance of the delete draft button, since that is an action that carries a bit more consequences. Now it appears the same as the rest. To avoid confusion or mistakes, you could change the look so it stands out better.

  • Thanks for this, some really useful insights! I will try a single column layout instead using the tips you have provided. It all makes sense :) – Syntax Error Jul 18 '18 at 9:41

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