Cómo llegar a ser un diseñador UX | UI
En primer lugar, ¿Qué significan estas siglas?
Para aclararnos, recurramos a la wikipedia:
UX
« La User Experience, o experiencia de usuario, es el conjunto de factores y elementos relativos a la interacción del usuario, con un entorno o dispositivo concretos, cuyo resultado es la generación de una percepción positiva o negativa de dicho servicio, producto o dispositivo.
Ésta depende no sólo de los factores relativos al diseño (hardware, software, usabilidad, diseño de interacción, accesibilidad, diseño gráfico y visual, calidad de los contenidos, buscabilidad o encontrabilidad, utilidad, etc) sino además de aspectos relativos a las emociones, sentimientos, construcción y transmisión de la marca, confiabilidad del producto, etc.
La experiencia de usuario como disciplina se aplica tradicionalmente a los sistemas informáticos y en particular al diseño de páginas web, pero hoy se ve ampliada a otros campos, ya que tomados como una «experiencia» casi cualquier producto o servicio, éstos comienzan a «diseñarse» buscando la máxima satisfacción del consumidor ahora visto como un «usuario» que transita tales experiencias. »
Resulta muy instructivo, para empezar a obtener una visión sintética y panorámica de la experiencia de usuario, leer al completo esta primera fuente citada: https://es.wikipedia.org/wiki/Experiencia_de_usuario
UI
« La User Interface, o interfaz de usuario, es el espacio donde se producen las interacciones entre seres humanos y máquinas. El objetivo de esta interacción es permitir el funcionamiento y control más efectivo de la máquina desde la interacción con el humano.
Las interfaces básicas de usuario son aquellas que incluyen elementos como menús, ventanas, contenido gráfico, cursor, los beeps y algunos otros sonidos que la computadora hace, y en general, todos aquellos canales por los cuales se permite la comunicación entre el ser humano y la computadora.
El objetivo del diseño de una interfaz es producir una interfaz que sea fácil de usar (explicarse por sí misma), eficiente y agradable para que al operar la máquina dé el resultado deseado.
Las funciones principales son las siguientes:
- Puesta en marcha y apagado.
- Control de las funciones manipulables del equipo.
- Manipulación de archivos y directorios.
- Herramientas de desarrollo de aplicaciones.
- Comunicación con otros sistemas.
- Información de estado.
- Configuración de la propia interfaz y entorno.
- Intercambio de datos entre aplicaciones.
- Control de acceso.
- Sistema de ayuda interactivo. »
Asimismo, recomiendo leer el artículo de la wiki al completo: https://es.wikipedia.org/wiki/Interfaz_de_usuario
Para los que se estén iniciando, o sientan vocación por hacerlo, recomiendo encarecidamente el artículo en LinkedIn de Lindsay Norman How to become a UX/UI designer when you know nothing (Cómo llegar a ser un diseñador UX/UI cuando no sabes nada)
Está en inglés, pero –para quien no se maneje en este idioma–, ¿Para qué tenemos el traductor de Google?
Me tomo la libertad de extractar, de dicho artículo, múltiples enlaces interesantes que recomienda esta diseñadora de producto de Pinterest:
- https://whitneyhess.com/blog/2009/06/30/so-you-wanna-be-a-user-experience-designer-step-1-resources – Whitney Hess
- https://medium.com/search?q=UX
- https://medium.com/search?q=UI
- https://blog.pttrns.com (100 libros sobre diseño) – Robin Raszka
- https://www.youtube.com/watch?v=isYZXwaP3Q4 – Vídeo «Google I/O 2014 – Material design principles»
- https://dribbble.com – Trabajos de diseñadores
- http://www.awwwards.com
- http://sidebar.io
- RECURSOS PARA PHOTOSHOP, ILLUSTRATOR, SKETCH (Sketch sólo para Mac): https://design.tutsplus.com (de pago, envato), https://www.lynda.com (de pago), https://www.skillshare.com (también de pago)
Para diseñadores UI, es muy recomendable la lectura de «How to Hire a Great User Interface (UI) Designer«, en https://www.toptal.com/designers/ui#hiring-guide.
Y a estos enlaces me permito añadir un portal de ebooks (muchos gratuitos) y un segundo con miles de recursos a precio de saldo (muchos asimismo gratuitos):
- http://www.creativebloq.com/design/free-ebooks-designers-7133700 – 21 free ebooks for designers – By Sam Hampton-Smith
- https://www.inkydeals.com – thousands of resources, multiples freebies
He aquí también un extracto muy interesante de la Wikipedia en la entrada Diseño web:
« La usabilidad web (UX o user experience, en inglés) es el grado de facilidad de uso que tiene una página web para los usuarios que acceden e interactúan con ella. Jacob Nielsen está considerado el padre de la usabilidad y, en 2000 lanzó al mercado el libro Designing Web Usability: The Practice of Simplicity (1999), donde expone los 10 principios que deben regir la usabilidad de cualquier web.
Estos principios son:
- Visibilidad del estado del sistema. El sistema, es decir la web o aplicación, siempre debe mantener en todo momento a los usuarios informados sobre lo que está sucediendo, a través de mensajes en tiempo y forma.
- Coincidencia entre el sistema y el mundo real. El sistema debe hablar el idioma de los usuarios, con palabras, frases y conceptos familiares para el usuario y no con términos técnicos.
- Control y libertad del usuario. Dar la posibilidad a los usuarios a corregir sus errores en la navegación por la página web.
- Consistencia y estándares. Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo. Uno de los grandes retos como diseñadores es saber usar de forma habitual las convenciones o recursos habituales de las páginas web.
- Prevención de errores. Incluso mejor que los buenos mensajes de error es un diseño cuidadoso que evita que nos equivoquemos. Un buen diseño web debe eliminar las condiciones propensas a errores.
- Reconocimiento en lugar de recuerdo. Debemos minimizar en lo posible que el usuario haya de recordar de que ha hecho previamente haciendo visibles los objetos, las acciones y las opciones.
- Flexibilidad y eficiencia de uso. Los aceleradores, que no son vistos por el usuario novato, a menudo pueden acelerar la interacción para el usuario experto, de modo que el sistema puede atender tanto a usuarios inexpertos como experimentados.
- Diseño estético y minimalista. En diseño web menos es más. Debemos mostrar la información estrictamente necesaria para que el usuario no se pierda o marche. Debemos conducirlo por donde nos interesa.
- Ayudar a los usuarios a reconocer, diagnosticar y recuperarse de errores.
- Ayuda y documentación. Aunque es mejor si el sistema se puede utilizar sin documentación, puede ser necesario proporcionar ayuda y documentación.
Johnson (2010) recapitula en la introducción de su libro Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules algunos de los intentos que se han realizado a lo largo de la historia contemporánea para establecer reglas que guíen el diseño de interfaces de usuario aplicado a sistemas computacionales interactivos:
- Cheriton (1976) propuso pautas de diseño de interfaz de usuario para los primeros sistemas informáticos interactivos (de tiempo compartido).
- Norman (1983a, 1983b) presentó reglas de diseño para interfaces de usuario de software basadas en la cognición humana, incluidos los errores cognitivos.
- Smith y Mosier (1986) escribieron quizás el conjunto más completo de pautas de diseño de interfaz de usuario.
- Shneiderman (1987) incluyó «Ocho reglas de oro del diseño de interfaz» en la primera edición de su libro Designing the User Interface y en todas las ediciones posteriores.
- Brown (1988) escribió un libro de directrices de diseño, titulado Human-Computer Interface Design Guidelines.
- Nielsen y Molich (1990) ofrecieron un conjunto de reglas de diseño para su uso en la evaluación heurística de interfaces de usuario.
- Marcus (1991) presentó directrices para el diseño gráfico en documentos en línea e interfaces de usuario.
Por otra parte, Garrett (2011) explica en su libro The Elements of User Experience: User-centered Design for the Web que la implementación de principios de experiencia de usuario al diseño de sitios web, ya sean productos orientados a contenidos o aplicaciones interactivas, es particularmente importante debido a su naturaleza de auto-servicio; es decir, que no cuentan con un «manual de instrucciones» o una «plataforma de servicio al cliente» dirigida específicamente al aprendizaje de la navegación e interacción de los usuarios con los contenidos desplegados, sino que dichas acciones se llevan a cabo de forma individual e intuitiva. Mientras más complicada sea la interfaz de cualquier sitio web, más dificultades tendrán sus visitantes para navegar en ella, y como consecuencia, en palabras de Garrett, se sentirán «incompetentes, estúpidos, culpables». El autor también establece que, si bien los usuarios no tienen la culpa de cómo esté configurada una página en línea, esa sensación que les cause interactuar con ella será la que determine si volverían a visitar ese sitio en el futuro, y por lo tanto, su éxito como producto digital.
El libro divide la construcción de la experiencia de usuario de un sitio web en cinco grandes capas:
- Superficie: Conformada por elementos gráficos, como textos, fotografías e ilustraciones. Pueden contener vínculos a otras partes dentro del mismo sitio web.
- Esqueleto: Es la posición establecida a los botones, controles, imágenes y bloques de texto dentro del espacio que ocupa la página en una pantalla. Está diseñado para optimizar la disposición de estos elementos y así lograr la máxima eficiencia al navegar en la web.
- Estructura: Es el despliegue conceptual de todas las funcionalidades incluidas en una página web, y los contenidos que se quieren mostrar tras efectuar acciones concretas. Puede visualizarse como una ramificación que contempla la unión de todos los elementos de un sitio con una operación específica (por dar algunos ejemplos, la redirección a una subpágina, apertura de una nueva ventana, reproducción de vídeo o audio, etcétera).
- Alcance: Es la definición de cuáles contenidos y funcionalidades se desean incorporar en una página. Se determinan, entre otros factores, dependiendo del propósito que se persigue con la creación del sitio web, y el tipo de usuarios a los que se desea llegar.
- Estrategia: Incluye no sólo lo que las personas que administran un sitio quieren obtener de él, sino también lo que los usuarios quieren obtener de su visita a la página web. En otras palabras, es la determinación de los objetivos que se quieren perseguir y los potenciales usuarios a los que se desean llegar por medio del diseño e implementación de un sitio en línea.
Si bien el funcionamiento correcto de las capas superiores depende en gran medida del planteamiento conceptual de las capas inferiores, su orden al momento de trabajar en ellas no es forzosamente lineal; muchas fallas detectadas en sitios ya terminados, según argumenta Garrett, se han dado por incoherencias entre el planteamiento inicial de la página y el producto final. Para evitar contratiempos, y que los gastos de producción superen al presupuesto contemplado al principio de cada proyecto, él recomienda no avanzar hacia el desarrollo de las capas superiores hasta haber terminado completamente de trabajar en las capas inferiores. »
Por último, un enlace muy útil para comenzar a trabajar con diferentes herramientas de prototipado: https://www.iebschool.com/blog/herramientas-prototipado-analitica-usabilidad
En fin; creo que, como punto de partida, hay aquí material para media vida –o más– de estudio y aprendizaje.
Saludos cordiales,
Ignacio Iglesias
