Tag Info

Hot answers tagged

20

In-line, and here is why. When you separate the user from what they are doing in a pop up, they lose the connections of items, their detail, and placement. It takes them a few moments to re-orientate themselves. When a user is separated from the product they take a moment to re-connect all those bits of information in their head and then start. With ...


12

I'd try something like this: When pre-populated, show an icon next to the field with a tooltip on hover. When modified, swap the icon for a link that, when clicked, restores the calculated value.


12

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 ...


9

Flickr seems to do this well. Anything that is editable turns butter yellow on rollover and becomes an editable field once you click. Here is a field on its own. Here is a field on rollover (hover state). And here is the field after clicking.


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 ...


7

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 ...


6

A few points here: I wouldn't overcomplicated this with a view/edit state. View/edit toggles are good if the user is more likely to be just viewing data and not editing it. If a user visits their Account page, they are likely a very motivated user and want to make a change to either their password or email. Here's how Twitter handles this page: Think ...


5

No, for the simple reason that it would be hard for anyone who is joining the conversation late to know if a reply was edited (you could store the edit time stamp like how Stack Exchange does it), but he might not know what was added or deleted. Keeping a steady flow of conversation with updates and responses will help the user understand the flow of ...


5

Masking passwords has very little (if any) benefit when people are creating them. To some people this will seem strange, so you can always give a "show password" checkbox that anyone can select. Here is a good example from MailChimp.


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 ...


4

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 ...


4

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 ...


4

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.


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 ...


3

Is the expectation that the primary use of the form is to edit the data? If it is, then the entire form should be editable by default. If editing data is only an occasional then why not use an edit in place pattern? You just click what needs to be edited, then click save when finished. This of course assumes that your users have javascript available. You ...


3

How many fields are involved? Will your users want to edit more than field at a time? How many edits are they likely to want to do? Will they be editing something that's not shown in the results page? All these sorts of questions should guide you to an approach --- which you then should test with some actual users if possible. It doesn't actually sound like ...


3

Depending on the expected amount of full detailed editing vs. simple in-line editing should give you an answer how to solve editing. 80:20 in favour of simple editing In this case I'd use a pencil (when visually not overwhelming or distracting) or clickable item name/row (when click can't be associated with anything else) which would display the in-place ...


3

Modal boxes look cooler and load a bit faster than pulling a complete page with editing form since they have fewer server calls. However, being reliant on JavaScript they are less compatible across browsers and platforms (IE7 and mobile being the primary suspects). Inline editing (as Facebook does) has the same compatibility issues. In the end, it's all ...


3

To slightly exaggerate, 99.99999% of the time when users change a field they mean to change it. Do not make more work for the user by making them click an Edit button. Do not use a confirmation message to verify if they want to save their edits. That just teaches users to always accept confirmation boxes without reading them. Instead, be sure the UI is ...


3

What's stopping you having just an edit page? The page is displayed and the user can change any value they're allowed to - all text boxes are enabled. To save the changes the user hits the "Save" icon. If they navigate away all changes are discarded, though you might want to consider a message along the lines of: There are unsaved changes. Do you wish ...


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 ...


3

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 ...


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

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

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 ...


2

You can go to https://docs.google.com/ Create New > Spreadsheet Here's an example & tutuorial for php/jquery inline edit: http://papermashup.com/demos/inline-editing/ Not exactly sure what you are looking for.


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

Why do you want to use a modal window? A modal window allows a temporary break the users' current interaction process / workflow. Requires their complete attention before continuing. Will require some form of direct response before accepting other forms of input (e.g. input via other navigation devices) Personally, I don't think a modal window is ...


2

I think an icon can be done in a way to not clutter so much. Try using vey low contrast (light gray) icons which are noticeable but not obnoxious. When the user hovers, the icons darken and/or color and a highlight appears around the cell. You say double-clicking activates the edit mode but can a single click do? Or maybe clicking on the icon? I think double ...



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