Blog

Dori Lopez Nieves | 2 comentarios

En este posts analizaremos criterios de usabilidad para las búsquedas en formularios Web.

La situación: Tenemos una tabla compleja en nuestra base de datos (por ejemplo, personas o ciudadanos). Queremos dar al usuario la posiblidad de buscar un ciudadano de la forma más cómoda posible. El campo de búsqueda simple debe estar siempre visible en todas las pantallas que muestran un listado de ciudadanos.

Posición del formulario de búsqueda simple.

Siguiendo las directrices de usabilidad, el formulario estará ubicado en la esquina derecha superior de nuestra página Web. Si es un formulario más amplio (no sólo contiene un campo de texto y un botón de búsqueda), lo podemos ubicar en la parte superior del listado.

Ejemplo: VTiger.

Directrices generales de un formulario de búsqueda.

¿Qué hay que tener en cuenta siempre, independientemente del tipo de formulario que estemos diseñando?

1. Búsqueda instantánea: Aunque es más complejo desde el punto de vista de la programación Web, siempre intentaremos mostrar resultados instantáneos en nuestra página Web en función de lo que el usuario está tecleando (Google).
2. Filtros: Para limpiar el resultado de la búsqueda, daremos la posibilidad de filtrar u ordenar en base a varios criterios (2-3 criterios serían suficientes).
3. Texto del campo de texto: En blanco. Evitaremos palabras como “teclee una opción de búsqueda”, o la misma palabra “buscar”. Si el usuario ha usado Internet más de una vez, sabrá lo que tiene que poner.
4. Texto del botón de búsqueda: Palabras obvias como “search” o “buscar”, evitaremos palabras ambiguas como “go” (“ir”).
5. Búsqueda avanzada: Si existe una opción de búsqueda avanzada, se indicará en el formulario de una forma sencilla, que no afecte a la búsqueda principal. Será un enlace acorde con el estilo del resto de nuestro sitio Web.
6. Mayúsculas / Minúsculas: ¡Haz que sean equivalentes!
7. Cuantas menos opciones de búsqueda, mejor.Veamos el siguiente ejemplo.
   Como podemos observar, el formulario está indicando al usuario que elija un criterio de búsqueda. Ahora bien, como sabemos de múltiples estudios de usabilidad, el usuario no lee las páginas; las escaena. Por lo tanto, ¿qué es lo que el usuario está viendo en realidad?
8. Por lo tanto, ¿Cuál será la mejor opción en este caso? ¡Un sólo campo!
9. 
10. Haz el contenido clickable obvio: Si es un botón, haz que parezca un botón. El diseño es imprenscindible:

1. Búsqueda multi-nivel: Podemos dar la posibilidad al usuario de buscar en base a varios criterios.

Ejemplo búsqueda multi-nivel:

Diseño del formulario.

Cuando un usuario entre en nuestra página Web, buscará uno de los siguientes patrones:

Búsqueda en múltiples campos.

Bien, puesto que en nuestro ejemplo, un ciudadano tendrá múltiples campos (nombre, apellidos, teléfono, DNI, calle, etc.), querremos que la búsqueda se pueda realizar en base a cualquiera de estos campos.

En este caso, ¿qué necesitamos? En el formulario de búsqueda ahora tendremos 3 controles:

1. El campo de texto en blanco para introducir la/s palabras clave.
2. El botón de búsqueda.
3. Nuevo: Un campo adicional (normalmente será una lista desplegable) que indique por qué campo queremos hacer la búsqueda (DNI, nombre, teléfono, etc).

Ahora bien, ¿cómo diseñamos el formulario para no confundir al usuario?

A continuación analizamos un ejemplo del libro “Don’t make me thing”, donde explica con claridad qué no hay que hacer:

Como podemos observar en la imagen anterior, le estamos haciendo al usuario pensar (¡todo lo contrario de lo que pretende la usabilidad!). El usuario debe de pensar antes qué es lo que va a buscar y después, teclear la palabra. Y se lo estamos ofreciendo en el orden inverso. Es más, la palabra “búsqueda rápida”, no ayuda a la compresión. Se podría obviar perfectamente y poner un enlace a una opción de “búsqueda avanzada”, en su lugar.

Veamos a continuación un ejemplo del mismo proceso de búsqueda en amazon:

Esto ya es otra cosa. En primer lugar, amazón indica directamente (como opción por defecto), el criterio por el que buscan la mayoría de sus clientes (“libros”). Además, el orden de los campos está ubicado en el orden lógico en el que piensa el usuario.

Diseñando nuestro formulario.

Bien, segun las directrices arriba indicadas, ¿cómo vamos a diseñar el campo de búsqueda de ciudadano en nuestra página Web?

1. Campos de textos vacíos.
2. Botón obvio con la palabra “buscar”.
3. Búsqueda por varios criterios: Para no hacer pensar al usuario, primero le mostraremos “qué está buscando” (con la opción más común seleccionada por defecto), para a continuación mostrar el campo de texto en el que teclee “qué quiere buscar”.
4. No haremos distinción entre mayúsculas y minúsculas.
5. No será necesario teclear la palabra completa, sino que buscaremos las coincidencias. Es decir, si el usuario teclea el DNI 74516046, le mostraremos todos los ciudadanos que tienen ese número en su DNI, independientemente de la letra que tengan a continuación. Para seguir restringiendo la búsqueda ya están los filtros.

A continuación mostramos una posible versión de este formulario de búsqueda:

Bibliografía:

• Don’t make me thing — Steve Krug.
• Forms that works — Caroline Jarret.
• www.usability.gov

Usabilidad en búsquedas fue posteado el enero 16, 2012 a las 8:46 en Usabilidad y tagged as buscar, búsquedas, formularios, search, usabilidad, web. fue modificado el enero 16, 2012 at 9:43. Puedes seguir cualquier respuesta a esta entrada a través de la RSS 2.0 feed. Puedes dejar una respuesta o hacer un trackback desde tu web.

Compartir: Twitter, Facebook, Delicious, Digg, Reddit