List UI

One of the things I like about Google's Chrome browser is the simplicity of the user interface. It has only a few icons and some of the standard interaction have been combined. As the web grows in complexity there will be a need to continue to develop elegant ways to combine functionality in a way that is intuitive and does not require a lot of learning and remembering.

One of the interesting new ways to access web functionality is the Ubiquity add-on for Firefox. This add-on lets a person navigate and mashup content through an auto suggestion text box interface. For example when a person selects content on a page and presses Ctrl + Spacebar they get a pop-up with some basic suggestions and access to functions that allow them to perform a number of actions like emailing, translating, twittering, searching, or mapping the selected text. Ubiquity also lets you perform unrelated functions like looking up an email address in your list of contacts.

Ubiquity pop-up when text is selected.

Ubiquity pop-up with selected text and 'T' entered

The fundamental basis of Ubiquity is that you can use language to perform actions. So to twitter something on a page you can select the appropriate text on the page, press the Ubiquity short cut key, and start to type "twitter". Entering "tw" is all it takes.

This sounds great, but one of the possible problems with this design is the "out of sight - out of mind" cognitive barrier.  While I installed Ubiquity several months ago I have not used it until I started writing this article. I even had to look up the short cut key to launch it. It just does not occur to me to use it.

Ubiquity can do a lots of things and the functionality will continue to expand, but how will I know what it is I can do? To find a list of my currently installed functions, I can either enter keywords like Twitter, but that's a lot of exploration. The alternative is to type help and then navigate to the list of the functions that I have installed. A user interface that depends on recall rather than recognition tends not be as usable or learnable. Using Ubiquity is like going to a site with only a search box vs a site with links, tabs, and buttons. The search field can work well for finding specific content, but I can't even see what the content might be.

One way to increase Ubiquity's visibility would be to use some of the concepts presented in the previous posts on improving search suggestions. Rather than using a separate pop-up, Ubiquity could be combined with what I call the Search/Command Portal field that combines the use of function key for quick choice selection with a layered menu for enabling people to perform a wide variety of searches and actions.

If a person selects text on a page, the Search/Command Portal field could have some type of animation or state change to indicate it's ability to do something with the selected text.  Clicking the field would display a searchable and scrollable list of all the available actions for the selected text.  The key difference here is a list of all actions vs a list that just shows a few default actions or only the actions starting with a particular letter. The use of the web is based on a combination of navigating and searching where some actions are based on selecting visible options and others are based on searching for terms that may not be visible.  It seems that providing a visible and scrollable list provides user with the opportunity to either search or browse the list to learn the options.

The previous posts described a design for a single entry point web content search feature. The same design could also be used in a corporate Intranet for searching corporate web applications, such as a personnel directory or list of forms. The following diagram illustrates how a single search field might accommodate both Intranet and Internet searching.  

If a corporation has a lot of searches, then the single access search could be layered as described in the previous posts. Depending on how a corporations searchable content was accessed, it may be possible to implement the single access search field in JavaScript or a JavaScript library like jQuery and the jQuery Hotkeys plugin.  

In the previous post I presented an idea for letting a person quickly select specific types of Google searches from the Google Internet search field. But Google searches may not give me everything I may possibly need. What can we do to provide a single access point to search for anything we may want, including the files I have on my computer?

While finding things on my computer is not something I can do from a web browser it is something I can do from the Google or Yahoo desktop. Using this type of software we could add yet another layer to the function key selectable search types. Using my desktop search field I might see something like this:

Selecting F2 - Files may then give me something like this:

If I start typing something, the search will display matching search suggestions for any file type, but if I press F6 search, I will only search music files. 

While this single place to search adds more layers to the search experience, I think the advantage of being able to start from one consistent place will outweigh the disadvantages of having to drill through several layers of search type suggestions.

In my previous post I presented an idea for improving search suggestion interaction for Internet search engines like Google and Yahoo.  But it would be nice if our search could somehow incorporate a broader set of searches that people might want to perform. For example within the Google properties there are a number of web applications that have their own search. For example to search my gmail account I need to go to gmail. The same applies to Google Docs and Calendar. Google also offers content specific searches for news, finance, images, blogs, video, maps and shopping to name a few. If I want to use one of these searches I need to go to the page where that contains the content specific search field. Being able to make a wide variety of searches available in one location would help to make searching more useful.

So how could be do this in a way that makes all these options visible and obvious to use? Borrowing from the idea presented in the previous blog post, let's assume that when I clicked on the Google search field I automatically got a dropdown list that looked like:

At this point I could just begin typing if I wanted to just use the Google Internet search and the list would be replaced by the search suggestion list. I could also press F1 to search the emails in my gmail account. The search function could also be code to directly act upon a function key so that I would not have to click on the field to display the list. Instead I could press F1 to put focus on the search field and perform a gmail search.