Ya en un primer post sobre la evaluación heurística hablé sobre cómo hacíamos estas evaluaciones de experto tomando como referencia 5 rubros principales: Navegación, orientación, interacción, contenido y layout. Esta es una evaluación típica y bastante completa. Sin embargo también se puede realizar bajo otros criterios, que si eres nuevo en esto, tal vez te sea más sencillo seguir, clasificar y comunicar al cliente; hablo de la evaluación heurística por niveles.

¿Evaluación heurística por niveles?

Me refiero a los problemas de usabilidad ubicados por nivel de prioridad, estos serían:

Nivel crítico: Tareas o procesos de la interfaz que el usuario no puede completar o no puede entender debido a problemas graves de usabilidad. En otras palabras, el usuario se frustra por no poder hacer lo que quería. En una evaluación, los problemas críticos serán los aspectos que deberán corregirse a corto plazo a la medida de lo posible.

Nivel medio: Tareas o procesos que sí se pueden completar pero con problemas de experiencia de uso, es decir, el usuario al terminar la tarea queda desconcertado o disgustado por creer que las cosas podrían haber sido más fácil para él. Estos problemas generalmente no son atendidos por la falsa idea de que al final se logra el objetivo.

Nivel bajo: Son problemas que no interfieren con las tareas o procesos de la interfaz, pero que su solución dará pauta a áreas de oportunidad para sobrepasar las expectativas del usuario. Generalmente se relacionan con agregar funciones que faciliten la interacción. Al atender estos problemas de usabilidad, la interfaz más que ser corregida está siendo perfeccionada.

Identificar estos tres niveles son de gran ayuda para los clientes, ya que les decimos de manera muy sencilla hacia qué problemas enfocarse de manera inmediata (Nivel crítico), los siguientes pasos a los críticos (Nivel medio) y los problemas que al resolver le darán ese plus a la interfaz en cuanto a la experiencia de uso (Nivel bajo). Es muy importante mencionar que si se decide aboradar los problemas de nivel bajo, no se tendrá el mismo resultado en cuanto a experiencia de uso, ya que todavía la interfaz estará cargando los problemas críticos y más notorios.

No se te olviden las recomendaciones

Al final de nuestro reporte siempre se deben incluir recomendaciones. Escribir en nuestro reporte que el sitio no tiene sección de contacto y que es clave para recibir retroalimentación, no estamos diciendo claramente al cliente que debe agregar una sección de contacto con determinada información. Estas recomendaciones bien redactadas, son los aspectos que aporta valor a los clientes. Es redundante, pero en una evaluación heurística más vale serlo.

El último caso que hicimos en insitum, fue una evaluación heurística a ZUMTRI, en específico a una de sus aplicaciones para presentar los resultados de las carreras, ellos se dedican a esa presentación de resultados, la verdad de manera muy profesional.

Como necesitaban una evaluación rápida de su App para poder implementar los cambios, decidimos hacerles la evaluación heurística por niveles y funcionó muy bien. Así que, como mencioné en un principio, si están incursionando en estos temas o tienen que hacer una evaluación rápida pero de calidad, esta modalidad de evaluación arroja muy buenos resultados.

Puede parecer raro a primera vista, pero ¡no se asusten! Este CRAP que estoy hablando es formado por las iniciales de Contraste, Repetición, Alineación y Proximidad: los cuatro principios básicos de design descritos por Robin Williams (no el actor sino que la escritora) en el libro Non-Designer’s Design Book. En este libro la autora presenta ejemplos de aplicación para la media impresa. En un segundo libro, The Non-Designer’s Web Book, la autora presenta ejemplos aplicados al design para web.

Voy a hablar un poco acerca de cada principio individualmente, pero vale la pena recordar que éstos deben ser trabajados en conjunto, ya que están interrelacionados. Además, no deben ser entendidos como reglas, aunque yo les aconseje fuertemente que sean seguidos en el caso de que no estén seguros de romperlos concientemente.

Contraste
“Si dos elementos no son exactamente los mismos, diferéncialos completamente.”

