UX/UI Flashcards
1
Q
¿Qué es experiencia de usuario?
A
Puede definirse como la sensación, sentimiento, respuesta emocional, valoración y satisfacción del usuario respecto a un
producto.
2
Q
¿Qué es la Evaluación Heurística?
A
Es un método de inspección de la usabilidad sin usuarios.
Consiste en examinar la calidad de uso de una interfaz por parte de varios evaluadores expertos, a partir del cumplimiento de unos principios reconocidos de usabilidad: los heurísticos
3
Q
Nombra algunos tipos de Evaluaciones Heurísticas.
A
- Los 10 Principios Heurísticos de Nielsen.
- Las ‘8 reglas de oro’ de Ben Schneiderman.
- La ‘Lista de comprobación de ítems’ de Deniese Pierotti.
4
Q
¿Cuáles son los 10 Principios Heurísticos de Nielsen?
A
1) Mostrar estado del sistema.
2) Hablar el lenguaje del usuario.
3) Control y libertad del usuario.
4) Consistencia y estándares.
5) Prevenir errores.
6) Aliviar la carga en la memoria del usuario.
7) Flexibilidad y eficiencia de uso.
8) Estética y minimalismo.
9) Comunicar errores con claridad.
10) Ayuda y documentación.
5
Q
El Principio Heurístico “Mostrar estado del sistema”, ¿en qué consiste?
A
El sistema siempre debe mantener a los usuarios informados sobre lo que está pasando, a través de una retroalimentación apropiada en un tiempo razonable.
6
Q
El Principio Heurístico “Hablar el lenguaje del usuario”, ¿en qué consiste?
A
Debe seguir las convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico.
7
Q
El Principio Heurístico “Control y libertad del usuario”, ¿en qué consiste?
A
Debe seguir las convenciones del mundo real, haciendo que la información aparezca en un orden natural y lógico.
8
Q
El Principio Heurístico “Consistencia y estándares”, ¿en qué consiste?
A
Los usuarios no deberían tener que preguntarse si diferentes palabras, situaciones o acciones significan lo mismo.
Se debe seguir un estándar y ser consistentes con las decisiones que tomamos a lo largo de toda la plataforma.
9
Q
El Principio Heurístico “Prevenir errores”, ¿en qué consiste?
A
Mejor que comunicar correctamente un error, es ayudar a los usuarios a no cometer errores.
10
Q
El Principio Heurístico “Aliviar la carga en la memoria del usuario”, ¿en qué consiste?
A
El usuario no debería tener que recordar la información de una parte del diálogo a otra, por lo que los objetos, las acciones y las opciones deben estar visibles.
11
Q
El Principio Heurístico “Flexibilidad y eficiencia de uso”, ¿en qué consiste?
A
Los aceleradores, no vistos por el usuario principiante, mejoran la interacción para el usuario experto de tal manera que el sistema puede servir para usuarios inexpertos y experimentados.
Es importante que el sistema permita personalizar
acciones frecuentes.
12
Q
El Principio Heurístico “Estética y minimalismo”, ¿en qué consiste?
A
Los diálogos no deberían contener información
irrelevante o que se necesite
raramente.
13
Q
El Principio Heurístico “Comunicar errores con claridad”, ¿en qué consiste?
A
Los mensajes de error deben estar expresados
en lenguaje llano (sin códigos), indicando con precisión el problema y sugiriendo una solución.
14
Q
El Principio Heurístico “Ayuda y documentación”, ¿en qué consiste?
A
Es necesario proveer al usuario de ayuda y documentación. Esta tiene que ser fácil de buscar, centrada en la tareas del usuario, con información de las etapas a realizar y que no sea muy extensa.
15
Q
¿Qué es Usabilidad?
A
Es un atributo de una buena experiencia de usuario, según
J. Nielsen
La usabilidad es un atributo de calidad de un producto que se refiere sencillamente a su facilidad de uso.
16
Q
¿Qué es El Diseño Centrado en el Usuario (DCU), o User Centered
Design (UCD)?
A
es definido por la Usability Professionals Association (UPA) como un enfoque de diseño cuyo proceso está dirigido por información sobre las personas que van a hacer uso del producto.
17
Q
¿Cuál es la función de los profesionales de la experiencia de usuario?
A
No es otra que hacer esta tecnología amigable, satisfactoria, fácil de usar y, por tanto, realmente
útil.
18
Q
¿Qué significa UX?
A
Se trata de la sensación que experimenta un usuario cuando navega o visita una página web, herramienta o App.
19
Q
¿Qué significa UI?
A
Es la capa visual que tiene un sitio web o
herramienta por la que navega un usuario. La parte gráfica es lo primero que visualiza un usuario cuando entra a una web.
20
Q
¿Qué Actividades realizan en UX?
A
- Investigación (con stakeholders, etnográfica, entrevistas…)
- Pruebas (de usabilidad, con usuarios)
- Experimentos (A/B, con prototipos)
- Análisis de datos (KPI’s, métricas)
- Diseño de productos (arquitectura de información, fujos…)
21
Q
¿Qué hace el UI?
A
El UI da el ‘look & feel’ al producto
con la estructura e interacción de
los elementos de la interfaz.
22
Q
¿Qué Actividades realizan en UI?
A
• Diseño de elementos (botones, formularios)
• Diseño visual (iconos, imágenes, wireframes)
• Guías de estilo (paletas de color, tipografía…)
• Guías de interacción
(estados del sistema, diagramas de flujo, microinteracciones…)
23
Q
¿Cuáles son los Fundamentos UX?
A
- Necesidades del usuario
- Necesidades del negocio
- Hábitos de uso
- Antropología y psicología
- Tecnología y facilidad de uso
- ¿Qué hace el usuario vs Qué dice?
24
Q
¿Cuáles son los Fundamentos UI?
A
- Necesidades del usuario
- Aspectos visuales
- Interacciones
- Diseño de sonido
- Navegación
- Simulación del mundo físico para orientar al usuario en el entorno visual.
25
¿Cómo es el Perfil User Researcher?
Define la metodología de investigación, que permita identificar necesidades, percepciones o insights de los clientes.
26
¿Cómo es el Perfil diseñador de servicio?
Garantiza la adecuación de los servicios a las necesidades de los diferentes clientes y Stakeholders.
27
¿Cómo es el Perfil diseñador de interacción?
Desarrolla modelos de interacción y experiencia de servicios, adecuado a las necesidades y experiencias del cliente.
28
¿Cómo es el Perfil diseñador visual?
Colabora en el desarrollo de servicios, ilustrando conceptos, desarrollando prototipos y sketch que permitan visualizar y experimentar la propuesta.
29
Como es el Perfil UX manager?
Lidera el equipo, define la visión, marca
| la estrategia y optimiza la operativa.
30
¿ Como es el Perfil generalista?
Posee habilidades en muchas disciplinas, normalmente estos perfiles se encuentran en empresas que tienen pocos recursos UX como startups.
31
¿ Como es Perfil especialista?
Es experto en una disciplina, normalmente trabaja con equipos grandes que incluye otros roles de UX.
32
¿ Como es el Perfil T?
Poseé una disciplina fuerte y conocimientos más básicos en otras, este perfil puede cubrir distintos entornos.
33
¿Cuáles son las Características de un buen diseño?
Funcional
Un buen diseño tiene que servir para algo. Cumplir una finalidad.
Confiable
Un buen diseño debe proyectar seguridad y confianza en los usuarios.
Usable
Un buen diseño debe ser fácil de entender, el usuario debe poder operar el producto fácilmente.
Deseable
El usuario prefiere este producto a otros iguales o sustitutos. Tiene que verse atractivo, divertido cuando sea necesario.
34
¿Qué necesitas para realizar un buen trabajo en UX/UI?
- Constante curiosidad y aprendizaje
- Manejo de software de prototipado
- Seguir una buena línea gráfica
- Buen comunicador visual
- Metodología
35
¿Cuáles son los Elementos de UX?
```
Es el esquema de un proceso de Diseño de
Producto Digital esta compuesto por:
Estrategia
Alcance
Estructura
Esqueleto
Superficie
```
36
¿En que se basa el elemento de Estrategia?
¿Por qué estamos creando este pro-
ducto? ¿Qué problemas resuelve y que necesidades satisface? ¿Qué valor aporta, quien lo necesita?¿Alguien lo desea? ¿Por qué?
37
¿Qué son las retículas o Grid?
Es una estructura de líneas verticales y horizontales que divide un espacio en módulos. Estos
módulos se utilizan para organizar el contenido, que irá encajado y/o alineado respecto a ellos.
En definitiva, son el esqueleto de cualquier pieza de diseño.
38
¿Qué es el elemento de Estructura?
Cómo el usuario interactúa con ella y cómo responderá el software a los comportamientos del usuario durante esa interacción.
39
¿Cuál es el principio básico de la Grid?
Utilizar múltiplos de 8 para definir dimensiones, relleno y margen de los elementos de bloque e inline.
También, cuando el único contenido de un elemento de bloque es texto (por ejemplo, botones), establecer el texto en un tamaño compatible con el resto de la interfaz de usuario y / o la plataforma específica y utilizar el relleno para determinar el tamaño del elemento de bloque.
40
¿Qué es el elemento de Superficie?
Es la capa concreta del desarrollo del producto y la preocupación por ella es compartida: ¿Cómo se ve el producto terminado?
41
¿Qué es una metodología ágil?
Son aquellas que permiten adaptar la forma de trabajo a las condiciones del proyecto, consiguiendo flexibilidad e inmediatez en la respuesta para amoldar el proyecto y su desarrollo a las circunstancias específicas del entorno.
42
¿Qué es el design Sprint?
Es una metodología ágil que ha sido desarrollada por Google Ventures y que popularizó a nivel global Jake Knapp.
43
¿Para que sirve el design sprint?
Es una metodología para resolver los problemas de
| negocio a través del diseño.
44
¿En qué consiste el "Análisis Informe final" dentro del Análisis Heurístico?
Finalmente, todos los evaluadores harán una puesta en común de los resultados y puntuaciones individuales, con el fin de redactar un único informe final, donde se ordenarán los hallazgos de los más problemáticos a los que menos y se eliminarán los que sean duplicados o similares.
Para cada hallazgo se confeccionará una ficha compuesta por:
- Descripción del problema de usabilidad detectado.
- Propuesta de mejora del problema.
- Pantallazo ilustrativo de la aplicación.
- Lugar de la aplicación dónde ocurre.
- Indicador numérico de la severidad del error.
45
¿Cuáles son las fases para la ejecución en el proceso de la metodología design sprint?
- Entender
- Definir
- Bocetar
- Decidir
- Prototipar
- Validar
46
¿Qué beneficios tiene utilizar retículas?
- Crean claridad y coherencia (si utilizas la retícula desde el inicio te aseguras de que todas las pantallas serán coherentes entre sí y, sobre todo, generarán sensaciones de simetría, proximidad y continuidad).
- Una retícula ayudará a proporcionar elementos, jerarquizar y crear espacios en blanco para generar ritmo de lectura.
47
Nombra los seis componentes de un formulario.
- Estructura
- Campos (input fields)
- Rótulo (labels)
- Botones
- Feedback
48
¿Por qué es importante la Grid?
- Cuando todas las medidas de la interfaz siguen las mismas reglas, esta es más consistente para el usuario.
- Al reducir la cantidad de manipulación disponible reduce la velocidad al código.
49
¿Qué tipos de retículas existen?
- 12 columnas de bootstrap (grid de 960px).
- Grid Material Design de Google (https://material.io/design/layout/responsive-layout-grid.html#breakpoints).
- Grid Human Interface (Apple humaninterface guidelines/ios/visual-design/adaptivity-and-layout/).
50
¿En qué consiste un rótulo de un formulario?
Son quienes indican al usuario qué dato corresponde en cada campo (field).
51
¿Qué Herramientas utilizamos para hacer los procesos de las metodologías?
•Whereby (videoconferencias de
un máximo de 4 personas, solo
uno tiene que registrarse)
* Trello: para organizarnos el trabajo
* Miro: nuestra pizarra de clase
•Whimsical: para realizar los
wireframes
•Invision: para realizar un tablero
rápido con imágenes, textos,
enlaces,...
•Dribbble y Mobbin: para coger
inspiración
• Maze Design: pra realizar el test
del prototipo
• Pasteapp : para realizar la
presentación final
52
¿Qué se debe tener en cuenta en la estructura de un formulario?
- Sólo pregunta lo necesario.
- Organízalo de manera lógica.
- Agrupa la información relacionada.
- Utiliza una sola columna.
- Intenta evitar campos adicionales, pero si tienes que usarlos debes seleccionar cuales son obligatorios con un asterisco (*).
- Debes evitar tener un valor por defecto (a no ser que una gran proporción de tus usuarios vaya a seleccionar ese valor).
- En ordenadores: Autofocus para campos de Texto.
- En móviles: Modifica los teclados en función de los datos a llenar por el usuario.
53
¿Qué es un Sistema de Diseño?
Es un conjunto de componentes reutilizables que se reúnen bajo una serie de directrices claras. Se pueden agrupar de formas distintas para llevar a cabo cualquier web o aplicación.
54
¿Qué ventajas aporta un Sistema de Diseño?
- Permite mantener una consistencia visual y funcional.
- Mejora la experiencia de usuario, permitiéndole reconocer patrones entre todas tus plataformas, consiguiendo una menor carga cognitiva, menos tiempo de aprendizaje, y por tanto una mejor UX.
- Conseguimos tener plataformas mantenibles y escalables.
- Velocidad de desarrollo.
55
¿Qué es el modelo del doble diamante?
El modelo del doble diamante es una de las distintas maneras de llevar a cabo un Design Thinking.
Su representación visual son dos rombos (“diamantes”), donde el primero simboliza el proceso creativo – compuesto por dos etapas “Investigación y análisis”, y el segundo el proceso de prototipado -compuesto por dos etapas “ideación e implementación.”
Observar- Sintetizar
Idear - Diseñar
56
¿Para que sirve la fase de observar en el doble diamante?
Esta fase sirve para entender y contextualizar el problema u oportunidad real al que se enfrentan.
En esta fase, trabajaremos con herramientas como diarios y observación de usuario, lluvias de ideas o encuestas.
57
¿En qué consiste la Ley de Miller?
La persona promedio solo puede mantener alrededor de 7 elementos en su memoria de trabajo.
58
¿De que se encarga la fase de PROTOTIPAR en design sprint?
Es hora de que todo el equipo comience a crear una primera versión del concepto previamente elegido.
59
¿De que se encarga la fase de VALIDAR en design sprint?
En esta última fase el equipo pone a prueba el prototipo interactivo con los usuarios, aquí es dónde se reciben críticas de parte del usuario, teniendo como resultado un concepto validado.
60
¿De que se encarga la fase de ENTENDER en design sprint?
Se crea una conversación inicial para comprender el tema que se pretende abordar.
61
¿Qué es design thinking?
Esta es una filosofía que está centrada en las personas y en cómo solucionar problemas complejos de las mismas, muchas veces entendiendo su cultura y
contexto. En este proceso se trata de comprender a fondo las cualidades de los clientes, saber qué es lo que quieren, lo que necesitan, cómo se comportan, cómo interactúan con el producto/servicio, etc.,
62
¿Cuáles son las características de design thinking?
- La búsqueda de la innovación centrada
en la persona.
- La necesidad de la observación para
descubrir las necesidades no satisfechas y las limitaciones.
- La iteración de las soluciones.
- La involucración de clientes o usuarios
finales, que minimiza la incertidumbre y
el riesgo de la innovación.
- El uso de las percepciones en las que se confía.
63
¿Los conceptos Mobile First y Responsive Design significan lo mismo?
Mucha gente piensa que son lo mismo, pero son completamente distintos.
64
¿En qué consiste el concepto Mobile First?
Primero se optimiza el diseño a una navegación para dispositivos móviles y luego se adapta el diseño para que pueda verse perfectamente en dispositivos más grandes sin muchas modificaciones.
65
¿Qué es un formulario?
Es aquel estilo de interacción que utiliza la metáfora de los formularios clásicos en papel.
En estos se presentan una serie de campos, con sus
etiquetas asociadas, que el usuario debe introducir o completar.
66
¿Cuáles son los tipos de affordance?
- Perceptible
- Oculto
- Falso
67
¿Qué incluye la estructura de un formulario?
- El orden de los campos.
- Posicionamiento en la pagina.
- Conexión lógica entre los campos.
68
¿Qué incluyen los campos de un formulario?
- Los campos de texto.
- Contraseñas.
- Check boxes.
- Radio buttons.
- Sliders.
- Cualquier otro tipo de campos diseñados para input del usuario.
69
¿En qué consiste un rótulo de un formulario?
Son quienes indican al usuario qué dato corresponde en cada campo (field).
70
¿Para que sirve design thinking
Pretende identificar las necesidades reales de cada cliente para ofrecerle la mejor solución.
71
¿Qué es el modelo del doble diamante?
El modelo del doble diamante es una de las distintas maneras de llevar a cabo un Design Thinking.
Su representación visual son dos rombos (“diamantes”), donde el primero simboliza el proceso creativo – compuesto por dos etapas “Investigación y análisis”, y el segundo el proceso de prototipado -compuesto por dos etapas “ideación e implementación.”
72
¿Qué es un feedback?
Consiste en notificar al usuario el resultado de su interacción. Estas notificaciones pueden ser positivas o negativas.
73
¿Para que sirve la fase de observar en el doble diamante?
Esta fase sirve para entender y contextualizar el problema u oportunidad real
al que se enfrentan.
En esta fase, trabajaremos con herramientas como diarios y observación de
usuario, lluvias de ideas o encuestas.
74
¿Qué buenas prácticas se deben seguir al realizar un formulario?
- Usa un label (etiqueta).
- No utilices los marcadores de posición como etiqueta (supone una carga para la memoria a corto plazo).
- Label cortos.
- Coincide la longitud y la estructura del campo con la entrada prevista.
- Los campos de formulario deben verse como campos de formulario.
- Utilice el tipo de entrada y la etiqueta adecuados.
- Si son menos de cinco opciones o es necesario comparar las opciones, utilizar Radio Buttons.
- Cuando hay disponible una gran cantidad de opciones utilizar Drop-down.
75
¿Para que sirve la fase de sintetizar en el doble diamante?
Es probable que en la fase de observar resulte en un gran volumen de información. Hay que gestionarla y organizarla adecuadamente para poder aplicarla de manera efectiva.
En esta etapa esa información se filtra y se organiza para llegar a una definición definitiva del problema.
76
¿Qué elementos entregables se utilizan en la fase de observar?
• Desk research (noticias e información sobre el tema en internet)
• Netnografía (Búsqueda de opiniones, reseñas y
comentarios en foros, webs y redes sociales, entre otros.)
• Research Question (diagrama de Venn)
• Benchmarking
• Dafo (Estudio de la situación de una empresa, proyecto o persona analizando sus características internas (Debilidades y Fortalezas) y su situación externa (Amenazas y Oportunidades).
• Entrevistas
• Cuestionarios
77
¿Qué elementos entregables se utilizan en la fase de sintetizar?
* User Persona. (Ejemplo)
* Mapas de empatía
* Customer Journey (ejemplo)
* Matriz de necesidades. (ejemplo)
* Matriz de utilidad y viabilidad
78
¿Qué elementos entregables se utilizan en la fase de idear?
* Findings e insights
* Ideas organizadas en clusters.
* In-Out
* MoSCoW (Este acrónimo hace referencia a una técnica que nos ayuda a priorizar las funcionalidades, desde las que son esenciales para que el producto sea un éxito (Must), hasta las que no se deberían incorporar porque no aportan nada (Won’t), pasando por las que aun sin ser de alta prioridad deberían valorarse para ser incluidas (Should) y las que podrían, aun sin ser necesarias, estar bien añadir en alguna fase futura del proyecto (Could).
* Propuesta de valor
* Business Model Canvas
79
¿Qué elementos entregables se utilizan en la fase de diseñar?
* Moodboard
* SiteMap
* Flowchart
* Wireframe
* Sistema de diseño
* Prototipo en alta
80
¿Para que sirve la fase de idear en el doble diamante?
Este es el momento en el que comienza el trabajo de diseño de múltiples soluciones al problema que hemos definido en las dos fases anteriores. El objetivo es desarrollar prototipos con iteraciones constantes
basadas en test y comentarios/opiniones de usuarios.
81
¿Para que sirve la fase de diseñar en el doble diamante?
En esta etapa se reducen las soluciones planteadas a una, basándonos en test con usuarios que validen cuál es la opción que mejor resuelve el problema planteado. Después de eso, ya se puede pasar el producto a producción y lanzarlo.
82
Nombra las leyes de UX.
- Ley de Fitts.
- Ley de Hick.
- Ley de Miller.
- Ley de Jakob.
- Principio de Pareto.
- Ley de Von Restorff.
83
¿En qué consiste la Ley de Fitts?
El tiempo necesario para alcanzar un objetivo es directamente proporcional a la distancia e inversamente proporcional al tamaño del objetivo.
84
¿En qué consiste la Ley de Hick?
El tiempo necesario para tomar una decisión es directamente proporcional al número de opciones disponibles.
85
¿En qué consiste la Ley de Miller?
La persona promedio solo puede mantener alrededor de 7 elementos en su memoria de trabajo.
86
¿Qué es la Affordance?
Término usado en distintas disciplinas como HCI, arquitectura, diseño industrial, psicología, etc. y que consiste en el conjunto de posibilidades de acción que
transmite un objeto o entorno y que pueden ser percibidas por el usuario
87
¿Qué es la Affordance en UX/UI?
Término anglosajón utilizado por el diseñador Donald Norman para referirse,
dentro del diseño de interacción, a las posibilidades de acción que son
inmediatamente percibidas por el usuario ante una interfaz (un botón o un
enlace, por ejemplo, en el caso de la usabilidad web).
88
¿Cuáles son los tipos de affordance
- Perceptible
- Oculto
- Falso
89
¿En qué consiste la Ley de Jakob?
Los usuarios prefieren aquellos sitios que funcionen igual que los que ya conocen.
Al aprovechar los modelos mentales existentes, podemos crear una mejor experiencia en la que el usuario puede concentrarse en su tarea en lugar de aprender un nuevo modelo.
90
¿En qué consiste la Ley de Pareto?
El 20% de las funcionalidades generan el 80% del uso. Simplificar de tal manera que el sistema responda a los casos más probables, y no a todos los posibles.
91
¿En qué consiste la Ley de Von Restorff?
En unos estudios realizados en 1933 encontró que cuando se mostraba a los participantes una lista de
elementos de una misma categoría junto con uno diferente, era este el que se recordaba más.
92
¿Qué es el tipo de affordance perceptibles?
La posibilidad de acción existe y además se percibe por el usuario. Son características de los objetos que nos facilitan su uso, porque intuitivamente podemos saber qué se puede hacer, cómo y para qué. El diseñador debe tratar de hacer perceptibles todas las posibilidades relevantes para los objetivos del usuario.
93
¿Qué es el tipo de affordance oculto?
La posibilidad de acción existe, pero esta no se muestra al usuario. Es también útil en el diseño, porque puede haber posibilidades que no queremos que el usuario conozca, o al menos, no en un primer momento.
En ese caso, la persona tendrá que descubrir su utilidad mediante la exploración, mientras que la función del diseñador será facilitar ese descubrimiento.
94
¿Qué es el tipo de affordance falso?
La posibilidad de acción no existe, pero el usuario percibe erróneamente que sí la hay. En el ámbito del diseño, este tipo de affordances se deben evitar, ya que puede provocar errores e ineficiencias en el uso.
95
¿Qué es el color?
Impresión que producen en la retina los rayos de luz reflejados y absorbidos por un cuerpo, según la longitud de onda de estos rayos.
96
¿Cuáles son los elementos del diseño visual?
- Color
- Tipografía
- Imágenes / Iconos
- Animación
- Jerarquía / Composición
- Sistemas / Retículas
97
¿Qué es el modelo de color?
Es un modelo matemático abstracto que permite representar los colores en forma numérica.
98
¿Qué indica la almohadilla al explorador o al editor de imágenes en la representación numérica del modelo de color?
Indica el sistema que estamos usando, en este
| caso el hexadecimal.
99
¿Cómo está formada la representación numérica del modelo de color?
Está formada por una almohadilla seguida de seis caracteres. Estos pueden ser números o letras, y representan la intensidad presente de cada uno de los tres colores de la mezcla aditiva.
100
¿Qué indican los números y letras en la representación numérica del modelo de color?
Representan la intensidad presente de cada uno de los tres colores de la mezcla aditiva.
101
¿Cuál es el color más usado por las grandes empresas e instituciones?
El azul
102
¿Qué representa el color azul en la psicología del color?
Representa simpatía, armonía, paciencia, eternidad e inteligencia.
103
¿Qué empresas suelen usar estos colores? ¿Por qué?
Los bancos y las ONG como Unicef, Ayuda en Acción y Manos Unidas
Porque quieren trasmitir esa idea de confianza duradera, combinándose con tonos claros que representan la honradez y la transparencia. También las ONG como Unicef, Ayuda en Acción y Manos Unidas.
104
¿Qué representa el color rojo en la psicología del color?
El amor, la pasión, la fuerza, el calor, la prohibición, el dinamismo y el valor.
105
¿Quién suele utilizar el color rojo en sus marcas?
Las marcas de coches y motos más importantes del mercado.
106
¿Qué representa el color amarillo en la psicología del color?
Felicidad, inteligencia, alegría y energía.
107
¿Qué color capta más rápido el ojo humano?
El amarillo
108
¿Qué representa el color verde en la psicología del color?
Esperanza, naturaleza y calma.
109
¿Para qué está indicado el uso del color verde?
Para productos relacionados con el medio ambiente.
Aunque últimamente las marcas que lo usan son de todo tipo (sector textil, tecnológico, medioambiental, ocio) siempre suelen ser sinónimas de las características antes mencionadas de ecología, confianza y marcas, en definitiva, frescas
y novedosas
110
¿Qué nos comunica el color?
Jerarquía, dirige la vista y da significado.
111
¿Qué combinaciones de color existen?
- Complementarios
- Análogos
- Triada
- Monocromático
- Degradados (añadido en diapositivas)
- Tono pastel (añadido en diapositivas)
112
¿Qué son los colores complementarios?
Una combinación de muy alto contraste. Son los que están uno delante del otro en la rueda de color, como por ejemplo rojo y verde o azul y amarillo.
Crea una imagen muy vibrante, aunque es poco recomendable usarlo en grandes cantidades, sirve para destacar algo.
113
¿Qué son los colores análogos?
Una combinación que recurre a colores que están
uno junto al otro en la rueda, ofreciendo un diseño que
transmite serenidad, armonía y confortabilidad.
Sin embargo, es más difícil obtener contraste, por lo
que es recomendable usar uno dominante con un
segundo de apoyo, y utilizar el tercero junto a negro o
gris para acentuar elementos.
114
¿Qué son los colores triados?
Se trata de un esquema que usa colores equidistantes alrededor de la rueda. También tienen un resultado vibrante.
Es importante usar un color dominante y los otros para destacar elementos para obtener un equilibrio.
115
¿Qué son los colores monocromáticos?
Los esquemas de colores monocromáticos usan un color base y matices como una paleta extendida (+blanco o + negro)
116
¿Cómo se hacen en la actualidad los gradientes?
Anteriormente, los gradientes del mismo color eran la norma, pero hoy en día son los gradientes complementarios de alto contraste.
117
¿Qué son los colores tonos pastel?
Los colores pastel son aquellos que se caracterizan por una saturación desde baja hasta intermedia, y generalmente dan la sensación de ser ligeros, suaves, neutros o calmantes.
118
¿En qué consiste la regla 60-30-10?
Debes escoger un color dominante y usarlo en el 60% del espacio, otro secundario para que esté en un 30% y un último color para el 10% restante.
119
Errores que se suelen cometer al aplicar los colores:
- Al usar luz y sombra, es pensar que si queremos hacer una sombra necesitamos poner un color negro con opacidad y para luz
debemos usar blanco con opacidad.
- Usar los colores grises sin un tono de color.
120
¿Qué significan las siglas HLS?
No son colores, sino parámetros: Hue (tono), Saturation (saturacion) y Lightness (luminosidad).
121
¿En qué consiste Hue?
Determina qué color del espectro es. El valor corresponde con el ángulo de la rueda de color.
Empieza en el rojo, que es 0 grados (o 360grados, si le has dado la vuelta).
En Figma y otros programas de interfaz no se representa en forma de círculo, sino lineal.
122
¿En qué consiste Saturation?
Indica la intensidad de un tono concreto.
Los valores van de 0 a 100, siendo 100 el máximo de saturación posible y 0 el mínimo, que dará como resultado, gris.
123
¿En qué consiste Lieghtness?
Hace referencia a cómo de claro u obscuro es un color.
124
¿En qué se divide la tipografía?
En microtipografía y macrotipografía.
125
¿Qué estudia la microtipografía?
Los efectos de la colocación de las letras y signos en relación con la colocación de unos con respecto a otros, como el espacio entre letras o entre palabras.
Los ajustes en la forma de las letras, para evitar efectos desagradables, constituyen parte del estudio microtipográfico.
126
¿Qué estudia la macrotipografía?
Estudia el efecto global de los bloques de texto y cómo se distribuyen en la misma.
127
¿En qué consiste el Kerning?
Se refiere a la acción que nos permite intervenir, modificándolo, el espacio entre pares de letras de una palabra.
(Se encuentra dentro de la microtipografía).
128
¿En qué consiste el Tracking?
Permite añadir espacios proporcionalmente iguales entre todas las letras de una palabra.
(Se encuentra dentro de la microtipografía).
129
¿Qué conceptos se tienen en cuenta dentro de la microtipografía?
La letra, el espacio entre las letras, la línea y el interlineado.
130
¿Cómo se clasifican las fuentes?
- Serif
- Sans-serif
- Handwritten
- Display
131
¿Cómo son las fuentes Serif?
Las fuentes Serif se distinguen por las ‘serifas’, terminaciones en las letras que ayudan a su legibilidad.
Son las mas clásicas, fáciles de leer y transmiten elegancia, seriedad, formalidad, etc. (por eso son las mas usadas para los titulares de periódicos e impresiones de los mismos).
132
¿Cómo son las fuentes Sans-serif?
Las Sans-serif (sin serif) destacan por tener un acabado mas limpio y moderno, que es lo que quieren transmitir: innovación, modernidad y
acercamiento a los nuevos tiempos.
Un estilo de letra muy legible y usado en formatos digitales.
133
¿Cómo son las fuentes Handwritten?
Las Handwritten suelen presentar mas dificultad a la lectura pero nos transmiten confianza, cercanía, personalidad y diferenciarse del resto.
134
¿Cómo son las fuentes Display?
Las tipografías display se caracterizan por tener una personalidad muy fuerte, y por tanto, ser muy únicas.
Esto, como todo, tiene cosas buenas, y malas.
135
Define el concepto Tipo (de fuente).
Diseño de una letra determinada.
136
Define el concepto Tipografía.
Técnica de crear y componer tipos para comunicar mensajes
137
Define el concepto Peso (tipográfico).
Grosor de las distintas fuentes dentro de una familia tipográfica
138
Define el concepto Fuente.
Tiene dos definiciones posibles:
- Estilo o apariencia de un grupo completo
de caracteres, números y signos, regidos
por unas características comunes.
- Conjunto de tipos basados en una misma
fuente pero con variaciones estilísticas
(negrita, itálica, versalitas).
139
¿Qué tamaño de fuente recomienda Google para el texto del cuerpo?
Google, en las pautas de Material Design, establece que el tamaño mínimo para este es el de 16pt.
140
¿Qué tamaño de fuente recomienda Apple para el texto del cuerpo?
Apple, en sus Human Interfaces (Directrices de Interfaz Humana), establece que el tamaño mínimo para este es el de 17pt.
141
¿Cuál es un buen tamaño para el cuerpo del texto?
Entre los 16 y 18 pt.
142
¿Qué se debe tener en cuenta al crear los botones?
- Debemos eliminar cualquier condición propensa al error (por ejemplo, cuando un usuario presiona por equivocación una opción incorrecta motivado por un diseño de experiencia confuso).
- Para hacer clara la diferencia entre dos opciones, tenemos que usar diferentes pesos visuales para los botones. El botón con el mayor peso visual naturalmente atraerá mayor atención.
- Utilizar etiquetas claras y distintas (por ejemplo, explicando qué hace este botón en lugar de darle un label genérico como "ok" o usando un verbo en lugar de un "sí" o un "ok").
- Cuando la acción primaria es positiva, necesita siempre llevar un mayor peso visual que las acciones secundarias. Así se minimiza el riesgo de errores y a la vez dirige al usuario a resultados satisfactorios.
- Cuando la acción primaria es negativa, si se le da al botón que genera acciones irreversibles un mayor peso visual es peligroso, pues el usuario puede percibir la opción irreversible como segura y accionarla por error.
143
¿Para qué son útiles los Botones Inactivo?
Los botones Inactivo (o Deshabilitado) son útiles cuando necesitamos mostrarle al usuario que esa acción es posible.
Incluso si el botón no está en contexto, el usuario tiene la posibilidad de conocer las opciones disponibles.
144
¿En qué consiste la accesibilidad web?
Al hablar de accesibilidad web, hacemos referencia a un diseño que va a permitir que personas con algún tipo de discapacidad o de avanzada edad puedan interactuar con la web.
Es esencial que la web sea accesible con el fin de proveer igualdad de oportunidades a personas con discapacidades.
145
¿Qué es la AI?
La arquitectura de la información es el arte de organizar la información de la
forma más clara y lógica posible.
146
¿Qué es Findability en arquitectura de información?
La capacidad que posee un sitio, recurso, objeto de ser encontrado o recuperado tanto por los usuarios como por los sistemas de información.
147
¿En que consiste el World Content Accessibility Guidelines (WCAG)?
Busca definir las pautas que debe cumplir cualquier producto digital para ser considerado accesible. Si eres una empresa privada no tienes la obligación legal de considerarlas, pero sería conveniente hacerlo: todos tus usuarios tienen derecho a una misma experiencia.
148
¿Cómo describimos las unidades de información?
como etiquetas
Una etiqueta es una forma de representación.
La meta de una buena etiqueta es comunicar la información de lo que contiene de la manera más efectiva
149
¿Cómo se aplica la accesibilidad web?
Teniendo en cuenta el Proyecto Ally y las pautas del World Content Accessibility Guidelines (WCAG).
Es cierto que ambos están un poco más enfocados a la parte del desarrollador, pero esto no excluye que como diseñadores debamos tenerlas mínimamente en cuenta.
150
¿Qué es card sorting?
Card sorting es un metodo sencillo para encontrar patrones de cómo el usuario espera encontrar contenidos o funcionalidades.
Card Sorting Abierto / Cerrado y Mixto
151
¿Qué tipos de limitaciones o discapacidades existen en la accesibilidad web?
- Deficiencias auditivas (estas también pueden afectar al uso del lenguaje).
- Deficiencias visuales.
- Deficiencias motrices.
- Deficiencia cognitivas y de lenguaje.
Por otro lado, también tenemos los problemas que puede presentar una persona sin discapacidad:
- Personas mayores.
- Personas de escaso alfabetismo o con poco
dominio del idioma.
- Personas con conexiones lentas.
- Usuarios inexpertos.
- Usuarios de tecnología móvil.
152
¿En que consiste el Proyecto Ally?
Ha sido creado por la propia comunidad de desarrolladores y diseñadores que promueve la creación y diseño de páginas web y aplicaciones que sean accesibles. En su página web encontrarás contenido de todo tipo que te ayudará a implementarlo fácilmente.
153
De los cuatro principios en los que se basa la WCAG 2.0 ¿Cómo se puede cumplir el principio de "perceptible"?
- Proveyendo texto alternativo para contenido no textual.
- Proveyendo subtítulos y otras alternativas para el contenido multimedia.
- Creando contenido que pueda ser presentado de diferentes maneras sin perder
sentido.
- Haciendo el contenido fácil de ver y escuchar para los usuarios.
154
De los cuatro principios en los que se basa la WCAG 2.0 ¿Cómo se puede cumplir el principio de "operable"?
- Haciendo toda la funcionalidad operable desde el teclado.
- Dando a los usuarios suficiente tiempo para leer y usar el contenido.
- No usando contenido que pueda obstaculizar.
- Ayudando a los usuarios a navegar y encontrar contenido.
155
¿Qué factores hay que tener en cuenta para aplicar la accesibilidad web?
- Conocimiento (la mayoría de los errores de accesibilidad en sitios web se deben a falta de conocimiento).
- Liderazgo (si una organización no expresa su compromiso con la accesibilidad web, pocos o ningún programador hará su propio contenido accesible).
- Políticas y procedimientos (si las ideas no están respaldadas por normas, tenderán a perderse con el tiempo).
156
Dentro de las pautas de accesibilidad de contenido web 2.0 ¿en qué consiste la WCAG 2.0?
Son una serie de documentos, desarrollados por la W3C en cooperación con organizaciones de todo el mundo, que tienen el objetivo de proveer un estándar para la accesibilidad de contenido web.
157
Cada una de las pautas de WCAG está marcada con un nivel de prioridad dependiendo de que tanta accesibilidad se deja de prestar por su incumplimiento, ¿cuáles son estas prioridades?
- Prioridad 1: De no cumplirse, ciertos usuarios no podrían acceder a la información.
- Prioridad 2: De no cumplirse, para ciertos usuarios sería muy difícil acceder a la información.
- Prioridad 3: De no cumplirse, ciertos usuarios podrían tener ciertas dificultades para acceder a la información.
158
De los cuatro principios en los que se basa la WCAG 2.0 ¿Cómo se puede cumplir el principio de "perceptible"?
- Proveyendo texto alternativo para contenido no textual.
- Proveyendo subtítulos y otras alternativas para el contenido multimedia.
- Creando contenido que pueda ser presentado de diferentes maneras sin perder
sentido.
- Hacer el contenido fácil de ver y escuchar para los usuarios.
159
De los cuatro principios en los que se basa la WCAG 2.0 ¿Cómo se puede cumplir el principio de "operable"?
- Hacer toda la funcionalidad operable desde el teclado.
- Dar a los usuarios suficiente tiempo para leer y usar el contenido.
- No usar contenido que pueda obstaculizar.
- Ayudar a los usuarios a navegar y encontrar contenido.
160
De los cuatro principios en los que se basa la WCAG 2.0 ¿Cómo se puede cumplir el principio de "entendible"?
- Asegurándose de que el texto sea entendible.
- Haciendo que el contenido opere de forma predecible.
- Ayudando a los usuarios a evitar y corregir
errores.
161
De los cuatro principios en los que se basa la WCAG 2.0 ¿Cómo se puede cumplir el principio de "robusto"?
Maximizando la compatibilidad con herramientas actuales y futuras
162
Cada una de las pautas de WCAG está marcada con un nivel de prioridad dependiendo de que tanta accesibilidad se deja de prestar por su incumplimiento ¿cuáles son estas prioridades?
- Prioridad 1: De no cumplirse, ciertos usuarios no podrían acceder a la información.
- Prioridad 2: De no cumplirse, para ciertos usuarios sería muy difícil acceder a la información.
- Prioridad 3: De no cumplirse, ciertos usuarios podrían tener ciertas dificultades para acceder a la información.
163
Para que una página web cumpla con las pautas de WCAG, deben conformarse varios requerimientos, ¿cuáles son estos requerimientos?
- Uno o varios niveles de conformidad:
- Nivel A: Cumple con todas las pautas de
prioridad 1.
- Nivel AA: Cumple con todas las pautas de
prioridad 2.
- Nivel AAA: Cumple con todas las pautas de
prioridad 3.
- Páginas completas.
- Procesos completos, etc.
164
¿Cuáles son los errores más habituales en la accesibilidad web?
- Colocar mucho texto alternativo en las imágenes.
- Usar caracteres aleatorios para separar los enlaces.
- Pre-insertar texto en campos vacíos de formularios.
- Usar teclas como atajos para enlaces, esto puede sobrescribir atajos usados por los lectores de pantalla.
- Estructurar incorrectamente el contenido.
- Usar acrónimos y abreviaturas
- No hacer pruebas con lectores de pantalla.
165
¿Qué se debe tener en cuenta para diseñar de forma accesible?
- El contraste de color: Se debe diseñar utilizando un alto contraste.
El WCAG define en el criterio 1.4.3 los parámetros que deben seguirse al establecer el contraste de color. Para el nivel AA se pide un ratio de contraste de 4,5:1 entre el fondo de pantalla y el contenido (texto).
- El daltonismo: Se trata de determinados defectos de la vista que limitan la percepción de algunos colores, que se confundan algunos de los que se persiguen e, incluso, una total ceguera de color.
- El uso del color. ¿qué pasa si nuestro usuario es daltónico? Sencillamente verá todo en
color gris.
En estos casos no utilizaremos solo los colores para distinguir entre dos elementos, sino que añadiremos un icono y, además, un mensaje descriptivo del error.
166
¿Qué es la AI (arquitectura de la información)?
La arquitectura de la información es el arte de organizar la información de la
forma más clara y lógica posible.
167
¿Qué es la Findability?
Capacidad que posee un sitio, recurso, objeto de ser
encontrado o recuperado tanto por los usuarios como por los sistemas de información.
También abarca los medios de que disponga nuestro
sitio web para encontrar información dentro de este, es decir, buscadores locales, correcta arquitectura de la información, etc...
168
¿Qué son las unidades de información?
Unidad mínima de contenido que se ofrece
| de manera homogénea en la web.
169
¿Cómo se describen las unidades de información?
Se describen por medio de las etiquetas:
Una etiqueta es una forma de representación.
Utilizamos palabras que representan grandes pedazos de información de la web.
La meta de una buena etiqueta es comunicar la información de lo que contiene de la manera más efectiva.
170
¿Cuáles son los tipos de etiqueta?
Libres
Lenguajes controlados
Facetas (filtros)
Social
Metadatos
171
¿Cómo se organizan las etiquetas?
TAXONOMÍAS (CLASIFICACIÓN)
Plana: Todas las categorías están en el mismo nivel. Equivalencia.
Jerárquica: Categoría > Subcategoría 1
> Subcategoría 2
Relacional: Relaciones transversales.
Términos relacionados.
Card sorting: es un metodo sencillo para encontrar patrones de cómo el usuario espera encontrar contenidos o funcionalidades.
Card Sorting Abierto / Cerrado y Mixto
172
¿Cómo se organizan las unidades de información por medio del card sorting?
Unidades de información:
Facetas/ categorías/ filtros
• Época •Color •Hombre/Mujer
* Género •No Puertas •Deporte
* Corriente • Precio • Talla
173
¿Cómo recuperamos la información?
Por medio de navegación y de búsqueda con:
Sistemas de navegación básicos
* CONSTANTES
* LOCALES
* CONTEXTUALES
174
¿¡Como tener un buen sistema de navegación?
* Permite al usuario construir un mapa mental de la aplicación.
* Reconocer contra recordar.
* Mantener sensación de control durante el uso del site.
* Que el nivel principal no tenga más de 7/8 opciones.
* Si es posible, evita que tenga más de 3 niveles de profundidad.
* Nombra las opciones con un lenguaje que sea natural para el usuario.
175
¿Cómo tener un buen sistema de búsqueda?
* Indicar los términos por los que se ha buscado.
* Indicar el número de resultados mostrados y encontrados.
* Destacar las coincidencias.
* Permitir refinar la búsqueda.
* Permitir realizar búsquedas sólo en los resultados.
176
¿Qué son los diagramas de flujo?
Un diagrama de flujo, en inglés flowchart, es un tipo de diagrama que nos permite visualizar, con la ayuda de cajas y flechas, los pasos que sigue un sistema o usuario para realizar una serie de tareas.
177
¿Cuándo se utiliza un flowchart?
-Análisis
En la fase inicial un diagrama de flujo visualiza el workflow general. Éste se puede someter a un análisis heurístico para identificar potenciales de mejora.
También podemos comparar el workflow de diferentes
herramientas o sistemas competidores en forma de diagramas de flujo (benchmarking).
-Conceptualización
Durante la fase de ideación la elaboración de un nuevo workflow puede definirse en forma de flowchart.
-Prototipado
Durante la creación iterativa de un nuevo workflow, este se puede visualizar en forma de flowchart.
-Desarrollo y documentación
Los diagramas de flujo son en origen una herramienta de desarrollo para documentar algoritmos y funcionalidades. Si hemos utilizado el flowchart como metodología durante el proyecto es lógico utilizarla como forma de documentación.
178
¿Cómo hacer la creación de un diagrama de flujo?
Los diagramas de flujo tienen un lenguaje común que los identifica y unifica.
Es preciso utilizarlo para una correcta interpretación.
Básicamente, un diagrama de flujo se compone de abstracciones geométricas que representan acciones conectadas por líneas de flujo con flechas.
179
¿Cuáles son los tipos principales de acciones que contribuyen a la creación de un diagrama de flujo?
Los dos tipos principales de acciones constituyen las actividades y las que implican una decisión del actor:
• Las actividades se representan como cajas rectangulares con un proceso linear (flecha de entrada y salida).
• Las decisiones se representan como un rombo con una flecha entrante y dos de salida.
Los diagramas de flujo se desarrollan de izquierda a derecha y de arriba abajo.
Es importante evitar cruces de líneas y utilizar el espacio en blanco para agrupar bloques y líneas visualmente.
180
¿Qué es un Wireframe?
El Wireframe es una jerarquización de contenidos
distribuida visualmente y una esquematización de la interfaz.
Gráficamente, son estructuras muy simples y están enfocados a visualizar la distribución de los contenidos dentro de una pantalla.
181
¿Cuál es la Relación entre la AI y el diseño en los Wireframe?
El Wireframe es el puente que une la Arquitectura de Información y Diseño.
Pasa de la “mentalidad estructural” de un mapa de contenidos, dónde decidimos y ordenamos los contenidos de nuestro sitio web, a la emocionalidad del Diseño de Interfaz.
182
¿Para que sirve un Árboles de contenido?
Sirven para documentar la estructurar jerárquica general del producto y sus contenidos. Estos documentos no tratan de representar todas las relaciones o vínculos entre pantallas o páginas del producto, sino únicamente la visión general del mismo.
183
¿Cuales son las características de los Wireframe?
Son simples y no tienen distracciones visuales tales como color o imágenes.
Pueden ser dibujados a mano o creados con alguna aplicación digital.
Se utilizan en la creación de cualquier tipo de interfaz digital (web, móviles, etc.)
184
¿Cuales son las ventajas de los Wireframe?
* Definen qué quiere tu cliente y cuáles son sus objetivos.
* Permite la comunicación fluida entre el equipo de trabajo y el cliente.
* Las correcciones son objetivas, basadas en contenidos y funcionalidad.
* Se evitan las discusiones gráficas.
* Se reducen los tiempos de trabajo y costos.
* Permiten visualizar interacciones y flujos.
* Se pueden identificar problemas de Interacción, Usabilidad, Accesibilidad, etc. que puedan presentarse más adelante.
* Como es una estructura simple y enfocada en los contenidos, permite al diseñador tener plena libertad al momento de diseñar la interfaz.
185
¿Qué son los Embudos de conversión?
Los embudos de conversión son diagramas muy sencillos, ideados para productos web, en los que se representan flujos secuenciales de interacción, y cuál es el promedio de usuarios que navega de una página a la siguiente o por el contrario abandonan el proceso.
186
¿Qué son los storyboards?
En los Storyboards se presenta la interacción entre el usuario y producto mediante ilustración y narrativa, aportando contexto a dicha interacción como situaciones, ambientes, necesidades, motivaciones o interacciones sociales.
187
¿Cuáles son los consejos para hacer un buen Wireframe?
* Simple sobre todas las cosas
* Usa la mayor cantidad de contenido real posible
* Siempre trabaja en escala de grises
* Evita usar imágenes, logos e iconografía
* No te limites a usar una aplicación digital, ¡dibuja!
* Define muy bien la estrategia y los contenidos antes de empezar
* Siempre haz wireframes antes de diseñar
* Explica las zonas e interacciones •Discute los wireframes con tu equipo de trabajo
* Corrige problemas detectados en wireframes, no en diseño
188
¿Qué es la Psicología Gestalt?
La palabra Gestalt es del idioma alemán que literalmente significa patrón, figura, forma o estructura unificada.
La psicología de Gestalt, un movimiento que inició en la década de los 20’ en Berlín, busca darle sentido a cómo nuestras mentes perciben las cosas como un todo, en lugar de cada uno de los elementos.
189
¿Qué es la Ley de Pregnancia (Prägnanz)?
Cuando la persona intenta interpreta un elemento visual, lo hará de la manera más simple y reconocible posible.
El cerebro prefiere las formas integradas, completas y estables.
190
¿Qué es la Ley de Figura y fondo?
Nuestra percepción visual busca centrar la atención en una zona (figura) y dejar las zonas alrededor en un segundo plano (fondo).
Contraste
191
¿Qué es la Ley de Semejanza?
Los elementos que son similares tienden a ser agrupados.
| La semejanza depende de los atributos: forma, tamaño, color...
192
¿Qué es la Ley de Igualdad?
Cuando concurren varios elementos de diferentes clases, tendemos a agrupar los que son iguales.
193
¿Qué es la Ley de Simetría?
La mente, siempre en busca de la belleza, prefiere las apariencias simétricas
194
¿Qué es la Ley de Cierre?
Reconocemos formas familiares incluso si están incompletas.
195
¿Qué es el peso visual?
```
El peso visual es la capacidad que tiene
un elemento de una composición de
atraer la mirada de aquel que mira la
imagen. Cuanto más peso visual tenga
algo, más atraerá la atención del ojo.
¿Qué hace que algo tenga más peso
visual que otro elemento?
```
196
¿Qué es la Ley de Continuidad?
Percibimos como una unidad los elementos dispuestos
| a lo largo de una dirección/trayectoria/línea.
197
¿Qué es la Ley de Dirección común?
Los elementos visuales que se mueven en la misma dirección tienden a ser vistos como un conjunto.
198
¿Qué es la Ley de Experiencia?
Las experiencias y conocimientos que acumulamos
| condicionan nuestra percepción.
199
¿Qué es la Ley de Simplicidad?
Los elementos visuales son percibidos en la forma más simple posible.
200
¿Qué es el Atomic Design?
La metodología “Atomic Design”, o diseño atómico
en castellano, es un sistema de trabajo que se
basa en la creación de elementos modulares
sencillos para crear estructuras de información
mucho más complejas, que pretende acabar con las inconsistencias y optimizar al máximo el diseño y el desarrollo de productos digitales. una teoría que creó el diseñador digital Brad Frost.
201
¿Cuáles son los 5 niveles del Atomic Design?
```
Nivel 1: Átomos
Nivel 2: Moléculas
Nivel 3: Organismos
Nivel 4: Plantillas
Nivel 5: Páginas/Sistema
```
202
¿A que se refiere el nivel 1: átomos de atomic design en UI?
Un átomo es la unidad de partículas más pequeña que puede existir.
Aplicado al diseño, hablamos de átomos cuando hablamos de elementos UI que por sí solos tienen alguna funcionalidad: botones, cards, avatares, inputs de formulario... pero también las tipografías, paleta de colores, espaciados, párrafos...
203
¿A que se refiere el nivel 2: moléculas de atomic design en UI?
Una molécula es una unión de dos o más átomos.
Del mismo modo, una molécula en Atomic Design es la unión de diferentes átomos para formar un elemento UI más complejo.
Por ejemplo, un campo de formulario con un botón de enviar y un label. O un rectángulo con un avatar, nombre y ubicación del usuario (es decir, avatar
con texto en un área determinada). O un icono junto con un texto que ocupa una área determinada.
204
¿A que se refiere el nivel 3: organismos de atomic design en UI?
Los “organismos de la interfaz” son formados por el conjunto de moléculas y átomos, unidos para formar una sección más compleja. Estos organismos ya ofrecen una experiencia completa para el usuario.
No debemos perder de vista que estamos hablando de elementos de UI formados por moléculas (que a su vez son átomos) y que, por encima de todo, pueden repetirse.
Por ejemplo, cuando juntamos los rectángulos con el avatar y los nombres, cuando unimos los iconos y texto para crear una navegación de una aplicación,
etc.
205
¿A que se refiere el nivel 4: plantillas de atomic design en UI?
En esencia, lo que consideraríamos “plantillas” dentro del Atomic Design no dejarían de ser los wireframes: una unión de distintos organismos que forman una página o una aplicación.
Se trata de un entregable de alta fidelidad, pero que no termina de ser el diseño final. Para que nos entendamos, se trata del “esqueleto” de la aplicación o página web.
206
¿A que se refiere el nivel 5: paginas/sistema de atomic design en UI?
Este es el último nivel del Atomic Design. Son en realidad el diseño final que ya contiene las imágenes y otros detalles que hacen que ese archivo ya esté listo para el desarrollo o, en su defecto, test con usuarios o el equipo.
El sistema, por lo tanto, sería la suma del todo lo anterior. Es el resultado final; la web, la aplicación, el software o cualquier producto digital que estemos
desarrollando.
207
¿Qué es un focus group?
Reunión informal de entre 5 y 10 usuarios (expertos)
| dirigidos por un moderador con el objetivo de obtener opiniones, sensaciones, actitudes e ideas.
208
¿Cuándo hacer un focus group?
1. Para detectar necesidades de futuros usuarios
2. Para prevenir errores en fases iniciales de un proyecto
3. Para validar la eficacia de un producto que ya está en desarrollo
209
¿Cómo planificar un focus group?
1. Determinar los objetivos de la prueba
2. Definir el perfil de los “usuarios” a convocar
3. Diseñar contexto de trabajo durante la prueba
4. Preparar sistemas de registro (audio, registro escrito etc.)
