Curso intensivo: diseño de interfaz de usuario

Un resumen de mi taller de diseño PennAppsXV.

UI vs UX

Si ha realizado algún tipo de investigación sobre el diseño de software, probablemente haya oído hablar de los términos "UI" y "UX". Pero, ¿qué separa la interfaz de usuario de UX?

En sus formas más simples, el diseño UX es lo que hace que una interfaz sea útil, y el diseño UI es lo que hace que una interfaz sea hermosa. Para la interfaz de usuario, esto incluye una combinación de jerarquía visual y elementos de interfaz. Para comprender lo que separa una gran interfaz de una buena interfaz, uno debe comprender que el diseño de la interfaz de usuario es simplemente una capa de todo el proceso de diseño. Quizás es por eso que las personas a menudo confunden UX y UI. Sin embargo, en los siguientes párrafos, espero ayudarlo a usted como audiencia o lector a comprender dónde se encuentran las diferencias en el contexto del proceso de diseño.

Según Garrett en The Elements of the User Experience, UX se puede entender en cinco planos principales. Comencemos con el plano más abstracto:

El primer plano de diseño de producto.

En un nivel alto, el primer plano es realmente el bloque inicial del diseño del producto. Aquí, está aplicando diferentes métodos de investigación, incluidas entrevistas a usuarios, análisis competitivos, personajes de usuarios y otras técnicas de investigación para comprender:

  1. ¿Cuál es el problema que estás tratando de resolver?
  2. ¿Cuáles son sus necesidades de usuario?
  3. ¿Cómo encaja su producto dentro de un contexto empresarial (objetivos del producto)?

El segundo plano:

El segundo plano del diseño del producto.

En esta etapa, debe definir las especificaciones funcionales y los requisitos de contenido de su plataforma. En otras palabras:

  1. ¿Cómo podría resolver los problemas a través de su plataforma? ¿Cuáles son las características y cómo podría priorizarlas?

El desafío aquí para los diseñadores es priorizar las características y minimizar las compensaciones. Claro, puede que tenga cientos de ideas para resolver un problema, pero no puede implementarlas todas.

El tercer plano:

En esta etapa, sus ideas deberían comenzar a formar una estructura. La arquitectura de la información tiene que ver con cómo se organiza la información dentro de una aplicación y cómo los usuarios procesan cognitivamente la información. Los flujos de usuarios trazan un mapa de los viajes específicos que los usuarios emprenden a través de la aplicación para ayudar a resolver sus necesidades específicas. Se trata de los pasos más lógicos para que sus usuarios satisfagan sus necesidades.

El siguiente plano es donde las cosas se vuelven menos abstractas y más concretas:

El plano esquelético busca lograr la estructura de un diseño de interfaz y diseño de información. El diseño de la interfaz se refiere a la disposición de elementos de interfaz específicos para permitir a los usuarios interactuar con la funcionalidad de un sistema, mientras que el diseño de la información se refiere a la presentación de la información de una manera que facilite la comprensión.

En esta etapa, es probable que encuentre UX o diseñadores de productos diseñando, probando e iterando en wireframes. Los wireframes son de muy baja fidelidad, a menudo maquetas en escala de grises que demuestran la intención de cada elemento de la interfaz para los usuarios.

Y finalmente, el plano más concreto:

El plano de la superficie, como su nombre lo indica, se esfuerza por una gran experiencia sensorial y diseño visual. El objetivo aquí para los diseñadores es formar una conexión visceral con los usuarios mediante la comunicación exitosa de la marca, el producto, el valor y la funcionalidad en una imagen cohesiva.

Este es el plano donde encontrará diseñadores de interfaz de usuario y diseñadores visuales que realizan la mayor parte de su trabajo utilizando herramientas como Sketch, Photoshop, Adobe Experience Design, Illustrator o Figma.

A continuación, veamos algunos principios básicos del diseño de la interfaz de usuario.

Principio # 1: la claridad es lo primero.

No hay nada peor que la ambigüedad en una aplicación. Qué hace este botón? ¿Como llegué aqui? ¿Cómo regreso? Para evitar esto, un diseñador siempre debe preguntarse:

¿Por qué está esto aquí? ¿Esto tiene sentido? ¿Qué otras posibilidades puedo explorar?

Los grandes diseñadores saben cómo explorar la variedad de posibilidades de un diseño de interfaz, las posibles compensaciones de cada uno, y entienden qué diseño podría ayudar al usuario a alcanzar mejor sus objetivos. La claridad en el diseño permite al usuario sentirse seguro mientras navega por su aplicación.

