Microsoft Excel como interfaz de usuario para soluciones software.

Resumen: En muchas ocasiones nos empeñamos en crear procesos muy complejos para resolver las problemáticas que se nos presentan que nunca terminan de funcionar bien y podrían haber sido resueltos de forma mucho más eficiente utilizando herramientas totalmente implantadas y aceptadas en el ámbito tanto empresarial como domestico como por ejemplo las proporcionadas por Microsoft Office (o Google Docs).

Anuncio publicitario

Más de test de usuarios: El Click Test en la práctica

El pasado martes, escribí en el blog de NBICI una entrada en la que hablábamos de otro de los test de usuario que hemos realizado. Esta vez le ha tocado el turno al Click Test.

A continuación os dejo la entrada:

Continuando con los test de usuarios que realizamos para evaluar los prototipos de nuestro Web Site, hoy vamos a ver el segundo test que realizamos: El Click Test.

El Click Test, es un test cuyo cometido es encontrar los puntos más llamativos, aspectos menos atractivos o características más importantes en función del criterio de nuestros usuarios.

Al igual que el Fiveseconds Test, este también consta de tres fases:

• Planificación
• Ejecución
• Análisis

Planificación.

Dentro de la fase de planificación nos encontramos con vamos a tener que responder a tres preguntas:

• ¿Quiénes van a probar el sitio web?
• ¿Qué recursos materiales necesito?
• ¿Qué quiero que hagan los usuarios?

La pregunta ¿Quiénes van a probar el sitio web? busca definir correctamente a las personas y encontrar un grupo de usuarios que cumpla con el perfil definido. La pregunta ¿Qué recursos materiales necesito? viene a definir exactamente las necesidades que tenemos en cuanto a materiales e infraestructura. Si quereís leer más información al respecto podeís acceder al post donde contamos como realizamos el Fiveseconds Test.

Respecto a ¿Qué quiero que hagan los usuarios? definimos unos objetivos claros.

• Identificar que es lo que más le llama la atención a nuestros usuarios.
• Identificar si los elementos más llamativos están distribuidos en la zona superior de la página a evaluar, es decir, la zona más importante de la página.

El test fue realizado a traves de Usability Hub por medio de su herramienta Click Test.

La introducción al test fue:

Esta es nuestra Home Page del Site. Pulsa en el elemento que más te llama la atención. Gracias por realizar este test

Ejecución

Al igual que el Fiveseconds Test, este test fue realizado online con los pros y contras que esto implica. Al igual que en el apartado anterior, podéis leer más información al respecto en la entrada relativa al test de cinco segundos que ya publicamos en su momento.

Bien, el test fue realizado por 7 personas de forma programada y a día de hoy ha sido realizado por 16 personas.

A continuación podeís ver el resultado de la ejecución. Mapa de Plasma:

Plasma Map del Clicktest de la Home Page de NBICI

Mapa de Clicks:

Vista Click Map del Clicktest de la Home Page

Es decir de los 16 participantes:

• 1 hizo click sobre el logotipo de NBICI.
• 2 hicieron click sobre el claim de la home
• 1 hizo click sobre el nombre del Web Site
• 10 hicieron click sobre el botón de búsqueda
• 2 hicieron click sobre las marchas “destacadas”.

Análisis

Ahora que ya tenemos realizado el test, ya solo nos queda obtener las conclusiones del mismo:

• El 62,5% de los usuarios consideran que el elemento que más llama la atención es el call to action de la página, es decir el botón buscar. Encontramos que el 20% de nuestros usuarios considera que lo que más les llama la atención es el logo y claim.
• Prácticamente la totalidad de los usuarios, es decir el 87’5% de los usuarios que han realizado el test, han encontrado que los elementos que más les llaman la atención son los posicionados en la parte superior de la página es decir la zona más importante de la misma.

Are you ready Freddy?

Ha llegado el momento de pasar a la acción y decidir que acciones tomar para mejorar los resultados. No obstante, tenemos que tener en cuenta que los resultados obtenidos son bastante buenos, dado que hemos podido identificar que prácticamente el 82% de los usuarios encuentran que lo más relevante es el botón de búsqueda o call to action de la página (en concreto el 62,5%) o el logo y claim (en concreto el 20%). En definitiva todos consideran la cabeza con el mensaje que queremos transmitir junto con el elemento que nos va a permitir ejecutarlo como los elementos más llamativos / atractivos del sitio.

Por otro lado, el mismo dato porcentual citado anteriormente, nos dice que la página esta bien estructura y que los elementos principales estan situados en la zona superior que en definitiva es lo que antes ve el usuario, de un primer vistado y sin necesidad de hacer scroll.

