Search Service:User Interface Design

All this UI needs work!

On top of this management framework, we build the following tools:

Toolbar Search Box

A browser window search box for performing internet searches. Has one selected engine at a time. The user can quickly change the engine by using a dropdown menu. The user can bring up the Manager user interface using the last item in the dropdown menu:

    +-------------------------+
    | @ Search Google       |V| <-- dim text that disappears when user
    +-------------------------+     focuses field
    +-------------------------+
    | @ Google                |
    | @ Google Images         |
    | @ Froogle               |
    | @ Amazon.com            |
    | @ IMDB                  |
    | @ Bugzilla              |
    | ----------------------- |
    |   Edit this list...     |
    +-------------------------+

When the toolbar is in customization mode, the user can also drag an attached gripper to make the search box bigger (at the expense of other flexible elements on the same toolbar).

Search Box Context-Sensitive Menu, Go Option

Currently you can interface seemingly everything in Firefox with just the mouse, except for the search box where you need to press enter. Rather than a Go button taking up toolbar space, it would be handy to have the Go option in the context-sensitive menu.

Aliases

We need to:

• detect forms that users type data into often
• detect the fields that people are entering data into often (the "user" field)
• supply a convenient way to create a alias when the above are detected
• avoid forcing the user to type in any other metadata (alias, etc)
• make this way discoverable
• make the set of available alias discoverable
• have a manual override that handles failures in the detection system (i.e. allow a user to manually assign a alias to a particular search field)

Automatic Detection

See the Code Design page for more information about the autodetect algorithm.

When the user searches from a specific site > a certain number of times, present some sort of notification that they can add that site to their search box easily. One possible way:

[ @ http://www.imdb.com/                  K ]
                                         /|
                                        / |
                        +--------------+  +-------+
                        | Add to Search Box       |
                        | Type [ imdb Serenity  ] |
                        | from now on to search   |
                        | this site directly.     |
                        |                         |
                        | ( Add )                 |
                        +-------------------------+

Manual Addition

A context menu item "Add to Search Box..." can be shown for every text input field. This allows the user to manually add or edit search queries. When adding via this path, the user is shown the "Edit" dialog:

    +---------------------------------------------+
    | Add to Search Box                           |
    +---------------------------------------------+
    | Enter a keyword to use to search the site:  |
    | "The Internet Movie Database (IMDb)"        |
    |                                             |
    | Alias: [ imdb                            ]  |
    |                                             |
    |                    ( Add Alias ) ( Cancel ) |
    +---------------------------------------------+

Manager User Interface

A simple dialog allowing users to view installed engines, like so:

    +---------------------------------------------+
    | Edit Searches                               |
    +---------------------------------------------+
    | The following Search Engines are available: |
    | +---------------------------------+         |
    | | Name                 | Alias    |         |
    | |=================================|         |
    | | @ Google               g        | ( Up )  |
    | | @ Google Images        gi       | ( Dn )  |
    | | @ Froogle              froo     |         |
    | | @ Amazon.com           am       |         |
    | | @ IMDB                 imdb     | (Delete)|
    | +---------------------------------+         |
    |   [x] Automatically add search engines I    |
    |       visit frequently                      |
    |                                             |
    |                                   ( Close ) |
    +---------------------------------------------+