Inline edit icon vs Go to edit page edit icon



  • 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!



  • 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





Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2