12
votes
Accepted
Editable table in material design
If you like to keep the table clean, show only the edit icon on the hovered cell:
You can specify which cells are editable by showing the icon or not.
Keep text selectable:
And add a click handler ...
- 11.8k
5
votes
Accepted
I wish to show the users that an item already edited. What visual affordance can be used for this?
Here on StackExchange the posts have these little notifications: "edited 4 hours ago" (See your original post to see it in action.) That serves double duty by telling us the item has been edited, and ...
- 9,044
5
votes
Inline editing or modal popup
If you are dealing with an enterprise app with transactional data that many people can modify at once then I would go for modal and have a submit button even if in-line seems more natural for those ...
5
votes
Editable table in material design
An alternative could be inline editing on hover. Showing just the editable fields.
- 135
4
votes
Edit a record added on the page
It looks like the issues are generated by the input form's position. I get that there are reasons you ended up with it on the left but that's the real issue.
You see how, in your last example, ...
- 5,351
3
votes
Accepted
inline editing- save/cancel button or auto save?
Having a 'Save/Cancel' button in this may give the user more confidence that the system has changed it and its saved.
Given as you say that these can be pretty significant changes, the buttons will ...
- 2,664
3
votes
Editable table in material design
The material design suggestion seems okay.
One edit icon per row which makes every field in that row editable.
You could add "Edit row" to make it more clear what will happen.
- 10.8k
3
votes
What is the best UI for overwriting previously saved values?
There have been some good answers already, though if it's important to see what fields will be updated, I've seen another pattern work well also.
Allow "object" to enter an edit mode, then ...
- 19.5k
3
votes
What is the best UI for overwriting previously saved values?
All of your options seem unnecessarily complex and widget-heavy: some of them wind up displaying the same field as many as four times on the same screen. I'm not at all sure what purpose is served ...
- 4,592
3
votes
Nested edit states. What to do when edits are save-able at local and global level?
I think modal could be an overkill, as it will take the focus away from the page - and moreover its not justified for something like an edit function in the context of the application. Take a look at ...
- 3,919
3
votes
Nested edit states. What to do when edits are save-able at local and global level?
I think you can get close with just a couple of changes from where you are now.
Have a different and informative CTA for the requirements
Currently you have 'Save' (local) and 'Save all changes' (...
- 11.6k
3
votes
Show feedback messages in an editable data grid
There are two different situations you need to handle: Successful save, and validation/error. These are quite different so you should treat each solution independently.
On successful save
Typically, ...
- 7,101
2
votes
best ux for users to input multiple strings
The best I've seen is the input you selected (type in entries with commas) which then turns into tags, a la gmail. That way every comma entered creates a tag, and in theory removing the comma brings ...
- 2,788
2
votes
Accepted
Nested edit states. What to do when edits are save-able at local and global level?
"The earlier system just had all fields editable at all time, which avoided this problem - is that still the best way to go?"
Yes.
What is the difference between the fields of a requirement to the ...
- 1,552
2
votes
What is the best UI for overwriting previously saved values?
Allow for actual in-line editing
There may be some technical constraints that are not obvious from your question, but all these options seem over-engineered.
You used the 'in-line' editing tag, but ...
- 11.6k
2
votes
Accepted
Data table: inline edit - save/cancel on other action?
Don't use a dialog unless the user is leaving the page.
I might want to scroll while making an input decision. A dialog will interrupt me if I scroll the active row out of view, blocking my view of ...
- 24.7k
2
votes
Accepted
Does it make sense to display error messages for in-place editing?
Does it make sense to display error messages for in-place editing?
Yes, it does.
How? It depends on your concept and your layout. Consider one of following:
Display an error on some fixed place on ...
- 797
2
votes
Is it a bad practice to display both editable and non-editable fields together in a CRM-style interface?
There's nothing wrong with displaying fields of mixed read-only attributes. As long as they are visually differentiated, and the reasoning is clear (as it is in this case), it is fine.
As a related ...
- 869
2
votes
Should "Enter" create a large or small line spacing on text editors?
While especially Microsoft Word is doing a lot of things wrong when it comes to online publishing, people should always keep in mind that Word is made for writing letters. Real physical outcome. ...
- 596
2
votes
Implementing an insert-update-delete grid in a web application
Changes involve frustration because users would have to repeat the learning process.
Designing a more modern solution (without so much dialogue screen)
Including interface operation via the keyboard
...
- 1,466
2
votes
Showing edit mode for messages
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 ...
- 1,126
2
votes
Showing edit mode for messages
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 ...
- 2,664
2
votes
Accepted
Workflow steps with configuration setup UI
Open a modal to paste or edit JSON would be one of the options, instead of doing it inline.
Firebase has a nice inline editing workflow – it's material, so they add a large input on top of the field, ...
- 106
1
vote
Edit a record added on the page
The "last option" is the best option in this case.
Less visual noise makes it easy for the user to focus on the edit process without getting distracted by the other elements.
Put more focus on the ...
- 10.8k
1
vote
Data tables/grids in task based UIs
An increasingly common expectation today is that every action which can be persisted, should be, as atomically as possible. Each task should be saved as soon as focus is lost, so that if the user ...
- 575
1
vote
I wish to show the users that an item already edited. What visual affordance can be used for this?
One design suggestion is to split the table into two tables - one for already-edited and one for non-edited. In this way you can give each table a title to describe its purpose.
Alternatively, keep ...
- 8,914
1
vote
Do toggle switches need edit buttons
I believe in this case switches should not be operable except in the edit state.
This is because the [Edit] button in this case regards the full form below it. So from logical point of view, it ...
- 13.9k
1
vote
Accepted
Collage Designer App - Edit a single image
The problem with the second version is that the "overall options" disappear. The user might not know that he has to unselect the image in order to make them appear again. In order to avoid this ...
- 2,996
1
vote
Nested edit states. What to do when edits are save-able at local and global level?
This is a more common problem than the number of questions that have been asked about it, so I think it is a good place to summarize a couple of key points that may help you to determine what the best ...
- 27.1k
Only top scored, non community-wiki answers of a minimum length are eligible