I’ve revisited the "inline topic editing"; the feature that allows one to edit the topic’s title when viewing them as a list in a forum.
Currently, one has to double click on the topic’s table cell to activate the edit function. This is rather unfriendly. I had considered adding an "inline edit" icon somewhere but that would take away some of the "Desktop OS"-ness of the feature.
With desktop applications, we double click the icon or text to launch the application. Unfortnately, we only click once to lauch a web page. This incongruent interface means that we cannot directly emulate a desktop application unless we required a double click to load a topic. This would, of course, be silly. It’s too late to reinvent the internet and requiring a double click would be akin to asking one to hold a mouse upside down.
To make matters worse, when one right clicks a link, the browser’s pop-up menu is expected to appear. To change this behaviour would remove the browser’s features and confuse the end user. As we’re unable to modify the right-click menu, we can’t do much with that.
I did notice, however, that when one wishes to rename a file in Windows or Macintosh, you simply click-pause-click or click-hold-click. Of course, this is of no use to a web based application because after a single click you expect the page to load.
I decided to opt for a simple ‘click-hold’. After 1500 milliseconds (1.5 seconds) of holding, the link changes to the text input box allowing one to edit the topic title. This isn’t a totally natural interface request, but due to the limitations and the discordant nature of web/desktop applications, it’s a workable solution. This solution doesn’t interfere with a single click and doesn’t interfere with the browser’s right-click menu. I only need to ensure that this won’t interfere with screen-readers and other devices designed to make browsing easier for those with disabilities.
It was pretty easy to achieve really. Just a few link events (mousedown, mouseup) and a timer to check how long the mouse has been held down for. A setTimeout loop ensures that the time is constantly checked until the mousebutton is released.
Check out the result below.
Topic-Editing.mov (Quicktime .mov 1.7mb)
32 comments
Comments feed for this article
June 13, 2005 at 6:39 pm
Trackback from Ominous Minds - I have to agree
May 31, 2005 at 12:55 pm
Chris Griego
This has got to be friendly for new users of the web who instinctively double-click links because that’s how applications launch. Then again, Windows XP tried to reinvent the OS to use single-clicks but almost everyone I know has that disabled.
May 31, 2005 at 1:53 pm
Matt
Indeed. One can safetly double click the link and it will load as if one clicked once.
May 31, 2005 at 2:33 pm
Dirty Den
I noticed that that the inline post edit button was missing from the final frame(s) of the movie, have you moved it elsewhere now?
May 31, 2005 at 3:36 pm
Matt
It’s moved.
May 31, 2005 at 4:25 pm
Dirty Den
w00t
May 31, 2005 at 4:37 pm
Aaron
w00t! nice Matt can wait for 2.1
May 31, 2005 at 4:44 pm
OzAd
I dont like the idea of clicking and holding the mouse key for 1.5 sec.
Inline editing must fasten the process. What you did, is slowing it!
Isnt it possible to enable editing when the user selects the whole topic title?
May 31, 2005 at 4:49 pm
Wilko
1.5 seconds isnt long. Surely your not that impatient?
May 31, 2005 at 5:30 pm
Matt
Count how long it takes you to click-release-click or click-hold-click on an icon’s name in Windows before it’ll allow you to edit the actual icon text.
It’s about 1.5 seconds.
May 31, 2005 at 5:45 pm
OzAd
I know and that is why I prefer using the F2 key (shortcut for editing file names).
What about a little edit icon that appears when hovering a topic title?
May 31, 2005 at 5:47 pm
OzAd
This feature is to hidden for people who dont know about it. So i dont think it is user friendly.
May 31, 2005 at 5:49 pm
Tim Dorr
I can’t say I agree either. This isn’t friendly to power-users (as it slows it down) and isn’t friendly to beginners (as the interface is hidden). A button would work better for this, as it would expose the option to the beginner and would allow for faster access to the functionality for power-users.
May 31, 2005 at 6:06 pm
Matt
I’ve thought about a button, but I can’t think of an icon that will get the message across that clicking on it will allow the topic title to be edited; other than a mini ‘Edit Title’ button. Even then, there’s limited space and no obvious place to put it.
I’ll keep on thinking about it.
May 31, 2005 at 7:05 pm
Anonymous
what about an option in the ACP where the admin can choose the group(s) taht can use either. So like the admin(s) could make it so they just have to click the cell instead of wating 1.5 seconds. Or they could choose the wait time from a list or put in the time they want to wait before they can edit a topic title. And if you haven’t decided or added it yet, maybe the option to choose what groups can do that optiion. Like Admins can use double click and mods can use the 1.5 second, or visa versa. Just an idea matt.
May 31, 2005 at 10:03 pm
mikee aka Nicoo
The best decision is not easy in this case.
I can’t think of really good solution. Almost all have a negative point.
Double clicking sounded pretty good IMO !
I guess that the problem with double clicking was that you have to click on the link, if the free space is to small because of a too long topic title, right ?
The best “edit” button would just be a littel pen I think. Just large enough, that you can click on it easily enough.
The idea is good, but the problem with clicking 1,5 second on the title is that nobody knows such a behavior from other Internet usage or Desktop-apps and guessing is pretty hard too…
May 31, 2005 at 10:07 pm
OzaD
I think the best solution is the double-click one. Double-clicking on the whole cell of the topic title, must change its mode to edit.
May 31, 2005 at 10:35 pm
Wilko
The hold for 1.5 second is the most user friendly.
You don’t have that many mods anyway and if you do its not hard to say how to use it.
I don’t think it should be a matter of it being easy to figure out but rather easy to actually do. And double clicking is a problem because you only one click a link.
You don’t give mod rights without explaining how to use mod features do you?
May 31, 2005 at 10:50 pm
Madbob
Why not a little edit button beside the topic name?
i use a similar thing (although, it just takes you to a form to edit, no AJAX) on my site…
http://www.rawkstar.net/temp/editbutidea.png (i’m sure you could come up with a much nicer image too… 30seconds in paint for that, only 5 or 6 people see it).
Simple yet effective and it doesn’t interfere with the rest of the links, IMO it’s better than click+hold or double clicking.
May 31, 2005 at 11:17 pm
Danny
What about a triple click? Is that hard to do? I think that it would be better than double click and holding for 1.5 seconds.
June 1, 2005 at 3:46 am
Jeremy Privett
I don’t think triple click would be any better… Besides, it’s just click once and hold, isn’t it?
June 1, 2005 at 7:36 am
The Jedi
1.5 is very long on Internet … especially when you have to wait to edit. I think you make your life harder with this “OS”-ness style … double-cliking is not annoying at all and at last, it’s the quicker way to inline edit a post.
June 1, 2005 at 10:56 am
Matt
I think its best that you reserve judgement until you’ve actually tried it out. 1.5 seconds isn’t actually that long and the video makes it seem longer because you can’t hear the click of the mouse and I hovered over the link momentarily before clicking.
June 1, 2005 at 10:58 am
Matt
An esoteric icon isn’t any more obvious that asking one to click and hold, and double clicking next to the topic link is no more obvious and some would argue that it’s less obvious.
There isn’t really an industry standard with this sort of thing as it’s brand new functionality within a web application.
If we’re going to create a new standard, then I’d like it one that has some ties with “real world” applications and that makes some basic form of sense.
Click and release to load a link. Click and hold to edit the link.
That makes more sense than: Click and release to load, double click next to it to edit it.
June 1, 2005 at 2:13 pm
mikee aka Nicoo
Just one think to think about:
1,5 second isn’t long if you know what is editable and not. If you know that the topic title is editable, then you can wait 1,5.
What has to be considered is that in the future, such inline editing possibilities are going to be adopted in other areas too. I guess if there is the need and the possibility, then you’re going to do that. And some time later this will also be possible for normal users in some areas other than topic-title-editing.
At this time the problem may show up:
The userers will not know what they can edit and what not. So you have to try. And NOW, holding every link for 1,5 seconds seems long, as you have to wait minimum 2-2,5 seconds on each link to be sure this is not editable. With links you can hover with the mouse, and cursor changes… that’s fast.
The only good implementation that I can think of now, is to change the cursor to a PEN-cursor when hovering an editable link. CSS should allow this through .cur files.
June 1, 2005 at 4:21 pm
Michael Merritt
The problem with double clicking stems from the ability to slow down the response time of the clicks from “Mouse” in control panel. If somebody has it on a fast enough setting, they might not be able to activate the title editor. I imagine there might be the same problem if it is slower, but I don’t know. With click and hold, it doesn’t matter, because they’re not clicking.
And even if the mouse setting is on the default, some people might simply click slower than their fellow forum users.
June 1, 2005 at 5:42 pm
Matt
H’okay.
Now, the cursor changes to the “text” tool icon when an editable link is hovered over and the title now has “Click and hold to edit” after the “Topic started: Today 1:37pm”.
June 1, 2005 at 8:45 pm
Zain
Matt, DO include this option in the admin cp for admins to set their desired hold time… defualt 1.5 but admins should be able to change it
June 1, 2005 at 11:02 pm
mikee aka Nicoo
Good improvment !
It is almost perfect now.
Just two more thoughts spinning in my head:
- the text tool icon sounds good in principle, as it is used in Microsoft Word and all desktop programs. The problem I see is that the cursor is also the “text tool icon” when you hover normal text in the browser. Therfore when you hover an not underlined link (text-decoration: non) like most links are today, this could make you think it is just normal text. Some people may realize that the color is changing, but sometimes this is not really well visible on short links and certain color schemes.
Wouldn’t it be better to have a different cursor ? People would adopt it fast. Visual help is important.
- Having the option to choose in the ACP which method to use to allow users to edit text is obviously not good. This would lead to different behaviours on different boards, and only confuse people. But one things that could be good is to have more than one method to let people do one things, in this case edit the text. This may sound not good, but think of how many possibilitys you have on windows for example: 1) Click one time, release the button and click again. 2) Right click and find “Rename”. 3) Push the F2-button. The reason is just that people have different opinions of what is better. You have more experienced users, and novice ones. Some that has the ease of handling a mouse, some that don’t. So let them the choice if you can.
So here’s the question-suggestion: Couldn’t you allow both behaviours ? Double click beside the link OR hold 1,5 seconds the link. Users than have the choice. But don’t make it ACP choosable; that would just confuse everyone…
June 1, 2005 at 11:28 pm
mikee aka Nicoo
Little note after thinking at it:
Having a pen-cursor when hovering the topic titles could disturb a bit.
Perhaps the cursor could be the “text-tool-icon” with a little pen beside of it (like the progress icon has a little sand glass next to the normal arrow cursor. Note: I mean the progess icon, not the wait icon, which consits only of the sand glass) or a little star of whatever, just to me a bit clearer …
June 2, 2005 at 12:01 am
jasidog
I think it was right to stay away from using an icon/button, there’s allready too many things clutting up forum interfaces on all the big boards.
June 3, 2005 at 11:14 pm
mikee aka Nicoo
I’ve put a screenshot on IPS-forums here:
http://forums.invisionpower.com/index.php?showtopic=172429&st=0&p=1194564entry1194564