Here’s a preview of an instant-like search add-on that I just hacked together in a few minutes. 🙂

Video formats: webm, ogv, mov

Transcript:

Let’s say I want to go to Planet Mozilla, so I start typing out “planet”, and before I even finish typing it out, the page has loaded over the current tab. This could be useful to take a quick peek at a page like xkcd, and then hit <esc> to return to where I left off.

Combining this with smart bookmark keywords, I can type “g” followed by some word, and it’s almost like Google Instant search. But this works for other search engines like Bing.. or even Wikipedia. As long as the site returns the page fast enough, it already feels pretty good.

Introducing my very own web client of the future! EdBrowser!

A brand new shiny web client with buttons and boxes that's better than foxes!

Okay okay. I’m not actually making a web client of my own, but if I had a lot of time and the right infrastructure, it would probably look like the picture above. (I suppose I do have a lot of time seeing that I’m unemployed. But that does have various benefits.. no going to classes, no studying for exams, no paying income tax to blow up then rebuild bridges.. And who would want to use something called EdBrowser?!)

I’ll just go in left-to-right order describing what you can see (and don’t see) in my mock-up:

1. Identity Center
2. Site Launcher
3. Text Input
4. Web Content

Identity Center

First off, we have something new here — the web client knows who you are and lets you know who it thinks you are. (If your name isn’t shown, you’ll want to “log in” so your experience is personalized for you. Everything described further down can be stored as part of your account.)

When the client knows who you are, it makes it easy for sites to find out that it’s you if you let the site know. Now you won’t need to fiddle with logins and passwords for “simple” sites like forums. Additionally, sites can restrict sensitive data (bank accounts, emails, etc.) and require you to give the web client a password. When you do so, the client will send the server an impossible to guess “password”, which it set up earlier, and now you don’t need to worry about internet hackers guessing your bank password.

There’s a lot more functionality for this “Identity Center,” but because I made it green and ugly, I’ll talk about it at the end. 😛

Site Launcher

You might be wondering wheres the tab bar, and here it is! Kinda. You can initially think of this area as a combination of the bookmarks bar, tab bar, and history drop-down menu.

I’ve mentioned in some other post that even with a smart new-tab page, you still need to open a new tab then find the page you want to open — 2 clicks. Similar two steps if you use the drop-down menu. And bookmarks… ew.. at least the drop-down menu automatically shows the sites you frequently use instead of manually bookmarking sites.

What you really want to do is just get to a site you frequently visit. So let’s just put those sites in an easy-to-find place.. in the Site Launcher! The web client knows which sites you use frequently, and it will automatically populate the area with the icon for that site. Now when you want to open the site in a new tab, you just click on the icon. Done.

But that’s not all! When you move your pointer over the icons, it’ll show you titles and thumbnails of all your open “tabs” that share that same icon. It will also show thumbnails of pages that you frequently go to on that site. This means no more loading the site’s home page then clicking through to the actual page you want. It shows up right there – accessible with a single click.

And as a bonus, you would be able to search the listing of tabs and pages you frequently visit to restrict your searches to just that one site.

Opened sites, unopened sites, trash and active tabs

The Site Launcher has 3 main components:

1. Sites you commonly use
2. Trash for removed sites
3. New/temporary sites

When you visit a site not in the Site Launcher, it shows up towards the right side — to the right of the dot. If you want to “pin” the site, just drag it to the left of the dot. You can close that site just by dragging it to the trash or any other normal way you would close a “tab.”

While the trash isn’t really a site, you can still hover over it just like any other site’s icon. Except now it shows you thumbnails of sites you’ve recently closed and might want to reopen. “Undo” is such a great feature! 🙂

The dot is there for you to drag if you want more space for sites to automatically fill in to the left side. But hey, you’ve got a lot of space now that there’s just the Identity Center, Site Launcher, and some small Text Input box…

Text Input

Not much to explain here. Just type what you want to do. You can execute commands or search your history and/or the web. You could just put text to store there if you wanted. I suppose you could type a URL, but why do that when you’ve got the Site Launcher!

But about the location bar.. There’s nothing showing URLs anywhere. Not in this text box or when showing sites you might want to launch — those are just titles and thumbnails. (Wait! Didn’t this guy make the AwesomeBar awesome?! Oh well.. 😛 Okay fine. You can still get to the current URL and edit it, but it’s not shown in the main interface.)

