16

This is always tricky, but I think you could implement a list view as in StackExchange User Reputation League. Even if an item isn't added by a user per see, it could be used in your case as well. Add the newly added item to the top of the list keeping the sorting/filtering options intact. But make clear that this is not a part of the filter/sort by changing ...


11

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 on the edit icon itself: I would recommend not using inline editing, since column widths can be small and not easy to edit. Use a pop-up/-over or modal or ...


8

Inline not Modal Inline edit is to be preferred at all times. The user keeps context, have the ability to use information related and narrow to the edit and the user don’t have to focus on a new UI. It is the same, simple, easy and straightforward process where the flow of work can be kept. Modal dialogue breaks the users’ context and it takes time for the ...


6

These comments about modal dialogs "interrupting workflow" are silly and naive. If you build your parent screen and modal dialogs as symbiotic parts of the overall task process, there is no interruption. All complex operations have to be broken down into steps or "consumable chunks of task" no matter how you build the design for simplicity. Modals work ...


6

An alternative could be inline editing on hover. Showing just the editable fields.


5

Think of the question another way. If you were editing an text document, and you were on the 3rd page, when you decided to delete a word. Would you want the program to take you back to the first page, or let you continue from where you are? The answer is clearly that you would want to continue from where you are, and the same thing applies to list - which ...


5

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 when. In a drop-down list, that would translate into something like one of these:


4

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 working on single user apps such as Excel. The fact that it shifts the context out from the table is a way for the user to start thinking in edit mode and ...


4

Double clicking to edit something that looks like an <H1> tag is a really unconventional behaviour to use in a browser environment, and to my experience double clicks as a whole are very rarely seen. I could imagine a scenario where a user hysterically double clicks a range of labels just to be annoyed that they don't understand which ones are editable ...


4

I'd go for: Option 3: Use a vertical ellipses to the right of the Call button that opens a flyout menu with two options: Edit and Delete. Mainly because this option is the one least likely to result in accidental deletes or unintentional entry to edit mode, but also because these are less common secondary actions but which still need to be discoverable. ...


4

I think there are a few large considerations to keep in mind here: How big is the edit area (both in width and height)? If it is to be usable, it has to be very easy for users to see where it begins and where it ends, and easy for them to avoid accidentally scrolling outside of its view (for example, if a user is editing her profile and she accidentally ...


4

This can be done a couple different ways. 1. Sample Values as placeholders If your fields you can set default values as placeholders <input type ="text" placeholder="John Doe">. This will give your users immediate context in what data you want them to fill out. The placeholder is typically a lighter color to give it a "ghost" effect of what content ...


4

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, generating an entirely new input form right next to the empty one seems to makes sense? That's because the input form is in the wrong place. The input should be ...


3

The first interaction pattern that you show is very close to the way that apple handle it in their built-in apps. The difference being that they don't have an "add new row" item. They use a clear + button in the navbar to achieve that - which is the right way to go. If you use an item at the end of the list to add new items, you are not only breaking user ...


3

For a cleaner look, avoid having a reset button. Hovering (although complicated) is visually more appealing. For a "null" vote, you can have a 'o' (preceding the stars) which can turn red when selected -- meaning the user has dropped his vote. o * * * * * (Many current systems do not have the provision to remove a vote; if a user doesn't like the product,...


3

I had experience with both approaches reaching the market. I find that having one UI component is better in most cases, especially if you look at the long term planning. If reporting features are configurable or require little coding to adapt to different data sets, incorporating them into other aspects of the product helps with user's decision making. For ...


3

The one thing to be careful about when mixing onMouseDown behaviors is that user may want to drag and select the text (to copy the text for instance). So I think a better solution for you would be to keep the box interaction as just click to edit and have a drag icon on left/right which will allow the user to drag them. You could also do so that each of ...


3

I would personally use an edit icon like the following edit http://catalogus-professorum.org/extensions/themes/silverblue/images/icon-edit-grey.png This is your text By using an icon the users will know that there is an action associated with those contents, without having to interact with the mouse cursor. This solution works also on touch devices ...


3

JSON really just structures data in containers - {} or []. So the question really is what ways can you find of showing structures in a containers. I can't think of any more global container than a simple rectangle, and by using colours and some basic design elements, you can easily show a visual representation of the data. Here's a rough idea of what I ...


3

Disrupt the flow as little as possible I agree with you that inline editing is the way to go since it provides context to what the user is currently looking at. I don't like the idea of automatically changing modes when selecting a row since just this can disrupt the user's flow and is more prone to accidental edits. I would combine your first and last ...


3

There's 2 factors to think about when deciding which type of editing format to use: Speed of Update and Complexity/Dependency within the data. Speedy entry of simple independent data: use Inline Edit If speed of updating individual pieces of information is important, then inline editing hands down beats editing sections. User can click into the section and ...


3

The user may be completely missing the checkbox and text, since it fades into the footer of your modal. There is nothing calling attention to it. I would try two distinct buttons for saving: "Save and Add Another" and "Save and Close" (or just "Save").


3

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' (global). This seems potentially confusing. If you changed the CTA to something like the following, the user would be made aware that this change is local, not ...


3

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 the below suggested flow: 1) Initially, the user is visually shown which are the editable vs non editable categories. As seen, Reqs are shown to be editable, ...


3

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.


3

While tables in Material Design usually do not have any kind of outlines, in your case a good idea would be to use editable text field UIs in the places where you wish to indicate that fields are possible to modify. Below are two images, the first one showing a field without text inside (and with a placeholder), and the second one with text entered. To make ...


2

I provided this same response in another similar thread, but it is relevant here as well. I think there are three big rules that must be taken in to account when identifying the best view/edit paradigm: I want the information to be easy to read (Summary/Print view without edit clutter) I want to prevent unwanted mistakes on important data I want to ...


2

I recommend 2 things: Keep the edit and delete buttons aligned - this will minimize mouse travel, saving the user time and effort. Keep them in the same location, don't just add them to the end of the longest string. This will help maintain the users spatial memory so they'll always come to expect them in same location and not have to think about which is ...


2

Is there any benefit in adding the items inline? It seems a new dialog for adding items can serve multiple benefits: Solves the issue of how to handle pagination Allows you to perform business logic/validation on new entries Potentially the problem of bulk adding also easier to handle (for example, allow users to duplicate an added item to allow for minimal ...


2

You would use the popover for smaller, more transient tasks. If there are multiple views that the user can find under this view, you would use a modal view. For example, if the user is simply viewing the details (with the option to edit) of an entry in your table, then you would want to use a popover. This is what you mentioned in your question, so in ...


Only top voted, non community-wiki answers of a minimum length are eligible