Y tú, ¿que opinas? ¿Nos dejamos alguna cosa? Esperamos comentarios.

Test de usuarios

En NBICI, el proyecto en el que ando metido desde hace un mes mas o menos, hemos realizado unos test de usuario para detectar debilidades y fortalezas del Web Site que estamos desarrollando y el diseño gráfico, arquitectura de la información, diseño de interacción etc. del mismo.

Todo esto lo he contado en el blog de NBICI. Podeís acceder al post original o leerlo a continuación:

Los test de usuario, son una prueba de usabilidad que se basa en la observación y análisis de cómo un grupo de usuarios reales utiliza el sitio web, anotando los problemas de uso con los que se encuentran para poder solucionarlos posteriormente.

La idea es realizar estos test cuanto antes, ya que cuanto más tiempo tardemos en identificar nuestras debilidades más nos va a costar subsanarlas.

NBICI, es un proyecto que se esta desarrollando práctimante en modo garage, sacando tiempo de donde no lo tenemos, por eso, hemos decidido realizar un test de usuarios con los primeros prototipos.

Todo test de usuarios, pasa por tres fases:

• Planificación
• Realización
• Análisis

La semana pasada realizamos la planificación y esta semana hemos realizado el test. Ahora con los resultados encima de la mesa solo nos queda realizar el análisis, ver que los test estaban diseñados correctamente y sacar las conclusiones necesarias. Los test que hemos realizado han sido:

• Five Seconds Test
• Click Test
• Nav Flow Test

A continuación paso a explicar brevemente en que consiste cada uno de ellos.

Five Seconds Test

Este test, consiste en mostrar una interfaz de la web al usuario durante cinco segundo, a continuación el usuario deberá responder a una serie de preguntas sobre la página.

Click Test

Esta prueba consiste en mostrar una interfaz al usuario y pedir que cliquee en ella según unos factores (zonas más llamativas, aspectos menos atractivos, etc…).

Nav Flow Test

En esta prueba se presenta un ejemplo de navegabilidad a través de la web, la prueba consiste en ver si el usuario es capaz de realizar el trazado entre las diferentes interfaces de manera correcta.

En los próximos días publicaremos los resultados y conclusiones.

Los Lightbox, ¿Qué son, porque usarlos y donde usarlos?

Cuando y como tenemos que usar los diálogos modales, ha sido siempre una pregunta que los expertos en usabilidad se han formulado y en general el sentimiento era que mejor evitarlos o no abusar de ellos.

Ahora bien, no siempre es malo usarlos como vamos a ver ya que existen casos en que un dialogo modal es la solución perfecta a un problema concreto y como consecuencia de esto, se han extendido a lo largo de la web (y lo que no es la Web) los Lightbox.

¿Qué son los Lightbox?

El Ligthbox, es una técnica que nos muestra un dialogo modal y nos permite centrar la atención en el propio dialogo ya que la característica más representativa es que oscurecen el resto de pantalla pudiendo así centrar la atención del usuario en el susodicho dialogo traduciéndose esto en centrar la atención del usuario en una tarea concreta.

¿Por qué usar un Lightbox?

Como vamos a ver ahora hay varias razones para usar los Lightbox y seguramente con el tiempo, esto pasara a ser un patrón de diseño de Iteración.

Según la propia definición un patrón de diseño es una solución global a un problema concreto dentro de un contexto.

Que quiero decir con esto, pues que si aplicamos un Lightbox para solucionar un problema para el cual no se pensó o lo aplicamos en un contexto inadecuado, nos vamos a encontrar con un anti patrón, por lo tanto, los Lightbox tenemos que usarlos pero cuando sea pertinente, así que no abusemos de ellos por favor.

Las característas que definen al Lightbox son:

Buenas prácticas para el diseño de formularios

Los formularios seguramente son uno de los sistemas de interacción hombre-máquina más usados y aunque son omnipresentes, muchas veces nos encontramos con formularios mal diseñados que al final no hacen otra cosa que dificultar la tarea para la que están pensados.

¿Qué son y para que se usan los formularios?

Según wikipedia, la definición de formulario es:

Se llama formulario a una plantilla o página con espacios vacíos que han de ser rellenados con alguna finalidad.

Y ahora que ya tenemos claro que es un formulario y para que se usa, vamos a ver unas guidelines o buenas prácticas que tenemos que tener en mente cuando nos enfrentemos a la tarea de diseñar o implementar elementos de este tipo.

Seguramente estas guidelines ya las conozcas ya que son evidentes, pero siempre está bien recordarlas. Y ahora vamos a ver estas buenas prácticas.

Pide únicamente la información necesaria.

