3

I'm working on a desktop UI that has a notes section which allows the user to submit notes and edit them afterwards. When I go into edit mode, the "save" button shows up, and I worry that it competes against the submit button (we're not doing a return to submit, so we need to have the submit button).

I can't decide if I should be turning it into a modal edit, or whether it's technically ok to keep the edit mode inline like this? I'm worried that the buttons are competing. Is there anything out there that does something similar?

modal edit

2

How do you see the current approach negatively impacting the user? If you were to leave it as is, would you be concerned that someone would be confused by what the "Save" button does, because of its similarity to the "Submit" button? And if after hitting the "Edit" button they were to click the "Save" button, when they actually thought they were clicking "Submit", would it make a difference? Not being difficult, just want to make sure there is a problem that needs to be solved here.

For reference: When posting this answer I see a blue button in the bottom left that says "Post your answer". If I edit an answer, I see a blue button in the same place that says "Save Edits". It didn't matter that the buttons looked the same, were in the same location, but said something different. In both cases, it was clear what was happening and I knew what to do, and I suspect that user testing would show the same to be true in the case of your UI.

| improve this answer | |
  • Thank you! It definitely sounds like I should put it in front of people to test it out. I assume that it's obvious initially, but then thought about it again and started to wonder. – openbow May 20 at 22:20
2

Firstly with the state changing I wouldn't worry about the button being in the same place. The user is performing a different action in both instances so will likely expect there to be different consequences.

There are 3 options you could go with for this.

Option 1

Which from what I understand is fairly similar to what you have already.

Replacing the posted note state itself with an inline edit state is a fairly recognised pattern amongst large communication applications for desktop. This would be a good option to go with. I would look at what the Slack desktop client does when it comes to messaging.

This is a message that has been posted:

enter image description here

Then when someone wants to edit their message, the state of the message itself changes to this (similar to what you have above):

enter image description here

The same thing also happens on Microsoft Teams client/browser app.

Original message:

enter image description here

Editing message:

enter image description here

This is a fairly recognised pattern.

Option 2

Do what Stack exchange does when posting an answer and present the edit window above/below the original post with the editable text in and allow the user to see the post change in realtime with the edits they're making.

Option 3

Like Evernote, you tap on a note and the whole thing becomes an editable text window. Red (left) is the note you tap (or in your case select 'edit') and on the right (yellow) is the space where you edit and it autosaves negating the need for a save button.

enter image description here

Both would be reasonable ways to do this, Im aware that these are comms apps but its a good example.

Test

To validate either of these you could test it with users and ask: - Before you press edit, what would you expect to happen once you click it? - Now you have clicked it, is that what you expected? Why? - Have you seen this anywhere else before?

And see what they say. It doesn't need to be an all singing all dancing prototype just something simple.

| improve this answer | |
  • Thank you so so so much. That was super helpful! – openbow May 20 at 22:14
  • @openbow glad it was of use! – UIO May 21 at 12:33

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.