« Puttin' it all together | Main | [IPB 2.1] ACP Templates Part III »

Tuesday, May 31, 2005

[IPB 2.1] Tweaking the UI

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)

May 31, 2005 | Permalink

TrackBack

TrackBack URL for this entry:
https://www.typepad.com/services/trackback/6a00d83423035953ef00d83423980653ef

Listed below are links to weblogs that reference [IPB 2.1] Tweaking the UI:

» I have to agree from Ominous Minds
Despite one of my first AJAX scripts, I have to agree with the when to use ajax discussion. The double click edit is not the way to go, sure, some of our goal's are to bring the desktop to the web. This is a very great movement, but if we are going ... [Read More]

Tracked on Jun 13, 2005 6:39:06 PM

Comments

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.

Posted by: Chris Griego | May 31, 2005 12:55:56 PM

Indeed. One can safetly double click the link and it will load as if one clicked once.

Posted by: Matt | May 31, 2005 1:53:10 PM

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?

Posted by: Dirty Den | May 31, 2005 2:33:12 PM

It's moved. :)

Posted by: Matt | May 31, 2005 3:36:29 PM

w00t

Posted by: Dirty Den | May 31, 2005 4:25:14 PM

w00t! nice Matt can wait for 2.1 :)

Posted by: Aaron | May 31, 2005 4:37:25 PM

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?

Posted by: OzAd | May 31, 2005 4:44:19 PM

1.5 seconds isnt long. Surely your not that impatient?

Posted by: Wilko | May 31, 2005 4:49:34 PM

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

Posted by: Matt | May 31, 2005 5:30:36 PM

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?

Posted by: OzAd | May 31, 2005 5:45:21 PM

This feature is to hidden for people who dont know about it. So i dont think it is user friendly.

Posted by: OzAd | May 31, 2005 5:47:04 PM

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.

Posted by: Tim Dorr | May 31, 2005 5:49:41 PM

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.

Posted by: Matt | May 31, 2005 6:06:14 PM

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.

Posted by: | May 31, 2005 7:05:00 PM

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

Posted by: mikee aka Nicoo | May 31, 2005 10:03:57 PM

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.

Posted by: OzaD | May 31, 2005 10:07:36 PM

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?

Posted by: Wilko | May 31, 2005 10:35:57 PM


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.

Posted by: Madbob | May 31, 2005 10:50:24 PM

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.

Posted by: Danny | May 31, 2005 11:17:19 PM

I don't think triple click would be any better... Besides, it's just click once and hold, isn't it?

Posted by: Jeremy Privett | Jun 1, 2005 3:46:47 AM

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.

Posted by: The Jedi | Jun 1, 2005 7:36:46 AM

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.

Posted by: Matt | Jun 1, 2005 10:56:23 AM

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.

Posted by: Matt | Jun 1, 2005 10:58:39 AM

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.

Posted by: mikee aka Nicoo | Jun 1, 2005 2:13:04 PM

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.

Posted by: Michael Merritt | Jun 1, 2005 4:21:11 PM

The comments to this entry are closed.