Está en la página 1de 90

ÍNDICE

1. Unidad 1: Diseño de interfaces de usuario ..........................................................3


Tema 1: Elementos para el diseño de interfaz de usuario ............................................ 3
Objetivo: ........................................................................................................................ 3
Introducción: ................................................................................................................. 3

2. Información de los subtemas .............................................................................4


2.1 Subtema 1: Metodología personajes – objetivos - escenarios........................... 4
2.2 Subtema 2: Arquitectura de la información ..................................................... 10
2.3 Subtema 3: Modelo de interacción .................................................................. 11
2.4 Subtema 4: Interfaz .......................................................................................... 13

3. Preguntas de Comprensión de la Unidad ..........................................................14

4. Material Complementario ................................................................................15

5. Bibliografía ......................................................................................................16

2
Elementos para el diseño de interfaz de usuario

1. Unidad 1: Diseno de interfaces de


usuario
Tema 1: Elementos para el diseño de interfaz de
usuario
Objetivo:
Establecer perfiles de usuario en el ámbito del diseño de interfaces de productos
digitales orientadas a la experiencia de usuario.

Introducción:
El diseño de interfaz ha ido evolucionando a través del paso del tiempo. En la
actualidad el diseño de las interfaces ha llegado a ser más que una interacción o
satisfacción de expectativas de los usuarios, convirtiéndose en una experiencia.

Para diseñar interfaces que provoquen una experiencia única al usuario, Juan Manuel
Carraro y Yanina Duarte expresan que “la experiencia de usuario como campo se
ocupa de relevar y diseñar las interacciones de una persona (cliente, empleado, etc.)
con una organización, (empresa, gobierno, etc.) sus productos y servicios”. Los
elementos que se aplican en el diseño de interfaces son:

1. Metodología de objetivo, persona y escenarios

2. Arquitectura de la información

3. Modelo de interacción enfocado a la investigación en experiencia de


usuarios.

4. Interfaz
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 3


Elementos para el diseño de interfaz de usuario

2. Informacion de los subtemas


2.1 Subtema 1: Metodología personajes – objetivos -
escenarios

El término producto digital para efecto de esta asignatura se refiere a cualquier


producto que fue creado para ser usado en dispositivos digitales o tecnológicos, como:

● Sitios Web: Acceder a información; y,


● Aplicaciones: Realizar tareas

En el tema tres vamos a revisar cómo realizar personajes usando la técnica de Design
thinking como parte de los pilares del UI/UX

Paso 1. Conociendo a la organización que se le está diseñando el producto digital

Al comenzar a realizar una interfaz para un producto digital no debemos considerar


que por sí mismo el diseño ya nos muestra el resultado que se persigue obtener.
Debemos realizar previamente un análisis de la organización que va ser dueña del
producto y de los usuarios que lo van a utilizar. Esto nos permite trazar un horizonte
del diseño, Teniendo en cuenta a (Miro. Leo. Luego Pienso – mordecki.com, s/f) quien
afirma. “El hecho de que lógicamente el resultado del diseño sea evidente no hace
cierto per sé que cada aplicación conoce sus objetivos de alto nivel de la aplicación y a
partir de ellos puedan tomar las decisiones que les permitan ir construyéndose” (p.24).

Para trazarnos un horizonte en el diseño debemos poder responder a algunas


preguntas simples pero básicas. Entre algunas preguntas qué podemos realizarnos
serían las siguientes:

● ¿Por qué se necesita esta interfaz? La respuesta a esta pregunta puede ser
frívola como "Porque todas las aplicaciones tienen esta interfaz" o tan
© Universidad Estatal de Milagro – UNEMI

compleja como "Porque necesitamos bajar un 20% el requerimiento de


cómo usar esta interfaz". Es indispensable entender el rol que la interfaz
tiene en todo producto digital (Miro. Leo. Luego Pienso – mordecki.com,
s/f).
● ¿Para quién es esta interfaz? Es necesario definir claramente el perfil del
usuario (características y necesidades). Si quien diseña no comprende
quién es su público, difícilmente consiga hacer una gran interfaz (Miro.
Leo. Luego Pienso – mordecki.com, s/f).
● ¿Qué debe suceder para que estemos satisfechos? Desde el dueño del
producto digital la respuesta a esta pregunta podría ser: tener muchas

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 4


Elementos para el diseño de interfaz de usuario

visitas, que se generen muchas descargas, obtener muchas consultas,


posicionarse en el mercado, entre otros motivos (Miro. Leo. Luego Pienso
– mordecki.com, s/f).

Una vez establecidos los objetivos del diseño podremos definir un alcance. Dicho con
palabras de (Mordecki, 2012) “Mientras los objetivos reflejan el punto de vista de la
organización, el alcance expresa el punto de vista de los usuarios”. (p.26). Por ejemplo,
Una empresa se dedica a la venta de artículos electrónicos de forma física en sus cinco
almacenes distribuidos en cuatro ciudades; por la situación de la pandemia las ventas
disminuyeron un 60% por lo que se ha trazado una transformación digital en su
negocio y se propone la meta siguiente:

Figura 1
Elementos al analizar una organización

Nota: Esquema de los elementos a considerar al momento de hacer un análisis de la organización


antes de empezar a diseñar un producto digital. Obtenido del sitio www.SolucionesBPM.com

Interpretar los problemas del dueño del producto digital nos permite establecer sus
© Universidad Estatal de Milagro – UNEMI

objetivos, y estos traducir en el alcance hacia los potenciales clientes que serán los
usuarios de la aplicación digital. (Miro. Leo. Luego Pienso – mordecki.com, s/f)
recomienda “construir el sitio de afuera hacia adentro” (p.26).

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 5


Elementos para el diseño de interfaz de usuario

Paso 2. Metodología personas – objetivos - escenarios.

Características de la persona que va a interactuar con el producto


digital

Una vez trazado el objetivo y el alcance que la organización se ha puesto como meta
debemos enfocarnos en desarrollar técnicas adecuadas para traducir estos en la
necesidad de las personas reales. Tenemos que considerar que al identificar el tipo y
características de personas (usuarios) que van a interactuar con el producto digital
debe ser de lo más claro posible. El establecimiento de estos perfiles permite
considerar qué elementos requieren y cuáles no considerarlos en el diseño de la
interfaz (Miro. Leo. Luego Pienso – mordecki.com, s/f). Algunas características de la
definición de un buen diseño de personaje son las siguientes:

● Tener un nombre o apodo bien elegido puede decir todo sobre los
visitantes del sitio.
● Dar una descripción de sus características, gustos, capacidades y
costumbres relevantes para el proyecto que refuerce la idea o
personalidad del personaje.
● Deben ser inventados para tener el riesgo de que pierdan su valor como
herramienta de diseño y el sitio termine siendo una aplicación "a medida"
para un individuo.
● Debe tener un rostro para lo cual se aconseja buscar una foto y cree fichas
con sus nombres y características.

Los personajes son una herramienta de diseño simple y poderosa, que, a un costo
mínimo, serán una ayuda invaluable a lo largo de todo el proyecto. Hacerlos
perdurables en una ficha con una imagen y una descripción permitirá darlos a conocer
y traerlos al ruedo cuando sea necesario.
© Universidad Estatal de Milagro – UNEMI

Objetivos de la persona relacionado con el producto digital

Las personas actúan siempre que exista una razón imperativa para hacerlo como
puede ser para navegar, buscar información o usando una aplicación para una tarea
específica y cuando lo hagan ellos actuarán utilizando las funciones que pusimos a su
alcance. No hay que confundirse los objetivos con las tareas desarrolladas (Miro. Leo.
Luego Pienso – mordecki.com, s/f).

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 6


Elementos para el diseño de interfaz de usuario

Los objetivos tienden a ser pocos y permanecerán estables en el tiempo, en cambio,


las tareas tienden a ser muchas y a cambiar con una fuerte dependencia de la
tecnología del momento, esto quiere decir que el objetivo es el fin y las tareas
depende del medio (Miro. Leo. Luego Pienso – mordecki.com, s/f).

Las tareas que implica la comunicación han tomado formas variadas y cambiantes a lo
largo de la historia, dependiendo de los medios y tecnologías disponibles en cada
momento. Tener mucha funcionalidad se traduce en permitir desarrollar una gran
cantidad de tareas, no necesariamente tiene relación directa con los objetivos de los
usuarios (Miro. Leo. Luego Pienso – mordecki.com, s/f).

Debemos considerar que la funcionalidad crea herramientas a diferencia que el diseño


crea experiencias. Los usuarios de nuestros productos digitales se sentirán mucho más
satisfechos cuando encuentren la cantidad necesaria de funciones que los ayuden a
alcanzar sus objetivos. Tal vez esta sea una ocasión óptima para la máxima de Albert
Einstein que dice "Haz todo tan simple como sea posible, pero no más simple” (Miro.
Leo. Luego Pienso – mordecki.com, s/f).

Escenarios que se devolverá la persona

El siguiente elemento de la metodología son los escenarios los que nos permiten
conocer cómo harán los usuarios para cumplir sus objetivos dentro de la aplicación o
sitio. Un escenario debe describir el entorno y la actitud con que lo utilizarán (Miro.
Leo. Luego Pienso – mordecki.com, s/f). Los escenarios estarán sujetos a la persona, es
decir, no es lo mismo una persona que está con falta de tiempo que una que tiene el
tiempo suficiente.

Los escenarios son la descripción de la situación y el contexto en el que se desarrolla la


interacción del usuario con el producto digital. En esta interacción pueden surgir varios
escenarios que reflejan una serie de contextos o situaciones (Miro. Leo. Luego Pienso
© Universidad Estatal de Milagro – UNEMI

– mordecki.com, s/f). Entre los escenarios tenemos los siguientes:

Escenario de uso diario

Este tipo comprende a 2 o 3 escenarios que representan las interacciones principales