Principio n. ° 2: proporcionar comentarios claros y significativos

Todos hemos utilizado un sitio web o una aplicación en la que intentaremos hacer clic en un botón y nos preguntaremos si el sistema registró el clic.

En pocas palabras, cada acción necesita una reacción. Si es un desarrollador web, por ejemplo, cambiar el estado de desplazamiento de un botón es una forma común de retroalimentación para permitir a sus usuarios comprender su acción de desplazamiento.

Un gran ejemplo es el uso de Facebook de su estado de carga de esqueleto. Mientras el usuario espera a que se cargue su contenido, un estado de carga en forma de contenido proporciona retroalimentación significativa y relevante para que los usuarios entiendan que su contenido se está cargando.

Principio # 3: La consistencia es importante.

Cuando me refiero a la coherencia, estoy hablando de la coherencia en la ubicación de los elementos de la interfaz o el idioma en todo el producto. Una vez que los usuarios comienzan a aprender cómo usar un producto, no deberían tener que volver a aprenderlo. Echemos un vistazo a un ejemplo de mala consistencia.

Página de inicio de XfinityPágina de Xfinity TVPágina personal de Xfinity

El ejemplo anterior puede parecer 3 sitios web de 3 compañías diferentes, pero en realidad no lo es. ¿Qué puede hacer que uno piense eso? Bueno, las barras de navegación para cada página usan un conjunto diferente de colores, diseño y estilos de fuente. Como usuario, esto puede ser confuso y desorientador, y los usuarios pueden olvidar que todos se encuentran en un solo sitio web.

Como diseñador, ¿cómo puede mantener la coherencia en toda su aplicación? Puede diseñar su aplicación utilizando un sistema de cuadrícula consistente, como el sistema de cuadrícula común de 8 puntos que se encuentra en las aplicaciones móviles y el diseño de iconos. También puede mantener un esquema de color consistente y elementos de navegación en todas las pantallas. Todos estos elementos se pueden enraizar en una guía de estilo:

Fuente: https://dribbble.com/shots/1817828-Style-Guide

El punto es: una buena consistencia y estructura hará que sus usuarios se sientan como en casa.

Principio # 4: En caso de duda, utilice patrones de diseño establecidos.

No me malinterpreten aquí: la innovación es increíble y se alienta, pero no debería ser a expensas de la experiencia del usuario. No hay necesidad de reinventar la rueda si la rueda está haciendo un gran trabajo al hacer su trabajo. Por ejemplo, si alguna vez no está seguro de si un icono representa una palabra de forma precisa o intuitiva, simplemente use la palabra en su lugar. O adhiérase a patrones de color comunes, como un tono de rojo para advertir / alertar a un usuario, o verde para marcar algo completo.

¿Por qué usar patrones de diseño establecidos? Bueno, por un lado, muchos de estos principios de diseño establecidos se basan en la percepción humana. Tomemos un patrón de lectura en forma de F o un patrón de escaneo ocular cuando se trata de leer bloques de contenido.

El patrón de lectura en forma de F.

Este es un mapa de calor generado por los datos recopilados de un experimento de seguimiento ocular. Las áreas rojas representan las secciones más vistas, mientras que las azules son las menos. Como puede ver, el mapa de calor generado se parece un poco a la letra F. Pero, ¿qué significa esto para los diseñadores?

Significa que debe colocar el contenido más importante en la esquina superior izquierda.

Por ejemplo, normalmente encontrará un logotipo en la esquina superior izquierda. Esto permite a las empresas fortalecer sus identidades de marca. En la esquina superior derecha, normalmente puede encontrar las páginas para navegar, o quizás una barra de búsqueda. Esto permite a los usuarios navegar por diferentes páginas con facilidad sin buscar en toda la página los elementos de navegación. Aquí hay dos ejemplos que se adhieren a este patrón de diseño:

A medida que avanza más y más en la página, la atención del usuario puede marchitarse. Por lo tanto, coloque el contenido más importante en la parte superior y los titulares en negrita del usuario que harán que su contenido sea fácilmente escaneable.

Principio # 5: Use la jerarquía visual.

¿Qué es la jerarquía visual? Bueno, es la disposición de los elementos de una manera que implica una importancia relativa. es el intento del diseñador de guiar el orden en que los ojos perciben la información presentada.

Fuente: https://dribbble.com/shots/1315388-Dashboard-Web-App-Product-UI-Design-Job-Summary

