I'm looking at giving an existing application some additional functionality and some light-touch UX improvements. We're not changing too many things are we don't want to alienate our existing user-base.

One thing that bugs me is the cancel button is in the direct flow of the form, whereas the create button is off to the right, underneath the map.

You can interact with the map, so it is a valid part of the form.

The questions is, does this read right or are we asking for trouble leaving the cancel button in the flow of the form? Should it be further over to the left? Should it be simply text with hyperlink underline? Or is it fine?


Toolbox Example 3

  • 3
    At first sight I would assume that the button below the for area is to submit and the other button was something to do with just the map functionality (some Gestalt grouping and alignment issues perhaps). Could you place both buttons on the blue area? - that way the relationship between the two buttons and the form becomes much more obvious. – Andrew Martin Jul 25 '17 at 13:00
  • Can we have create my plan besides cancel? – NB4 Jul 25 '17 at 13:01
  • Thanks Andrew, I think that's where I was leaning, want to put it into an answer? – DarrylGodden Jul 25 '17 at 13:08
  • Looks like NGAFD did it for me. – Andrew Martin Jul 25 '17 at 13:29

You're right. It looks a bit off. When I first looked at it I thought the cancel button was the create button. You don't want users to click cancel and lose everything when they expect submit to be there.

Try one of these examples;

  • Place the cancel and create buttons together in the form (left image)
  • Add the map to the form (right image)

enter image description here

  • 1
    In addition to this if the user accidentally clicks on cancel you can show confirmation dialog box. – NB4 Jul 25 '17 at 13:13

@NGAFD suggestion is actually pretty good. However, knowing that your color scheme follows more of a primary color (red,green,blue) why not stick with @NGAFD's first design on the left but change the color of the button so as to not get the user confused with a similar button color (green with green). Maybe change it to a "red" color scheme.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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