que realizará el usuario el 80% de sus interacciones. A veces uno solo es suficiente.
Representan el centro de la relación del usuario con la interfaz. En esta clase de
escenarios los usuarios alcanzan sus fines, se sienten felices o frustrados marcando la
satisfacción de los mismos (Miro. Leo. Luego Pienso – mordecki.com, s/f).

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 7


Elementos para el diseño de interfaz de usuario

Ejemplificando, tenemos la posibilidad de percibir que una aplicación de


videoconferencia el escenario central y dominante es la utilización de la herramienta
para "facilitar la conversación o reunión con otras personas distantes de forma virtual”
ocupándose el usuario casi constantemente el 80% de su actividad, lo demás de las
decenas de herramientas que tienen estas aplicaciones está considerablemente por
debajo en su uso.

Escenario de uso esporádico o de única vez

Poseen las mismas características que las de uso diario con la diferencia en que los
usuarios los usan con una frecuencia bastante baja y aquello tiene un efecto de
fundamental trascendencia para la interfaz y la facilidad de uso (la curva de
aprendizaje tiene una incidencia mínima). Los escenarios de uso diario, los usuarios
aprenden con la utilización y aplican lo que van aprendiendo mientras el escenario de
uso esporádico cada vez que el usuario se enfrenta a su visita o uso, empieza de cero
(Miro. Leo. Luego Pienso – mordecki.com, s/f). Esto provoca que cobren relevancia
varias premisas de diseño de estos tipos de escenario:

● Directo y sin sutilezas: la interfaz debería ser directa, con interacciones


simples, sin ambigüedades, evitando cualquier componente que
implique aprendizaje o hallazgo.

● Estándar: el usuario debería poder usar sus conocimientos o


experiencias de productos digitales similares.

● Una actividad por vez: La interfaz debería estar 100% dirigida al objetivo
que el usuario necesita realizar.

● Sin personalización: La ecuación de la personalización es realizarlo hoy


para ahorrar mañana. Es una ecuación que causa únicamente pérdidas
para quien no va a regresar continuamente a visitarlo o a usarlo.

Los escenarios de uso necesario


© Universidad Estatal de Milagro – UNEMI

Los escenarios de uso necesario abarcan las interacciones imprescindibles para lograr
utilizar el sistema, que con raras excepciones son de uso poco frecuente o nulo. Si se le
diera una experiencia agradable al usuario del producto digital en los escenarios de
uso diario, se entendería que es indispensable desarrollar una cierta labor una vez
cada tanto para mejorar su experiencia. Sumado a ello, que sean poco frecuentes va a
hacer bastante difícil que el usuario recuerde lo aprendido (Miro. Leo. Luego Pienso –
mordecki.com, s/f).

Mientras tanto que el propósito de los escenarios de uso diario debería ser fascinar al
usuario, los de uso necesario tienen que tener como finalidad que éste haga su labor

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 8


Elementos para el diseño de interfaz de usuario

sin frustrarse. Si puede, elimínalos, sustituyéndolos por valores por omisión y


programación defensiva, que prevé que los usuarios no poseen interés en configurar
determinados detalles es mejor realizarlo (Miro. Leo. Luego Pienso – mordecki.com,
s/f).

Siguiendo el ejemplo de las aplicaciones de videoconferencia un escenario de uso


necesario sería la herramienta que nos permite agendar las reuniones, no se lo hace
continuamente, pero es necesario para usar la aplicación.

En conclusión, esta metodología demuestra ser una poderosa herramienta de diseño


de interfaces. Es de fácil aplicación y permite sustituir la idea genérica de “usuario” por
una caracterización de quién, por qué y en qué situaciones utilizará la aplicación o el
sitio. Definir el alcance implica conocer los objetivos y expectativas de los usuarios que
visitarán el sitio desde su propio punto de vista. Es a partir de este conocimiento que
podremos determinar qué contenidos y herramientas deberán estar en el sitio. No al
revés (Mordecki, 2012).

Podemos ejemplificar lo visto sobre esta metodología agrupado en la siguiente ficha de


personaje:

Figura 2
Ficha de perfil de personaje
© Universidad Estatal de Milagro – UNEMI

Nota: Ejemplo de un perfil de persona donde se observa la características de la misma, los objetivos,
hasta sus frustraciones. Tomado del sitio web: https://inboundplus.agency/que-es-un-buyer-
persona/

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 9


Elementos para el diseño de interfaz de usuario

2.2 Subtema 2: Arquitectura de la información


Con los objetivos del producto digital y con el alcance determinado estamos en
condiciones de iniciar con la siguiente fase del diseño de la interfaz. La arquitectura de
la información es la herramienta que nos ayudará a definir y ordenar el contenido de
modo de hacer más simple para el usuario su uso y localización dentro del sitio web o
la aplicación (Miro. Leo. Luego Pienso – mordecki.com, s/f).

El contenido definido se puede categorizar. Cuando hablamos de categorización


podemos definirlo como un grupo de conceptos de elevado nivel que permiten dividir
en conjuntos todos los documentos y contenidos, desde una concepción de la
interacción entre los grandes temas que engloba el producto digital a diseñar (Miro.
Leo. Luego Pienso – mordecki.com, s/f). Una buena definición de categorías debería
cumplir con lo siguiente:

● Las categorías son mutuamente excluyentes.


● Tienen una jerarquía equivalente.
● Abarcan todo el universo de contenido.
Las categorías tienen la posibilidad de separarse en subcategorías y de esta forma
sucesivamente conformando una composición de árbol o pirámide que obtiene el
nombre de taxonomía (Miro. Leo. Luego Pienso – mordecki.com, s/f). Por ejemplo
“Televisores” es entonces una subcategoría de “electrodomésticos”. Una técnica
bastante eficaz para ayudar a definir las categorías es el Card Sorting.

Podemos citar como ejemplo el sitio de armazón, donde vemos como está
categorizada la información y esta a su vez tiene subcategorías:

Figura 3
Ejemplos de categorías
© Universidad Estatal de Milagro – UNEMI

Nota: Categorías del sitio de amazon.


Una vez definidas las categorías, el paso siguiente es indicar a cuál o cuáles de ellas
pertenece cada elemento que compone nuestro producto digital. Dependiendo de la
definición de las categorías implícitas en la taxonomía, un documento puede ser
ubicado en más de una categoría (Miro. Leo. Luego Pienso – mordecki.com, s/f).

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 10


Elementos para el diseño de interfaz de usuario

2.3 Subtema 3: Modelo de interacción


La investigación descriptiva de las interfaces con molestias de usabilidad ubica como
una de las razones más relevantes la falta de un modelo de interacción en su
funcionalidad. Un modelo de interacción implica un grupo diminuto de funciones
simples o primitivas sobre las que se construyen funciones más complejas. Por ejemplo
sobre las funciones básicas "vínculo" se construyen las funciones hipertexto, menú y
botón, o sobre la primitiva "mouseover” o en la actualidad el uso de la yema de los
dedos en las pantallas táctiles" se construyen las funciones tooltip, menú desplegable y
factor colapsable, entre otras (Miro. Leo. Luego Pienso – mordecki.com, s/f). Esto
permite que la experiencia de usuario sea satisfactoria (Los 5 principios IxD. El diseño
de interacción crea una… | by Fang C. | Prototypr, s/f)

Figura 3
Modelo de interacción de usuario.

Nota: La interacción proviene de una investigación y desarrollo constante para que la


interfaz sea de una experiencia satisfactoria para el usuario.

La implementación eficiente de los modelos de interacción, hacen que se diseñen


interfaces estables, uniforme y con la simplicidad que se espera en su uso. Uno de los
© Universidad Estatal de Milagro – UNEMI

aspectos claves que nos ha llevado la investigación ha sido la introducción de las


nociones simples para comprender la interacción entre el usuario y el producto digital,
diferenciando lo que el usuario conceptualiza en su cerebro de lo que visualiza -
Modelo mental - (Miro. Leo. Luego Pienso – mordecki.com, s/f). Tenemos la
posibilidad de resumir los conceptos de la siguiente forma:

● Modelo de Implementación: Es el modelo que siguió el programador


para diseñar el interfaz del producto digital y que tiene como prioridad
que la funcionalidad se cumpla de una manera eficaz, segura y con un

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 11


Elementos para el diseño de interfaz de usuario