El contraste tal vez sea la mejor forma de ofrecer atracción visual a tu proyecto. Para esto, la autora sugiere que el designer no sea tímido. Si la diferencia de dos elementos es poca, puede generarse un conflicto visual en vez de contraste. La página de juegos de la consola XBOX360 es un buen ejemplo de contraste con relación a todo, pues presenta imágenes en gran tamaño luego al principio de la página. La descripción de la imagen (ubicada en la esquina inferior izquierda), entretanto, puede parecer imperceptible a primera vista. La diferencia apenas del tamaño de la fuente, sin que haya una mudanza de colores o de tipo de fuente, disminuye el contraste de este grupo de informaciones.

Repetición
“Algún aspecto del design debe repetirse en el material completo.”

La repetición de aspectos de design como estilo y tamaño de fuente, colores o elementos gráficos, por ejemplo, colaboran a unificar el proyecto gráfico visual. Repetir elementos de design en un proyecto de muchas páginas, como por ejemplo un website, significa darle consistencia visual a éste. El website de Apple presenta un buen ejemplo de consistencia. El menú es mantenido en la misma posición; los colores y organización visual son las mismas; la identidad visual de los íconos es la misma; el estilo, tamaño y colores de fuente también se repiten en todas las páginas. Es posible notar que hay una diferencia estructural entre la “home” y las páginas internas. Y eso es válido, una vez que la home es una página “especial” del sitio.

Al proyectar un interfaz es importante estar siempre atento para que no haya grandes diferencias entre la página inicial y las internas. Al acceder a la página de videos del sitio oficial de Formula1, por ejemplo, tenemos una quiebra de consistencia con relación al resto del sitio. El usuario pierde la referencia de las páginas anteriores, no encuentra el logo o menú, además de encontrar un color de fondo diferente de todo el resto del sitio.

Alineación
“En una página, nada debe ser puesto arbitrariamente. Cada elemento debe tener una conexión visual con algo de la misma.”

Las informaciones no deben ser dispuestas en una página de manera aleatoria, apenas para ocupar los espacios vacíos. La alineación crea una línea “invisible” que ayuda al lector a identificar la cohesión, la conexión entre los elementos aunque éstos están físicamente separados. Al observar los detalles del sitio en español de ESPN, por ejemplo, es posible percibir las líneas “imaginarias” (destacadas en rojo) que definen la alineación del contenido. Es interesante observar que la proporción y la alineación son respetadas aunque tengamos una variación en el número de columnas.

Este es un pequeño desliz comúnmente realizado por los designers. En un detalle del sitio Terra, por ejemplo, a pesar de mantenerse el largo del área de contenido, la alineación general entre las columnas no está bien definida.

Proximidad
“Elementos relacionados entre si deben ser agrupados”.

Los elementos relacionados deben ser vistos de manera conjunta, cohesa, para que se forme una unidad visual. Los elementos o grupos de informaciones que no poseyeran una relación entre si deben ser desasociados, para que se evite la confusión del usuario. Un desliz con relación al principio de la proximidad que es muy común de encontrarse puede ser visto en el detalle de la página de publicaciones del Nielsen Normal Group. Repare que el espacio entre el título y la información a que se refiere el mismo es el mismo espacio referente al final de la información anterior. Esto genera una pequeña confusión en la lectura. En este ejemplo, entretanto, la comprensión de la información no queda comprometida como podría estar en el caso de que este tipo de design fuera adoptado en un menú, por ejemplo.

Lo ideal, en el caso anterior, sería que el título estuviera más próximo del texto a que corresponde y más alejado del texto anterior, como ocurre en este detalle de la página de ayuda del twitter.

Lecturas adicionales para auxiliar en la elaboración de un buen design de interfaces. Además de estos principios, les sugiero la lectura de conceptos relacionados a la tipografía, como categoría, combinación y contraste de tipos. El libro de Robin Williams ofrece una base acerca de estos asuntos.

Otro asunto que les recomiendo es la lectura acerca de la teoría y uso de los colores. El libro “From color to inexistent color” (que es un poco difícil de encontrarse), de Israel Pedrosa, trae un contenido muy rico acerca del asunto. Vale la pena la lectura.

Hoy entrando a insitum.net veo alegremente que ya está disponible el acceso a Imago, la herramienta administradora de imágenes de insitum. Es como un pequeño flickr. Por si se preguntan qué quiere decir “Imago”, Imago es Imagen en latín.

