Empecé desarrollando aplicaciones web, hasta que di el salto a la docencia.
Actualmente soy Asesor Técnico Docente en el servicio TIC de la D.G de Infraestructuras y Servicios de la Consejería de Educación, Juventud y Deporte de la Comunidad de Madrid.
Además colaboro como formador especializado en tecnologías de desarrollo.
Hackathon Lovers http://hackathonlovers.com: un grupo creado para emprendedores y desarrolladores amantes de los hackathones.
Password Manager Generator http://pasmangen.github.io: un gestor de contraseñas online.
MarkdownSlides https://github.com/asanzdiego/markdownslides: un script para crear slides a partir de ficheros MD.
Mi nick: asanzdiego
Mejora en la calidad del producto: los sistemas que mejor se ajustan a las necesidades del usuario mejoran la productividad y la calidad de las acciones y las decisiones.
Reducción de los costes de mantenimiento: los sistemas que son fáciles de usar requieren menos entrenamiento, menos soporte para el usuario y menos mantenimiento.
Reducción de los costes de producción: los costes y tiempos de desarrollo totales pueden ser reducidos evitando el sobrediseño y reduciendo el número de cambios posteriores requeridos en el producto.
Un caso real, después de ser rediseñado prestándose especial atención a la usabilidad, el sitio web de IBM incrementó sus ventas en un 400%
Primero definiremos varios términos importantes: usabilidad, accesibilidad, arquitectura de la información, experiencia de usuario y diseño centrado en el usuario.
Luego intentaremos conocer al usuario, saber como ve, como piensa y como actúa.
Después veremos como evitando que el usuario cometa errores, y simplificando el diseño, podemos mejorar la usabilidad.
También veremos la metodología del diseño centrado en el usuario, que se compone de varias fases: planificación, diseño, prototipado, evaluación, implementación y lanzamiento, y mantenimiento y seguimiento.
Seguidamente veremos los principios de usabilidad y las técnicas de evaluación: card-sorting, evaluación heurística, test de usuarios, eye-tracking, feedback, analítica web, tests A/B.
Para terminar propondremos varios varios ejercicios para realizar en clase en gruposde 3-4.
Podemos observar que la usabilidad se compone de dos tipos de atributos:
Atributos cuantificables de forma objetiva: como son la eficacia o número de errores cometidos por el usuario durante la realización de una tarea, y eficiencia o tiempo empleado por el usuario para la consecución de una tarea.
Atributos cuantificables de forma subjetiva: como es la satisfacción de uso, medible a través de la interrogación al usuario.
Los usuarios no buscan usabilidad, buscan utilidad, entendida como el provecho, beneficio e interés que produce su uso.
Un producto será usable en la medida en que el beneficio que se obtenga de usarlo justifique el esfuerzo necesario para su uso.
Pensemos por ejemplo en los automóviles: son herramientas que requieren de un gran esfuerzo de aprendizaje y adaptación por parte de sus usuarios, aunque no por ello son percibidos como artefactos poco usables.
La usabilidad no sólo es relativa a sus usuarios, sino también a los usos. Por ejemplo, un microondas puede ser usado para guardar zapatos, pero no se pensó para eso, por lo tanto puede resultar no usable en ese contexto.
Además, los objetivos y contextos previstos determinarán la importancia de su usabilidad. Por ejemplo, un teléfono móvil puede ser usado para realizar una llamada de emergencia, o para escuchar las diferentes melodías que incorpora, un objetivo este último para el que la usabilidad puede que no sea tan relevante como para el primero.
Disciplina que busca organizar espacios de información con el fin de ayudar a los usuarios a satisfacer sus necesidades de información.
La actividad de organizar comporta la estructuración, clasificación y rotulado de los contenidos.
La AI es el elemento que sostiene estructuralmente el contenido, por tanto, debe definirse en las primeras etapas, ya que de ella dependerán otros elementos del diseño.
El objetivo principal es facilitar al usuario la recuperación de información.
La recuperación de información es una de las tareas de mayor importancia para los usuarios.
Una mala AI dificulta la búsqueda, y a la larga realizar otras tareas (como comprar).
Decidimos qué queremos atender visualmente, pero nuestra atención se ve interferida involuntariamente y de forma automática por determinadas características visuales, aún cuando hagan presencia en zonas de visión periférica.
En las interfaces web sucede igual: los usuarios escanearán visualmente la interfaz en busca de propiedades gráficas propias de los objetos deseados –enlaces, textos, imágenes, ...–, y esta exploración puede verse facilitada si el diseñador enfatiza aquellos elementos potencialmente más relevantes, o por el contrario entorpecida cuando nada parece visualmente más relevante que el resto.
La capacidad que tiene un elemento visual de atraer la atención del usuario se encuentra en directa relación con sus diferencias gráficas respecto a los elementos colindantes.
Un elemento con mayor tamaño que el resto, con un color distinto a los demás, con una orientación diferente, o en movimiento, tendrá más probabilidad de atraer nuestra atención.
Esto es algo que comprendieron los diseñadores de banners, pero los usuarios aprendieron a ignorar automáticamente todo aquello que, por sus propiedades gráficas (y ubicación), pareciera información publicitaria (lo fuera o no).
La publicidad contextual, popularizada por Google, intenta atraer nuestra atención por el camino contrario: en vez de por medio de su diferenciación gráfica, mediante su similitud, de tal forma que el usuario tenga la impresión de que por su aspecto pueda tratarse de contenido de interés.
Mejorar el diseño visual:
Enfatizar: implica hacer visible lo relevante, establecer una clara jerarquía visual entre elementos y zonas de la interfaz, de modo que la atención del usuario se vea guiada de forma lógica y secuencial de lo más relevante hacia lo secundario.
Organizar: significa establecer relaciones visuales lógicas, que faciliten de este modo al usuario relacionar o diferenciar elementos automáticamente. Por ejemplo, que los enlaces tengan todos una misma caracterización gráfica (color, tipografía, efectos), facilita al usuario que, una vez detectado un enlace, pueda diferenciarlos automáticamente.
Hacer reconocible: considerar con especial cuidado el uso de iconos, encabezados, enlaces... de tal forma que se requiera del usuario el menor de los esfuerzos para comprender y predecir el funcionamiento interactivo de la interfaz.
¿Cómo clasificaríamos los colores?
¿O cálidos y fríos?
¿Cúal de las 2 clasificaciones es mejor para mi interfaz?
Dependerá de nuestros usuarios.
Hay que intentar adaptar nuestros contenidos a los mapas mentales de nuestros usuarios.
Un usuario será capaz de identificar la función de cada elemento sólo si ha aprendido previamente su significado.
Además el significado dependerá del contexto. Un mismo usuario asociará sentidos diferentes a un enlace con el rótulo “Archivos”, en función de si se encuentra visitando un sitio web de noticias, un repositorio de software o la página web de una asociación de Bibliotecas, Museos y Archivos.
¿Cuales de estos formularios de búsqueda no utilizarías para tu interfaz web?
Normalmente empleamos el sistema intuitivo pues nos permite economizar nuestro esfuerzo cognitivo, y sólo usamos sistema racional para las decisiones realmente importantes.
Esto explica por qué, por ejemplo, ante una ventana de alerta en la que se nos pregunta algo y se nos ofrecen dos posibles respuestas (sí y no), es frecuente que automáticamente hagamos clic sin leer o procesar el contenido de la pregunta.
El usuario explorará los ítems y elegirá el primero que crea se corresponde con el contenido deseado, aún cuando no todos hayan sido valorados.
La ordenación alfabética sería una solución universal, si no fuera porque no siempre somos capaces de verbalizar nuestra necesidad informativa y, aún cuando lo somos, dicha representación sintáctica no tiene por qué coincidir con el término utilizado en la interfaz.
La mejor solución es reducir el número de ítems, agrupando aquellos semánticamente similares bajo rótulos descriptivos, de tal forma que el usuario primero explorará los rótulos de cada grupo, y sólo cuando estime que se encuentran relacionados con su necesidad, explorará los ítems contenidos en el grupo.
Los usuarios no son idiotas, sino que tienen mejores asuntos en los que emplear su esfuerzo cognitivo que en comprender nuestro diseño.
No todo a lo que atendemos es procesado racionalmente, lo que nos lleva a cometer errores frecuentemente.
Organizar, clasificar y ordenar son también formas de simplificar.
Por ejemplo, Google no simplifica los resultados de búsqueda por clasificación, sino por ordenación.
Diseñar o rediseñar, en base al conocimiento obtenido en la etapa de planificación, y en las etapas de prototipado y evaluación.
Definición de arquetipos de usuarios que representan patrones de conducta, objetivos y necesidades.
Estos arquetipos, llamados "personas", son descripciones de usuarios, a los que se les da una identidad inventada: fotografía, nombre,... pero con los atributos, características y necesidades del arquetipo basados en información real extraída de la audiencia objetiva del sitio web.
Además se deben definir "scenarios" sobre los que poder contextualizar la interacción persona-aplicación web.
El diseñador suele imaginarse a sí mismo usando el sitio y por tanto suele ser incapaz de comprender por qué a alguien le puede resultar difícil, incomodo y hasta frustrante su uso.
Estos arquetipos de usuarios conseguirán que el diseñador tenga en mente a un usuario 'real', con limitaciones, habilidades y necesidades reales.
Definición del esquema de organización, funcionamiento y navegación del sitio.
No se especifica qué apariencia va a tener el sitio, sino que se centra en su arquitectura de información.
Ahora bien, ofrecer un aspecto gráfico aparentemente tosco y poco cuidado puede aportar valor en determinados contextos.
La estética, al igual que la usabilidad, es relativa a sus usuarios y contextos de uso.
Es importante mantener una coherencia y estilo común entre todas las páginas.
Es útil elaborar una guía de estilo que sirva de documento referencia para todo el equipo de desarrollo.
Seguir una estructura piramidal: La parte más importante del mensaje debe ir al principio.
Evitar ser irrespetuoso: Intentar no dañar sensibilidades culturales, sociales, políticas, religiosas, o de cualquier otro tipo.
Permitir una fácil exploración del contenido: El lector en entornos Web, antes de empezar a leer, suele explorar visualmente el contenido para comprobar si le interesa. Usar los niveles de encabezado (h1, h2, h3, etc.), poner en relieve (negrita y/o distinto color) las partes fundamentales.
Un párrafo, una idea: Cada párrafo es un objeto informativo. Se deben trasmitir ideas, mensajes... evitando párrafos vacíos o varios mensajes en un mismo párrafo.
Ser conciso y preciso: Al lector no le gusta leer en pantalla. Hay que intentar eliminar los textos superfluos. Las páginas web no son novelas.
Usar el vocabulario del usuario: No se debe utilizar el vocabulario de la empresa o institución, sino el del usuario. Además debe ser sencillo y fácilmente comprensible.
Tono familiar y cercano: Así el lector prestará más atención. No hay que caer en la ordinariez.
Descarga desde: https://github.com/prikhi/pencil/releases
Instalar normalmente según plafatorma (Linux, Mac o Windows)
Las colecciones se instalan desde "Herramientas > Installar nueva colleción..."
Las plantillas se instalan desde "Herramientas > Gestionar plantillas de exportación... > Instalr nueva plantilla"
Dificultad para llevar a cabo tareas básicas la primera vez que se enfrentan al diseño.
Dificultad para llevar a cabo tareas concretas una vez que los usuarios han aprendido el funcionamiento básico.
Dificultad para llevar a cabo tareas concretas después de un periodo sin hacerlo.
Esfuerzo que un usuario tiene que hacer para conseguir un objetivo.
Variables que tienen que ver más con lo emocional o subjetivo.
Un sitio web no es una entidad estática, sus contenidos y su audiencia cambian, y por lo tanto requiere de continuos rediseños y mejoras.
Estos rediseños deben ser muy sutiles, pues aunque estos cambios estén fundamentados en problemas de usabilidad descubiertos post-lanzamiento, los cambios pueden resultar dramáticos para los actuales usuarios que ya estaban acostumbrados y familiarizados con el actual diseño.
El usuario debe tener el control del sistema, ser él el que decida.
Se debe ofrecer siempre una forma de "salida de emergencia", como por ejemplo la opción para "saltar" animaciones de introducción
Consistencia en el estilo (enlaces iguales, pestañas iguales, etc.)
Hacer visibles objetos, acciones y opciones para que el usuario no tenga por qué recordar información entre distintas secciones o partes del sitio web o aplicación.
El usuario no tiene por qué recordar dónde se encontraba cierta información, o cómo se llegaba a determinada página.
El sitio debe ser fácil de usar para usuarios inexpertos.
Pero también proporcionar atajos o aceleradores para usuarios avanzados.
Las páginas no deben contener información irrelevante o innecesaria.
Cada información extra compite con la información relevante y disminuye su visibilidad.
Los mensajes de error deben expresar claramente cuál ha sido la causa del problema.
También deben sugerir las posibles alternativas o soluciones, como por ejemplo mensajes del tipo "Usted quiso decir...".
Además se debe guardar el contenido introducido por el usuario para que no tenga que volver introducirlo y pueda subsanar el error.
El que los participantes estén motivados resulta crucial para el éxito de la prueba, por lo que será muy importante ofrecerles algún tipo de remuneración o recompensa por su colaboración en la prueba.
El card-sorting abierto (sin categorias) tiene el objetivo de descubrir qué tipo de categorización o agrupación de los conceptos resultará más natural y acorde con el modelo mental compartido de la audiencia del sitio web.
El card-sorting cerrado (con categorias) es recomendable para evaluar si una categorización resulta predecible para el usuario.
Dado que el abierto ayuda en la toma de decisiones organizativas, y el cerrado evalúa esas decisiones, el abierto debe preceder al cerrado.
Ambos tienen propósitos diferentes y complementarios y su utilización combinada puede ofrecernos una imagen más fiel el modelo mental del usuario.
Existen aplicaciones que automatizan y facilitan la recogida de datos y su análisis estadístico, por lo que son recomendables cuando el propósito es el análisis cuantitativo.
Como desventaja podemos señalar que los participantes suelen encontrar más divertido el card-sorting manual, y por tanto suelen estar más concentrados durante la tarea.
Los "conceptos" suelen representar categorías u opciones de navegación, y por tanto lo que se pretende es extraer cuál sería la mejor forma de agruparlas o clasificarlas.
Es una prueba destinada a adaptar la arquitectura de información al modelo mental del usuario, por tanto tiene lugar en etapas tempranas del proyecto.
Método de inspección de un sitio web que se basa en el recorrido y análisis del sitio identificando errores y problemas de diseño.
Normalmente la lleva a cabo un grupo reducido de evaluadores que, en base a su propia experiencia, fundamentándose en reconocidos principios de usabilidad, y apoyándose en guías elaboradas para tal fin, evalúan de forma independiente el sitio web, contrastando finalmente los resultados con el resto de evaluadores.
El número ideal de evaluadores debe ser entre 3 y 5: con menos de 3 muchos problemas quedarán sin detectar, y con más de 5 aumentaría el coste sin ofrecer resultados que los justificasen.
Cada evaluados examinará el diseño de forma independiente, y una vez finalicen, hacenn una puesta en común de los problemas, y elaborarán un informe final consensuado.
Cuanto más esperamos para su realización, más costoso resultará la reparación de los errores, por lo que no sólo debemos realizar este tipo de pruebas una vez implementado, sino también, sobre los prototipos.
Tiene como ventaja la facilidad y rapidez con la que se puede llevar a cabo.
Permite identificar más problemas de usabilidad menores, pero menos problemas de usabilidad mayores.
No puede sustituir al test de usuarios, ya que resulta menos eficaz en la detección de problemas de usabilidad que mayor impacto tendrán en el usuario final.
Puede reportar falsas alarmas, es decir, identificar como un problema de usabilidad aquello que realmente no lo es.
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.
El número de participantes que son necesarios para detectar los problemas más importantes de usabilidad de un diseño se encuentra en torno a 15.
Es mejor llevar a cabo 3 pruebas, con 5 participantes por cada una, repartidas en diferentes momentos del proceso de desarrollo.
El reclutamiento de participantes, y su remuneración, es similar a la técnica de Card-Sorting, anteriormente mencionada.
La primera impresión que se lleve el participante supone una información de gran relevancia para entender la capacidad comunicativa del diseño.
"Test de 5 segundos", con o sin objetivo concreto: mostrándole la página durante 5 segundos y preguntándole posteriormente cuál ha sido su primera impresión, qué contenidos cree que ofrece o puede encontrar en ese sitio web.
A continuación solicitaremos al participante una serie de tareas a realizar, analizando los errores que cometa, el tiempo empleado y su satisfacción. Es decir, medimos tanto la usabilidad objetiva, como la usabilidad subjetiva.
Una forma valiosa de obtener información consiste en solicitar al participante que exprese verbalmente durante la prueba qué está pensando, qué no entiende, por qué lleva a cabo una acción o duda.
Este protocolo tiene tiene el inconveniente de que el hecho de contar lo que uno hace y por qué lo hace altera la forma en la que se hacen las cosas.
Una alternativa consiste en que el participante primero realiza la tarea y, una vez finalizada, expresa verbalmente cómo recuerda que ha sido su proceso interactivo.
Cuanto más esperamos para su realización, más costoso resultará la reparación de los errores, por lo que no sólo debemos realizar este tipo de pruebas una vez implementado, sino también, sobre los prototipos.
Es una prueba complementaria a la evaluación heurística, pero es más costosa, por lo que es recomendable realizarla siempre después de una evaluación heurística.
Sus resultados son más fiables, y posibilitan el descubrimiento de errores de diseño imposibles o difíciles de descubrir mediante la evaluación heurística.
Resultan muy similares a los test con usuarios, siendo diferente la tecnología usada para registrar el comportamiento del usuario, y siendo diferente lo que se pretende analizar con mayor detalle: la exploración visual del usuario.
Pequeños cambios en estos diseños, pueden hacer que los patrones de exploración varíen, por lo que es una técnica recomendable sólo sobre diseños elaborados.
Sigue siendo una tecnología cara.
Hay que tener en cuenta que ofrecen datos cualitativos escondidos bajo la apariencia de datos cuantitativos: analizar una interfaz con 5 participantes generará una gran cantidad de datos, pero desde el punto de vista estadístico, sigue siendo una muestra de 5 sujetos.
La información más valiosa sobre la usabilidad de un diseño la obtenemos observando el comportamiento de los usuarios, no preguntándoles.
Esto no quiere decir que el feedback de usuario no sea útil, sino todo lo contrario, pues nos ayuda a conocer la satisfacción subjetiva del usuario.
Las opiniones expresadas por los usuarios indican posibles problemas de usabilidad, pero no son en sí mismas la respuesta a los problemas.
Si un usuario envía un email preguntando por qué desde la home no encuentra un enlace al recurso X, no significa que debamos implementar este enlace, sino que posiblemente el recurso X sea poco visible o de difícil localización.
No se deben hacer preguntas del tipo "¿Preferiría que el diseño fuera de tal forma?", sino del tipo "¿Ha tenido algún problema para localizar el recurso X?" ó "¿Le ha resultado fácil el uso de la herramienta X?".
Es una técnica que sólo puede llevarse a cabo una vez que el sitio web ha sido lanzado y es usado diariamente.
Se trata de una técnica fiable y muy económica, pues no hay sesgo ni necesidad de invertir en la identificación y reclutamiento de participantes.
Se trata de una información muy valiosa que puede servirnos para la toma de decisiones sobre el rediseño en sitios web implementados.
Consiste en comparar dos versiones de una misma página y ver cuál funciona mejor.
Se divide el tráfico de la página, de tal forma que el un porcentaje vea la versión A y el otro la versión B.
La alternativa que consiga el objetivo buscado en más usuarios gana.
Cualquier elemento de una página web (versión A) es susceptible de ser cambiado para generar una alternativa (versión B).
Puedes probar títulos, subtítulos, o entradillas alternativas para tus contenidos, puedes jugar con diferentes versiones de color y texto del botón de compra, puedes variar el tamaño de las ofertas, de los precios, del orden del menú...
Identifica un problema o un punto de mejora. “Muy pocos usuarios de los que vienen a mi web acaban visitando la página de precios de mi servicio, donde tengo el botón de comprar”.
Investiga qué hacen los demás y cómo lo hacen. Mira las páginas de inicio de tu competencia y aprende cómo otros incitan, desde su página de inicio, a visitar la página de precios.
Plantea una posible solución. “Si pongo un botón aquí haciendo hincapié en que las dos primeras semanas son gratis, creo que conseguiré aumentar las visitas a la página de precios.”
Define la métrica para determinar el éxito del test. Dependiendo del objetivo, podremos elegir: la tasa de conversión, la tasa de rebote, número de clicks, incluso si testamos una página de atención al cliente podemos poner como métrica el número de llamadas, o el número de mails.
Crea la alternativa e inicia el experimento. Crea la versión B con la solución que intuyes es mejor.