consumo mínimo de recursos informáticos. (Design model en la


terminología de Donald A. Norman).
● Modelo de Interacción: Es el modelo que aguanta la interacción entre el
usuario y la interfaz, formado por los recursos visibles del lugar así como
por las modalidades de relación que el lugar sugiere. Cumple el papel de
enganche o bisagra entre el Modelo de Implementación y el Modelo
Mental. (System Image en la terminología de Donald A. Norman).
● Modelo Mental: Es la perspectiva del problema o tarea a realizar que el
usuario tiene en su cabeza una vez que interactúa con el sitio o la
aplicación, producto del entendimiento o de las experiencias acumulada
en la relación a otros productos digitales similares al que está utilizando.
(User's Model en la terminología de Donald A. Norman)
Figura 4
Modelo mental de la interacción.

Nota: En la interacción el modelo mental juega un papel importante en el diseño de interfaces.


Elaboración propia
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 12


Elementos para el diseño de interfaz de usuario

2.4 Subtema 4: Interfaz


La interfaz desde la perspectiva estrictamente técnica, el punto de vista de contacto
del usuario con el cualquier equipo electrónico e incluye todo tipo de productos
digitales emite o muestra y todo lo cual el sitio obtiene (Miro. Leo. Luego Pienso –
mordecki.com, s/f). A la interfaz pertenecen las imágenes, los tipos de letra, los
colores, clip de videos, sonidos y generalmente todos los recursos multimedia.

Cuando se diseña una interfaz el factor emocional es relevante. Hay evidencia


científica contundente acerca de que el factor emocional influye en la facilidad de uso
de un producto digital, haciéndolo más fácil o más difícil según la percepción positiva o
negativa que el usuario tenga de la interfaz (Miro. Leo. Luego Pienso – mordecki.com,
s/f).
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 13


Elementos para el diseño de interfaz de usuario

3. Preguntas de Comprension de la
Unidad
1. ¿Qué se requiere conocer o identificar de la organización al momento de
diseñar la interfaz?

2. ¿A qué se refiere construir un producto digital de afuera hacia adentro?

3. Explique cómo diseñar un personaje desde la metodología de persona -


objetivos - escenarios

4. ¿Podrías definir con tus palabras sobre la categorización de la información en el


diseño de productos digitales?

5. ¿Qué técnica se podría utilizar para identificar de una mejor manera las
categorizaciones?

6. ¿Explique la definición de los tres modelos de interacción que previamente se


revisaron en clases?

7. ¿Explique el modelo mental aplicado en la interacción?

8. ¿Explique la definición de los tres modelos de interacción que previamente se


revisaron en clases?

9. ¿Explique el modelo mental aplicado en la interacción?

10. ¿Entienda y explique las diferencias entre los tres niveles de interacción que
vimos en el tema 2: Mira y entiendo, ¿Leo y entiendo y Pienso y entiendo?
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 14


Elementos para el diseño de interfaz de usuario

4. Material Complementario
• Personas en UX Design, https://www.youtube.com/watch?v=HRB9sQx6lrY
• Análisis previo al inicio de la planificación de un proyecto de desarrollo de un
producto digital, https://solucionesbpm.com/?p=84
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 15


Elementos para el diseño de interfaz de usuario

5. Bibliografía

» Los 5 principios IxD. El diseño de interacción crea una… | by Fang C. | Prototypr.


(s/f). Recuperado el 30 de mayo de 2021, de https://blog.prototypr.io/los-5-
principios-ixd-b28abeef8ca9
» Miro. Leo. Luego Pienso – mordecki.com. (s/f). Recuperado el 30 de mayo de
2021, de https://www.mordecki.com/mordecki.com/miro-leo-luego-pienso/
» Mordecki, D. (2012). Mira y entiendo. En BiD: textos universitaris de
biblioteconomia i documentació.
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 16


INTERFAZ Y MULTIMEDIA
Unidad #: 1
Diseño de interfaces de usuario
Tema #: 1
Elementos para el diseño de
interfaz de usuario

Ms. Christian A. Bermeo Valencia


Objetivo
Tendrá la capacidad de aplicar la metodología personas – objetivos –
escenarios para esbozar los usuarios que interactúan en el producto
digital que se diseñe.
Subtemas

» Subtema 1: Persona, Objetivos y Escenarios


» Subtema 2: Arquitectura de la información
» Subtema 3: Modelo de la interacción
» Subtema 4: Interfaz
Introducción
Hay que considerar estos cuatro elementos en el diseño de interfaces, los cuales son:

Metodología Arquitectura de la Modelo de interacción enfocado a la Interfaz


Persona - objetivos - información investigación en experiencia de
escenarios. usuarios
METODOLOGÍA
PERSONA – OBJETIVO - ESCENARIO
Amplíe lo aprendido leyendo el compendio 1
– las página 5 - 6.
PASO 2.
Definamos el perfil de personas

2.1. Describir las CARACTERÍSTICAS de las


PERSONAS

2.2. Establecer los OBJETIVOS de la PERSONA

2.3. Determinar los diferentes ESCENARIOS que se


desenvolverá la PERSONA

Amplíe lo aprendido leyendo el compendio 1


– páginas 7-8
Ejemplo de PERFILE de USUARIOS
orientados a la UX

https://inboundplus.agency/que-es-un-
buyer-persona/

https://blogging-techies.com/como-crear-una-persona-
compradora-concreta-con-plantillas-y-ejemplos/
ARQUITECTURA DE LA
INFORMACIÓN
Categoría

Subcategoría por
El diseño de la
marca arquitectura de
información cumple:

Son mutuamente


excluyentes

Jerarquía equivalente
Subcategoría por
tipo de equipo Abarcan todo el universo
de contenido 

PRODUCTO DIGITAL: Sitio web www.deprati.com.ec

Amplíe lo aprendido leyendo el compendio 1


– las página 13 - 14.
MODELO DE INTERACCIÓN
Amplíe lo aprendido leyendo el compendio 1
– las página 15 - 17.
INTERFAZ

Amplíe lo aprendido leyendo el compendio 1


– página 18.
Conclusión
El proceso de crear personas debe ser participativo. Siendo este proceso el inicio del diseño de interfaces, donde la
arquitectura de información e interacción será una experiencia agradable y de fácil uso a los usuarios.
Evaluación
En el aula virtual encontrará un caso de estudio a resolver. El que permitirá que demuestren sus habilidades y formulen sus
propias técnicas para la aplicación de lo aprendido.
Amplíe sus conocimientos realizando lo siguiente:

• Lea el compendio No. 1


• Vea los videos de la semana 1 y 2.
Bibliografía
» Daniel, Mordecki. (2012). Miro y Entiendo. Biblioteca Concreta.
ÍNDICE

1. Unidad 1: Diseño de interfaces de usuario ................................................................................. 3

Tema 2: Niveles de interacción para el diseño de usuarios ...................................................................... 3

Objetivo: ................................................................................................................................................... 3

Introducción: ............................................................................................................................................. 3

2. Información de los subtemas .................................................................................................... 4

2.1 Subtema 1: Nivel de interacción – Mira y entiendo .................................................................... 4

2.2 Subtema 2: Nivel 2 de interacción – Le y entiendo...................................................................... 9

2.3 Subtema 3: Nivel 3 de interacción – Pienso y entiendo............................................................. 10


Tema 3: Pilares del diseño UI/UX ........................................................................................................... 11

Objetivo: ................................................................................................................................................. 11

Introducción: ........................................................................................................................................... 11

3. Información de los subtemas .................................................................................................. 12

3.1 Subtema 1: Design thinking....................................................................................................... 12

3.2 Subtema 2: Metodologías ágiles de desarrollo de software ..................................................... 14

3.3 Subtema 3: Lean Startup ........................................................................................................... 17

Tema 4: Principios del diseño UI/UX....................................................................................................... 19

Objetivo: ................................................................................................................................................. 19

Introducción: ........................................................................................................................................... 19

4. Información de los subtemas .................................................................................................. 20

4.1 Subtema 1: Principios del equipo de desarrollo de la interfaz .................................................. 20

4.2 Subtema 2: Principios del proceso del desarrollo de la interfaz ................................................ 21


4.3 Subtema 3: Principios del resultado de la interfaz orientada al usuario .................................. 22

5. Preguntas de Comprensión de la Unidad ................................................................................. 25

6. Material Complementario ...................................................................................................... 26

7. Bibliografía ............................................................................................................................ 27

2
Diseño de interfaces de usuario

1. Unidad 1: Diseno de interfaces de


usuario
Tema 2: Niveles de interacción para el diseño de
usuarios
Objetivo:
Tendrá la capacidad de ejemplificar los niveles de interacción en los diseños de interfaces de
usuario.

Introducción:
Para diseñar productos digitales es importante pasar al otro lado de la pantalla e
intentar entender cómo los usuarios interactúan con ellos. De alguna manera puede
entenderse que maximizar la facilidad de uso es optimizar el producto digital para que
las estrategias de interacción de los usuarios funcionen lo mejor posible (Miro. Leo.
Luego Pienso – mordecki.com, s/f).
Los tres niveles que se podría considerar en el diseño de las interfaces de producto
digitales son los siguientes:

• Mirar,
• Leer y
• Pensar.

Cada uno de ellos requiere un nivel de atención particular, un esfuerzo consciente


particular y retorna al usuario un nivel de resultados particular. La interacción con un
© Universidad Estatal de Milagro – UNEMI

producto digital se desarrolla simultáneamente en los tres niveles, éstos se combinan e


interactúan permanentemente entre sí y el usuario obtiene su experiencia como un
todo, sin necesidad de tener conciencia alguna sobre qué nivel fue el que le aportó qué
dato (Miro. Leo. Luego Pienso – mordecki.com, s/f).

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 3


Diseño de interfaces de usuario

2. Informacion de los subtemas


2.1 Subtema 1: Nivel de interacción – Mira y entiendo
Este nivel es el más básico de interacción. Se hace de una manera semiconsciente o
inconsciente. Usando un bagaje de experiencias y aprendizajes previamente adquiridos
que intentará utilizar para reconocer patrones, relaciones, causa efecto, agrupación
visual, los efectos cromáticos, los espacios, la ubicación, los tamaños, entre otros
elementos que permitirán al usuario comprender múltiples aspectos del producto
digital (Miro. Leo. Luego Pienso – mordecki.com, s/f). Para una mejor comprensión de
esta interacción vamos ampliar los temas siguientes (Mordecki, 2012):
a) La institución.
b) Leyes de la Gestalt.
c) Leyes UX.

La intuición
Es dentro del nivel “Miro y entiendo” que debe ser tomada en cuenta la intuición. A
diferencia de la creencia popular de que la intuición es una especie de sexto sentido
con el que se nace, la intuición no es más que una serie de patrones simples y
elementales con los que el individuo ha interactuado una cantidad suficiente de veces
como para que su reconocimiento e interpretación sea semiconsciente o inconsciente
(Miro. Leo. Luego Pienso – mordecki.com, s/f).
Las actividades de reconocimiento de patrones que componen la intuición no son
innatas, sino aprendidas. La consecuencia práctica de la intuición para el diseño es que
quien quiera aprovecharla deberá buscar los patrones que los individuos han
aprendido a lo largo de su vida y reproducirlos, dejando la mayor cantidad de pistas
posibles de este hecho. En la Web, esto se traduce en el respeto de los estándares,
tanto explícitos como de facto. Este mecanismo reproduce y refuerza aún más los
patrones (Miro. Leo. Luego Pienso – mordecki.com, s/f).
Veamos un ejemplo sencillo: el título de un artículo, una nota o una página Web es
© Universidad Estatal de Milagro – UNEMI

grande y está arriba, alineado a la izquierda o eventualmente centrado. Ese patrón ha