Parece poco, pero llegar a esto nos llevó un buen rato, así que si trabajas en insitum, qué esperas para empezar a usarlo. Yo acabo de entrar y ya por lo menos veo todas las fotos del Offsite (nuestro retiro anual de la empresa).

Muy buen trabajo chicos.

Vou falar um pouco sobre cada princípio individualmente, mas vale a pena lembrar que eles devem ser trabalhados em conjunto, pois estão inter-relacionados. Além disso, não devem ser entendidos como regras, embora eu aconselhe fortemente que sejam seguidos se você não tiver a certeza de como quebrá-los conscientemente.

Contraste
“Se dois itens não são exatamente os mesmos, diferencie-os completamente”.

O contraste talvez seja a melhor de oferecer atração visual ao seu projeto. Para isso, a autora sugere que o designer não seja tímido. Se a diferença entre os elementos for pouca, pode-se gerar um conflito visual ao invés de contraste. A página de jogos do console XBOX360 se mostra um bom exemplo de contraste em relação ao todo, pois apresenta imagens em um tamanho grande logo no início da página. A descrição da imagem (localizada no canto inferior esquerdo), no entanto, pode parecer imperceptível à primeira vista. A diferença apenas de tamanho da fonte, sem que haja uma mudança de cores ou de tipo de fonte, torna pequeno o contraste desse grupo de informações.

Repetição
“Algum aspecto do design deve repetir-se no material inteiro”.

A repetição de aspectos de design como estilo e tamanho de fonte, cores ou elementos gráficos, por exemplo, ajudam a unificar o projeto gráfico visual. Repetir elementos de design em um projeto de muitas páginas, como um website, por exemplo, significa dar consistência visual ao mesmo. O site da Apple apresenta um bom exemplo de consistência. O menu é mantido na mesma posição; as cores e organização visual são as mesmas; a identidade visual dos ícones é a mesma; o estilo, tamanho e cores de fonte também se repetem em todas as páginas. É possível notar que há uma diferença estrutural entre a home e as páginas internas. Isso é válido, uma vez que a home é uma página “especial” do site.

Ao projetar uma interface é importante estar sempre atento para que não haja grandes diferenças entre a página inicial e as páginas internas. Ao acessar a página de vídeos do site oficial da Formula1, por exemplo, temos uma quebra de consistência em relação ao restante do site. O usuário perde a referência das páginas anteriores, não encontra mais o logotipo ou menu, além de encontrar uma cor do plano de fundo diferente de todo o restante do site.

Alinhamento
“Nada deve ser colocado arbitrariamente em uma página. Cada item deve ter uma conexão visual com algo na página”.

As informações não devem ser dispostas em uma página de forma aleatória, apenas para ocupar os espaços em branco. O alinhamento cria uma linha “invisível” que ajuda o leitor a identificar a coesão, a conexão entre os elementos mesmo que estes estejam fisicamente separados. Ao observarmos os detalhes site espanhol da ESPN, por exemplo, é possível perceber as linhas “imaginárias” (destacadas por mim em vermelho) que definem o alinhamento do conteúdo. Interessante notarmos que a proporção e o alinhamento são respeitados mesmo quando temos uma variação no número de colunas.

Este é um pequeno deslize comumente cometido pelos designers. Em um detalhe do portal Terra, por exemplo, apesar de o comprimento da área de conteúdo ser mantido, o alinhamento geral entre as colunas não está muito bem definido.

Proximidade
“Itens relacionados entre si devem ser agrupados”.

Os elementos relacionados devem ser vistos de forma conjunta, coesa, para que formem uma unidade visual. Os itens ou grupos de informações que não possuírem uma relação entre si devem ser desassociados, de forma a evitar confundir o usuário. Um deslize em relação ao princípio da proximidade bastante comum de ser encontrado pode ser visto no detalhe da página de publicações do Nielsen Norman Group. Reparem que o espaço entre o título e a informação a que o mesmo se refere das informações é o mesmo espaço referente ao término da informação anterior. Isso gera uma pequena confusão na leitura. Neste exemplo, no entanto, a compreensão da informação não fica tão comprometida como poderia ficar caso este estilo de design fosse adotado em um menu, por exemplo.

O ideal, no caso anterior, seria que o título estivesse mais próximo do texto a que corresponde e mais distante do texto anterior, como ocorre neste detalhe da página de ajuda do twitter .

