Qué son diseño web y UX: definiciones y conceptos básicos

¿Te ha gustado nuestro artículo? ¡Vota!

Diseño web y User Experience (UX) son dos conceptos clave dentro del Marketing Digital. Edna Lillo, UX & Visual Designer en Agencia B12, explica qué son y cuáles son los conceptos básicos vinculados a ellos. La clave de todo: "Creamos soluciones digitales para la gente". Profundizamos en ello.

Edna Lillo, UX & Visual Designer en Agencia B12

Qué es el diseño web

"El diseño tiene relación con las artes plásticas, ya que trabajamos con color, composición, tipografías… Por eso, se tiende a pensar que somos artistas, y no es así", explica Lillo. "No diseñamos por inspiración. Por eso, no somos artistas, somos artesanas".

Diseño web: creación de soluciones digitales

"A Rocío Mangana, Directora Creativa en Agencia B12, y a mí, nos hacen un encargo. Nosotras buscamos la mejor manera de llevarlo a cabo". En resumen… "Creamos soluciones para la gente".

Lillo pone como ejemplo el famoso exprimidor de Philippe Starck. "Este exprimidor se aproxima más a una escultura que a un objeto de uso cotidiano. Starck hizo un tratamiento artístico del objeto, de ahí su fama". Sin embargo, analizado desde el punto de vista de un diseñador, "no es un buen diseño".

El motivo, que "no cumple su función, es demasiado grande, las pepitas se cuelan… En definitiva, es un objeto artístico, pero no práctico".

Edna Lillo recalca: "Cuando diseñamos, combinamos utilidad y estética a partes iguales . Todo está centrado en el usuario, no es estético y bonito porque sí, sino que investigamos a fondo a nuestro público y creamos productos que sean útiles, fáciles de usar y que cumplan su función (sea hacer clic en un botón o llevar al usuario a la pasarela de pago) de manera sencilla".

Cómo se crean las soluciones digitales

De la mano con lo que explicaba anteriormente, Edna dice que "el diseño implica una profunda labor de investigación". Pone como ejemplo las webs y aplicaciones de Airbnb, Spotify o Cabify: "Cumplen todas las cualidades, son fáciles de usar, son intuitivas y están centradas a las personas".

Para llegar a ese punto, la investigación previa debe centrarse en:

• Conocer al público objetivo.
• Saber cuáles son sus necesidades reales.
• Saber cómo se comporta.

Con esos datos, los departamentos de Diseño empiezan a trabajar: "Nos ponemos en la piel del usuario, entendemos cómo piensa y, a partir de ahí, nos ponemos manos a la obra".

Qué es User Experience

User Experience (UX) es "diseñar pensando en el usuario". Según su definición, se trata de "crear una experiencia positiva para el usuario cuando interactúa con un sistema digital. Todo lo que percibimos al comprar, navegar, etcétera, son ejemplos de experiencia de usuario".

Qué es Design Thinking

Ligado a esa explicación, Lillo nos lleva al concepto de Design Thinking: "Se trata de una metodología que nos ayuda a crear productos y servicios innovadores, basados en la investigación de usuarios y en la experimentación con prototipos".

De hecho, "prototipar y testar son dos claves en un proceso de UX, porque nos deriva a otro punto que se conoce como pivotar". La analítica continua permite a Diseño "conocer de manera rápida si algo está funcionando y, en caso negativo, detectar el porqué y hacer las modificaciones pertinentes".

Así, el proceso de Design Thinking consiste en:

• Empatizar: conocer al usuario.
• Definir: focalizar qué se va a hacer en base a los conocimientos que existen sobre ese usuario.
• Idear.
• Prototipar.
• Testar.

Conceptos básicos de UX

En UX existen unos conceptos básicos, los pilares sobre los que se establece el trabajo de los equipos de Diseño.

Usabilidad

La usabilidad, según Lillo, se basa en que "todos los contenidos y servicios de nuestro producto deben ser fáciles de usar. La navegación tiene que ser sencilla, el usuario debe tener el camino fácil".

¿El camino hacia dónde? Eso depende del objetivo de un producto digital. Si hablamos de una e-commerce, la usabilidad reside en que el usuario encuentre los productos fácilmente, los agregue al carrito de forma sencilla y llegue a la pasarela de pago sin problemas, de forma "cómoda e intuitiva".