sido visto por todos los humanos lectores de lenguas que se escriben de izquierda a
derecha miles y miles de veces y su reconocimiento es instantáneo a pesar de que no
nacieron con él. Cuando un visitante aterriza en una página cualquiera desde un
buscador, lo primero que hace es tratar de identificar pistas que le indiquen si acertó al
clickear en la lista de resultados, si la página a la que llegó es realmente la que
buscaba. El título de la página es la pista preferida: intuitivamente buscará ese texto
prominente que se ubica en la parte superior de la página. Es una reacción de tipo
“Miro y entiendo”. Si no lo encuentra a simple vista, tendrá que pasar a otros niveles

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 4


Diseño de interfaces de usuario

de interacción para detectar cuál es el título de la página, en caso de que realmente


tenga un título.
Como ejemplo vemos en la siguiente ilustración que cuando se requiere un producto
digital para vender cuentos infantiles y se requiere una imagen que venda la
experiencia, más que uno u otro libro.

Leyes de la Gestalt
Gran parte del conocimiento sobre el nivel “Miro y entiendo” se lo debemos a la
escuela de psicología alemana Gestalt -un término alemán que no tiene una traducción
precisa al español. Gestalt podríamos definir como una configuración un o conjunto de
elementos que están unificados de tal forma en un todo, que sus propiedades y
significado no pueden ser derivados de la suma de las partes.

La Gestalt o Psicología Gestalt es una corriente que tiene como una de sus ramas
centrales (la que más nos interesa a nosotros) el análisis de la percepción y la memoria
para entender las leyes por las cuales a partir de la información sensorial y la
información almacenada en nuestro cerebro, se conforma el pensamiento, la
inteligencia y la solución de problemas. En el terreno de la psicología tiene sus
defensores y sus detractores, pero para el punto de vista del diseño de la interacción el
aporte es invalorable, porque explica una amplia variedad de problemas del diseño de
© Universidad Estatal de Milagro – UNEMI

interfaces a partir de sus postulados básicos

La Gestalt o Psicología Gestalt es una corriente que tiene como una de sus ramas
centrales el estudio de la percepción y la memoria para comprender las leyes por las
cuales desde la información sensorial y la información almacenada en nuestro cerebro,
se conforma el pensamiento, la inteligencia y la solución de inconvenientes. Las leyes
de diseño nacidas a partir de este estudio son las siguientes:

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 5


Diseño de interfaces de usuario

➢ Ley de la relación entre figura y fondo - La mente humana puede percibir o


comprender una imagen como fondo o figura, pero no los dos al mismo tiempo
(TDCOM3: Leyes de la Percepción, s/f).

➢ Ley de Continuidad - Los detalles que mantienen un patrón o dirección tienden


a agruparse juntos, como parte de un modelo (Mordecki, 2012). Es decir, si
varios elementos parecen estar colocados formando un flujo orientados hacia
una parte se percibirá como un todo (TDCOM3: Leyes de la Percepción, s/f).

➢ Ley de Proximidad - Elementos que están cercanos entre sí, nuestra mente
percibe que forman parte de una unidad. Así que observamos en el sitio de
Cabify los enlaces de “inicio de sesión” y “Regístrate” no son parte del menú
que está más a la izquierda (La Escuela de la Gestalt - Psicologia General, s/f).
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 6


Diseño de interfaces de usuario

➢ Ley de la semejanza o similitud - Nuestra mente agrupa los elementos que son
parecidos son percibidos como si tiene la misma forma. La semejanza o
similitud depende de la forma, el tamaño, el color y otros aspectos visuales de
los elementos (TDCOM3: Leyes de la Percepción, s/f). Observamos en el sitio de
De Prati contendores donde presentan información de los televisores muy
similares.

➢ Ley de cierre.- Una forma se percibe mejor cuando más cerrado está su
contorno. En el panda de wwf podemos observar como tenemos que detener
nuestra mirada para ir cerrando la imagen.

➢ Ley de Compleción: Si un contorno no está completamente cerrado, nuestra


© Universidad Estatal de Milagro – UNEMI

mente tiende a percibir como si estuviera cerrado. Lo podemos percibir en el


mismo ejemplo anterior de wwf

Leyes UX

Las leyes UX nos permite que los usuarios tengan una experiencia eficiente con
el producto digital (Home | Laws of UX, s/f):

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 7


Diseño de interfaces de usuario

1. Los usuarios que lo encuentran más estético a una interfaz tienden a encontrar
una mejor experiencia.
2. El tamaño y posición de un elemento nos permite encontrar de mejor manera
los elementos. Ej. un botón más grande y contrastado más fácil se le hará al
usuario encontrarlo.
3. La decisión de un usuario se ve altamente afectado por la cantidad de opciones,
mientras menos opciones más rápido se tomará una decisión
4. La proximidad de elementos que están cercanos entre sí, se percibe que
forman parte de una unidad (esto está influenciado por la otra ley que vimos).
5. Ya que los usuarios tienen experiencia previa en otros productos digitales,
esperan encontrarse o que se repita las mismas experiencias en el producto
que están usando actualmente. se tiene que usar patrones universales.
Usemos el sentido común y empatía en el diseño frente de la computadora y para
verificar o cuando queramos justificar usemos estas leyes antes vistas.
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 8


Diseño de interfaces de usuario

2.2 Subtema 2: Nivel 2 de interacción – Le y entiendo


Este nivel necesita más esfuerzo implementarlo. La particularidad de esta interacción
está en el hecho de que no requiere nada más que el escrito que se lee para entender
cabalmente el sentido del mismo (Miro. Leo. Luego Pienso – mordecki.com, s/f). No
requiere conocer con anterioridad a la organización ni su producto digital, por esta
razón podríamos llamar al “Leo y entiendo” como lectura “autoexplicativa”. Por
ejemplo:

● Un enlace con el nombre "Catálogo de Productos electrónicos" cae sin


duda dentro del nivel “Leo y entiendo”,

● un enlace que solo tenga el nombre "Soporte" cae fuera de este nivel,
por la razón que el usuario requiere de tener mayor información para
saber de qué tipo de soporte se trata.

● El "Haga click aquí" es una frase que nos lleva siempre a una
oportunidad de mejora, ya que sabemos de antemano que el usuario
podrá no entender porque tiene que hacer clic para seguir a otras
opciones u obtener mayor información.

Los objetivos de los usuarios no incluyen en ningún caso conocer la estructura del
producto digital - jerarquía de categorías - (Miro. Leo. Luego Pienso – mordecki.com,
s/f). Sus propósitos siempre están anclados en el verdadero contenido y funcionalidad
del producto digital. Por esta razón primero tenemos que entender las leyes de Gestalt
vistas en el apartado anterior.

Ejemplo común de desproporción en los requerimientos de comprensión son:

● La implementación de códigos de colores para indicar la pertenencia a


secciones (Miro. Leo. Luego Pienso – mordecki.com, s/f). Los test de
usabilidad presentan que ni siquiera usuarios comunes son capaces de
comprender y usar dichos códigos, que son notados como mera
decoración. Los usuarios no se detienen a pensar el tiempo suficiente
© Universidad Estatal de Milagro – UNEMI

como para hacer un uso racional de los códigos de colores y su impacto.

Los productos digitales que plantean una especie de entorno virtual desde una
metáfora son los que llevan al extremo el problema de la comprensión. La confianza en
la interpretación del juego visual provoca que los textos desaparezcan, por lo cual las
alternativas son sólo 2: “Miro y entiendo” y “Pienso y entiendo”.

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 9


Diseño de interfaces de usuario

2.3 Subtema 3: Nivel 3 de interacción – Pienso y


entiendo
Este es el nivel superior, y al que acudimos para comprender cualquier problema que
se encuentre a nuestro alcance, es el de “Pienso y entiendo”: así sea para recordar
algo leído antes o para hacer alusión a conocimientos adquiridos en otro medio (Miro.
Leo. Luego Pienso – mordecki.com, s/f). Si estoy dentro del público objetivo.

“Pienso y entiendo” es el mecanismo de la interacción que puede solucionar cualquier


problema y transmitir cualquier contenido o criterio, sin embargo, lo hace a un enorme
esfuerzo por parte de los usuarios. La práctica y los test de usabilidad presentan que
este esfuerzo para utilizar razonamiento a la comprensión de los contenidos que le
presentamos es tan destacable que, si el premio no es relevante, los visitantes se
sentirán poderosamente defraudados.

Una buena forma de acercarse a la realidad de la usabilidad de nuestro producto


digital es ser pesimista en la previsión de cuánto esfuerzo dedicarán los usuarios para
entender lo diseñado, aun cuando la mayor parte de las veces es todavía peor.
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 10


Diseño de interfaces de usuario

Tema 3: Pilares del diseño UI/UX


Objetivo:
Tendrá la capacidad de aplicar metodologías UX/UI para el diseño de interfaces.

Introducción:
Los pilares en un diseño UX/UI podemos considerar los del Lean UX, siendo este
método una forma distinta de idear o crear. Esta metodología nos da una nueva
mentalidad para el diseño y desarrollo de productos digitales. Esta metodología
implica tres pilares fundamentales: cambio de procesos, en la forma de enfrentar el
trabajo de diseño y una transformación en la forma de gestionar los proyectos. Los
pilares en que se apoya el Lean UX son:

• Design Thinking
• Metodologías de desarrollo ágil de software
• Lean Startup
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 11


Diseño de interfaces de usuario

3. Informacion de los subtemas


3.1 Subtema 1: Design thinking
Debemos considerar que design thinking tiene una distinción importante es que
estamos hablando de pensamiento de diseño y no de diseño como tal. Esta
metodología se basa en la observación de la conducta humana respecto del producto -
en nuestro caso el producto digital - para luego desarrollarla. En palabras de Tim
Browun, profesor de la Universidad de Stanford que afirma “El design thinking usa la
sensibilidad y método de los diseñadores para hacer coincidir las necesidades de las
personal con lo que es tecnológicamente factible y con lo que una estrategia viable de
negocios puede convertir en el valor para el cliente -usuario en nuestro caso - y en una
oportunidad para el mercado” (Serrano Ortega & Blazquez Cevallos, 2016).