Los formularios no son eternos, es decir, son elementos finitos y además tenemos que pedir únicamente la información estrictamente necesaria ya que cuanta más información tenga que rellenar el usuario, más tedioso va a ser el proceso y vamos a tener más posibilidades de abandono.
Nunca pidas la misma información varias veces.

Yahoo Design Patterns: Navegaciones en búsquedas de datos

Yahoo, en su developer network, tiene una sección llamada Yahoo Design Patterns, donde muestran los patrones de diseño orientados a interfaz de usuario, que han aplicado en el famosísimo buscador.

Por la falta de información de este tipo en el mundo del diseño de iteración y la usabilidad, esto es un recurso muy valioso, y hoy vamos a hablar de un gran desconocido (en homenaje al Sr. Carlos Herrera), los controles de paginación en las páginas de resultados de búsquedas.

Recordar antes de nada que un patrón es una buena solución dentro de un contexto, pero si el contexto no es el adecuado, este patrón puede convertirse en un anti patrón.

Tabs usados correctamente: Guidelines para diseñar Tabs o Pestañas

Y tiene que venir otra vez el Sr. Nielsen para decirnos como tenemos que usar los Tabs (Tabs, Used Right) de forma correcta ya que en múltiples ocasiones, los estamos usando en contextos que no son necesarios.

No nos vamos a enrollar más (que es tarde) y vamos directamente a ver estas guidelines:

• Los Tabs, tienen que usarse para cambiar de vistas dentro de un mismo contexto, no para navegar a distintas partes de nuestra aplicación o sitio web
• El contenido que oculta un Tab, tiene que ser una agrupación lógica de información (ya que esta agrupado claro ;-)) de manera que el usuario, pueda predecir o intuir lo que va a encontrar cuando selecciona una pestaña. Si no puedes agrupar de forma clara la información, y estas usando pestañas, las estas usando mal.
• Los usuarios no tienen que sentir que hay que comparar el contenido de dos pestañas distintas. Si es así, otra vez estamos haciendo algo mal, ya que cuando esto ocurre la información no tendría que estar en pestañas. Si todavía crees que esto no es así, ponte en situación de un usuario que está comparando el contenido de dos pestañas y tiene que estar pulsando una u otra continuamente para acceder a la información. Como podrás ver, esto no es muy usable (ni tampoco útil)

Breadcrumb Navigation, una forma sencilla de incrementar y mejorar la navegación por nuestro sitio web

El Breadcrumb Navigation es un sistema de navegación que permite indicarle al usuario el lugar donde se encuentra además de la jerarquía del sitio así como el camino que hay que seguir para llegar al documento actual.

El nombre viene del libro Hansel y Gretel de los hermanos Grimm. En él, Hansel iba dejando migas de pan por el bosque parar marcar el camino de vuelta a casa.

Cuando tenemos que usar el Breadcrumb Navigation

El Breadcrumb Navigation lo tendremos que usar cuando sea necesario es decir, cuando la posible navegación del sitio web, sea lo suficiente compleja como para tener varios sistemas de navegación.

No obstante vamos a ver la principales razones para usarlo:

Buenas prácticas para el diseño de links

Supongo que todos somos conscientes de lo que es un link y de su importancia, pero muchas veces de lo que no somos consientes es de que un buen tratamiento de los mismos a la hora de pensar su diseño, puede traducirse en un ratio de conversión mayor (es decir en dinero), de un menor índice de abandono de la página o de que un usuario este más tiempo en nuestro sitio.

Creo recordar que Jakob Nielsen ya había dado algunas directrices en su alertbox, no obstante aquí no vamos a ver nada que no sepamos pero bien está recordarlo porque hay veces que aunque conocemos esto, no lo aplicamos.

Así que veamos estas buenas prácticas o guidelines o consejos (o como lo queráis llamar) para que nuestros links gocen de un diseño excelente y sobre todo para que el usuario los encuentre más perceptibles o le resulte más complicando pasar por alto un link que tenga cierta importancia:

Voz activa o voz pasiva ¿Que es lo que tenemos que usar en la web?

Jakob Nielsen, en su alertbox de Octubre de 2007, reflexionaba sobre el uso de la voz activa y la voz pasiva en la web y posteriormente en Sigt leí un post donde se hacía un síntesis muy interesante del alertbox anteriormente citado. Ambos definen una sería de guidelines que serían más o menos las siguientes:

Voz activa ¿Cuándo y porque tenemos que usarla?

En la mayoría de contenido web, deberemos usar voz activa, vamos a ver esto con un ejemplo:

1. Peor: La voz pasiva debe ser evitada.
2. Malo: La voz pasiva debe ser evitada por los autores.
3. Bueno: Los escritores deben evitar el uso de la voz pasiva.
4. Mejor: Los escritores deben utilizar la voz activa.