I lied. It’s not really just a text box for input. When you click on the “text box,” it also opens up bigger box in the middle of the screen, so when you type it shows up in both places. This box will show the results of what you’ve typed in. So it could be a map of an address you’ve selected or pages that you might want to go to. And after you hit enter for the command or search, the input box clears itself.

Web Content

Content is king! Lots of space for it here with just little partitioned off to the web client.

So I’ve already talked about web sites knowing who you are, and now you won’t need to keep logging into sites before you use them. But there’s more websites can do with information if you give them access!

Share your history to find great deals (but no Wii will be that cheap...)

If I’ve given Amazon.com access to my Target.com history, the next time I visit, the site can figure out what items I’ve been looking at and hopefully offer me a better deal. No need for me to manually search for the same item across multiple websites.

Another example would be sharing my digg.com history with a news aggregator site like Google News. It can know that I dugg an article and show me news stories related. Additionally Google could dig deeper and find when the original article was submitted or when I dugg it and only show news that has happened or updated since those times.

Identity Center

Back to the ugly green button. It actually comes in different colors like red and gray. It would also have a different emphasis state when the site wants to get at more of your data (but hopefully it’s not an annoying animation..)

For example, when you first visit a site, the button will appear gray because you haven’t given the site any access. It would then try to get your attention, and pointing your cursor at it would show a message like “Site ABC would like to know who you are. 40% of your friends have granted access; 3% deny. Grant or Deny?” Granting access could be limited to just the site knowing that if you “log in” to your web client from somewhere else, it’ll know it’s you again. This can be done without ever giving away your name or other personal information.

Having the web client know about your social network is nice, but re-entering all your information to a web client is a pain. You already have a lot of information on a number of websites, so let’s collect that. When you visit certain sites, the Identity Center could let you know that you can extract data from those sites and securely store it on your profile. Then you can share that information with other sites you visit if you choose to do so.

Crude mock-up of attempting to grab attention

Other situations where the Identity Center button might want your attention is if the site wants to know more than just who you are. Clicking the button could show a list of sites that you might have history for. If you do have history, you can preview what information is sent to the site as well as visit the sites that you haven’t been to before.

If Amazon.com is asking for your visit history of competitor’s websites, they’re also giving away which competitors they’re interested in. You could then navigate to new sites that you didn’t even know about. (Or just visit the ones where your friends have also visited and granted access.)

There’s an endless combination of what can be done with having your data accessible online while selectively giving out certain portions to certain sites. Also, there’s plenty of interesting personal data that already exists on some sites, so you could unleash so much potential if it was easy to make that information available.

Do you have suggestions to streamline user tasks in this new web client?

So that’s a quick overview of some parts of my imaginary EdBrowser. There’s plenty more that I’ve thought about but am currently too tired to write up. But even if this web client doesn’t exist yet, the technologies needed to make something like this are coming in. There’s the AwesomeBar as part of Places that pushed towards adaptive behaviors and Ubiquity for new interfaces for “doing stuff.” And there’s Weave for securely pushing data to the cloud and letting the user selectively open it up.

The user is the focus of attention here, and making the experience better and more streamlined is the goal. The user isn’t just passively browsing the web anymore as s/he gets to leverage the web client to easily get at whatever is desired. (So actually.. User is King! or Queen! 😉 )

Being able to read, write, organize, search mail in Gmail without ever having to touch the mouse is really convenient. I’ve even installed a Greasemonkey script, Modified Gmail Macros v. 2.0 [userscripts.org] that lets me label messages just by pressing “l” then typing part of the label.

Unfortunately, sometimes Gmail doesn’t know that you’re typing — keyboard commands all of a sudden stop working.

I’ve noticed this a lot recently when I use [alt]-[enter] to open a new tab from the location bar. This often happens when I’m reading a bugmail and want to see what a bug is, so I copy/paste the bug number and type “bug 395739” into the location bar and hit [alt]-[enter] so that the keyword search opens the page in a new tab. After switching back to the Gmail tab, I can no longer press “u” to return to the message list; instead, find-as-you-type finds a random link containing “u”.

Adding labels to bug messages just by typing

So to address this issue, I’ve written a simple Greasemonkey script that fixes the problem that I’ve been running into. It even lets you hit [tab] from the location bar (to the search bar) to the web page and have keyboard commands working in Gmail.

If you have Greasemonkey [addons.mozilla.org] already installed, all you have to do is click the following link to install the fix:
Gmail Fix Focus [ed.agadak.net]

