1) Sobrediseñar:

Uno de los mayores deseos de un diseñador es hacer que su trabajo sea extravagante y sobresalga del resto. Esto puede llevarnos al típico error conocido como “sobrediseñar”. En la imagen 1 se nota que el diseña­dor fue muy detallista y se preocupó porque su interfaz fuera muy diferente a lo acos­tumbrado, pero fue tan lejos que más bien esto resulta contraproducente.

Hacer un diseño cargado hace que más bien el usuario sienta rechazo a usarlo, e incluso que se sienta “intimidado” y piense que es una aplicación muy complicada.

Otra desventaja de hacer un diseño “dema­siado único” es que ciertas convenciones gráficas se pierden, por lo que el usuario de repente se siente totalmente perdido. En la medida de lo posible se debe diseñar inter­faces que posean un lenguaje gráfico fami­liar, no necesariamente que sean copias de otras aplicaciones, pero sí que tengan una estructura y funcionamiento similar. Menos es más y el hecho de que el usuario no ten­ga que aprender a usar una nueva aplica­ción desde cero es fundamental. En este ejemplo (Imagen 2 y 3) vemos como distintas aplicaciones presentan sus paneles de configuración de una manera relativa­mente similar, y muy fácil de entender, en oposición a la imagen 1 que analizamos anteriormente.

2) Subdiseñar:

Este es todo lo opuesto al punto anterior. La falta de un estilo gráfico definido y atracti­vo puede hacer que el usuario considere la aplicación como de “mala calidad” y que el objetivo para la cual fue creada probable­mente ni siquiera se alcance, como el ejem­plo en la imagen 4 de una aplicación para administrar gastos (versión para el iPad).

El diseño de la aplicación dictará su perso­nalidad, y debe ayudar al usario a utlizarla fácilmente, con indicadores gráficos atracti­vos, pero no “sobrediseñados”.

Esto es especialmente importante en apli­caciones con funcionalidades que requieren un cierto grado de credibilidad de parte de los creadores. Como un app para mantener una dieta por ejemplo. (Imagen 5).

3) Diseñar cosas MUY pequeñas:

Otro error clásico es olvidar el medio por el cuál nos comunicaremos con el usuario: el tacto, y por consiguiente, el dedo índice (en el mejor de los casos). Se debe evitar realizar botones, o cualquier otro gráfico que requiera interacción, que sean demasiado pequeños, o que estén muy unidos entre sí, porque esto lo que causará es que se seleccione cosas por error, o que no se selec­cione nada del todo. El área mínima de un botón debe ser de 44 x 44 píxeles, ese es el tamaño óptimo para que un dedo índice promedio pueda seleccionar algo fácilmen­te. (ver imagen 6)

4) Sobrecargar el diseño:

Suele olvidarse también que el espacio que tenemos para el diseño es bastante limita­do. A veces se trata de meter mucha infor­mación en un espacio muy limitado (imagen 7), resultando en que la interfaz se sienta muy sobrecargada, con botones muy pe­queños y con poco aire alrededor.

En este caso es mejor seccionar y sintetizar la información, y desplegarla de manera limpia, poco a poco. El usuario no se sentirá aturdido y tendrá el poder de selccionar específicamente qué información quiere que se le muestre en determinado momento.

La famosa frase de “menos es más” es per­fecta para este punto. Debemos recordar que no estamos haciendo un sitio web, ni una enciclopedia. La información debe sintetizarse inteligentemente, para que tam­poco el usuario sienta que se la estan mos­trando incompleta.

5) Ignorar la usabilidad:

Cada acción que se quiera realizar en una aplicación puede tener cientos de maneras de hacerse, el reto entonces es evitar aque­llas maneras complicadas, y buscar más bien las maneras más fáciles, rápidas y con menor cantidad de pasos posibles.

En la imagen 8 podemos observar un per­fecto ejemplo de una mala aplicación de conversión de unidades. (Un buen ejemplo sería la aplicación llama­da Convert) En esta tenemos que tomarnos nuestro tiempo para entender donde va cada cosa, el texto rojo sobre negro hace particularmente más difícil leer los espacios donde tenemos que meter la información de nuestra parte.

Nótese también los botones rojos en la par­te inferior, un color que por convención no suele ser bueno, suele ser de error, instinti­vamente solemos huir de los botones rojos, mientras que nos sentimos más confiados a presionar un botón verde por ejemplo.

Asimismo, nótese la mala ubicación de es­tos, debido a que el botón más importante debería ir a la derecha, y no a la izquierda como en este caso.

