0

Let's say a gridview is being created. Each row shows a few high-level items, but there is more information in a detail view.

Which is a more appropriate pattern for a user who wishes to see all details, and optionally edit them?

Option A: View Detail action in gridview, edit mode in detail view

A table with View Details as the action on each row

A detail view with an edit button

Pros: Shows all information before engaging in an edit mode, which might be expected by the user

Cons: Always requires an extra click for users who know they want to edit

Option B: Provide direct access to editing from the grid view

A table with Edit as the action on each row

A detail view that is ready to edit each field

Pros: Saves a click, all information is still viewable

Cons: "Edit" doesn't imply there is more information in a detail view. Is it weird for a user to be able to edit information they haven't seen yet (the Other Information section)?

Option C: Show both View and Edit options on the gridview

This seems kind of redundant, because Option A would take care of both cases.

I'm leaning toward sending the users directly into Edit mode, but would that create any confusion or hindrances with a heavy detail view?

Improve this question
1
  • Option C is not redundant, it adds affordance. A user has to know what each record has to offer: More details and an option to edit. See my edited answer, as it is all about adapting to the user's needs.
    – jazZRo
    Nov 17, 2021 at 9:45

3 Answers 3

Reset to default
1

Why don't you provide both? You might want to shorten "View details" into just "view", "more" or "details":

enter image description here

"EDIT" shows the modal in edit mode, "DETAILS" shows the modal in view mode with the edit button present, just like in your examples.

Having two links and a same modal with a view and edit mode is not redundant, it adds affordance. A user has to know what each record has to offer: More details and an option to edit.

Adapt to the path the user takes

  1. Is a user curious what more information there is, then show a readable view of the information. Does that user want to edit from there, provide a button to edit.

  2. Is a user directly interested in editing the information in the table, then allow to open that view in an editable mode.

So your ideas A and B are good, you just have to combine them.

Improve this answer
1
  • I'm struggling a little with the user looking at the details and then wanting to enter an edit state from there... which is option 1.
    – Izquierdo
    Nov 16, 2021 at 16:58
0

Option 1

If the text choice in the cell implies confusion regarding the action involved, remove the text and put an icon for each action

enter image description here

Option 2

Add interactivity

  • Hovering : show the details and replace "View details" by "Edit"

  • Clicking : edit the content

enter image description here

Improve this answer
5
  • 1
    I wanted to add an example with icons too, but found the magnifier icon look too much like a search action. I like the idea in option 2! Only does it still hide the edit ability in grid view.
    – jazZRo
    Nov 16, 2021 at 16:50
  • Can be a magnifier or an eye, I just put the one it looks better 😉 About the text, maybe View/Edit.
    – Danielillo
    Nov 16, 2021 at 16:58
  • I like option 2 as well, but let's say there are 20 more pieces of information to view/edit - I think the sheet is still our best bet for that, to allow scrolling.
    – Izquierdo
    Nov 16, 2021 at 16:58
  • For 20 or more pieces to change I don't think a modal pop up is a good choice. Actually modals with a long info (or form) is the opposite of a good UX 😉
    – Danielillo
    Nov 16, 2021 at 17:01
  • It's likely a big sheet, not a small modal dialog, but I see your point.
    – Izquierdo
    Nov 16, 2021 at 23:37
0

I made some assumptions about what you described.

Assumptions n1: User#A has a basic IT education. User#B is a millennial.

Assumption n2: User doesn´t need to update this information quite often.

Answer: I will prioritize the "view details" as label for the button instead of "edit".

Maybe I am wrong; if you provide more context, it could help find a better answer :)

Assumptions n3: every user can use a keyboard and mouse as input devices.

Modal box: The update button is disabled from default because the user needs at least to edit a field successfully.

Editing feature Path#1. Click on the edit button, and the first field will be on focus. The user can confirm by clicking on the key Enter. Path#2. Double-click the mouse on the field to edit. The user can confirm by clicking on the key Enter.

I am attaching the short prototype.

Having two paths for the same feature could be confusing, but you can have a quick usability test to understand the best solution for your user. ;)

I attached a lo-fi prototype. I hope it will help you to understand my explanation.enter image description here

May my answer support you to find the solution or inspiration. Cheers.

Improve this answer
1
  • This is how I was thinking my Option A would work. Sounds like a vote for it!
    – Izquierdo
    Nov 16, 2021 at 23: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.