Esta metodología ayuda a la resolución de problemas de forma creativa incluye


empatía, imaginación y experimentación. Con ella, las organizaciones pueden ofrecer
soluciones efectivas e innovadoras.

Fases de la metodología design thinking (Design Thinking en Español, s/f):


© Universidad Estatal de Milagro – UNEMI

● Empatizar: Esta fase es esencial en esta metodología ya que se ocupa del


descubrimiento y entendimiento de las principales necesidades del usuario.
Este proceso empático se enfoca en analizar profundamente al usuario,
comprendiendo sus verdaderas motivaciones y haciéndolas propias. Para llevar
a cabo esta exploración, no basta con observar a los usuarios, sino que también
es necesario interactuar con ellos (El proceso del Design Thinking: los pasos
principales para desarrollarlo | Marketing | Apuntes empresariales | ESAN, s/f).

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 12


Diseño de interfaces de usuario

● Definir: Luego de conocer las distintas necesidades en la etapa anterior, se


definen cuáles son las principales. Para esto, se realiza una evaluación
minuciosa de la gran variedad de problemas detectada previamente. Al
determinar las necesidades medulares, será posible plantear medidas para
llegar a una solución definitiva (El proceso del Design Thinking: los pasos
principales para desarrollarlo | Marketing | Apuntes empresariales | ESAN, s/f).

● Idear. El equipo de diseño, en esta etapa, debe pensar creativamente y lanzar


más de una idea o solución para solucionar aquellos problemas específicos que
identificó en la fase previa. En este proceso de pensamiento divergente está
permitido equivocarse. Además, para llevarlo a cabo se pueden utilizar técnicas
para estimular la creatividad y el pensamiento libre (El proceso del Design
Thinking: los pasos principales para desarrollarlo | Marketing | Apuntes
empresariales | ESAN, s/f).

● Prototipar. Básicamente es el materializar las ideas seleccionadas, en


ocasiones, el prototipo puede ser físico o digital (El proceso del Design Thinking:
los pasos principales para desarrollarlo | Marketing | Apuntes empresariales |
ESAN, s/f).

● Evaluar: En esta última fase, los usuarios prueban y evalúan los prototipos
elaborados anteriormente, de acuerdo a las críticas de los usuarios, el equipo
de diseño podrá hacer correcciones en los prototipos. Esta etapa empírica de
validación es crucial para descubrir errores y aciertos (El proceso del Design
Thinking: los pasos principales para desarrollarlo | Marketing | Apuntes
empresariales | ESAN, s/f).

Además de la creatividad e intuición, en el proceso de design thinking, el trabajo en


equipo también tiene un rol importante, la realización de esta metodología se lleva a
cabo, por lo general, con profesionales de diferentes ramas y requiere de mucha
cooperación (Diseño – businessworld365, s/f).

En esencia, el proceso de design thinking es iterativo, flexible y está enfocado en la


colaboración entre diseñadores y usuarios. Además, pone énfasis en hacer realidad las
© Universidad Estatal de Milagro – UNEMI

ideas basadas en cómo los usuarios reales piensan, sienten y se comportan. Permite
obtener nuevos conocimientos, desarrollar nuevas formas de ver el producto y sus
posibles usos, y obtener una comprensión mucho más profunda de los usuarios y los
problemas que enfrentan (Serrano Ortega & Blazquez Cevallos, 2016).

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 13


Diseño de interfaces de usuario

3.2 Subtema 2: Metodologías ágiles de desarrollo de


software
SCRUM

Scrum es un marco para desarrollar y mantener productos complejos. La guía de Scrum


contiene la definición. Esta definición consta de roles, eventos, artefactos y las reglas
de Scrum que los unen. Ken Schwaber y Jeff Sutherland desarrollaron Scrum y su guía
(Schwaber et al., 2020).

Scrum tiene sus unidades fundamentales para la implementación, las que se describen
a continuación:

● Scrum Team: es la unidad fundamental de Scrum es un pequeño equipo


de personas, un Scrum Team. El Scrum Team consta de un Scrum
Master, un Product Owner y Developers. Dentro de un Scrum Team, no
hay subequipos ni jerarquías. Es una unidad cohesionada de
profesionales enfocados en un objetivo a la vez, el Objetivo del
Producto (El proceso del Design Thinking: los pasos principales para
desarrollarlo | Marketing | Apuntes empresariales | ESAN, s/f).

● Eventos de Scrum: El Sprint es un contenedor para todos los


demás eventos. Cada evento en Scrum es una oportunidad formal para
inspeccionar y adaptar los artefactos Scrum, estos eventos están
diseñados específicamente para habilitar la transparencia requerida, no
operar cualquier evento según lo prescrito resulta en la pérdida de
oportunidades para inspeccionar y adaptarse, los eventos se utilizan en
Scrum para crear regularidad y minimizar la necesidad de reuniones no
definidas en Scrum, lo óptimo es que todos los eventos se celebren al
mismo tiempo y en el mismo lugar para reducir la complejidad (El
proceso del Design Thinking: los pasos principales para desarrollarlo |
© Universidad Estatal de Milagro – UNEMI

Marketing | Apuntes empresariales | ESAN, s/f).

● Artefactos de Scrum: Los artefactos de Scrum representan trabajo o


valor. Están diseñados para maximizar la transparencia de la
información clave. Por lo tanto, todas las personas que los inspeccionan
tienen la misma base de adaptación(El proceso del Design Thinking: los
pasos principales para desarrollarlo | Marketing | Apuntes
empresariales | ESAN, s/f).

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 14


Diseño de interfaces de usuario

Cada artefacto contiene un compromiso para garantizar que


proporcione información que mejore la transparencia y el enfoque
frente al cual se pueda medir el progreso:

➔ Para el Product Backlog, es el Objetivo del Producto.


➔ Para el Sprint Backlog, es el Objetivo del Sprint.
➔ Para el Increment es la Definición de Terminado.
Estos compromisos existen para reforzar el empirismo y los valores de
Scrum para el Scrum Team y sus interesados.

kanban

Un tablero de kanban es una herramienta ágil de gestión de proyectos diseñada para


ayudar a visualizar el trabajo, limitar el trabajo en curso y maximizar la eficiencia (o el
flujo). Puede ayudar tanto a los equipos ágiles como a los de DevOps a definir el orden
de su trabajo diario. Los tableros de kanban utilizan tarjetas, columnas y la mejora
continua para ayudar a los equipos tecnológicos y de servicios a comprometerse con la
cantidad de trabajo adecuada y, por supuesto, a llevarla a cabo (Lienzo de
experiencias: una estrategia lean | Atlassian Team Playbook, s/f).

Los elementos del tablero son:

1. Señales visuales: una de las primeras cosas que observarás en un


tablero de kanban son las tarjetas visuales (adhesivos, tickets, etc.). Los
equipos de kanban escriben todos sus proyectos y elementos de trabajo
en tarjetas, generalmente uno por tarjeta. Para los equipos ágiles, cada
tarjeta podría encapsular una historia de usuario. Sobre el tablero, estas
señales visuales ayudan a los compañeros de equipo y a las partes
interesadas a discernir rápidamente en qué está trabajando el equipo
(¿Qué es un tablero kanban? | Atlassian, s/f).
2. Columnas: otra de las señas de identidad de los tableros de kanban son
las columnas. Cada columna representa una actividad específica que, en
© Universidad Estatal de Milagro – UNEMI

conjunto, conforman un “flujo de trabajo”. Las tarjetas van moviéndose


por el flujo de trabajo hasta que este termina. Los flujos de trabajo
pueden ser algo tan sencillo como “Por hacer”, “En curso” y
“Terminado” o pueden ser mucho más complejos (¿Qué es un tablero
kanban? | Atlassian, s/f)..
3. Límites del trabajo en curso: los límites del trabajo en curso son el
número máximo de tarjetas que puede haber en una columna en un
momento dado. Una columna con un límite de trabajo en curso de tres
no puede contener más de tres tarjetas. Cuando la columna está “al

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 15


Diseño de interfaces de usuario

máximo”, el equipo debe concentrarse en esas tarjetas y hacer que


avancen antes de que puedan entrar tarjetas nuevas en esa etapa del
flujo de trabajo. Estos límites del trabajo en curso resultan vitales para
exponer los cuellos de botella del flujo de trabajo y maximizar el flujo.
Dichos límites te brindan una señal de alerta temprana de que te has
comprometido a asumir demasiado trabajo (¿Qué es un tablero kanban?
| Atlassian, s/f)..
4. Punto de compromiso: los equipos de kanban suelen tener un backlog
para su tablero. Es aquí donde los clientes y los compañeros de equipo
plantean ideas para proyectos que el equipo puede adoptar cuando esté
listo para ello. El punto de compromiso es el momento en que el equipo
adopta una idea y se inicia el trabajo en el proyecto (¿Qué es un tablero
kanban? | Atlassian, s/f).
5. Punto de entrega: el punto de entrega es el final del flujo de trabajo de
un equipo de kanban. Para la mayoría de los equipos, el punto de
entrega es el momento en el que el producto o servicio está en manos
del cliente. El objetivo del equipo consiste en llevar las tarjetas desde el
punto de compromiso hasta el punto de entrega cuanto antes. El tiempo
transcurrido entre ambos es lo que se conoce como “plazo”. Los equipos
de kanban mejoran continuamente para acortar al máximo los plazos
(¿Qué es un tablero kanban? | Atlassian, s/f).
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 16


Diseño de interfaces de usuario

3.3 Subtema 3: Lean Startup


En Fabricación, podríamos encontrar el pensamiento lean tradicional. En Ingeniería e
Informática, quizá alguna versión de las metodologías de desarrollo ágil de software.
En Marketing, Desarrollo de Clientes. En Operaciones, DevOps1 y, por supuesto, en
Diseño, lo último en técnicas de design thinking, de diseño de interacciones y de
investigación de mercado de comportamientos de usuario (Carraro & Duarte, 2015).