La forma en que percibimos la información se ve afectada por varios factores que contribuyen a cómo clasificamos la jerarquía del contenido dentro del diseño. Pasemos a algunos conceptos básicos de jerarquía:

I. tipografía

¿Qué hace buena tipografía? Los dos factores principales son la legibilidad y la legibilidad.

La legibilidad son las cualidades innatas de un tipo de letra que hace que cada letra individual sea distinguible entre sí. Esto depende totalmente del tipo de letra, por lo que no hay nada que pueda hacer para que un tipo de letra sea más legible, así que elija adecuadamente.

La legibilidad está determinada por cómo manipulas un tipo de letra en particular para que sea más fácil de comprender.

¿Te das cuenta de que la tipografía superior es más difícil de leer que la inferior? Si no…

¿Qué te parece ahora?

Otro factor para determinar qué tan fácil es leer algo es la longitud de la línea. Si la línea es demasiado corta y el lector salta de línea en línea constantemente, es extremadamente difícil para el lector absorber información. Lo mismo ocurre si la longitud de la línea es demasiado larga: los ojos se cansan rápidamente.

Además, nunca centre grandes bloques de copia. Es mucho más fácil para nosotros leer un bloque de texto que queda alineado porque el ojo sabe exactamente dónde comienza la siguiente línea.

II Espacio en blanco (también conocido como espacio negativo)

¿Alguien ha mirado un menú / un sitio web / una interfaz y ha pensado: "Esto se ve y se siente genial, pero no estoy seguro de por qué?" Bueno, ahora sí. La respuesta es el espacio en blanco. El espacio en blanco ayuda enormemente con la legibilidad y la comprensión. Un estudio (Lin, 2004) encontró que el buen uso del espacio en blanco entre los párrafos y en el margen izquierdo y derecho aumenta la comprensión en casi un 20%. A los lectores les resulta más fácil concentrarse y procesar contenido generosamente espaciado.

Espacio positivo = Perro. Espacio negativo = Cat.

Mucha gente cree que el espacio en blanco depende del "gusto". Creo que es más objetivo que eso. Podemos usar el espacio en blanco intencionalmente para crear una jerarquía fuerte. Echemos un vistazo al sitio de Helen Tran y cómo usa el espacio en blanco intencionalmente:

Fuente: https://dribbble.com/shots/2047524-V5-0-Website-Redesign

Hermosa cartera! Ahora echemos un vistazo más de cerca:

Observe cómo hay 4 bloques claros de contenido. Vamos a desglosarlo aún más:

Helen usa una combinación de altura de línea, tamaño de fuente, color y espacio en blanco para separar el contenido dentro de cada bloque. Esto permite que los usuarios naveguen naturalmente por las secciones de estos bloques de contenido.

III. Color

La teoría del color es muy, muy compleja. Mi objetivo no es explicar la totalidad de la teoría del color, sino proporcionarle algunos conceptos generales que podría aprovechar en sus diseños de IU de inmediato.

Si observa la imagen de arriba, notará que el cuadrado azul de la izquierda se siente más lejos, mientras que el cuadrado rojo de la derecha se siente más cerca. Los colores cálidos vienen hacia ti, mientras que los colores fríos se desvanecen en el fondo. Echemos un vistazo a esto en un ejemplo de interfaz de usuario:

Fuente: Dribbble

En el diseño anterior, podemos ver cómo el diseñador usa un rojo cálido para adelantar el llamado a la acción (Actualizar ahora), mientras usa un azul más frío para retroceder la navegación más hacia el fondo. Lo mismo sucede en la ilustración de la izquierda. El ícono del rayo rojo se destaca inmediatamente entre el resto de la interfaz.

También puede usar colores para agrupar componentes de interfaz similares:

Fuente: Dribbble

Por último, menos es más. Cuantos más colores haya, menos impacto tendrá cada color individual. Un gran ejemplo es el rediseño reciente de Instagram:

La reducción de color no solo hace que las fotos se destaquen más, sino que también aumenta la efectividad de las notificaciones porque ya no compiten con los colores en las barras de navegación superior e inferior.

Recursos adicionales:

¡Gracias a Kevin Yang y Chen Ye por un increíble fin de semana de enseñanza de diseño PennApps! Y Figma por proporcionar una herramienta de diseño impresionante e intuitiva que utilizamos en nuestro taller.

HH Design es una comunidad en torno al diseño en el contexto de la tecnología.

contribuir