0

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:

New menu item creation options

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?

2

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.

| improve this answer | |
  • Your answer describes my problem, and does not give a concrete solution. My question is about how to visualize what you described. – Carina Jul 31 '14 at 7:16
  • However, I value your point about hiding somehow the page creation area and keep it accessible. I will try to visualize that. – Carina Jul 31 '14 at 7:38
1

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.

| improve this answer | |
  • Good points. I will try to visualize them. – Carina Jul 31 '14 at 7:39
0

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.

| improve this answer | |
  • That's the idea already in my images above. The new created page is automatically set as the existing page to link (I skipped the table on purpose, the table is only shown when searching the pages). – Carina Jul 31 '14 at 7:36

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.