Lean UX es un paso importante en esa evolución. Por primera vez disponemos de una
perspectiva completa de cómo los principios de Lean Startup deben aplicarse en un
contexto de diseño. Lean Startup abarca muchos conceptos. Se creó partiendo de
ideas de muchas disciplinas, desde la fabricación lean al design thinking. Nos ofrece,
por otra parte, un vocabulario común y un conjunto de conceptos que pueden
utilizarse para acelerar los resultados en toda la compañía (Carraro & Duarte, 2015).

Los principios lean que subyacen al Lean Startup se aplican a Lean UX de tres formas
diferentes.

● Nos ayudarán a eliminar el despilfarro en el proceso de diseño de


experiencia de usuario (UX). De esa manera, podremos cambiar un
entorno con gran cantidad de entregas de documentación por uno en el
que solo se crean los artefactos de diseño necesarios para que el equipo
aprenda algo nuevo.

● Armonizará nuestro «sistema», que está compuesto por diseñadores,


desarrolladores, gerentes de producto, ingenieros de control de calidad,
especialistas de marketing, entre otros. Y lo hará gracias a la
colaboración funcional, puesto que, merced a ella, los que no forman
parte del equipo de diseño también podrán formar parte del proceso.

● Al adoptar un modelo basado en la experimentación, la mentalidad con


la que afrontamos los proyectos tendrá que cambiar. Dejaremos de
apoyarnos en el diseñador heroico, capaz, gracias a una revelación, de
© Universidad Estatal de Milagro – UNEMI

encontrar la mejor solución desde un único punto de vista. En su lugar,


pondremos en marcha diversos experimentos y mediremos sus
resultados para aprender rápidamente si nuestras ideas cumplen (o no)
con nuestros objetivos y en qué medida lo hacen.

La verdad es que, en este nuevo mundo, eso de «imagínalo todo en primer lugar» ya
no funciona. La pregunta es, por tanto, ¿qué debemos hacer como diseñadores?
Debemos cambiar, esa es la respuesta. Lean UX (UX = experiencia de usuario) es una
nueva etapa evolutiva en el diseño de productos. Esta metodología utiliza las mejores
herramientas de las que disponemos y las combina de forma diferente para adecuarlas
a esta nueva realidad. Lean UX es como es, profundamente colaborativo y

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 17


Diseño de interfaces de usuario

multifuncional, porque ya no nos podemos permitir el lujo de trabajar aislados del


resto del equipo de producción.

Los pilares de esta metodología son (Gothelf et al., 2014):

● El primero de ellos es el design thinking. Lean UX considera importante


el design thinking porque esta manera de concebir el diseño defiende
una posición concreta para todos los aspectos del negocio que deban
abordarse con él. Además, permite a los diseñadores superar los límites
habituales que se les imponen en los proyectos.

● El segundo pilar de Lean UX son las metodologías de desarrollo ágil de


software. Los desarrolladores han estado utilizándose durante años
para reducir el ciclo de vida de sus productos y aportar de forma
constante valor a sus clientes. No obstante, aunque los valores de estas
metodologías están en el mismo núcleo de Lean UX, a veces constituyen
un reto para los diseñadores (para encontrar las soluciones a este reto,
puedes consultar la Sección III). Estas metodologías aplican al diseño de
productos cuatro principios básicos del desarrollo ágil de software:

● El tercer pilar de Lean UX es el método Lean Startup fundado por Eric


Ries. Lean Startup utiliza un ciclo de feedback denominado « crear -
medir - aprender » que minimiza el riesgo de los proyectos y que
consigue que el equipo pueda desarrollar software y aprender de él en
muy poco tiempo. Con este método, los equipos desarrollan lo antes
posible los denominados Productos Mínimos Viables (PMV) —en inglés
Minimum Viable Products, MVP— para comenzar cuanto antes el
proceso de aprendizaje (Gothelf et al., 2014).

Tal y como indica el propio Eric: «Lean Startup aboga desde el principio por la creación
de prototipos rápidos para comprobar, por un lado, que las suposiciones que hemos
hecho sobre el mercado son correctas y, por otro, para conseguir feedback de los
clientes y así poder mejorar el software mucho más rápido que las prácticas
© Universidad Estatal de Milagro – UNEMI

tradicionales de ingeniería de software […] Al aumentar la frecuencia de contacto con


clientes reales, se reduce el despilfarro y se prueban lo antes posible las ideas del
equipo, evitando así las suposiciones incorrectas sobre el mercado». Lean UX, por su
parte, consiste en la aplicación directa de esta filosofía al diseño de productos (Gothelf
et al., 2014).

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 18


Diseño de interfaces de usuario

Tema 4: Principios del diseño UI/UX


Objetivo:
Tendrá la capacidad de construir interfaces de usuario de acuerdo a los principios
UX/UI.

Introducción:
Lean UX contiene en su núcleo un juego de principios clave, que abarcan el proceso de
diseño, la colaboración, la gestión, etc., y que permiten que los equipos puedan sacarle
el máximo partido al enfoque propio de la metodología.
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 19


Diseño de interfaces de usuario

4. Informacion de los subtemas


4.1 Subtema 1: Principios del equipo de desarrollo de
la interfaz
Equipos multifuncionales: Este tipo de equipos deben incluir todas las disciplinas que
intervienen en la creación del producto. La ingeniería del software, la gestión del
producto, el diseño de interacciones, el diseño gráfico, la estrategia de contenidos y el
control de calidad (QA), todas deben contar con representantes en ellos. Lean UX
necesita que todos los que se dedican a estos campos colaboren intensamente, por lo
que la implicación del equipo debe ser continua, desde el primer día del proyecto
hasta el final. Estos equipos, diversos en su constitución, evitan el desarrollo en
cascada, con su proceso rígido de entregas de documentación. En su lugar, todos los
campos aportan conocimiento mucho antes al proceso. Como la metodología
promueve, además, que los miembros de los diferentes silos hablen entre ellos, la
eficacia del equipo aumenta (Gothelf et al., 2014).

Pequeños, dedicados, coubicados: Es necesario limitar el tamaño de los equipos —no


deben ser mayores de diez personas—, dedicarlos en exclusiva al proyecto y que
trabajen en el mismo lugar. El beneficio de los equipos pequeños se resume en tres
palabras: comunicación, concentración y camaradería. Así se mantienen más
fácilmente al tanto del estado del proyecto, de los cambios y del nuevo conocimiento
que surja. Su dedicación en exclusiva, por otra parte, hace que todos los miembros
estén centrados en las mismas prioridades. Como, además, trabajan en el mismo lugar,
las relaciones entre colegas son más estrechas(Gothelf et al., 2014).

Equipos centrados en los problemas: Un equipo centrado en los problemas es un


grupo que sabe que debe resolver el problema de negocio asignado y no limitarse a
implementar un grupo de funciones. Este principio es una extensión lógica del
anterior, que afirmaba que el progreso del proyecto dependía de los resultados. ¿Por
qué hacerlo? Si asignamos problemas completos al equipo les demostramos más
© Universidad Estatal de Milagro – UNEMI

confianza. Además, así les permitimos llegar a sus propias soluciones, con lo que
conseguiremos aumentar el amor propio y la sensación de propiedad del equipo sobre
ellas (Gothelf et al., 2014).

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 20


Diseño de interfaces de usuario

4.2 Subtema 2: Principios del proceso del desarrollo


de la interfaz
Eliminación del despilfarro: Uno de los principios importantes de la fabricación lean es
la eliminación de todo lo que no contribuya a conseguir el objetivo final. En Lean UX,
este objetivo final es la producción de mejores resultados, por lo que todo lo que no
ayude a conseguirlos se considera despilfarro y debe eliminarse del proceso de trabajo
del equipo. Los recursos del equipo de diseño o desarrollo son limitados, por lo que
cuanto más despilfarro eliminemos, podrán moverse más ágil sus miembros. En
realidad, lo que los equipos quieren es ser efectivos y trabajar en los retos adecuados.
Si somos inflexibles eliminando el despilfarro, la atención de los equipos estará
absolutamente centrada donde debe (Gothelf et al., 2014).

Lotes pequeños: Otra idea fundamental de la fabricación lean es la utilización de lotes


pequeños. En ese modelo, esta noción se usaba para indicar que no debía haber
muchos productos en stock y que la calidad de producción debía ser alta. Adaptado a
Lean UX, su significado es que el equipo sólo debe crear los diseños necesarios para
avanzar, evitando crear un gran stock de ideas de diseño sin probar ni implementar. El
diseño en grandes lotes resta eficiencia al equipo, ya que, para poder realizar grandes
entregas de diseño, lo hará esperar. No podrán aprender si sus ideas funcionan e,
inevitablemente, algunos de sus miembros tendrán que estar desocupados, aparte de
generar recursos de diseño inútiles. Es decir, se trata de una estrategia despilfarradora
que no maximiza el potencial de aprendizaje del equipo (Gothelf et al., 2014).

Progreso igual a resultados, no a entregas de documentación: Las funciones y los


servicios desarrollados constituyen la documentación de salida. Los objetivos del
negocio, en cambio, se denominan resultados. La metodología Lean UX mide el
progreso del proyecto según resultados de negocio definidos explícitamente, y no
según la documentación. Si intentamos predecir qué funciones de las que estamos
desarrollando conseguirán resultados concretos para el negocio, normalmente solo
estaremos especulando. Aunque resulta más fácil gestionar el proyecto de manera que
se vayan desarrollando grupos de funciones, en realidad no sabremos si estas son
© Universidad Estatal de Milagro – UNEMI

efectivas hasta probarlas en el mercado. Si la gestión del proyecto, en cambio, está


orientada a los resultados (y consideramos que el proyecto está avanzando o no según
se consigan esos resultados), podemos saber si las funciones que estamos
desarrollando son eficaces. Si alguna de ellas no funciona, podemos decidir de forma
objetiva si es necesario mantenerla, cambiarla o sustituirla (Gothelf et al., 2014).

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 21


