0

I have two pages with a table list of data. In page A, each row contains a lot of extra information, so clicking the edit icon directs the user to a full page info for editing. page-edit On the other hand, page B is a simple list with only 3 columns of information and no extra detail, among those only one column is actually editable. So far I designed it so that clicking the edit icon in this page allows the user to edit the data inline, since I thought opening an entire new page to see 3 inputs with only one editable is kind of weird. inline-edit But I've thought over about this, and I'm afraid that the same icon with different behaviors might seem confusing to the users. At the same time, though, the majority of the other pages in this website all follow the behavior of page A, page B is more or less like an exception.

Question:
Is there a way to differentiate the two icons, so that users know to expect somewhat different behaviors between the two? Or do I just open page B edits in another page?

Any other suggestions are welcome, thanks in advance!

Edit
It seems like my description is still not clear enough so I added some pictures, hopefully this helps!

Improve this question
0

2 Answers 2

Reset to default
1

The action is the same, so using the same icon is the right option. What varies is the affected area, the solution is to find a good graphic solution that represents it:

enter image description here

It can help to use an effect such as a rollover when passing over the affected area:

enter image description here

Perhaps the solution is to find a type of representation for both icons on the same page, where the difference is partial editing and total editing, or if it is a table, cell editing and row editing

enter image description here

Improve this answer
0

I don't have all the context for your UI, but there's 2 patterns you can follow (in fact, it sounds like what you're doing, but there's no visuals to confirm):

For whole page, multifield edits:

In this example, you can use a persistently placed ✏️ Edit button that turns the whole page editable, with a CancelSave button pair when the user is done.

Global actions on pages are often found in the header (above the main content: a table in your case), either next to the page title, or to the upper right.

Making the primary action a prominent visual element using color, contrast, an icon with a label will signal to the user that this is a core action they can initiate.

enter image description here

For simple inline edits

In this case, since only one column is editable, use input fields, so the user can see they are in an editable state.

If you don't have auto-save, you can have the user confirm a field level change with a small confirmation.

Another option is to let the user edit the fields, and have a save / cancel button set appear above the editable column once a change has been made. That would save all changes made to that column .

enter image description here

Improve this answer
2
  • You've misunderstood. Both these pages are lists, not pages filled with detail information, sorry if my description is misleading in any way. I've updated the description
    – Vicky
    Apr 25, 2022 at 5:21
  • If you have a long list, it's normal for a global action button above the table. For local edits, you can still use an open form field to differentiate. I've updated my answer as well; thanks for clarity. Does your application allow autosaving? If so, you can treat it like a spreadsheet.
    – Mike M
    Apr 25, 2022 at 5:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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