1.

Introducción

1.1. Introducción al
UI
Igual que sucedía con UX, UI es uno de esos acrónimos ampliamente utilizados, no
solo en el ámbito tecnológico. UI significa User Interface (Interfaz de Usuario) o
User Interface Design (Diseño de Interfaz de Usuario).

6
 "Una definición de Interfaz de Usuario podría ser el
medio, en nuestro caso digital, con el cual un usuario
interactúa con un producto, aunque la limitación de
“digital” está simplemente impuesta por el contexto en el
que estamos trabajando, y es que existen interfaces de
usuario en todos los ámbitos de nuestra vida."

El mando “de la Play” es una interfaz de usuario

ampliamente conocida hoy. Su creación se remonta a
1994 con el PS Control Pad para la PlayStation One, su
diseño de hace casi 30 años sigue siendo la base que
gobierna sobre la interfaz de los modelos más más
modernos hasta la PS5, y su gran aportación fue el Mando de la PS1.
agregado de los gatillos R2 y L2, que no se habían visto
hasta la época.

Con la evolución de las formas de jugar y de las

necesidades de interacción entre el mando y los
jugadores para crear una mejor experiencia, Sony ha
desarrollado el Dual Sense

Mando de la PS5. Este mando rompe por primera vez en 30 años el

diseño estándar de los mandos para la PS y se enfoca
totalmente en las sensaciones para ofrecer una
experiencia más inmersiva.

Con esta evolución el mando de la PS 5 deja de ser solo una interfaz de control, le
permite al usuario sentir la diferencia si conduce en carretera o en barro, o la
tensión cuando disparará una flecha; con esto trabaja los sentidos a un nivel
7
nunca antes visto en una interfaz de este tipo.

En España se emplea el teclado QWERTY, nombre que recibe de las primeras

letras de la primera fila. Como curiosidad, ¿cuál será la palabra más larga que se
puede escribir con las letras de esta primera fila? Sí, TYPEWRITTER.

(1)

Todas ellas son interfaces que permiten al usuario interactuar con un producto o
sistema: el helado, Whatsapp, un teléfono, una televisión, Twitter, aplicaciones
web, aplicaciones móviles, o buscadores.

Ejemplos de interfaz de usuarios (1)

Obviamente, podríamos seguir y poner muchísimos ejemplos. El palillo de

madera del helado, el cuadro de diálogo con auto corrector, la rueda para
marcar -dando vueltas- en los teléfonos antiguos, el mando a distancia, la
almohadilla como ‘hashtag’, las interfaces gráficas como evolución a las
interfaces exclusivamente de texto por consola, la hamburguesa -ese icono
con tres líneas horizontales paralelas que usamos en las webs móviles para
desplegar un menú lateral- o la barra de búsqueda.

8
2. UI vs. UX

2.1. UI vs UX

Una de las preguntas más habituales que surgen al hablar de UI es, precisamente,
su comparativa con el término que vimos en profundidad en el capítulo anterior:
UX, User Experience.

La separación entre ambos términos, en los comienzos de estas disciplinas,

era prácticamente inexistentes. Sin embargo, con el paso de los años se han ido
definiendo marcadamente, pues responden a dos necesidades fundamentales y
diferentes del usuario.

UI tiene que ver con la parte estética del producto o servicio, lo más visual:
pantallas, páginas, elementos visuales, mientras que UX está más dirigido a la
experiencia del usuario mientras interactúa con el producto o servicio.
Seguramente, el lector habrá observado que, en realidad, la parte estética/visual
es realmente parte inherente a la propia experiencia del usuario. En otras palabras:
no parecen dos conceptos independientes, sino íntimamente relacionados (2) .
Y así es: UI es en realidad un subconjunto dentro de UX, tal y como UX era un
subconjunto dentro del concepto más amplio de CX.

Así bien, veamos algunas definiciones de profesionales de la industria.

“UX está centrada en el ‘journey del usuario’ para resolver un problema, mientras que
UI está centrada en cómo la ‘superficie’ de un producto se ve y cómo funciona”.

