Notas del episodio
Enlaces mencionados en el podcast
Aquí están los enlaces mencionados en el podcast de hoy:
- Episodio 29. Mejora la usabilidad de tus diseños con el diseño de interacción: Enlace al episodio 29 en el que introdujimos el concepto diseño de interacción (IxD).
- Episodio 16 – 5 diferencias clave entre diseño iOS y diseño Android: En este episodio encontrarás información sobre las guías de interfaz de usuario de apple y Material Design.
- Episodio 20 – Inmersión en Material Design _Parte 1: Primera parte del manual sobre Material Design de Lecciones UI para Creativos.
- Episodio 21 – Inmersión en Material Design _Parte 2: Segunda y última parte del manual sobre Material Design de Lecciones UI para Creativos.
- Complete Beginners Guide To Interaction Design: Enlace al artículo en el cual está basado gran parte del podcast de hoy (episodio 30).
- Presentación IxD + Material Design: Os dejo aquí también la presentacion de Workoholics. Súper recomendable si quieres saber más sobre IxD o Material Design.
Libros
Aquí está la lista de libros recomendados:
Además, en el podcast de hoy también hemos mencionado los siguientes libros:
Diseñadores a seguir
Aquí está la lista de diseñadores recomendados:
Alan Cooper
Alan Cooper cofundó Cooper en 1992. Es ampliamente conocido por su papel en la humanización de la tecnología a través de su innovador trabajo en diseño de software. También es autor de los libros About Face: The Essentials of Interaction Design (ediciones 1-4) y The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity. Ampliamente reconocido como el «Padre de Visual Basic», Alan también creó la metodología de diseño dirigido a objetivos e inventó las personas como herramientas prácticas de diseño de interacción para crear productos de alta tecnología que deleitan la sensibilidad del usuario.
Brad Frost
Brad Frost lidera una carga: Death to Bullshit. Death to Bullshit es “un grito de guerra para librar al mundo de la basura y exigir experiencias que respeten a las personas y su tiempo”. Brad ayuda creando esas experiencias como diseñador web y defendiéndolas como escritor, consultor y orador. Si bien Brad es técnicamente un desarrollador front-end, la línea entre desarrollador y diseñador de interacción es delgada, y su trabajo ha tenido un gran impacto en la comunidad de diseño de interacción, en parte debido a las herramientas y recursos que ha creado. Estos recursos incluyen This Is Responsive, Pattern Lab, Styleguides.io, WTF Mobile Web y Mobile Web Best Practices. Brad también acuñó la frase (y escribió el libro sobre) Diseño atómico.
Whitney Hess
La misión de la vida de Whitney Hess es volver a poner a la humanidad en el negocio. Whitney es copresentadora del podcast Designing Yourself, escribe en su blog Pleasure & Pain y habla en conferencias y corporaciones en todo el mundo. Tiene una maestría en interacción humano-computadora y una licenciatura en escritura profesional y HCI de la Universidad Carnegie Mellon, y en 2014 se convirtió en coach certificada a través de New Ventures West.
Kim Goodwin
Kim Goodwin es el autor del libro más vendido, Designing for the Digital Age. Actualmente, Kim está consultando a clientes en diversas industrias, incluidas la aviación, la electrónica de consumo y el comercio minorista. Pasó la mayor parte de la última década como Vicepresidenta, Diseño y Gerente General en Cooper, liderando una práctica integrada de diseñadores de interacción, visuales e industriales y el desarrollo del aclamado plan de estudios de diseño Cooper U. Su amplia experiencia y su pasión por la enseñanza han llevado a la popularidad de Kim como autora y oradora en conferencias y empresas de todo el mundo.
Brenda Laurel
Brenda Laurel ha sido parte de varias revoluciones importantes en la forma en que los humanos usan las computadoras: realidad virtual, narraciones interactivas y algunos enfoques nuevos para los juegos y la inteligencia artificial. Se desempeñó como presidenta fundadora y profesora en el Programa de Diseño de Graduados de la Facultad de Artes de California. Ha trabajado para Atari, cofundadora de la firma de desarrollo de juegos Purple Moon, y se desempeñó como consultora de diseño de interacción para múltiples compañías, incluidas Sony Pictures, Apple y Citibank.
Karen McGrane
Karen ha pasado más de quince años tratando de hacer de la web un lugar mejor a través de la usabilidad, el diseño de la experiencia del usuario y la estrategia de contenido. En 2006, fundó Bond Art + Science, una consultora UX que ha apoyado a compañías como The Atlantic, Fast Company, Franklin Templeton y Fidelity. Karen consulta sobre estrategia de contenido, experiencia del usuario y arquitectura de la información; y enseña administración de diseño en el programa MFA en Diseño de Interacción en la Escuela de Artes Visuales de Nueva York. Más allá de todo eso, Karen se desempeña como VP de Digital para la firma de capital de riesgo, Ignite Venture Partners, y escribió Estrategia de contenido para dispositivos móviles y con capacidad de respuesta a través de A Book Apart.
Mat Marquis
Mat Marquis es otro diseñador de interacción que difumina la línea entre diseñador y desarrolladores. Es el editor técnico de A List Apart, donde los artículos de diseñadores y desarrolladores para ayudar a educar a la comunidad del diseño. También ha hablado en varias conferencias de An Event Apart.
Preside el grupo comunitario Responsive Images, un grupo que busca soluciones para imágenes con un diseño receptivo.
También es un miembro activo de la comunidad de código abierto, ayudando a otros diseñadores a avanzar en su trabajo construyéndose uno al otro.
Mat estuvo recientemente en Bocoup, una firma de consultoría de plataforma web que construye o contribuye a proyectos de acceso abierto.
Mike Monteiro
Mike Monteiro es el cofundador de Mule, una agencia de diseño reconocida por explorar esos territorios oscuros donde la estrategia de contenido, la identidad en línea y la tecnología web de vanguardia con un diseño clásico y atemporal se mezclan.
Mike ha escrito dos libros, Design Is a Job, y You’re My Favourite Client, en los que le grita al mundo su amor por el trabajo duro, la autoconciencia y la importancia de un buen sastre.
Mike continúa dando charlas honestas y vanguardistas en conferencias y reuniones en todo el mundo, como «Esta es la Edad de Oro del Diseño (y estamos jodidos)».
Theresa Neil
Theresa Neil es una consultora de experiencia de usuario ubicada en Austin, Texas. Ha liderado el diseño de más de 100 aplicaciones web, de escritorio y móviles desde 2001. Los clientes incluyen una mezcla diversa de compañías Fortune 500, organizaciones sin fines de lucro y nuevas empresas locales de Austin. Es coautora de Designing Web Interfaces con el diseñador y desarrollador Bill Scott, y escribió Mobile Design Pattern Gallery para ayudar a los diseñadores con diseños de aplicaciones y teléfonos inteligentes. Su trabajo se puede ver en www.theresaneil.com.
Don Norman
Don Norman estudia cómo las personas reales interactúan con el diseño, explorando el abismo entre lo que un diseñador pretende y lo que realmente quiere una persona común. Su trabajo ha dado como resultado algunos libros clásicos, incluido The Design of Everyday Things, que generalmente se considera una piedra angular del canon de la experiencia del usuario.
Dan Saffer
Dan Saffer trabaja en Twitter en proyectos de diseño estratégico. Anteriormente fue director creativo de nuevos productos en Jawbone, donde diseñó productos y servicios de próxima generación para dispositivos portátiles y productos electrónicos de consumo.
Dan ha escrito muchos libros sobre diseño, incluyendo Diseño de dispositivos, Diseño para la interacción y Diseño de interfaces gestuales. Su último libro, Microinteractions, fue publicado en 2013.
Brenda Sanderson
Brenda Sanderson es directora ejecutiva de los más de 50,000 miembros de IxDA, la red global dedicada a la práctica profesional del diseño de interacción. Más de 15 años como diseñadora en ejercicio llevó a Brenda a través de estudios de diseño, imprentas, periódicos diarios, editoriales y la industria publicitaria. Ha sido reconocida a nivel nacional por su trabajo de diseño y por su escritura sobre el impacto de la tecnología en el campo creativo.
Bill Scott
Bill Scott ayudó a crear Yahoo! Design Pattern Library en 2006. Su trabajo en la biblioteca de patrones ha impactado a los diseñadores de todo el mundo desde entonces. Bill es diseñador y desarrollador, y su trabajo ha incluido la creación de una biblioteca de gráficos en 3D, interfaces de juegos de guerra para la OTAN y muchos proyectos de código abierto. Es coautor del diseño de interfaces web con Theresa Neil, y es un orador frecuente en conferencias.
Accede a la plantilla gratuita de control de presupuesto en los proyectos
Subscríbete a la newsletter y accede gratuitamente a la visualización y resto de material de los episodios exclusivo para los miembros de la comunidad Lecciones UI para Creativos.
¿Eres de los que prefieren leer?
Transcripción del podcast por si lo tuyo es leer a tu rollo con una buena taza de te/café/mate...
Todos aprendimos hace tanto a utilizar el ratón del ordenador que la mayoría ni se acuerda de ese momento.
Yo sí recuerdo el proceso completo. Empezó el día que mi padre me enseñó un mac en su trabajo. No sé el modelo, pero debía ser un Macintosh II o Classic.
Aluciné con los cuadrados a los que mi padre llamaba ventanas, el ratón que movía encima de la mesa y se movía automáticamente en la pantalla… Lo viví como algo alucinante, alta tecnología, y casi mágico.
Pocos años después llegó un Mac a nuestra casa también. Con un juego que venía de serie interioricé durante horas cómo funcionaba el sistema y el ratón.
Pero no podemos pedir a nuestros usuarios que dediquen todo ese tiempo a aprender los productos digitales que diseñamos.
La gran mayoría de personas de nuestra sociedad visitan y utilizan webs y apps a diario. Sienten que ya saben, y no van a dedicar tiempo como yo hice a jugar con tu producto digital para entenderlo.
Ahora nos toca a los diseñadores avanzarnos aplicando el diseño de interacción. La semana pasada te lo presenté. Esta semana vamos a ver cómo llevarlo a la práctica.
¿Empezamos?
En el episodio anterior hablamos sobre:
- qué es el diseño de interacción (IxD
- su relación con el diseño de interfaz y con la experiencia de usuario
- las 5 áreas que conciernen al diseño de interacción.
Como bien recordaréis si lo habéis podido escuchar, hacia el final del episodio os comenté que el siguiente paso sería ver cómo llevar a la práctica el diseño de interacción. Así que, como lo prometido es deuda, hoy vamos a tratar cómo aplicar el diseño de interacción en nuestros diseños.
El episodio de hoy se divide en 2 partes:
- Las 5 metodologías para aplicar el diseño de interacción.
- Tareas y entregables deberías realizar y obtener respectivamente con el diseño de interacción.
Por cierto, normalmente para crear los contenidos para este podcast leo libros y artículos por internet. En este caso, el contenido de hoy está principalmente basado en un artículo en concreto que encontré sobre el tema súper interesante por su enfoque.
Es un artículo con una mirada muy práctica de cómo aplicar el IxD y con qué. El artículo es en inglés pero por si queréis leerlo os dejo el enlace aquí.
Cómo aplicar el Diseño de Interacción
Existen diferentes metodologías para llevar a cabo el diseño de interacción. Sin embargo, aquí os presento una selección de 5 altamente extendidas.
Diseño orientado a objetos
Esta metodología de diseño se centra en sastisfacer las necesidades y deseos del usuario final. Esto hoy en día puede parecer muy obvio, pero no siempre ha sido así. Hace unos años la tecnología no era como la de ahora, así que el diseño se centraba en sus capacidades en vez de en el usuario.
Tiene su lógica que fuera así. Tú podías soñar diseños que permitieran birguerías, pero luego te tocaba sentarte con el equipo técnico y recibir muchos “noes” a todo lo que proponías. Así que los diseños se habían centrado a menudo en la filosofía “Dime qué se puede hacer y qué no, y ya veo yo qué puedo diseñar en ese escenario”. De esta manera, la tecnología tomaba un papel relevante por delante del usuario final.
Por suerte, la tecnología ha avanzado mucho y sigue haciéndolo, de manera que los diseñadores cada vez somos más libres a la hora de diseñar y los programadores nos encontramos que es viable a un coste razonable implemenar los diseños resultantes.
Uno de los grandes influyentes en el diseño de interacción es Alan Cooper, quien popularizó el diseño orientado a objetivos en su libro The Inmates Are Running the Asylum: Why High-Tech Products Drive Us Crazy and How to Restore the Sanity, publicado en 1999.
Principios del diseño de interacción (IxD) de Alan Cooper
Según Alan, el proceso involucrado en el diseño dirigido por objetivos tiene los siguientes 5 principios que debemos considerar:
- Diseña primero; Programa después: Viene ligado con lo que os comentaba hace un momento. Empieza por las consideraciones del usuario, y piensa luego en las tecnológicas.
- Separa la responsabilidad del diseño de la responsabilidad de la programación: se trata de separar claramente ambos trabajos para que el diseñador se centre en el usuario. Según Cooper, el diseñador no debe verse vinculado en la parte de programación para que no acabe tomando decisiones dirigidas por sus conocimientos técnicos y de la limitación de tecnología, en vez de por las consideraciones hacia el usuario final.
- Mantén a los diseñadores como responsables de la calidad del producto y de la satisfacción del usuario: El diseñador debe mantener su responsabilidad hacia el usuario final.
- Define un usuario específico para tu producto.
- Trabaja en equipos de 2: En este principio Alan Cooper consideraba que el diseñador debía trabajar con un copywriter que proporcionara el copy de marketing para el producto. Hoy en día este principio se expande a que el diseñador debería trabajar con el copywriter, además de con el project manager, content strategist, arquitecto de información, etc.
Aunque cumplir este principio y trabajar en equipo con todos estos profesionales no es sencillo en proyectos pequeños, de bajo presupuesto o para los diseñadores freelancers que trabajan solos sin equipo.
2. La usabilidad
En este caso se trata de preguntarnos “¿El usuario objetivo podrá utilizar esta web/app fácilmente?
En realidad la usabilidad es un campo muy basto al que podríamos dedicar un podcast aparte completo. Pero existen ciertos temas comunes y matices a los que podemos echar un rápido vistazo aquí y que nos ayudarán en el diseño de interacción.
En el libro Human Computer Interaction de Alan Dix, Janet E. Finlay, Gregory D. Abowd, Russell Beale, la usabilidad se divide en tres principios:
- Capacidad de aprendizaje: la facilidad con la un nuevo usuario aprende a navegar por la interfaz.
- Flexibilidad: Permitir al usuario diferentes maneras de interactuar con el sistema,
- Robustez: el apoyo y asistencia al usuario en caso de error en el sistema.
Otro punto de vista es el de Nielsen y Schneiderman. Para ellos la usabilidad se compone de cinco principios:
- Capacidad de aprendizaje: la facilidad con la un nuevo usuario aprende a navegar por la interfaz.
- Eficiencia: la rapidez con la que los usuarios pueden realizar tareas.
- Memorabilidad: cómo de bien podrá recordar un usuario el sistema cuando vuelva después de no visitarlo durante un tiempo.
- Errores: qué errores pueden cometer los usuarios y cómo de rápido puede el usuario y el sistema recuperarse de un error.
- Satisfacción: se trata de considerar si los usuarios disfrutan a usar la interfaz y si quedan satisfechos con los resultados obtenidos al interactuar con ella.
Si estas dos maneras de abordar la usabilidad no te convencen, puedes echar un vistazo a los 5 principios definidos por la norma internacional (ISO 9241):
- Capacidad de aprendizaje: la facilidad con la un nuevo usuario aprende a navegar por la interfaz.
- Comprensión: el grado de entendimiento que tiene el usuario de la interfaz o sistema al verlo.
- Operatividad: el control que tiene el usuario dentro de la interfaz
- Atractivo: cómo es de atractiva la interfaz para el usuario.
- Cumplimiento de usabilidad: cumplimiento de estándares y prácticas habituales en el diseño de la interfaz a las que el usuarios está acostumbrado.
Como has podido ver hay puntos comunes: la capacidad de aprendizaje, la consideración ante situación de error, etc.
En cualquier caso, considerar la usabilidad será necesario para crear el diseño interactivo que permita al usuario final y al producto digital hablar el mismo idioma para así entenderse.
3. Las 5 dimensiones
A menudo se da el error de creer que el diseñador de interacción es sólo diseñador que realiza las animaciones de User Interface (UI).
Sin embargo, estas animaciones son sólo una de las cinco dimensiones del DxI. Sin embargo necesitamos las 5 para generar la comunicación entre usuario y pantalla.
1. Palabras y textos
Dado que el diseño de interacción es el diálogo entre el producto digital y el usuario, los textos y las palabras tendrán un papel muy relevante.
Para simplificar y facilitar la interacción de usuario, será fundamental utilizar la palabra correcta en el lugar correcto. Entederemos como palabra correca:
El término es familiar y fácil de entender para los usuarios.
El término transmite a su vez su rol y propósito, es decir, que comunique fácilmente.
2. Representaciones visuales
En esta categoria entra el diseño de todos aquellos elementos visuales que no sean textos y que ayudan en la interacción entre usuario y producto.
Nos referimos pues a todos los gráficos, imágenes, iconografía, etc.
En algunos casos, las representaciones visuales pueden ser más poderosas que el texto. Por ejemplo, ciertos iconos como por ejemplo el de búsqueda, son tan familiares para los usuarios que incluso sin texto que lo acompañe, el usuario sabe el propósito del icono.
Un punto a recordar aquí es que los elementos visuales pueden mejorar el diseño para hacerlo más atractivo. También pueden ayudar a comprender mejor la información, y así mejorar la usabilidad también. Pero atención, debemos usarlos con criterio y moderación, para no abrumar al usuario final.
3. Objetos físicos
En esta dimensión se encuentra el medio a través del cual el usuario interactúa con el producto. Es decir, se trata del objeto físico: el dispositivo móvil con el que interactúa el usuario, el ratón del ordenador, o el teclado, etc.
Como ya hemos hablado en episodios anteriores, es crucial considerar el dispositivo a través del cual se conectará el usuario, y diseñar el producto o adaptar el diseño de los elementos para mantener el buen nivel de comunicación con el usuario.
Por ejemplo, el comportamiento de hover no existe en las pantallas táctiles. Para este tipo de pantallas deberemos adaptar el efecto hover utilizando otra opción para indicar al usuario que el elemento es clicable.
4. Tiempo
Esta dimensión se refiere al tiempo que pasa el usuario interactuando con las 3 primeras dimensiones. Incluye las formas en las que el usuario puede medir el progreso, así como el sonido y la animación.
Por tanto, esta dimensión nos viene a decir que para conseguir una mejor conversación con el usuario, podemos utilizar animaciones, vídeos, sonidos, etc.
Todos estos elementos nos pueden ayudar a animar al usuario a interaccionar con el producto digital de una forma emocionante. Ahora bien, nunca debemos hacer esperar demasiado al usuario hasta esperando a que acaben las animaciones.
5. Comportamiento
Esta dimensión del diseño de interacción incluye las emociones y reacciones que tiene el usuario cuando interactúa con el sistema.
4. La psicología cognitiva
La psicología cognitiva es el estudio de cómo funciona la mente y qué procesos mentales tienen lugar allí. Según la Asociación Americana de Psicología, estos procesos incluyen «atención, uso del lenguaje, memoria, percepción, resolución de problemas, creatividad y pensamiento».
De todos los elementos claves de la psicología cognitiva para el diseño de interacción, algunos son especialmente valorados. Precisamente, de muchos de ellos habla Donald Norman en su libro “The Design of Everyday things”. Veamos 3 de ellos:
- Los modelos mentales: son un mecanismo del pensamiento que los usuarios utilizan para crear una representación de un sistema de interacción como una web o una app.
Esta representación está basada en creencias de los usuarios y que han adquirido anteriormente ante otros sistemas interactivos. Por lo tanto, las creencias que van adquiriendo ante una web o app se mantienen para las siguientes con las que interaccione.
Por tanto, ante una nueva web o app, el usuario planeará las acciones a hacer basándose en los modelos metnales creados a partir de experiencias anteriores.
Como diseñador es pues fundamental conocer y entender estos modelos mentales bien para crear sistemas interactivos intuitivos para los usuarios. Para ello es importante entender que los usuarios esperan que la funcionalidad sea consistenten con sus experiencias previas y que allá donde exista un patrón estándar de UI, lo más recomendable es seguirlo. - Las metáforas de interfaz: se trata de hacer uso de acciones o elementos conocidos por los usuarios para llevarles a nuevas acciones. Por ejemplo, el icono de la papelera se suele parecer a una papelera física en muchos sistemas operativos e interfaces para avisar al usuario sobre la acción esperada.
- Affordances: Donald Norman definió la affordance en un sistema de interacción como «Aquellas características perceptibles del objeto que le confieren un aspecto intuitivo a la hora de saber como usarlo».
Por tanto, se trata de diseñar para que los elementos diseñados se vean como que están diseñados para hacer algo. Por ejemplo, un botón que se parece a un botón físico con sombra como si estuviera elevado se parece a un objeto físico que se puede presionar.
De esta manera, un usuario que utilizar por primera vez la interfaz que has diseñado y que no está familiarizado aún con el botón, entiende igualmente cómo debe interactuar con él.
5. Guías de interfaz de usuario
No existen unas únicas guías de interfaz de usuario estandarizadas. Sin embargo, diferentes empresas de tecnología como Apple, Android, Java y Windows han creado sus directrices o guías de estilo considerando buenas prácticas y recomendaciones de diseño.
Todas ellas ayudan tanto a los diseñadores como a los desarrolladores a crear interfaces y programas más intuitivos y usables. Lo hacen a través de consejos y recomendaciones.
En este mismo podcast hemos hablado sobre las guías de estilo de Apple y aún con más detalle de Material Design. Si quieres escucharlo, puedes escucharlo de nuevo enlos episodios:
- Episodio 16 – 5 diferencias clave entre diseño iOS y diseño Android
- Episodio 20 – Inmersión en Material Design _Parte 1
- Episodio 21 – Inmersión en Material Design _Parte 2
2. Tareas y entregables del diseño de interacción
A lo largo de tu trabajo como diseñador vas creando materiales (esbozos, wireframes, mockups, etc) durante el proceso de diseño.
Entremos ahora en la segunda parte del programa de hoy para ver qué archivos o entregables deberías obtener al realizar el diseño de interacción.
Estrategia de diseño
La estrategia de diseño permite tener a los miembros del equipo de diseño una comprensión común de las interacciones que serán necesarias para facilitar los objetivos del usuario.
Tu tarea aquí como diseñador de interacción será la de evaluar los objetivos del usuario y desarrollar esa estrategia de diseño, ya sea sólo o con los otros diseñadores del equipo.
Atención, descubrir quién es el usuario final y cuáles son sus objetivos no es tarea propiamente del diseñador de interacción. Esta información debería proporcionarla un investigador de usuarios o user researcher.
Wireframes de interacciones clave
Una vez la estrategia de diseño está clara, ya puedes empezar a esbozar las interfaces (pantallas, página, etc) que facilitarán las interacciones establecidas en la estrategia.
Para realizar o compartir los wireframes puedes utilizar herramientas como Sketch, Invision o Zeplin.
Prototipos
Sin entrar en detalle en esta parte, sólo decir que según el proyecto, el diseño de interacción podría necesitar la creación de prototipos.
Para crear los prototipos puedes utilizar InVision, Prototype, etc. Aunque también hay quien hace prototipos en html/css, o incluso en papel.
Estar al día
Como diseñador de interacción es conveniente que explores a menudo la web en busca de nuevas interacciones que aprovechan las nuevas tecnologías.
Para ello es muy recomendable considerar que la interacción o tecnología correcta será aquella que mejor satisface las necesidades de la persona. Así que cuidado con dejarse cegar por la más nueva o la que te parezca más emocionante.
Una buena manera de mantenerte al día es seguir a diseñadores notables en Twitter. En el post de esta semana os dejo una lista de los diseñadores que os puede interesar seguir en este sentido. En a sección podréis encontrar más información al respecto.
Libros recomendados
Si te interesa aprender más sobre el diseño de interacción, en la sección de Libros de este mismo artículo encontrarás unas lista de libros recomendados.
Como siempre, si te interesa alguno de estos libros y lo adquieres a través del enlace de mi web, estarás ayudando a este podcast con una pequeña aportación sin que a ti te cueste ni un céntimo de más el libro. Así que si lo haces, muchísimas gracias!