Leituras adicionais para auxiliar na elaboração de um bom design de interfaces
Além destes princípios, sugiro a leitura de conceitos relacionados à tipografia, como categoria, combinação e contraste de tipos. O livro da Robin Williams oferece uma base sobre esses assuntos.

Outro assunto que recomendo a leitura é sobre a teoria e o uso das cores. O livro From color to inexistent color (um pouco difícil de ser encontrado), de Israel Pedrosa, traz um conteúdo muito rico sobre o assunto. Vale a pena a leitura.

Usuarios en test de usabilidad

En estos días hemos estado trabajando en estudios de usabilidad en donde la dinámica consiste en completar X número de tareas dentro de un sitio web, y es muy curioso ver cómo la mayoría de nuestros usuarios tienden a subestimar la cultura digital de los demás, diciendo que ellos sí han podido completar determinada tarea gracias a su conocimiento, pero que un usuario “normal” no podría hacerla.

Tal vez los años no pasan en vano y el acercamiento hacia conceptos o tecnologías, incluso de los usuarios con poco apego ésta, ha sido tan exponencial que muchos conceptos ya son del uso común. Sin embargo no nos damos cuenta y generalizamos, como si solo nosotros tuviéramos el conocimiento tecnológico necesario. Si lo vemos desde otro punto de vista es como si todos los demás (usuarios normales) se hubieran quedado en el pasado y ahora debemos diseñar para ese usuario del pasado.

Clichés hacia los usuarios “normales”

Por ejemplo, estos son algunos comentarios que me vienen a la mente de usuarios medios y avanzados en temas de internet, hacia los menos afortunados “usuarios normales”:

• Un usuario normal es más propenso a ver publicidad online y dar clic sobre esos anuncios
• Un usuario normal no sabe bajar música en internet
• Un usuario normal no sabe qué es un archivo PDF
• Un usuario normal siempre tiene más edad
• Un usuario normal no conoce Google

Como estos puntos debe haber muchos más, y tal vez con el paso de los años vamos a tener que poner mucha más atención en ir actualizando los criterios básicos de usabilidad, para seguir diseñando sitios para los usuarios de hoy y no para nuestros usarios imaginarios del pasado.

El pasado 3 y 4 noviembre, tuvo lugar en Cancún, Quintana Roo, el congreso México Web 2.0. Como ya adelantamos en el post pasado, el evento contó con una lista de conferencistas de talla internacional. En lo personal, aunque me hubiera gustado entrar a todas las conferencias y talleres, muchos se empalmaron y por ende no pude entrar a varios.

Las conferencias a las que asisti fueron:

Medir para decidir: Fue la conferencia impartida por Pablo Lanteri, en la cual nos explica la importancia de tener herramientas de medición eficaces para conocer el tráfico de nuestra web, mapearlo y segmentarlo con la finalidad de no solo aumentar y retener nuestras visitas, si no crear estrategias confiables para hacer llegar nuestro producto o mensaje a un mayor numero de seguidores.

En este caso no podemos estar más de acuerdo con los consejos que dio, en Insitum, parte de nuestro método de trabajo es el diseño centrado en el usuario, y para lograr un buen diseño, debemos mapear y analizar los distintos usuarios que puede tener una aplicación o servicio.

El reto de diseñar una interfaz efectiva y atractiva: Conferencia impartida por Armando Sosa, tenía grandes expectativas de ella, sobre todo porque en estos últimos meses hemos estado involucrados en muchos proyectos relacionados con interfaces, desde aplicaciones web hasta touchscreen.

Nos dio lineamientos básicos para la creación de interfaces, tal vez demasiado básicos, pero que sin duda ayudaran a las personas que se adentran en este tipo de proyectos.

Social Media Marketing – Estrategias y tácticas: De nueva cuenta Pablo Lanteri nos sorprende con una conferencia-taller, en la cual a modo de charla interactiva (aunque realmente los asistentes a la conferencia no se hicieron notar por su participación), nos explica cómo el “social media marketing” está tomando auge, las redes sociales han dejado a la vista de todos su poder, tan solo basta con recordar la influencia que tuvo Facebook en la campaña electoral de Barack Obama. La web 2.0 de hoy en día es una excelente oportunidad para posicionar tu producto o servicio a un muy bajo costo, porque los usuarios tienen voz, ofrece calidad y tu producto sera recomendado, trata mal a tu usuario y dile adiós a tus ventas.

