There’s undoubtedly a whole series of items to be written on unexamined idioms in software user interfaces.1 Here’s one to kick off the series: the linking mechanism in rich text editors. It hasn’t changed in a decade, and it works the same way in new editors — like Yahoo’s Rich Text Editor and the .NET-based Windows Live Writer — as it always did. The idiom goes like this:
1. Select the text to which you want to attach your link.
2. Click the Link button.
3. Type (or paste) the URL.
I’ve watched novices struggle with this for years, and it’s no wonder that they do. What’s missing from this protocol is the capture of the URL. (That’s almost always necessary because few URLs nowadys can be easily typed.) So the idiom really goes like this:
1. Navigate to the target of the link.
2. Capture the URL.
3. Select the text to which you want to attach your link.
4. Click the Link button.
5. Type (or paste) the URL.
We have never, in any rich text editor I’ve ever seen, woven in support for those crucial first two steps.
How might that work? It occurs to me that a picture-in-picture browser would be really helpful. I’ve only seen one example of that genre — Bitty Browser — but it, or an equivalent widget, would seem like a great solution. When you click the Link button you get a picture-in-picture browser that you use to navigate to the link target. Ideally it loads with your current history and tabs, so the target is within easy reach.2 When you land on the target, there’s a button to copy the URL. Now that you’ve been guided through the first two steps, the remaining three flow naturally.
1 Just for fun, I’m going to try keeping a list at del.icio.us/judell/unexamined-software-idioms. To play along you can do the same at del.icio.us/YOU/unexamined-software-idioms, and we can see what accumulates in del.icio.us/tag/unexamined-software-idioms.
2 You can see a glimmer of this idea in Live Writer. From its linking dialog you can navigate to, and select, a prior post or a glossary entry.
Two thoughts:
1. Features vs. security! Do I want the online rich text editor to have access to my browser history and open tabs? There’s an interesting trust issue, though – while I might trust one online application to do this, I might not trust another. And this kind of feature seems made to exploit by cross-site scripting-style attacks – so even if I trust the site to have access to my history, can this trust be taken advantage of?
2. The MS Office hyperlink editors (FrontPage (insert groan) and Word use it, at least) access the IE browser history to populate a list of recent links. Feels different when it’s a desktop app, to be sure.
3. The confluence wiki link-widget accesses recent in-wiki browse history, as well as recently pages and even has a search function. Works quite nicely, though not very Web 2.0-ish – within the application context. Also removes the browser-history security issues – but obviously has walled-garden aspects.
What about using a del.icio.us feed instead of actual browser history? That way the embedded control only sees the links explicitly directed to it, instead of the entire history. And the whole thing could be done in JavaScript, so it wouldn’t require integration with any desktop apps.
In addition to easing the process, this would also reduce the potential for errors in step 5, a very common problem in my experience. Unfortunately that would encourage another common problem I see: trying to pass non-URL-based content (e.g. content based on POST or COOKIE values) via URLs.
A parallel problem is encountered when selecting a file with the HTML <input type=”file” … /> element, which appears as a text field and a button (or other variations at http://www.quirksmode.org/dom/inputfile.html). The button opens a miniature file browser, and selecting a file returns the file path to the text field.
Browsers severely limit scripting of the input file element to protect security. However, the resulting file path is not web-friendly (no “file:” protocol, backslash separates path segments in Windows, unescaped spaces, etc.), and submitting the parent form implies uploading the file, but those issues can be remedied via JavaScript. But you still can’t select an empty directory/folder.
In the enterprise, there’s no necessary distinction between linking to a web page, to a file on the network, or to other URL-accessible repositories & services, with protocols including http:, https:, file:, notes:, ftp:, telnet:, and mailto:. Perhaps there is a blended solution that selects and returns a web-friendly URL from the address bar or the clipboard or a drop-down list of bookmarks, no matter what kind of link it is.
“Word uses it to access the IE browser history to populate a list of recent links.”
So it does, I’d missed that. Now that Word is a blogging client (http://blog.jonudell.net/2007/02/19/blogging-from-word-2007-crossing-the-chasm/) that becomes even more interesting.
Still, this presumes the link target was recently visited. In my experience, it’s just as likely that I’ll need to search for, or navigate to, the target. Enabling that search/navigation in a way that’s subservient to the linking process seems like it’d be really nice — and also, actually, seems more secure because it wouldn’t depend on access to any private context.
Jon, note that Windows Live Writer also uses your recent browser history. Just start typing a URL in the Insert Hyperlink dialog.
I agree it’s an interesting problem space though, and it’s one we (the WLW team) have some ideas about. You might be aware that most of us came to Microsoft through the acquisition of Onfolio, which was all about “capture, organize, and share” of web content, including links.
Jon, I think you need to distinguish links to ‘arbitrary’ URLs from those within a known namespace (for example, the confluence editor mentioned by Gary in the first comment). In Plone, for example, the rich editing widget makes it easy to:
1. select the text
2. click the ‘link’ button
3. in a dialog box, browse to the object in Plone you want to link to
4. click ‘done’
I think it is possible to customize the editor to allow ‘browsing’ to ‘objects’ outside the CMS, with a bit of glue that maps an external site’s namespace (assuming it is regularly structured) to drill down into it.
With a bit more effort (and widespread support for appropriate ‘rel’ links) this could be made to work in a more generic fashion.
Back in 1990 I released a hypertext editor called Telling Tools, built on top of HyperCard. When making a link, you selected a piece of text and a palette (floating small window) would appear. You navigated to where the link should go and clicked the button on the palette, and was automatically taken back to the page you were editing.
Wrt to Michael R Bernstein’s comment on Plone, yeah that would be nice. Plone also has the the ability to make links in the site that adjust for if content is moved. It does this with something called the UID property of each page. There is a cross site standard for unique ids, called URNs that may be put to work to make global links that do not break.
even something as simple as providing a button or link to open a new browser window and a few simple instructions about how to copy/paste an url would be a good start for novice users who, believe it or not, might still be unaware of the browser location address bar (i’ve seen folks use the google search box to find the website they want and then click on a result link, and in days past, use aol keyword search to do the same!)
hmm. <looks at source code directory for fckeditor…>
and/or (just thought about this some more) one might create a bookmarklet (as much as i hate the term they Are useful) that, over time, becomes a familiar way for the enduser to build up a repository of links they may want to later include in items in whatever content management system they’re using.
also, the target cms could be modified to draw upon those links (through the use of locally-stored cookies accessible in javascript*…
*not sure about domain-name security restrictions about this, however…
Hi Jon,
This is every interesting. This is somewhat similar to the Color picker on the mac. You select the color picker took and then the GUI goes into a mode where you can pick a color from anywhere on the screen. When be what is needed is a URL sensor/picker: you select the text in your editor, click on the URL button and at that point all the applications hosting text which have urls add a (+) button next to the URL.
Long time no see. Please let me know next time you are in the bay area, I would love to buy you lunch and catch up!
Edwin
“When be” -> May be. Sorry for the typo.
Front Page has had a feature where all you need to is to Alt+Tab to Internet Explorer which is displaying your URL of choice. Then Alt+Tabbing back to Front Page automatically copied in the URL into the link screen.
A button that invokes a dialog to search (optionally) through (this may be a more complex interface):
– your bookmarks (personal)
– bookmarks (social)
– open browser tabs
excel’s data import feature has an interesting “picture in picture” paradigm.
also…
it took my mom a considerable amount of time to learn how to properly send me a link to a web page; nevermind author a proper hyperlink, with proper anchor text and what not. I think theres a drag-drop solution, or maybe a new “share” approach in need here…
Macromedia’s Contribute software lets a user browse to the page in the process of selecting a link.
And you might like this bookmarklet that pops op a mini Google search window of selected text, and lets you select the right url by just clicking it:
http://xenomachina.com/2007/03/easier-links-with-google-ajax-search.html
An even simpler example is how we add style to text in most editor; we do it backwards, selecting then choosing the style, rather than choosing the style, and applying it.
http://autometa.blogspot.com/2007/08/unexamined-software-idioms-2-styling.html
I rather like this idea. Draft a doc in Word, select some content, right-click and an iframe or content overlay, a la AJAX, of search results are displayed and you simply click to automatically hyperlink the originally selected content.
Tres sexy.
-CMA
Would unexamined-software-interaction-idioms be a better tag?
FrontPage had this exact thing back in the day. You would highlight the text, click the button, then you could go browse with IE until you found your page. Go back to FrontPage, and the URL was in there.
Am I the only one who remembers this?