Definición de Ken Norton (Partner en Google Ventures) de la diferencia

9
“UI es el puente que nos lleva a donde queremos ir, UX es el sentimiento que tenemos
al llegar”.

Jason Ogle (Host & Producer en User Defenders Podcast)

“un diseñador de UX se preocupa por los aspectos conceptuales del proceso de diseño,
dejando al diseñador de UI la tarea de centrarse en los elementos más tangibles”.

Andy Budd (Co-founder de Clearleft)

Como vemos, todas las definiciones -más o menos

poéticas- muestran a las claras la diferencia entre UI y
UX, introduciéndose la última en un asunto que aún
no hemos tocado, y es el del diseñador UX / UI. Y es
que en muchísimas ofertas de empleo que
encontremos en LinkedIn, veremos que se buscan
roles de esta manera: “Diseñador UX / UI”. ¿Es posible
ser diseñador de la Experiencia de Usuario y de la
Interfaz de Usuario? La respuesta rápida es sí... pero
no. Veamos a continuación los detalles.

“Sí”, pues en muchos casos sabemos que un

profesional necesariamente tiene que desempeñar
varias tareas, no necesariamente relacionadas. Así,
encontramos que las empresas piden “Desarrolladores
Full-Stack” con dominio sobre varios lenguajes de
programación tanto de Front-End como de Back-End,
bases de datos, etc. Definitivamente sí es posible
encontrar a alguien así, pero no a un verdadero
especialista.

10
Y aquí se abre un debate que, desde luego, escapa del
objetivo de esta asignatura. Para nuestra pregunta
anterior, tramposamente contestada, es necesario
primero saber qué habilidades requiere un diseñador
de UX, las cuales fueron vistas en el módulo anterior, y
cuáles un diseñador de UI, y finalmente dejaremos al
alumno decidir si es común encontrar perfiles con
todas ellas, y en qué grado de competencia.

En la siguiente ilustración, observamos una

representación de nuestro cerebro con algunas de las
áreas de especialización de cada uno de los perfiles.
Efectivamente, parece que las correspondientes al UX
Designer están más alineadas con el hemisferio
izquierdo del cerebro (pensamiento analítico, lógica...),
y las del UI Designer con el hemisferio derecho
(habilidades espaciales y visuales).

11
El diseñador UX

Específicamente, las responsabilidades del diseñador de UX incluyen el

desarrollo de estrategias, pruebas, implementación y análisis de
productos/servicios y sus diseños generales.

Estrategia de contenido

La estrategia de contenido se centra en la planificación, creación y

ejecución de contenido que puede incluir texto, imágenes y elementos
multimedia en una página o en una aplicación. La estrategia de contenido
no siempre es responsabilidad de un diseñador de UX, pero más
empresas están enfatizando el diseño basado en contenido para brindar
una experiencia más efectiva.

Pruebas y prototipos

Las pruebas y la creación de prototipos son partes importantes del

proceso de diseño de UX. La mayoría de los diseños pasan por múltiples
iteraciones antes de finalizarse, y estos cambios se respaldan en el
camino. El conocimiento de metodologías de investigación comunes
(como las pruebas A/B) también es un activo para el diseño de UX.

Coordinación y análisis

El diseño de la experiencia implica la planificación, el desarrollo de la

estrategia, la ejecución y el análisis de proyectos después de la
implementación.

Los diseñadores de UX pasan mucho tiempo planificando proyectos

futuros, analizando diseños existentes y rastreando el rendimiento de sus
diseños a través de investigación con usuarios reales o pruebas internas.

Investigación del consumidor

Los mejores diseños de UX están impulsados por la investigación, que

informa a los diseñadores de UX sobre sus problemas y lo que se puede
resolver con un diseño específico. La investigación de UX puede incluir
cuestionarios, encuestas, grupos focales, pruebas de productos u otras
metodologías de investigación. Las metodologías de investigación
específicas dependen de lo que una empresa quiera saber sobre un
producto o sus usuarios.

12
El diseñador UI

Los diseñadores de UI supervisan los detalles de la interfaz de un producto o