Negocios 2.0: Christian Van der Henst, de maestros del web, nos dio su opinión sobre las oportunidades de negocios que hay en México, y cómo sacar partido a los muchos iconos mexicanos para llegar a un nicho del mercado en especifico.

Algo que me llamó la atención, fue su comentario sobre el mercado de la nostalgia, sobre todo porque en algunos proyectos que hemos realizado nos dimos cuenta de ello, la comunidad hispana en Estados Unidos, llega a comprar productos movidos por la nostalgia, sin importar que hayan nacido allá, puesto que las tradiciones y costumbres se mantienen vigentes entre generaciones.

¿Cómo llegamos aquí?: Otra de las conferencias que más me gustaron, dada por Molly Holzschlag en una amena charla tipo “Preguntale a Molly” donde los asistentes pudieron resolver sus dudas acerca de estandares, cómo poder lidear con Internet Explorer 6, entre otras cosas. Para quien no sepa, Molly, es parte de la W3C.

A grandes rasgos México Web 2.0 fue un muy buen congreso, conocimos a varias personas que están en el medio, hicimos contactos, se nos ocurrieron ideas, y cómo no, disfrutamos de un lugar increíble como lo es Cancún.

Hubieron algunos problemas de organización, pero nada que no ocurra en cualquier evento de esta magnitud, esperemos que para el próximo año, repitan y mejoren los aciertos y logren eliminar esos pequeños errores.

México Web 2.0, nace por la iniciativa del Colegio Nacional de Tecnología Web para difundir la cultura web 2.0, por medio de una serie de ponencias y talleres, donde escucharemos casos de éxito, futuras tendencias y cómo el mundo está siendo revolucionado.

México Web 2.0 es ya considerado como uno de los 6 congresos más importantes en su rubro, con una lista de ponentes de caracter internacional, altamente envidiable, y polifacética.

Conforme se vayan dando las conferencias, iremos actualizando el post para dar nuestras impresiones sobre ellas.

Visita: Yahoo Design stencil Kit

En Minalab nos dimos a la tarea de recabar todas aquellos organizaciones o blogs que consultamos día a día y que nos permiten tener una perspectiva más amplia de todo lo que ocurre alrededor de estos campos de estudio. Esperamos que les sea de utilidad.

Louis Rosenfeld
Louis Rosenfeld es un prestigioso investigador en el campo de la Arquitectura de Información, en su pagina encontraremos las ultimas 5 presentaciones de sus conferencias, donde nos hablara desde sistemas de busqueda que mejoran la experiencia del usuario hasta la razón por la cual la mayoría de los rediseños en sitios web mueren en el proceso.

Game Structure
La Universidad abierta de Cataluña, Crea algo llama “Game Structure” donde nos muestra a través de ejemplos los 4 pasos que consideran escenciales (con todo y referencias descargables), para hacer diseño centrado en el usuario.

Universidad Autonoma de Ciudad Juarez
La Universidad Autonoma de Ciudad Juarez nos trae una guía sobre diseño de proyectos web usables y los factores o elementos que deben de tomarse en cuenta.

Usolab blog
Usolab es una consultora de usabilidad y diseño centrado en el usuario con una marcada experiencia en el ambito que esta patente en el blog de la empresa.

Principios de diseño de interacción.
Galinus es un estudio de diseño Web, consultoría en usabilidad y comunicación en internet. Se encargo de traducir el artículo de Bruce Tognazzini “Principios del diseño de interacción”, donde describe los principios fundamentales para el diseño y implementacion de interfaces gráficas efectivas.

Experiencia de usuario
No Solo Usabilidad Journal, nos trae un artículo escrito por Yusef Hassan Montero y Francisco J. Martín Fernández ambos miembros de la Universidad de Granada, donde nos explican de donde proviene y que factores intervienen en la experiencia usuario.

Evolucy: artículos sobre usabilidad
Evolucy es una consultora tecnológica independiente, que se especializa en usabilidad, diseño y desarrollo de aplicaciones, dentro de sus clientes se encuentran Mitsubishi, Grupo Planeta, Hewlett Packard, Terra, Telefonica, entre otros.

Tutorial de XHTML y CSS.

También pueden descargar el manual en .PDF directamente por acá.