I've been working on tthe UI part of the application I've been creating for myself for now that will eventually be released for public consumption. I've used many applications on desktop and they always have a button to edit. It is a great thing that the UI has a apparent indicator for when things are editable and the indicator is interactive.
One of the central components of my UI is a table/grid. I was wondering how I could best go about editing. Inline editing was a given, but how does one get to show the inline editor? Looking for inspiration, I image searched on Google for inline editors. None were particularly inspiring. I mean their buttons and editors were nice, but I wasn't feeling it.
A couple of interactions I thought about:
A button. Could be right next to the element. Nah too much space. I would argue too little space for a mobile device. Hard to get the dimensions right.
On demand button. It could appear from hovering over the editable element. Nah, hard to get right.. You'd need to move your mouse over the element first and then move it to the button why? Some sites do it particularly shitty with the amount of millisecs to wait before removing the button after hover is done. Doesn't particularly translate well to a mobile device.
Click to edit. This way better than the other choices so far and I implemented this easily. Very natural and easy. Translates really well for a mobile device. The con is that dragging doesn't work well then if you wanted to copy data out. Takes no space on the screen.
Double Click to edit. I implemented this for the header row at first because a user would be used to clicking on a header to sort. Not that I am saying sort is a thing here. To switch to double click to edit for this component in general means that it is natural to try to double click on the cell components to try to edit things rather than guess at click or double click. Accidental clicks won't trigger the editor. Again, takes no place on the screen.
When do I know an element is editable then? I think the interaction could be more apparent if I showed a small indicator that the element is editable. A border or dot indicator on hover. Animation on hover could be an indicator. Animation on double click. There are many indicators to explore and I'll figure that out sooner or later.
Bottom line is that I really like the double click to edit interaction. I'm quite surprised it is not more popular on the web.