Diseño de interfaces de usuario

4.3 Subtema 3: Principios del resultado de la interfaz


orientada al usuario
Descubrimiento continuo El descubrimiento continuo consiste en comprometer a los
clientes con el proceso de diseño y desarrollo, mediante actividades programadas con
ellos a intervalos regulares, en las que se aplican métodos cualitativos y cuantitativos.
El objetivo es entender lo que los usuarios están haciendo con nuestros productos y
por qué lo están haciendo. La investigación de mercado con ellos debe realizarse de
forma frecuente y regular y debe implicar al equipo al completo. Las conversaciones
regulares con los clientes ofrecen oportunidades frecuentes de validar nuevas ideas
sobre el producto. Por otra parte, al incluir al equipo completo en el ciclo de
desarrollo, estos desarrollarán empatía por los usuarios y por los problemas a los que
tienen que enfrentarse. Además, como todos los miembros aprenden juntos en esas
reuniones, no será necesario crear demasiada documentación ni explicar lo sucedido
en reuniones internas (Gothelf et al., 2014).
GOOB: La nueva centralidad del usuario, Aunque pueda sonar como el balbuceo de un
niño, en realidad GOOB es un acrónimo de lo que el profesor de Stanford, empresario
y autor Steve Blank denomina «salir del edificio» («Getting Out Of the Building»).
Quiere decir que los debates sobre las necesidades de los usuarios no tienen por qué
cerrarse en el mismo lugar en el que se celebran, es decir, en la oficina. Las respuestas,
más bien, están en el mercado, fuera de ella. Después de mucho tiempo abogando por
la investigación del comportamiento de los usuarios, la comunidad de experiencia de
usuarios (UX) tiene un aliado en Steve Blank, que viene del mundo de los negocios. Su
consejo: ofrezcamos la posibilidad a los clientes potenciales de dar su opinión sobre
nuestras ideas mucho antes de lo que lo han hecho en el pasado. Mucho antes.
Démosles un baño de realidad mientras aún están en su infancia. Es mucho mejor
averiguar que nuestras ideas han errado el tiro antes de dedicar tiempo y recursos a
construir un producto que nadie quiere. En los últimos tiempos, el éxito o el fracaso de
nuestros productos no dependen de las decisiones del equipo de desarrollo, sino de
los clientes. Son ellos los que tendrán que pulsar el botón «Comprar ahora» que
hayamos diseñado. Cuanto antes les demos voz, antes aprenderemos si nuestras ideas
© Universidad Estatal de Milagro – UNEMI

están listas para pasar a la fase de desarrollo (Gothelf et al., 2014).


Entendimiento común El entendimiento común es el conocimiento colectivo del
equipo. Se construye poco a poco a medida que ese equipo trabaja de forma conjunta
y consiste en una comprensión profunda del espacio, del producto y de los clientes.
Este tipo de conocimiento es la moneda de cambio de Lean UX. Cuanto más sepa el
equipo, como colectivo, de lo que está haciendo y de por qué lo está haciendo, menos
dependerá de informes de segunda mano y de documentos detallados para continuar
con su trabajo (Gothelf et al., 2014).

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 22


Diseño de interfaces de usuario

Anti-modelos: estrellas, gurús y ninjas ¿De qué se trata? Lean UX aboga por una
mentalidad de equipo. Las estrellas, los gurús, los ninjas y, en general, los expertos de
toda condición, rompen la cohesión del equipo y reducen la colaboración. ¿Por qué
hacerlo? Las estrellas no comparten las ideas ni la atención de los demás. Si añadimos
individuos de este tipo a nuestro equipo, con grandes egos y determinados a brillar por
encima de todos, romperemos la colaboración del grupo. Si eso sucede ya no
contaremos con un entorno en el que se pueda construir un entendimiento común,
necesario para avanzar de forma efectiva (Gothelf et al., 2014).
Exteriorización del trabajo: Con exteriorización me refiero a exponer el trabajo de
forma pública, más allá de los ordenadores. Los equipos deben utilizar pizarras,
tableros de cartón pluma, paredes repletas de artefactos, salidas impresas, notas
adhesivas, lo que sea que hayan utilizado para reflejar sus ideas, para poder mostrar el
trabajo a compañeros, colegas y clientes. La exteriorización somete las ideas a
escrutinio público y así todos los miembros del equipo pueden ver dónde se
encuentran como grupo. De esta manera se crea un flujo de información que circula
entre todos los miembros, información que está en el ambiente y que inspira nuevas
ideas, construidas sobre las que se han compartido. Además, esta forma de trabajar
hace participar a todos los miembros del equipo —incluso los silenciosos—, ya que las
notas adhesivas de unos y de otros, de los silenciosos y de los prominentes, se tratan
por igual (Gothelf et al., 2014).
Hacer en lugar de analizar: Lean UX valora la acción por encima del análisis. Hay más
valor en crear la primera versión de una idea que en emplear medio día debatiendo
sus méritos en una sala de reuniones. La respuesta a las cuestiones más difíciles que
tendrá que afrontar el equipo no surgirá de una sala de reuniones, sino de la reacción
de los clientes. Sin embargo, para conseguirla es necesario concretar las ideas y hacer
algo a lo que la gente pueda responder. El debate de ideas es un despilfarro. En lugar
de analizar los escenarios potenciales, es mejor hacer algo concreto y salir del edificio
con él bajo el brazo (Gothelf et al., 2014).
Aprendizaje en lugar de crecimiento: Es complicado concebir una buena idea y hacerla
crecer al mismo tiempo. Son actividades contradictorias. Lean UX apuesta por que, en
© Universidad Estatal de Milagro – UNEMI

primer lugar, nos concentremos en el aprendizaje y, más tarde, en su crecimiento.


Escalar una idea que no se ha probado es arriesgado. Podría funcionar o podría no
hacerlo. Y si no lo hace y la idea se sube a producción para todos los clientes, en lugar
de para unos cuantos con los que probar, el equipo habrá perdido tiempo y recursos
valiosos en hacerlo. Al asegurarnos de que una idea funciona antes de hacerla crecer,
reducimos el riesgo que conllevan los grandes despliegues de funciones (Gothelf et al.,
2014).
Permiso para equivocarse: Para encontrar las mejores soluciones a los problemas de
negocio, los equipos Lean UX necesitan experimentar con las ideas. La mayoría de
estas ideas no funcionarán, por lo que, si queremos que acabe triunfando, el equipo

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 23


Diseño de interfaces de usuario