servicio. Son responsables de elegir fuentes, crear elementos visuales y
asegurarse de que los componentes individuales sean visualmente atractivos
y se ajusten a los objetivos de un producto. Los diseñadores de UI están a
cargo del estilo y la funcionalidad general del diseño de un producto o
servicio.

Crear y mantener el estilo de marca

Establecer un estilo de marca visual definido es crucial para la mayoría de

las empresas modernas, los diseñadores de UI a menudo tienen la tarea
de crear productos o entidades que sean estéticamente consistentes con
una marca general.

Diseño visual

Los diseñadores de UI crean y optimizan los elementos individuales de

una entidad digital, incluida la tipografía, el color, el diseño de botones y
otros elementos que contribuyen a una interfaz sólida.

Diseño interactivo

Muchos diseñadores de UI también desarrollan e implementan los

elementos interactivos de un sitio web o servicio. Este proceso podría
incluir animaciones u otros elementos interactivos. Por ejemplo, un
diseñador de interfaz de usuario podría crear una animación de sitio web
que se active después de que un usuario haga clic en un botón.

Responsive

Una de las responsabilidades clave para las plataformas modernas es la

capacidad de adaptación del diseño a diferentes dispositivos, desde una
pantalla de 27 pulgadas hasta un móvil. Para ello los diseñadores UI
deben desarrollar sistemas de diseños flexibles, con elementos vectoriales
fácilmente redimensionables y su respectiva guía de aplicación para
desarrolladores.

13
Representación de los conceptos clave de la Customer Experience (2)

14
2.2. Ejemplo de trabajo de UI
Vamos a ver un ejemplo del trabajo de UI con un objeto que todos hemos usado
alguna vez: una tarjeta de embarque, o ‘boarding card’. Este pequeño objeto
recoge muchísima información imprescindible: origen y destino de nuestro vuelo,
fecha, hora, asiento, fila, zona de embarque, hora de despegue, aerolínea, código
de barras, nuestro nombre y apellidos, y muchos IDs que desconocemos.

Modelo de Boarding Card de Delta Airlines.

Da la sensación de que esta interfaz necesita mucho más para ser perfecta, al
menos en cuanto a la experiencia de usuario: es difícil distinguir la información
imprescindible para mí, de otros datos. Hay muchísimos nombres, palabras y
códigos, y no existe una jerarquía clara entre los distintos elementos, de forma
que es muy complicado acudir a los datos clave. Tal vez el asiento, en un cuadrado
y en una letra más grande, sea lo más sencillo de identificar. Sin embargo, si ni
siquiera llegamos a embarcar, de poco servirá.

Otro modelo e Boarding Card de Delta Airlines.

Aquí podemos ver otro modelo más moderno. Pensemos en las preguntas clave
que un usuario tiene en su cabeza cuando llega al aeropuerto con su tarjeta de
embarque:

“Emm... ¿era hoy, verdad?”

“Comprobemos una vez más la hora”

15
 “¿A qué terminal tengo que dirigirme?”

“¿Cuál es mi número de vuelo? Debo localizarlo en las pantallas...”

“Ah, sí. Llega puntual, ¡bien! Busquemos la puerta de embarque.” “¿Cuándo comienza el
embarque? ¿Tengo tiempo para tomarme un café?”

En este nuevo modelo, toda esta información está recogida de forma más
accesible. Desaparecen muchos de los códigos indescifrables -o se hacen muy
pequeños-, la información clave sobre mi vuelo se enfatiza usando una fuente más
grande y el contraste azul / blanco.

Sin embargo, la experiencia de uso de las tarjetas de embarques ha cambiado

con los años, llevando a los diseñadores UI desarrollar diseños más flexibles
que se adaptan a una impresora convencional, al móvil, o la impresora del
aeropuerto.

Tarjeta de embarque Iberia.

16
 Tarjeta de embarque Iberia. Aplicación móvil
PASS.

Tarjeta de embarque Iberia. Descargable en

PDF.

En las imágenes anteriores se muestra como la interfaz varía según la procedencia

