I have a web app which currently uses the following interface.
Here's what the actions do:
Delete will delete this group and redirect the user to a list of all groups. Before deletion, a modal confirms whether he is sure he wants to delete.
Submit save the changes made to the group.
Cancel allows the user to discard the changes he has made. This is because the application allows multitasking: If the user makes a change and navigates away, the page will be added to a pane containing screens with unsaved changes.
The delete group button deletes the group and is styled as a link with an icon. I am unsure whether that is the right location for the delete group button. One alternative would be to do:
I have only ever seen forms with 2 actions, for example:
How should I deal with positioning these 3 icons, keeping in mind that
Delete this group should be distinct and isn't something we want users to accidentally click?
For the positioning of the buttons, I am following Luke Wroblewski's recommendations from eye tracking research for web forms (basically, the best positioning is to have the actions aligned left with the primary action on the left). I do believe that right aligned actions would be more suitable in modals and dialogues.
However, Facebook places the primary action on the right:
As for why having a delete action on the edit page, I feel that it is still quite useful, especially if the user determines the
group to be useless after seeing its contents. Wordpress also has something similiar on the edit page:
I appologize for not mentioning my intial rationale for placing the delete button the top right:
- If there are lots of form fields and the page scrolls, it is easy for the user to see at a glance, that the
Delete this groupbutton does exist (rather than hunting around the page for it). Does this benefit outweight placing it on the bottom along with the other actions?