Hot answers tagged inline-edit
11
What it is the value of WYSIWIG?
It provides immediacy and the ability to fiddle quickly. Bret Victor capures it perfectly in this video where he shows the importance of immediacy in the creative process during the coding of animations and games. Creativity benefits hugely from experimentation, playing and being in the moment. You can't achieve that by ...
8
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 ...
6
I agree with your user that your current solution is a bit confusing. I see a couple of issues here:
The button label 'Rename' is used twice, but with different meanings. The first time it is clicked, the action is 'Rename the page, i.e. enter the edit mode to change the page title'. The second time the meaning is different: 'Confirm changes and complete ...
5
I think that example is fine and will work nicely. It's a great way to provide an in-line contextual request for information from the user, without having to unnecessarily extract it as a separate chunk to deal with.
It's simple, natural and perfectly intuitive to use.
However, you don't see extended use of this very often but below is one example of a ...
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 ...
3
It's always better to keep the controls aligned. I like the way it was done at Basecamp some time ago:
The idea to move controls to the left is really nice: controls are always aligned and bound to the start of the line so mouse movements will be minimized.
3
I recommend the buttons always visible but very faint (and disabled) and come into full contrast when it's line is hovered over, otherwise it would be surprising and jarring for them to appear and disappear as the mouse moves, especially so when the user is moving the mouse to click on it.
And the buttons should definitely be aligned (faintly visible or ...
3
For a scenario like this you'd probably need to do some user testing to actually determine the preferred route. From the placement of your "Add New Player" button I would presume that the user is going to be adding editing a lot of player records at a time.
My initial thoughts from an implementation standpoint are that adding/removing or hiding/showing ...
2
Showing content on the same page is also an option. User can minimize the table. You could also display the details of the first team by default and the user can easily view the next record by clicking on the row (mouse, touch, keyboard). The benefit is that the user doesn't lose the table context and doesn't have to click back.
2
While inline is preferred, I'd add that it really depends on the type of application and user task.
In my experience, bulk edits are very important for enterprise applications and this is where it helps to get the user to multi-select items and then perform a bulk action. Inline in this case becomes very limiting because it doesn't make repeatable edits ...
2
There is a sort of hybrid answer. I came across this application and was rather impressed with it. Basically you can define the possible structure of the document with an XML file, and then the user is guided to fill it out within those constraints.
I am not sure if that is exactly what you are looking for, but it might be an avenue worth perusing to get ...
2
If you can avoid buttons, please do.
Today’s users are more familiar with editing tools than when the web was new (and hard to edit through the browser).
To let users know what to do – and how – you could add a simple highlighted text, such as editable, on the grid as you have shown on the second grid. This could be a hyperlink or have a yellow ...
2
I recommend using hover affordance. For such a large UI item, you can cause a textbox to appear behind the element when you hover over it, encouraging users to see it as an editable element.
download bmml source – Wireframes created with Balsamiq Mockups
This works well for sites that have an 'edit mode' or similar, to constrain the distracting ...
2
I would recommend going with an approach like Facebook has i.e. section level edits. If you look at Facebook's design, If I click on Edit for a specific section only that section becomes editable and a person can edit what ever fields he wants and ignore the rest.
I strongly recommend against going for a inline edit for each and every field as that would ...
2
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 ...
1
I would have to agree with keeping the buttons aligned. Another benefit that hasn't been mentioned, is if the user would like to delete several items consecutively, when they delete the first item, the item below it will take its place, and the cursor will already be over the delete button.
I have found deleting consecutive items with non-aligned buttons to ...
1
Inline editing right in the grid is normally done on the per row basis.
On hover system shows the pencil icon - to suggest that a row is editable.
On click system shows the editable feilds with buttons to save or discard.
Google ad words as example:
1
Accept/Apply/Confirm more definitively embody the implicit action to suggest completion of the single page item versus the entire page/screen of editable items.
While generic verbs or terms can certainly work, I'd shy away from those that more strongly suggest completion of a whole (i.e. Done/Save/Submit/Update), especially given the proximity to the items ...
1
Presenting an editable view seems more appropriate in the situation. User has a goal to edit an object and showing animation that might introduce a delay can go from cool to annoying, especially, if the user is editing a lot of items. Animation makes more sense if you are trying to imitate physical world e.g.dropping and item into a trashcan, adding a ...
1
The considerations I would undertake are:
a) Is the switch to a new modal view necessitated due to space constraints?
b) How much of a switch in context I want the users to experience.
Even when going to a new modal view (if desired) you could "ease" the user into it.
You might not desire to ease them into the modal view if a very drastic distinction is ...
1
WYSIWYG editors are like a double edged sword. While they might increase the user experience of content for the editor, they can just as easily lower the experience of the content for the reader/user based on content editors lack of knowledge with semantic HTML. WYSIWYG can also become extremely frustrating for those that know how to code pages with a simple ...
1
The honest answer is it depends upon your primary user base.
I worked on a project in school where I handled the migration of a school organization site from one server to another. The manager wanted to continue using the existing content management system since he and his team (who primarily provided the content) about the various organization activities ...
1
What I want to do, is present them with a form inside the CMS, with one field for each type of data. Upload images to one field, write text in a second, link to a youtube video in a third.
This seems to be an eminently sensible approach, particularly if your users are not especially experienced in text formatting etc.
One nicety could be to allow the ...
1
The new emerging design pattern is the Done + Discard. If you have a ICS device, just edit a calendar entry, there will be a Done button at the top left, and Discard button at the top right, and they will replace the Action Bar.
Roman Nurik spoke about it here:
https://plus.google.com/u/0/113735310430199015092/posts/R49wVvcDoEW
There's also code that ...
Only top voted, non community-wiki answers of a minimum length are eligible