de la tarjeta y la forma de usarla, considerando ahora dos interfaces que son más
fáciles de adquirir y entender por el usuario final.

En estos dos nuevos formatos (PASS y PDF) la información está optimizada según
el dispositivo habitual de uso.

En la tarjeta PASS, la información está pensada para leerse fácilmente en un

teléfono móvil, con los datos más importantes como el número de vuelo y fecha,

17
la hora de embarque, el grupo, el destino y el origen. La proporción de los
elementos no es coincidencia; las investigaciones de uso han permitido
determinar que el destino y el origen son 2 campos que permiten identificar
fácilmente la tarjeta de embarque, sobre todo en usuarios con múltiples trayectos.

En la tarjeta PDF, se incluyen elementos que

ayudarán al usuario a preparar su viaje, como el
tamaño y peso del equipaje contratado, el tiempo
en la ciudad destino, o cuando debe estar en la
puerta de embarque. Es un formato que puede (3)
imprimirse en cualquier impresora.

Tarjeta de embarque (3)

En cualquiera de los casos, esta tarjeta de embarque es una interfaz con la

que el usuario, pasajeros y profesionales, deben interactuar para poder
embarcar en un vuelo, y para poder realizar su trabajo. En el caso de un
aeropuerto, lugar donde la mayoría de las personas aumentan su nivel de
estrés por las prisas, la incertidumbre o incluso el miedo a volar, se agradece
mucho el cariño con el que se diseña la experiencia de cliente. Y sí, una
parte de esta experiencia es el diseño de las interfaces de usuario, como la
tarjeta de embarque.

18
3. Teoría de Diseño

3.1. Conceptos
fundamentales
En este apartado, vamos a estudiar algunos conceptos básicos del mundo del
diseño. En realidad, estos no aplican exclusivamente al diseño de interfaces, sino
que son aplicables a la fotografía, a la pintura, a las artes gráficas, a la moda, o a
cualquier otra disciplina relacionada con el diseño.

Está generalmente aceptada una verdad entorno al diseño, y es que su éxito

estará íntimamente relacionado con lo mucho que los usuarios le den uso, valga la
redundancia. Para conseguirlo, además de crear de cero una obra maestra de
época, podemos comprender los seis conceptos fundamentales que veremos a
continuación, y que son aquellos que más relevancia tienen en el campo del UI
Design.

1. Color y Contraste
2. Espacio en Blanco
3. Jerarquía Visual
4. Complejidad vs. Simplicidad
5. Consistencia
6. Tipografía

19
3.2. La teoría del
color

Mucha gente piensa que la elección La investigación proporcionada por

de colores para la interfaz de
usuario depende principalmente del
gusto y el sentido de la belleza del
diseñador. Sin embargo, el proceso
de selección del color es más
complicado de lo que parece y
juega un papel importante en el
diseño ya que condiciona
directamente el reconocimiento y
éxito del producto.
Colorcom mostró que las personas
tardan solo 90 segundos en emitir
un juicio subconsciente sobre un
producto y entre el 62% y el 90%
de esa evaluación se basa solo en el
color. Por lo tanto, los colores
elegidos adecuadamente pueden
ser útiles para mejorar la
conversión de su producto, así
como mejorar la usabilidad del
producto.

Es fácil comprender la importancia del color y el contraste en un diseño solamente

observando la siguiente imagen:

Sí, este ejemplo tal vez parezca exagerado, pero no son

pocos los casos es los que la realidad supera a la ficción.
No hay más que leer unos cuantos blogs y revistas para
ver cómo algunos, por razones que escapan a la lógica,
eligen un color de fuente gris claro sobre fondo blanco,
haciendo que la lectura del texto sea insufrible.

Los colores cálidos (rojo, amarillo, naranja) dan una sensación más luminosa y
energética, y dan la sensación de empujar cualquier objeto hacia adelante,
mientras que los colores fríos (azul, verde, violeta) las empujan hacia el fondo. Sí,
¡los colores tienen la capacidad de crear ilusiones ópticas sobre la posición de los

20