Search Service:User Interface Design

From MozillaWiki
Jump to navigation Jump to search

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 or by typing the alias of an engine in either the search or location bars before the search term. The user can bring up the Manager user interface using the last item in the dropdown menu:

    +-------------------------+
    | @v Google Search        | <-- dim text that disappears when user
    +-------------------------+     focuses field
     +-----------------------+
     | @ Google (/g/)        |
     | @ Google Images (/gi/)|
     | @ Froogle (/froo/)    |
     | @ Amazon.com (/am/)   |
     | @ IMDB (/imdb/)       |
     | @ Bugzilla (/bug/)    |
     | --------------------- |
     |   Edit this list...   |
     +-----------------------+

(not sold on the alias display)

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 informatin 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 ) |
    +---------------------------------------------+