UX/UI DESIGN: Mellizos o Gemelos?
Hablemos un poco sobre la experiencia(UX) y la interfaz de usuario(UI).
En el mundo moderno de la computación no hay un solo desarrollador web, sea del mundo de JavaScript, Python con Django, o de .NET CORE que no haya escuchado más de alguna vez del concepto de UX/UI Design, o en palabras simples y menos hipster, sobre el diseño de la interfaz y experiencia de usuario(UX/UI). Veremos brevemente en qué consisten cada uno de ellos y también que diferencias encontramos entre ambos.
Para verlo de manera sencilla, la experiencia de usuario es el diseño orientado y enfocado en el confort del usuario final. Nuestro diseño tiene que enfocarse en ser por y para el usuario basándonos en que su experiencia al usar nuestra aplicación definitivamente sea de lo más agradable y fluida en todo tiempo.
Hay una serie de procesos y pasos que se tienen que hacer para lograr esto, entre ellos están el entender quien será el usuario final, cuales son sus tareas a realizar, que areas el va a poder acceder, como sera la parte organizativa y en que orden jerárquico dicho usuario se va a encontrar para la organización y jerarquía de los contenidos y los puntos en los que el como usuario es clave a la hora de resolver un problema o cuando debería tomar una decisión crucial.
Eso significa que al aplicar los conceptos de UX una vez que comenzamos los diseños se debe procurar comprender las necesidades no solo del software sino que también lo que espera el consumidor final del mismo que sin duda alguna es tener una buena experiencia de usuario al usar nuestra aplicación.
¿Entonces dónde queda en todo esto la interfaz de usuario? Bueno, para comenzar la UI es la parte visual, la interfaz gráfica que verá el usuario de nuestra aplicación. Para una buena practica de desarrollo, diseñaremos nuestra UI teniendo en cuenta todo lo que aprendimos y compilamos en ideas concisas y precisas durante el proceso de desarrollo de la UX.
Se debe destacar el hecho de tener siempre en cuenta que debemos respetar la identidad corporativa de la marca de la aplicación, adaptándonos a sus estilos pero sin perder el enfoque de que la interfaz de usuario es una herramienta poderosa para lograr que haya una buena funcionalidad y experiencia de usuario que al final de cuentas es el objetivo principal de todo este proceso.
¿Y eso de la UI cómo se ve en la aplicación? La interfaz de usuario (UI) son todos esos conjuntos de botones, text-fields, drop-downs, radio buttons, checkboxes, y cómo se ven distribuidos en la pantalla, y la experiencia de usuario (UX) serían todos los elementos antes mencionados y la funcionalidad o las acciones que estos tendrán que realizar en nuestra aplicación web.
Tanto el UX como el UI deben de ir de la mano, imagínese usted una pantalla de login donde encontrásemos un botón muy bien diseñado, con relieve, sombra y demás (UI) pero que al posicionarse sobre el no cambiara el cursor o si al hacer clic no nos lleva a ningún sitio (UX). Entonces para el usuario final el botón tipo 3D le va a parecer buenísimo por tener una estética bien nítida, o sea un buen diseño UI, pero al interactuar se quedaría con una mala sensación ya que no habría un buen diseño UX que permita una mejor experiencia.
En nuestro diario vivir es muy frecuente escuchar profesionales del desarrollo trabucarse con estos temas y seguir creyendo que UX y UI son la misma cosa o sea una especie de Gemelos pero, como hemos venido aprendiendo, aun cuando tienen demasiado en común, ambos son diferentes(Mellizos).
No obstante, lo que si podemos asegurar que siempre van de la mano, ya que nos hemos encontrarnos con aplicaciones con excelentes diseños pero que no tienen una buena organización en la parte funcional e interactiva como debería ser con una buena aplicación de las prácticas para el diseño de UX.
Cabe mencionar que para algunas empresas se les hace un poco complicado entender la importancia de la inversión en el UX design y les toma cierto tiempo ver todos sus beneficios. Esto ha creado la tendencia a creer que una buena estrategia de diseño de experiencia de usuario no es lo más importante para cualquier proyecto web, sino algo extra que se podría considerar si sobra presupuesto. Sin embargo, en un mercado competitivo como el actual, tener una experiencia de usuario única hace una monumental diferencia.
En lo personal he visto un patrón repetitivo en la mayoría de las empresas y les puedo asegurar sin temor a equivocarme que un error bien común es tener un diseñador gráfico como parte del equipo de desarrollo que no tiene ni la mas remota idea de los conceptos de UX/UI y por ende sus diseños serán un caos en el cual involucrara muchas características que aunque visualmente serán llamativas estas simplemente no serán programable o que llevarían demasiado tiempo invertido para lograr algo similar a lo planteado en ellos.
Esto no significa que tener un diseñador gráfico en el equipo sea malo, al contrario es super util, sin embargo, la base fundamental de todo el concepto del UX/UI design radica en no solo saber arrastrar los elementos al canvas de Adobe XD, Balsamiq o Framer X y tirarlos al azar sobre ésta para se acomoden y se vean bonitos, sino mas bien saber el porqué se pondrían de alguna manera especifica, tomando en cuenta el papel que jugarían, cual sería su utilidad más factible en esa area, que tipo de control o elemento web seria el mejor para la mejor funcionalidad de la aplicación, que beneficios trae para el usuario al usarla y para el programador al momento de implementar su operatividad a nivel de codificación, ver cual elemento es el más adecuado para dicha marcha en fin son varios factores desde lo que es el material concepts, UI design principles, motion and UI logic, UX design patterns, device metrics, UX fundamentals paths, typography and imagery, data design, content design, UX visual information y accessibility entre otros que hay que tomar en cuenta al implementar la experiencia e interfaz de usuario(UX/UI).
El simple hecho de carecer o no aplicar algunos de los conceptos como los mencionados, conlleva al hecho de no poder crear prototipos y hacer wireframes correctamente sino de manera totalmente desorganizada y desordenada y en casos extremos, sin tener idea de como se debe hacer esto.
Seria irrisorio aseverar que no vale la pena invertir en el diseño de la UX y de la UI. Tener una mala experiencia de usuario cuando estás navegando por una web o aplicación, de hecho, puede tener como consecuencia costes más altos para el equipo de desarrollo y consecuentemente para el cliente al cual le lloverá una mayor necesidad de atención al cliente en soporte técnico o una gran cantidad de datos erróneos que se reciban a través de formularios.
Esto implica para nuestros clientes el menester de un mayor contacto con el cliente y en casos extremos el problema de mala imagen corporativa de su empresa debido a las valoraciones y comentarios negativos en la red sobre la marca, llevando esto a tener un impacto negativo en la reputación online para ellos y un cliente no satisfecho con nuestras destrezas de desarrollo.
Una buena estrategia de UX ejecutada y desplegada antes de programar puede compensar todos estos problemas potenciales y por supuesto esto conlleva a dejar bien posicionado al equipo de desarrolladores.
Personalmente, he tenido el enorme privilegio de haber trabajado como Desktop apps Developer y pasado un tiempo labore primero como web and graphic designer y posteriormente como media editor para luego volver al desarrollo esta vez principalmente con frameworks y librerías de JavaScript como AngularJS, VueJs y ReactJs, lo cual me ha permitido ver ambos mundos de frente y aprovechar al máximo su potencial como carrera para aprender a diario de ambos lados.
Al comenzar mi camino por el desarrollo web, decidí profundizar mucho más sobre UX/UI Design, y por ende aprender más de sus conceptos y principios. El ser desarrollador me dio una ventaja de ver como resolver algo con código y el ser diseñador me dio ideas de como plasmarlo de la forma mas simple y efectiva en la pantalla a través de los conceptos
Hoy puedo decirles que la experiencia ha sido no solamente increíble sino enriquecedora, ha valido demasiado la pena y me ha potenciado el trabajo en materia de diseño adecuado a la necesidad nata de la aplicación, el posicionamiento correcto de elementos en el canvas, el uso correcto de patrones de color, aplicar patrones para un diseño de interacción efectivo, incluir la simplicidad y alineamiento al concepto de Happy Path permitiendo las condiciones en la funcionalidad con UX y en la interacción adecuada con UI, verificando a su vez que la operación requerida esté en su lugar y funcione correctamente y si no es así, comprobar si existen alternativas válidas para dicha funcionalidad y plasmar dichos conceptos en el diseño que se crea para que los desarrolladores no encuentren obstáculos a la hora de la implementación de todas estas ideas en el código de nuestra aplicación.
En fin, no es que yo me las sé todas en este campo, estoy lejos de saberlo todo porque el ser humano nunca termina de aprender pero el hablar de este tema desencadenaría toda una serie de artículos que tendríamos que escribir si entramos a detalles con respecto a este maravilloso mundo de UX/UI pero este post en específico no se trata de eso, sino más bien de la causa y efecto de carecer de esto en los equipos de desarrollo modernos y entender un poco sobre la experiencia(UX) y interfaz de usuario(UI) en el web Development.
Como profesionales debemos fomentar la integración paulatina o de ser posible inmediata de expertos en UX/UI a los equipos de desarrollo ya que al hacer esto aumentara la eficiencia en la productividad de nuestros equipos de desarrollo.
Herramientas de Diseño para Desarrolladores
Deseo compartir un pequeño RoadMap de lo que podrían hacer para ir entrando en este maravilloso mundo de la experiencia e interfaz de Usuario. He dividido esto en categorías para que vayan uno a uno estudiando todos los conceptos ahi descritos y verán que poco a poco todo se torna más legible.
Primeros pasos para el diseño de UX / UI:
Diseños Limpios — Clean designs
Design Principles |AI UX Design Principles | Motion and UI Design Ideas | iOS UI design patterns |Best world’s awarded Websites |High Resolution Design Concepts |CollectUI | Dribbble | ArtStation
Herramientas de Diseño para Wireframing & Prototyping
Balsamiq | Adobe XD | Sketch |Figma | Framer
Herramientas para User testing
Herramientas para Animación
Herramientas para Diseño — Íconos & Ilustración
Material Design Icons |Brand Icons|Undraw
Recursos para Paletas de Colores
Color Hunt | Webgradients | Scheme Colors | Brand Colors |ColorSwatches
Recursos para Imágenes Gratuitas
Pexel |Pixabay |Unsplash |PicJumbo|FoodiesFeed|Kaboompics | Stocksnap.io | Isorepublic | Skitterphoto | Reshot | Picography | Focastock |Gratisography | FreePix
Recursos para trabajar con Imágenes
Recursos para Letras [ Fonts Resources ]
Google Fonts |Da Font | FontBundles | FontSpace
Recursos de Accesibilidad y Usabilidad
The A11Y Project | Importancia de Accesibilidad y Usabilidad en los Proyectos
Algunos Cursos y tutoriales sobre Diseño de UX/UI
DESIGN RULES: Principles + Practices for Great UI Design
Framer Crash Course — Design, Code, and Collaborate
Feliz experiencia e interfaz de usuarios, colegas!
Antes de Marcharte, quisiera que rapidamente leas esto:
👏 5 Claps si disfrutaste este articulo, así podré motivarme a escribir mas!
🤔 Comenta si tienes algo que decir, es muy importante saber tu opinión.
🙂 Click en seguir Alvison para que estes al tanto de mis nuevos artículos!
