3

We are working on a online dictionary tool, e.g. you have different dictionaries that you can browse.

Now we would like the possibility to in-place-edit the settings by double-clicking on the text. E.g. in the first picture, if you click on the description, the languages, etc. the screen switches into edit mode (picture 2).

The same happens currently if you click on the title (Remy Test), but we also need the option to browse the dictionary, e.g. the title should be a normal link. But then the double-click does not work anymore. We rather don't have a "Browse" link/button, since this is the main function and I think clicking on the title is obvious enough. But then we have this half-backed edit-mode. And we really do like the double-click edit idea too.

Any ideas? I know we could just add an edit button, but....

enter image description here

enter image description here

Improve this question
2
  • 1
    Just throwing it out there, but I know I will double-click labels such as that because I want to select a word in the label for Copy-Paste purposes. I would be shocked when double-clicking a label caused the label itself to change out from underneath me.
    – Anthony
    Jun 27 '13 at 13:15
  • Good point. Didn't think of that. But you see more and more of these in-place-edit controls. You can still select the text, just from the textbox afterwards.
    – Remy
    Jun 27 '13 at 13:49
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 and which are not.

You say you don't want an edit button, but you still want the headers to work as links. Personally I think that some sort of indication that a label is editable and a separate button to initiate this is the way to go. I'll attach a mockup of how I would try and solve it.

enter image description here

enter image description here

I would add a small subtle icon to indicate that an item is editable, just noticable but not obstructive. And on hover I would let the icon enlarge an work as the Edit CTA/Button to let the user edit the label.

Improve this answer
3
  • I see, maybe double-click is not a good idea. But I do like solutions like this: ui-patterns.com/patterns/InplaceEditor or this: designinginterfaces.com/firstedition/…
    – Remy
    Jun 27 '13 at 12:20
  • @Remy yea, I can totally relate to that. But in a scenario such as yours where the editable labels also will act as links I don't see how you would combine those two actions into "on-text-clicks". It just seems like it would be really sketchy, even if you do manage to solve it programatically I still think it could be perceived as very weird to the user.
    – AndroidHustle
    Jun 27 '13 at 12:28
  • Yes, I know, that is why I was looking for some good ideas. What about just having the double-click (or single-click) on the description, but then switch both the title and the description into edit mode? And leave the title as a normal link.
    – Remy
    Jun 28 '13 at 10:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.