Consideraciones básicas para diseñar una bella experiencia de búsqueda

Artículo original publicado el viernes 14 de diciembre de 2012

¡Hola! Me llamo Kate Dramstad y soy administradora de programas del equipo de búsquedas de SharePoint. La experiencia de búsqueda en SharePoint 2013 es ahora más extensible que nunca. Así, ahora los diseñadores y desarrolladores pueden crear prácticamente cualquier cosa que puedan imaginar. Sin embargo, es importante tener cuidado cuando se trata de personalizar la experiencia de búsqueda. La línea que separa una página equilibrada de una página desordenada es muy fina, de modo que nos gustaría compartir con usted algunos de nuestros puntos de vista sobre cómo diseñar una experiencia de búsqueda útil y maravillosa por igual.

Alineación en toda la página

Uno de los aspectos esenciales de la experiencia de búsqueda es la alineación de todos los elementos de la página. En nuestro diseño predeterminado se aprecia que tanto el elemento web de refinamiento (que muestra las opciones de ordenación a la izquierda de la página) como el icono del Centro de búsqueda de SharePoint (la imagen de lupa que hay en la esquina superior izquierda) están alineados a la izquierda. El cuadro de búsqueda, la navegación y los resultados también lo están. La parte superior del cuadro de búsqueda está alineado con la parte superior del icono, mientras que la parte inferior de la navegación lo está con la parte inferior del icono.

Figura 1. Todos los elementos de la página de resultados de búsqueda están alineados con una cuadrícula, que aparece aquí de color verde

Puede parecer un detalle banal, pero ajustar los elementos de la página a una cuadrícula ayuda a los usuarios a buscar en la página con mayor facilidad. Los componentes se separan entre sí con franjas blancas horizontales y verticales bien marcadas, lo que permite al ojo distinguir mejor los diferentes componentes de la página, algo que es de extrema importancia. Una página mal alineada puede parecer a los usuarios como "inadecuada" (en el mejor de los casos) o impedir que se puedan buscar los resultados eficazmente (en el peor de ellos). Cuando los componentes no están bien alineados, se puede crear un "borde escalonado". Cuando el ojo trata de buscar en un borde escalonado, tiene que ir y volver constantemente, cuando es mucho más eficaz buscar en líneas rectas.

Figura 2. En esta imagen, el icono de búsqueda se ha desplazado a la izquierda, de modo que ya no está alineado con la cuadrícula

Cuando se agrega un componente a la página o se reordenan los que ya están en ella, es fundamental tener en mente esta cuadrícula si se quiere lograr una experiencia lo más depurada posible. 

Figura 3. Hemos modificado los resultados en línea para que reflejen una característica de clasificación por estrellas y algunos metadatos extra. Observe que estas características agregadas también se alinean con la cuadrícula.

Aspecto de toda la página

La alineación no es lo único importante: también hay que prestar atención al número de colores, fuentes y controles enriquecidos de la página. El centro de la página de resultados de búsqueda debe ser casi siempre los resultados propiamente dichos, de modo que al decidir el estilo de los componentes de la página, conviene asegurarse de que el ojo del usuario no se distraiga de los resultados. A continuación le presentamos algunos trucos y sugerencias al respecto.

Usar asignaciones de colores con sentido siempre que sea posible

Por ejemplo, una convención general en los resultados de búsqueda es que el texto azul sea el título de resultado en el que se puede hacer clic y el texto verde, la dirección URL de un resultado específico. Si esto se cambia, los usuarios tendrán que concentrarse más aún en lo que están mirando.

Figura 4. Cambiar el color del título y de la dirección URL desorienta en parte a los usuarios. Intente usar colores que se ajusten a las convenciones con las que estamos familiarizados

Usar cuantos menos colores, mejor

Los colores suelen servir para destacar algunos puntos clave, como la opción de filtro seleccionada, el título de un resultado o una dirección URL. Usar una gran cantidad de colores puede hacer que todo se resalte y que todo llame la atención del usuario, cuando en realidad nada destaca, ya que lo que se consigue es una maraña visual muy colorida.

Figura 5. Demasiados colores distraen, lo que dificulta saber hacia dónde mirar y qué es importante. Limite el número de colores que se usa en la interfaz de usuario.

Usar cuantos menos tipos de letra y tamaños de fuente, mejor

Las fuentes, el tamaño de fuente y la negrita/cursiva se usan con el mismo propósito que el color: ayudar a destacar algunos elementos importantes. Al igual que sucede con el color, si se usan demasiados estilos y fuentes, todo adquiere un aspecto saturado. Nuestro equipo del producto llama a esto con frecuencia "nota de rescate", ya que la página parece hecha de recortes de revistas.

Usar un estilo visual de los controles enriquecidos lo más sencillo posible

Echemos un vistazo al refinador del histograma de filtro de fecha, bajo el encabezado Modified (Modificado) de la figura 6. Incluir este refinador en nuestra página predeterminada fue un riesgo inicialmente, dado que se trata de un control de aspecto complejo que podría destacar frente a los filtros basados en texto, pero hemos empleado unos colores coherentes con el resto de la página y unas formas y líneas claras y sencillas. Esto es importante a la hora de agregar un control personalizado.

Una idea que nos ha rondado la cabeza es un filtro de gráfico circular. Pero fíjese en cómo este refinador desvía la atención en la figura 6.

Figura 6. El filtro de gráfico circular personalizado tiene demasiados colores y desentona con el estilo visual del resto de controles. Distrae demasiado.

Pasemos ahora la figura 7 para ver qué pasa si simplificamos el esquema de colores y las formas.

Figura 7. Al utilizar colores que están en uso en la interfaz de usuario y mantener el estilo visual del resto de controles, este refinador de gráfico circular es lo suficientemente interesante como para que los usuarios se fijen un poco en él, pero no distrae hasta tal punto que dejen de lado lo que tengan que hacer

División conceptual de la página

Al diseñar una experiencia de búsqueda, conviene tener presente tanto el aspecto estético como el conceptual. Basándonos en las convenciones de búsqueda más populares y en nuestras propias investigaciones, hemos organizado los componentes de página en diversas zonas de acuerdo con la funcionalidad y el modelo de interacción del usuario. Al agregar o reorganizar componentes, lo más adecuado sería mantener la división conceptual para que los usuarios no se pierdan cuando quieran averiguar cómo se hace algo.

Por ejemplo, todas nuestras acciones de filtro están a la izquierda de la página de resultados de la búsqueda. Así, cuando los usuarios quieran filtrar el conjunto de resultados, siempre sabrán que tienen que ir ahí. Si quiere agregar un nuevo filtro a la página, lo mejor es hacerlo al lado de los otros filtros, a fin de evitar que los usuarios tengan que pasearse por la página para encontrarlo.

La figura 8 muestra una vista general de las divisiones conceptuales de la página predeterminada de resultados de búsqueda.

Figura 8. La página de resultados de búsqueda se divide en cinco zonas funcionales. Cuando personalice esta página, intente agregar los nuevos elementos a la zona funcional que corresponda.

Estas son solo algunas pautas generales que sirven de punto de partida para crear experiencias de búsqueda con un aspecto armonioso. ¡Espero sus comentarios y dudas!

Esta entrada de blog es una traducción. Puede consultar el artículo original en Designing a beautiful search experience – The basics