For those curious, the reason why this focus problem occurs is that when Firefox opens a page in a new tab, it decides to move focus from the location bar into the page. However, Gmail is made of a bunch of IFrames, so focusing the outermost-top page doesn’t send the keyboard presses to the right place.

Now that Firefox 3 [mozilla.com] has been downloaded well over 27 million times [mozilla.com], many people have noticed that the Smart Location Bar can find pages that match not only in the URL but also in the title or tags added to a bookmarked page. One commonly overlooked feature that saves you a lot of time is the ability to quickly narrow down the search results and find exactly what you want. Just type another word.

Typing multiple words and not being restricted to just matching at the beginning of the URL to match the domain provides a lot of power to the user.

I’ve put together some examples of how the Smart Location Bar can save you seconds, even minutes, every day when using websites like YouTube or Gmail or any place you can visit through Firefox. (Don’t miss the pro-tip at the end to easily read your new messages in Gmail! 😀 )

Ever visited a page but don’t remember the site’s URL or even the the domain? When you’re clicking through Google search results, you might find what you’re looking for but forget to make note of the URL. Many times you can just type in what you were searching for and Firefox can find it right away. Firefox will even order the results based on better matches.

Easily go back to pages without typing the domain

In most other browsers, you would have to start typing out “www.blizzard.com” if you remembered it and then additionally type “/diablo3” to find the Diablo III related pages. Using Firefox 3’s Smart Location Bar, you could easily jump to what you want and perhaps find non-Blizzard pages that you might be interested in because you don’t have to remember to type the domain anymore.

A lot of pages on the Internet have URLs that are completely filled with junk — at least totally unmemorable for the user. Most likely the title of the page will have something much more useful. One prime example is YouTube where the video URLs are just some way for YouTube to know which video you want.

You’re more likely to remember the title of the page, which directly relates to the content of the video that you previously watched, than remembering even half of the random characters used to identify the video.

Quickly find previously viewed YouTube videos

In this case, I was trying to find Wind Garden [youtube.com], an 8-bit remix of a really great song from Super Mario Galaxy. In other browsers, if I wanted to try finding the page from my history and started typing out “yout,” I would never have found it because somebody linked that video to me from nl.youtube.com. I was able to find it with Firefox 3 because “yout” matched in both the title and URL ignoring the “nl.” part.

Another example of the AwesomeBar’s time-saving ability that will be popular with movie watchers is with IMDb – the Internet Movie Database. If you’re like me and can’t remember which movies every actor has been in, you’ll be revisiting this site over and over again. However, instead of always going to to the main IMDb homepage to find a movie using the search box, you can go directly to the page you want with Firefox 3.

Save time by going directly to movie page

These IMDb results show off yet another strength of the AwesomeBar — being able to match both the URL and title at the same time. Notice that “imdb” only shows up in the url. You can type “imdb” and then a word from the title to quickly narrow down the results to find the exact page you want. This saves you those extra seconds it takes to load the whole IMDb homepage and start a search.

You’ve got phone numbers, account numbers, social security numbers, personal identification numbers, and more numbers to keep track of. There’s no need to additionally keep track of IP addresses for those websites that don’t have easy-to-remember domain names.

No need to memorize IP addresses anymore

Cellphones let you easily find phone numbers by Contact name, and Firefox 3 lets you find IP addresses by Page name. Just like how you need to enter the contact name and phone number the first time on your phone, you’ll need to type in the the IP address once. But on the up-side, you don’t even need to provide a name for the IP address because Firefox 3 will automatically remember the page’s title for you. 🙂

Gmail has done a great job with their newest version by providing multiple points of access to their web application. Each message can be accessed directly by URL instead of requiring the user to first load the main Gmail page then searching for a message.

Get right to business with rich internet apps

Being able to access these multiple points of entry is facilitated by the AwesomeBar’s match-anywhere functionality. In this case, you would want to match page titles for email titles, but URLs can also be matched for commands like “new doc” for Google Docs [madhava.com].

By combining the AwesomeBar’s adaptive learning [ed.agadak.net] with the ability to start a Gmail search to find unread messages [mail.google.com] plus automatically selecting the first result [addons.mozilla.org] when pressing enter, I’ve been saving a lot of time whenever I check for new messages. All I need to do is type “mail” and press enter.

Digg it! Edit: Updated for post-Firefox 3 launch intro and a couple new examples.