How to visualize results of user actions after creating a new record?

Question

I am working on the UI design of a CMS that enable users to manage websites. The interaction I am looking at now takes place when a new menu item is created.

This is what I have so far:

For an existing page, auto-complete table search will be implemented. For a new blank page creation, a pop-up is used. Until here no problems were found (see Image 1 (before page creation). In user tests, this part of the interaction went smoothly.

Problems occurred after a new blank page was created (Img 2, A). During the tests some users were confused and felt they had completed the main task, but they still needed to finish the creation of the menu item.

I am looking for a solution to visualize the effects after creating a new page. The consequence is not only the page creation but also the automatic selection of this page in the left search bar.

I thought of hiding the page creation area after a new page is created, but this limits the option to create a second new one if a mistake was made.

Img 2 B shows a possible solution, but I am still not convinced that this is a good one.

Are there other possibilities or better alternatives?

Answer 1

I always feel like introducing a significant change in the screen after a user has completed something makes it very clear that the user has completed something. Where as, not changing anything on the screen makes it feel like whatever I was trying to accomplish has not been done, because I am still looking at generally the same thing I was looking at before. I think you should hide the page creation area, but provide an easy to see and obvious button if the user wants to create a new page, along with an option to create pages in bulk so that you are not wasting the user's time if that is what they want to do.

Answer 2

I think your main problem here is the choice of icon and colour.

A green message with a tick icon is generally used to signal success and completion.

I would suggest sticking to a more neutral colour, and use an icon that indicates something has been added without the additional suggestion of completion. For example, replace the tick with a plus sign (+) and make the message blue instead of green.

Answer 3

A common pattern that you can borrow from tables is to show the list of sites and put the new site created as an entry at the top of the table/list. That way the user is visually and logically connected to the action that they have completed.

Since you have a form and the user is focused on that task initially, you just need to consider where this information will be shown, and make sure that it doesn't get in the way of the most common action that the user wants to do after this.