debe sentirse libre para equivocarse. Este permiso significa que puede contar con un
entorno seguro en el que experimentar, una filosofía que se debe aplicar tanto al
entorno técnico (deben ser capaces de generar ideas en un entorno seguro) como al
cultural (nadie debe penalizar a un miembro del equipo por probar ideas que no
funcionen). El permiso para equivocarse alimenta la cultura de la experimentación
que, a su vez, da alas a la creatividad. La creatividad, por su parte, hace que aparezcan
soluciones innovadoras. Cuando, al equivocarse, los equipos no tengan miedo de
perder el trabajo, estarán más dispuestos a correr riesgos. Y las grandes ideas siempre
proceden de los riesgos. Además, tal y como la siguiente anécdota ilustra tan
bellamente, los fallos frecuentes conducen al perfeccionamiento de las habilidades. En
un vídeo llamado «Por qué necesitas fallar»
(http://www.youtube.com/watch?v=HhxcFGuKOys ), el fundador de CD Baby, Derek
Sivers, describe el sorprendente resultado de una clase de cerámica (Gothelf et al.,
2014).
Escapar de los negocios basados en entregables: Lean UX cambia de lugar el foco que
ilumina los proyectos. El progreso de un proyecto depende de los resultados que se
consiguen, no de los documentos que el equipo escriba. Por otra parte, la colaboración
multifuncional nos permite conseguir que los stakeholders3 que participan en el
proyecto tengan más en cuenta los resultados y menos los artefactos que se estén
creando. Los documentos no solucionan los problemas de los clientes; lo hacen los
buenos productos. La atención del equipo debería estar enfocada en qué funciones de
las que está desarrollando tienen mayor impacto en ellos. Los procedimientos que el
equipo utilice para llegar a ese conocimiento son irrelevantes. Lo que importa es la
calidad del producto, medida como la reacción que el mercado presenta ante él.
Resumen: los principios Este capítulo explica los principios fundacionales de Lean UX.
Se trata de los atributos principales que debe tener cualquier equipo que trabaje con
esta metodología. Te animo a que los utilices cuando comiences con Lean UX para
definir la constitución, la ubicación, los objetivos y los métodos de trabajo del equipo.
En la Sección II, a medida que vaya detallando el proceso de Lean UX, mostraré cómo
ponerlos en marcha (Gothelf et al., 2014).
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 24


Diseño de interfaces de usuario

5. Preguntas de Comprension de la
Unidad
1. ¿Entienda y explique las diferencias entre los tres niveles de interacción que
vimos en el tema 2: Mira y entiendo, ¿Leo y entiendo y Pienso y entiendo?

2. ¿Explique la metodología Design thinking?

3. ¿Explique la Metodologías ágiles de desarrollo de software?

4. ¿Explique la metodología Lean Startup?

5. ¿Cuáles son y explique los principios del equipo de desarrollo de la interfaz?

6. ¿Cuáles son y explique los principios del proceso del desarrollo de la interfaz?

7. ¿Cuáles son y explique los principios del resultado de la interfaz orientada al


usuario?
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 25


Diseño de interfaces de usuario

6. Material Complementario
• Cómo crear Personas en UX Design,
https://www.youtube.com/watch?v=uZrFaHINQ7g
• Arquitectura de la información, enfoque práctico · Masterclass Padrinos UX,
https://www.youtube.com/watch?v=_Le3B6AS7Co
© Universidad Estatal de Milagro – UNEMI

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 26


Diseño de interfaces de usuario

7. Bibliografía

» ¿Qué es un tablero kanban? | Atlassian. (s/f). Recuperado el 30 de mayo de


2021, de https://www.atlassian.com/es/agile/kanban/boards
» Carraro, J. M., & Duarte, Y. (2015). Experiencia de Usuario (UX) (Primera).
Editorial Autores de Argentina.
» Design Thinking en Español. (s/f). Recuperado el 27 de mayo de 2021, de
https://www.designthinking.es/inicio/index.php
» Diseño – businessworld365. (s/f). Recuperado el 30 de mayo de 2021, de
https://businessworld365.wordpress.com/tag/diseno/
» El proceso del Design Thinking: los pasos principales para desarrollarlo |
Marketing | Apuntes empresariales | ESAN. (s/f). Recuperado el 30 de mayo de
2021, de https://www.esan.edu.pe/apuntes-empresariales/2019/02/el-
proceso-del-design-thinking-los-pasos-principales-para-desarrollarlo/
» Gothelf, J., Seiden, J., & Ries, E. (2014). Lean UX : cómo aplicar los principios
Lean a la mejora de la experiencia de usuario.
https://reunir.unir.net/handle/123456789/4506
» Home | Laws of UX. (s/f). Recuperado el 27 de mayo de 2021, de
https://lawsofux.com/
» La Escuela de la Gestalt - Psicologia General. (s/f). Recuperado el 30 de mayo
de 2021, de https://sites.google.com/site/psicologiageneralupansv/escuelas-
de-la-psicologia/la-escuela-de-gestal
» Lienzo de experiencias: una estrategia lean | Atlassian Team Playbook. (s/f).
Recuperado el 27 de mayo de 2021, de https://www.atlassian.com/es/team-
playbook/plays/experience-canvas
» Miro. Leo. Luego Pienso – mordecki.com. (s/f). Recuperado el 30 de mayo de
2021, de https://www.mordecki.com/mordecki.com/miro-leo-luego-pienso/
» Mordecki, D. (2012). Mira y entiendo. En BiD: textos universitaris de
biblioteconomia i documentació.
© Universidad Estatal de Milagro – UNEMI

» Schwaber, K., Sutherland, J., Scrum, L. G. De, Guía, L., Scrum, D. De, & Reglas, L.
(2020). 2020-Scrum-Guide-Spanish-Latin-South-American.
» Serrano Ortega, M., & Blazquez Cevallos, P. (2016). Desing thinking:lidera el
presente crea el futuro.pdf (Primera). ESIC EDITORIAL Ortega.
» TDCOM3: Leyes de la Percepción. (s/f). Recuperado el 30 de mayo de 2021, de
https://tdcom3.blogspot.com/2009/05/leyes-de-la-percepcion.html

FORMATO CONTROLADO: FR0018/ v1.0 / 18-11-2019 27


INTERFAZ Y MULTIMEDIA

Unidad #: 1
Diseño de interfaces de usuario

Tema #: 2
Elementos para el diseño de
interfaz de usuario

Ms. Christian A. Bermeo Valencia


Objetivo
Tendrá la capacidad de ejemplificar los niveles de interacción en los
diseños de interfaces de usuario.
Subtemas

» Subtema 1: Nivel 1 de interacción – Mira y entiendo


» Subtema 2: Nivel 2 de interacción – Leo y entiendo
» Subtema 3: Nivel 3 de interacción – Pienso y entiendo
Introducción
Los tres niveles que se podría considerar en el diseño de las interfaces de producto digitales son los siguientes:

• Mirar,
• Leer y
• Pensar.
Nivel 1 de interacción – Mira y entiendo

Intuición

Amplíe lo aprendido leyendo el compendio 2


– las página 5
Nivel 1 de interacción – Mira y entiendo
Ley de la relación entre figura y fondo

Leyes de
la Gestalt

Amplíe lo aprendido leyendo el compendio 2


– las página 6
Nivel 1 de interacción – Mira y entiendo

Ley de Continuidad

Leyes de
la Gestalt

Amplíe lo aprendido leyendo el compendio 2


– las página 7
Nivel 1 de interacción – Mira y entiendo
Ley de Proximidad

Leyes de
la Gestalt

Amplíe lo aprendido leyendo el compendio 2


– las página 7
Nivel 1 de interacción – Mira y entiendo
Ley de la semejanza o similitud

Leyes de
la Gestalt

Amplíe lo aprendido leyendo el compendio 2


– las página 8
Nivel 1 de interacción – Mira y entiendo

Ley de cierre

Leyes de
la Gestalt

Amplíe lo aprendido leyendo el compendio 2


– las página 8
Nivel 1 de interacción – Mira y entiendo

Leyes UX

Leyes de
Intuición
la Gestalt

Amplíe lo aprendido leyendo el compendio 2


– las página 9
Nivel 2 de interacción – Leo y entiendo

Catálogo de Productos Soporte Haga clic aquí


electrónicos

  

Amplíe lo aprendido leyendo el compendio 2


– las página 9
Nivel 3 de interacción – Pienso y entiendo

Test de
Patrones
usabilidad

Amplíe lo aprendido leyendo el compendio 2


– las página 10
Conclusión
El proceso de diseño de interfaces tiene niveles de interacción de usuarios en mirar, leer y pensar. El núcleo del diseño
esta determinado por tres (3) pilares: Design Thinking, metodologías de desarrollo ágil de software y Lean UX. Todo esto
guiado por principios en relación al equipo, proceso y resultado del desarrollo o diseño de la interfaz.
Evaluación
En el aula virtual encontrará un test donde evaluará la unidad 1, la que contiene preguntas y casos. Este test tiene el
objetivo de control de lectura y evaluar su nivel de explicar la metodología de personas – escenarios – objetivos, los
niveles de interacción, los pilares y principios en el desarrollo / diseño de interfaces de usuario aplicando UX/UI.
Amplíe sus conocimientos realizando lo siguiente:

• Lea el compendio No. 1 - 2


• Vea los videos de la semana 1 – 2 – 3 - 4

16
Bibliografía
» Miro. Leo. Luego Pienso – mordecki.com. (s/f). Recuperado el 30 de mayo de 2021, de
https://www.mordecki.com/mordecki.com/miro-leo-luego-pienso
» Design Thinking en Español. (s/f). Recuperado el 27 de mayo de 2021, de
https://www.designthinking.es/inicio/index.php
» ¿Qué es un tablero kanban? | Atlassian. (s/f). Recuperado el 30 de mayo de 2021, de
https://www.atlassian.com/es/agile/kanban/boards
» ¿Qué es un tablero kanban? | Atlassian. (s/f). Recuperado el 30 de mayo de 2021, de
https://www.atlassian.com/es/agile/kanban/boards
INTERFAZ Y MULTIMEDIA

Unidad #: 1
Diseño de interfaces de usuario

Tema #: 3
Pilares del diseño UI/UX

Ms. Christian A. Bermeo Valencia


Objetivo
Tendrá la capacidad de aplicar metodologías UX/UI para el diseño de
interfaces
Subtemas

» Subtema 1: Design Thinking


» Subtema 2: Metodologías de desarrollo ágil de software
» Subtema 3: Lean Startup
Introducción
Los pilares en un diseño UX/UI podemos considerar los del Lean UX, siendo este método una forma distinta de idear o
crear. Esta metodología nos da una nueva mentalidad para el diseño y desarrollo de productos digitales. Los pilares en que
se apoya el Lean UX son:

• Design Thinking
• Metodologías de desarrollo ágil de software
• Lean Startup
Design thinking

Fases de la metodología design thinking (Design Thinking en Español, s/f)

Amplíe lo aprendido leyendo el compendio 2


– las página 12-13
Metodologías ágiles de desarrollo de software

Amplíe lo aprendido leyendo el compendio 2


Imagen de: https://webdesigncusco.com/que-es-scrum-y-para-que-sirve/ – las página 14
Metodologías ágiles de desarrollo de software

kanban

Amplíe lo aprendido leyendo el compendio 2


Imagen de: https://www.esic.edu/rethink/management/metodologia-kanban-que-es-ventajas – las página 15
Metodologías ágiles de desarrollo de software

kanban

Imagen de: https://kanbanize.com/es/recursos-de-kanban/primeros-pasos/que-es-kanban


Amplíe lo aprendido leyendo el compendio 2
– las página 15
Lean Startup

Lean UX

Amplíe lo aprendido leyendo el compendio 2


– las página 16-18
Conclusión
El proceso de diseño de interfaces tiene niveles de interacción de usuarios en mirar, leer y pensar. El núcleo del diseño
esta determinado por tres (3) pilares: Design Thinking, metodologías de desarrollo ágil de software y Lean UX. Todo esto
guiado por principios en relación al equipo, proceso y resultado del desarrollo o diseño de la interfaz.
Evaluación
En el aula virtual encontrará un test donde evaluará la unidad 1, la que contiene preguntas y casos. Este test tiene el
objetivo de control de lectura y evaluar su nivel de explicar la metodología de personas – escenarios – objetivos, los
niveles de interacción, los pilares y principios en el desarrollo / diseño de interfaces de usuario aplicando UX/UI.
Amplíe sus conocimientos realizando lo siguiente:

• Lea el compendio No. 1 - 2


• Vea los videos de la semana 1 – 2 – 3 - 4

12
Bibliografía
» Miro. Leo. Luego Pienso – mordecki.com. (s/f). Recuperado el 30 de mayo de 2021, de
https://www.mordecki.com/mordecki.com/miro-leo-luego-pienso
» Design Thinking en Español. (s/f). Recuperado el 27 de mayo de 2021, de
https://www.designthinking.es/inicio/index.php
» ¿Qué es un tablero kanban? | Atlassian. (s/f). Recuperado el 30 de mayo de 2021, de
https://www.atlassian.com/es/agile/kanban/boards
» ¿Qué es un tablero kanban? | Atlassian. (s/f). Recuperado el 30 de mayo de 2021, de
https://www.atlassian.com/es/agile/kanban/boards

También podría gustarte