1

I'm working on a project that is a web application -- it has a lot of data that the users navigate through, most of which can be edited by the users. The data is presented on multiple pages, organized appropriately. A lot of the data is just for reference, but fairly frequently the data needs editing by the users and I'm trying to determine the best UI/UX approach.

My question is about when/how to present the form to edit the data. Here are the two options I can think of right now:

  • Present all data in forms at all times, with "Save" and "Cancel" buttons. When the user is viewing the data, the data is always presented in a form, even if they are not editing the data.

  • Present all data as normal text (not in a form). If the user needs to edit the data, they click an "Edit" button which presents a form to make changes to the data, then the user clicks the "Save" or "Cancel" button which updates the data (or cancels the changes) and the user is presented with the data again as normal text.

The second option would be more aesthetically pleasing, but would require quite a bit more coding, whereas the first option would be a bit less pretty to look at (or at least have more constraints on design options) but would be less code.

Are there any "best practices" way to do this or is it entirely personal preference?

Improve this question

2 Answers 2

Reset to default
1

It should be clear to users what data is editable, and what is not. In Bootstrap, there are static controls that solve this problem. Without knowing more about how much data you have, how users navigate between pages/forms, etc., it seems like this would be a good solution for you.

enter image description here

There could be a disabled Save button below the form on each page, and if a user changes any data, you can enable it. If they try to navigate away from a modified form, you can give them a warning that they have unsaved changes, and give them the option to stay on the page or discard the changes and move on (a standard pattern).

This is the dialog box that happens when attempting to leave a stack exchange post that you haven't saved:

enter image description here

Improve this answer
1
  • This is largely the approach I'm looking to take. Simply have forms everywhere instead of toggling between the form for editing, and just the data for viewing the data. Seems more straight forward to have forms for all data that can be edited.
    – Garfonzo
    Aug 12, 2017 at 15:47
0

It totally depends on your users and how often they need to edit something.

If your users edit data often they should be able to do this with the least possible effort (Option 1).

I would go with inline editing, which only appears when the user hovers over certain data, check this example: http://www.jqueryscript.net/demo/jQuery-Plugin-For-Editable-Field-On-Hover-Over-liveeditor/

Even tho its really basic and not nice to look at i think you get the idea. Of course users should always have to save each change, in the example data gets saved by hitting enter.

More code should not belittle the user experience.

Improve this answer

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.