The New Web UI

December 11, 2004 11:12 PM

Joel Spolsky, on Google's new Google Suggest UI:

The internal cool thing is that it's one of the first prominent uses I've seen of the XmlHttpRequest technique of going back to the web server for more data while the user interacts with a page... he latency of web UIs, in which everything you do is a slow round-trip that requires completely refetching and rebuilding the web page, is one of the reason web UIs feel so clunky compared to native GUIs. Google is very publicly raising the bar on the quality of interfaces that people will expect from web pages.

The first prominent use of XmlHttpRequest that I encountered (in my admittedly limited range of web browsing) was in the once exclusive but now culturally irrelevant Google social side project, Orkut. After this experiment, though, the technique really fell into place with GMail.

If you are a web developer, even if you don't need any more mail space, get a GMail account now. In one blow, Google's engineers massively raised the bar on what we should accept from a webapp. Here's a highly regarded, mainstream application that is responsive, with a dynamic UI and even comprehensive keyboard navigation, but that still feels like a web application.

(Prior to GMail, most dynamic sites either looked like Flash apps (because they were), or were massive attempts to imitate in Javascript a GUI that just didn't belong inside a web browser.)

We're entering an interesting age for web applications. Netscape 4 is finally dead for all intents and purposes, and support for advanced DHTML techniques across adopted browsers is finally widespread enough to justify using them in mainstream applications.

Looking at the web applications Google is producing, I can comfortably say (and I'm almost never comfortable making technological predictions), that if you develop web applications and you aren't looking today for ways to include dynamic interface techniques like those made practical by XmlHttpRequest, you're going to end up losing to someone who is.

(Note: Since I'm linking to Joel, who puts that little advert for Fog Creek at the bottom of his posts, I feel I should add that the company I work for, Atlassian Software, makes a terrific product called JIRA for software project management and bug tracking. It's web based, affordable, and runs on your own server, and it's now available for Windows, Unix, Mac OS X, AS/400, really pretty much anything that can run Java. Check it out now — there's a free online trial!)

13 TrackBacks

Listed below are links to blogs that reference this entry: The New Web UI.

TrackBack URL for this entry: http://fishbowl.pastiche.org/mt-tb.cgi/604

The New Web UI We're entering an interesting age for web applications. Netscape 4 is finally dead for all intents and purposes, and support for advanced DHTML techniques across adopted browsers is finally widespread enough to justify using them in main... Read More

I want the predictive picker - http://fishbowl.pastiche.org/2004/12/11/the_new_web_ui That'd sweet. :-) "Recent pages" doesn't help me much because a lot of times I go in and create a new page before looking at a parent. Read More

The New Web UI from kleineikenscheidt/stefan on December 19, 2004 9:54 PM

Dave has just posted a great summary of recent improvements of web UIs. After having worked on integration platforms for quite while, it is exciting to see how web UIs evolve. Btw: We've just started developing a web UI workflow... Read More

The New Web UI from kleineikenscheidt/stefan on December 19, 2004 9:55 PM

Dave has just posted a great summary of recent improvements of web UIs. After having worked on integration platforms for quite while, it is exciting to see how web UIs evolve. Btw: We've just started developing a web UI workflow... Read More

The New Web UI from kleineikenscheidt/stefan on December 21, 2004 5:31 AM

Dave has just posted a great summary of recent improvements of web UIs. After having worked on integration platforms for quite while, it is exciting to see how web UIs evolve. Btw: We've just started developing a web-based workflow application,... Read More

Predecitive Search from Confluence: Development Projects on May 21, 2005 2:21 AM

Predecitive Search Notes: A good example of predecitive search can be found at: Read More

Predecitive Search from Confluence: Development Projects on May 21, 2005 2:21 AM

Predecitive Search Notes: A good example of predecitive search can be found at: Read More

Predecitive Search from Confluence: Development Projects on May 21, 2005 5:38 AM

Predecitive Search Notes: A good example of predecitive search can be found at: Read More

Predecitive Search from Confluence: Development Projects on May 25, 2005 1:10 AM

Predecitive Search Notes: A good example of predecitive search can be found at: Read More

Predecitive Search from Confluence: Development Projects on May 28, 2005 1:13 AM

Predecitive Search Notes: A good example of predecitive search can be found at: Read More

Predecitive Search from Confluence: Development Projects on May 28, 2005 1:14 AM

Predecitive Search Notes: A good example of predecitive search can be found at: Read More

Predicitive Search from Confluence: Development Projects on May 30, 2005 4:41 AM

Predicitive Search Overview Precitive Search displays to the user the top 15 searches done at knovel that begin with the search term entered so far by the user. For Example: A user types in the letter g.... Read More

Predicitive Search from Confluence: Development Projects on May 30, 2005 5:01 AM

Predicitive Search Overview Precitive Search displays to the user the top 15 searches done at knovel that begin with the search term entered so far by the user. For Example: A user types in the letter g.... Read More

10 Comments

I used a similar javascript technique to load dynamic data on a banking site that launched 2 months ago
my technique used dynamic html to request a new js file be added to the dom, the js file was actually an asp file that returned a text/js header, then printed out javascript code to update select boxes on the page
it looks awesome :D

This is the function I used, it might be a bit more of a hack than XmlHttpRequest :/ works well though

kind of annoyed google has popularised this technique though, was my unique web developer trick that noone knew about :D no more annoying page reloads - if you wanted you could have a whole site loaded into div tags without the page refreshing at all (like gmail) - load individual div tags seperately - will reduce page load times, and server load
awesome

function loadContent(file){

var scriptTag = document.getElementById('loadScript');
var head = document.getElementsByTagName('head').item(0)
if(scriptTag) head.removeChild(scriptTag);
script = document.createElement('script');
script.src = file;
script.type = 'text/javascript';
script.id = 'loadScript';
head.appendChild(script)
}

loadContent('/js/script.js');

You make some very valid points.

I do however have something to add that has been annoying me for quite some time. Essentially it's off topic, but I will mention it anyway.

While in someways Gmail is very impressive, I am once again severely disappointed by the fact that google has flounced any semblance of adherence to basic web standards. They do not even open the Gmail page with a HTML tag let alone a DOCTYPE. Neither does google it's self - perhaps the most visited page on the whole WWW.

While this doesn't detract from the quality or utility of Google's service I do not understand why it would be so hard to open a HTML document with a HTML tag.

Is this some obscure bug they are trying to overcome or is it simply ignorance or laziness?

Huh? google.com has a html tag :o)

"Neither does google it's self - perhaps the most visited page on the whole WWW."

Actually, the most visited page on the web is msn.com - although I would say that's only because it's the default homepage for the clear majority of Internet Explorer browsers.

It's a pitty access to Gmail accounts is limited - I wouldn't mind having a look.

If Gmail ever releases more invites, you'll be able to get them at the Gmail spooler.

http://isnoop.net/gmailomatic.php

Tom mentions "... you could have a whole site loaded into div tags without the page refreshing at all ..."

For a pretty interesting application of that idea, check out Jeremy Ruston's tiddlywiki ... http://www.tiddlywiki.com .

why i don,t have access to orkut.com ?


ACCESS DENIED

Your Request for this page has been denied because of Access Control

ACCESS DENIED

Your Request for this page has been denied because of Access Control

ACCESS DENIED

Your Request for this page has been denied because of Access Control

je serais heureux de crée un compte de messageriedegoogle

je serais heureux de crée un compte de messagerie google

Previously: Contracting in Melbourne

Next: War of the Worlds