*Este artículo es un extracto del proyecto “El diseño gráfico al servicio de las tecnologías móviles” de nuestro compañero Alberto Vega.

El Dr. González es Investigador en Computación en el área de Interacción Humano-Computadora y Tecnologías de Información. Afiliado a CIIDIT (UANL), CRITO (UC Irvine), CDI (U Manchester). Su área de especialización es el diseño, desarrollo y evaluación de sistemas interactivos. Es miembro del SNI (Nivel 1) y miembro de la red de investigación en Tecnologías de Información de CONACYT. Sus áreas de especialización son:

• Usabilidad de Sistemas Interactivos
• Interfaces y Sistemas para la Óptima Gestión de Tareas y Proyectos
• Computación Consciente del Contexto y Ubicua
• Sistemas de Visualización de Información
• Sistemas Colaborativos (Community Informatics)

El curso fue enfocado al tema de métricas de usabilidad de sistemas interactivos, e incluyó algunos ejercicios para simular pruebas con usuarios reales. Para InterGraphicDESIGNS el tema tiene especial importancia para contar con más experiencia en usabilidad de sitios web de manera que pongamos estos conocimientos al servicio de nuestros clientes.

En este mismo tema, nuestra empresa ha apoyado algunas iniciativas, como la traducción y la implementación del Test de Usabilidad Web (http://www.intergraphicdesigns.com/tools/test-usabilidad-web/) , el cual fue realizado gracias al trabajo con Userfocus, reconocida empresa inglesa en el tema de usabilidad.

Algunas recomendaciones del Dr. González fueron el profundizar en los conocimientos necesarios para ejecutar pruebas exitosas con usuarios reales, la discusión de formularios como el “System Usability Scale (SUS)” y el uso de herramientas como Morae y Userfly.com entre otras.

Agradecemos al Dr. González por su presentación, así como a la Escuela de Computación e Informática de la Universidad de Costa Rica (ECCI – UCR) por la organización e invitación al evento y por el esfuerzo de brindar cursos-talleres de alta calidad al servicio de sus graduados.

Ver charla “Evaluación de la Usabilidad de un sitio web” en pio.la

El espacio fue una excelente oportunidad para compartir con diseñadores y desarrolladores web de latinoamérica y conversar un poco de nuestra experiencia en el campo, incluyendo la publicación de la herramienta “Test de Usabilidad” lanzada recientenemente en conjunto con Userfocus, la cual tiene el objetivo de ser una guía de directrices que permita a los evaluadores determinara el nivel de usabilidad de un proyecto web.

Aprovechamos la oportunidad para felicitar a los organizadores del proyecto pio.la por convertirse en poco tiempo en un excelente espacio para compartir sobre temas de diseño, desarrollo web, modelos de negocios y empresarialismo en América Latina.

Adjuntamos la presentación utilizada durante el evento esperando que sea de gran utilidad para la comunidad de desarrolladores web en general.

También puede ver el streaming de la conferencia, links relacionados, comentarios y más en pio.la

Existe un Test de Usabilidad creado originalmente por los ingleses de Userfocus quienes se dedicadan al estudio de la usabilidad, esta empresa está conformada por psicólogos experimentados, lo cual les brinda un gran conocimiento sobre el comportamiento frente a los sistemas y sitios web. El test de usabilidad de Userfocus cuenta con más de 247 directrices para evaluar la usabilidad de un sitio web, separadas en diversas categorías, por ejemplo: Navegabilidad y Arquitectura de la Información, Formularios y entradas de datos, Confianza y Credibilidad, etc.

InterGraphicDESIGNS finalizó esta semana la versión en español del checklist, siendo así el primer aporte para llevar el checklist a otro idioma, y ponerlo al alcance de los internautas en habla hispana.  El esfuerzo reponde al compromiso de InterGraphicDESIGNS por profundizar en temas de usabilidad y aportar en aquellos proyectos de gran popularidad que tienen como objetivo el estudio profundo del tema.

Ver test original de Userfocus, 247 Web Usability Guidelines (English)

Ver test en español trabajado por InterGraphicDESIGNS (Formato Excel)

Ver mención a la traducción realizada por IGD en Userfocus.co.uk

Los mapas de calor son una excelente técnica para tomar decisiones de diseño y posicionamiento de algunos elementos en un sitio web, en especial aquellos que desean vender publicidad en línea, dedicarse al comercio electrónico, etc.

Conocer más de Fangs