Interfaces Gráficas de Usuario/Search Boxes

El cuadro de búsqueda es a menudo el elemento de diseño más utilizado; desde el punto de vista de la usabilidad, los usuarios suelen utilizar la función de búsqueda como la mejor opción cuando se busca información específica en un sitio web. Son cuadros de búsqueda los cuales un "usuario" escribe una palabra en el texto del "cuadro de búsqueda" y esta palabra se utiliza para ser comparada con una palabra en el "cuadro de lista"; y retornar la información asociada a esa palabra para suministrar la información que requiere el usuario con mayor rapidez.

Tipos

Search Boxes Simples

Pueden tener modos simples en el que una palabra clave se hace coincidir con la palabra en la lista, será seleccionado y retornado el contenido asociado con la palabra para suministrarle su información la cual aparecerá en pantalla para el usuario.

Seach Boxes Complejos:

Es un cuadro de texto que permite al usuario seleccionar los diferentes motores de búsqueda, y luego buscar su palabra clave. Con respecto a los múltiples elementos ingresados la búsqueda se torna mas amable con el usuario y mucho mas rápida al termino de encontrar la información ingresada.

Ventajas

• Los Cuadros de búsqueda mejoran la interfaz con el usuario permitiendole acceder de manera mas eficiente a la información.
• Se puede darle un orden a la información y acceder a datos remotos en las bases de datos sin muchos inconvenientes.
• ayudan al usuario con una búsqueda mas centralizada, con los elementos que asemejen al tema que busca y no solamente la palabra clave.

Ejemplo

• En HTML: Agregue el siguiente marcado para crear un SearchBox :

< div de id = "searchBoxId"

    data-win-Control = "WinJS.UI.SearchBox" > 

</ div >

Permitiendo a los usuarios buscar escribiendo hace un uso eficiente de interacción con el teclado y hace la experiencia de búsqueda de su aplicación compatible con la pantalla de inicio. Ajuste el SearchBox del control focusOnKeyboardInput propiedad verdadera para que el cuadro de búsqueda recibe información cuando un usuario. (Para obtener instrucciones sobre el uso de la experiencia del usuario a escribir para buscar en su aplicación, consulte Directrices y lista de comprobación para la búsqueda .) HTML

< div de id = "searchBoxId"

    data-win-Control = "WinJS.UI.SearchBox" 
    data-win-options = "{focusOnKeyboardInput: true}" > 

</ div >

Véase también

• en.wikipedia.org/wiki/Search_box
• www.smashingmagazine.com/2008/12/04/designing-the-holy-search-box-examples-and-best-practices/