Además, "la curva de aprendizaje tiene que ser rápida. El usuario tiene que saber cómo utilizar una web o una app fácilmente", y también tiene que recordarlo fácilmente.

Accesibilidad

"Cuando hablamos de accesibilidad nos referimos a que personas de todo tipo puedan navegar sin barreras, sin nada que dificulte su comprensión". Así, "todo el mundo debe poder navegar, sean usuarios inexpertos, con conexión lenta o personas con problemas de daltonismo".

Sobre este último punto, explica: "Siempre valoramos las gamas de tonalidad para que usuarios con daltonismo puedan leer nuestras webs". Para ello, las diseñadoras de Agencia B12 se apoyan en herramientas como:

• Adobe Color, "que realiza una gama armónica de colores".
• Material Design, "que proporciona recursos para combinar colores y hace un análisis sobre si la combinación resulta legible".

Qué es la arquitectura de la información

"La arquitectura de la información se utiliza para que el usuario encuentre fácilmente lo que está buscando", afirma la experta. Una vez más, el estudio profundo del público objetivo es fundamental para ello. Aquí entran varios conceptos y herramientas.

Card Sorting

"El Card Sorting es una técnica que permite descubrir cómo los usuarios creen que deberían estar organizados los contenidos de un producto digital". Lillo utiliza como ejemplo una tienda online de frutas: "Podría organizar los productos de muchas formas. Por ejemplo, por colores o por tamaños". Con el Card Sorting se estudia "cómo piensa el usuario y facilitar la búsqueda".

Sitemaps

Los sitemaps documentan la información que hay en un sitio web. Son listados que incluyen todas las páginas que componen el site, ordenadas y jerarquizadas. Establecen, también, los flujos de navegación, esto es, "cómo nos movemos por la web, qué rutas puede realizar el usuario".

Esas rutas ayudan a las diseñadoras a llevar al usuario hacia los objetivos que haya, sean globales o propios de un momento determinado: "Qué queremos que haga, si queremos que vaya al carro, si queremos que vea una promo…".

Prototipado: qué es y para qué se usa

"Una vez tenemos la estructura de la web, hacemos maquetas o bocetos, lo que se conoce como wireframes". De acuerdo con la experta, se trata de "un recurso muy útil, porque conecta la parte conceptual con la parte visual".

Así, "un wireframe no define el diseño, solo el contenido y la jerarquía": “Nos sirve para ubicar los elementos: formularios, botones, imágenes, textos. Ayudan a trabajar con mucha agilidad porque permiten testar y sacar soluciones antes de realizar un diseño definitivo".

UI, la creación del look&feel

"UI es la parte fundamental de mi trabajo, definir lo que sucede en la pantalla, el look&feel", afirma Lillo. De acuerdo con su experiencia, el UI:

• Tiene un componente muy emocional.
• Tiene que invitar a realizar una acción, ya sea comprar unas zapatillass o ver una peli.
• Tiene que proporcionar una experiencia placentera, agradable, "y eso no se consigue por azar".

En la fase de UI se tiene en cuenta todo el aprendizaje previo sobre el usuario. A eso se suman "reglas de composición, tamaño, jerarquía, forma, color…".

Algunos consejos de UI

• Buscar una lectura dinámica.
• Evitar que los botones compitan: "Por ejemplo, en una web con varios botones de llamada a la acción, utilizamos colores, tamaños y tipos de letras para jerarquizar, que el usuario sepa a golpe de vista cuál es el botón importante".
• Evitar las mayúsculas: "Las mayúsculas son difíciles de leer y son agresivas. Ya asociamos que es como gritar en lenguaje online, así que, por lo general, huímos de ellas".

Qué es el diseño de interacción

"El diseño de interacción es cómo responde un sistema cuando el usuario interactúa con algo, sea un clic, un zoom o un swype". Hablamos de "cómo reacciona cada elemento para facilitar la comprensión entre el usuario y nuestra web o app". "Los diseñadores debemos dar forma a eso para ofrecer una buena experiencia de usuario".

Qué es un diseño responsive

"Un diseño responsive consiste en que el mismo contenido se vea bien en todas las pantallas", afirma la diseñadora. "Ahora hay muchísimos dispositivos y hay que adaptar los diseños a la visualización en cada uno de ellos y garantizar que eso se va a bien en todos y que va a estar igualmente jerarquizado".