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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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…)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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…)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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?
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

¿Cómo es el Perfil User Researcher?

A

Define la metodología de investigación, que permita identificar necesidades, percepciones o insights de los clientes.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

¿Cómo es el Perfil diseñador de servicio?

A

Garantiza la adecuación de los servicios a las necesidades de los diferentes clientes y Stakeholders.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

¿Cómo es el Perfil diseñador de interacción?

A

Desarrolla modelos de interacción y experiencia de servicios, adecuado a las necesidades y experiencias del cliente.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

¿Cómo es el Perfil diseñador visual?

A

Colabora en el desarrollo de servicios, ilustrando conceptos, desarrollando prototipos y sketch que permitan visualizar y experimentar la propuesta.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

Como es el Perfil UX manager?

A

Lidera el equipo, define la visión, marca

la estrategia y optimiza la operativa.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

¿ Como es el Perfil generalista?

A

Posee habilidades en muchas disciplinas, normalmente estos perfiles se encuentran en empresas que tienen pocos recursos UX como startups.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

¿ Como es Perfil especialista?

A

Es experto en una disciplina, normalmente trabaja con equipos grandes que incluye otros roles de UX.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

¿ Como es el Perfil T?

A

Poseé una disciplina fuerte y conocimientos más básicos en otras, este perfil puede cubrir distintos entornos.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

¿Cuáles son las Características de un buen diseño?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

¿Qué necesitas para realizar un buen trabajo en UX/UI?

A
  • Constante curiosidad y aprendizaje
  • Manejo de software de prototipado
  • Seguir una buena línea gráfica
  • Buen comunicador visual
  • Metodología
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

¿Cuáles son los Elementos de UX?

A
Es el esquema de un proceso de Diseño de
Producto Digital esta compuesto por:
Estrategia
Alcance
Estructura
Esqueleto
Superficie
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

¿En que se basa el elemento de Estrategia?

A

¿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é?

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

¿Qué son las retículas o Grid?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
38
Q

¿Qué es el elemento de Estructura?

A

Cómo el usuario interactúa con ella y cómo responderá el software a los comportamientos del usuario durante esa interacción.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
39
Q

¿Cuál es el principio básico de la Grid?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
40
Q

¿Qué es el elemento de Superficie?

A

Es la capa concreta del desarrollo del producto y la preocupación por ella es compartida: ¿Cómo se ve el producto terminado?

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
41
Q

¿Qué es una metodología ágil?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
42
Q

¿Qué es el design Sprint?

A

Es una metodología ágil que ha sido desarrollada por Google Ventures y que popularizó a nivel global Jake Knapp.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
43
Q

¿Para que sirve el design sprint?

A

Es una metodología para resolver los problemas de

negocio a través del diseño.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
44
Q

¿En qué consiste el “Análisis Informe final” dentro del Análisis Heurístico?

A

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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
45
Q

¿Cuáles son las fases para la ejecución en el proceso de la metodología design sprint?

A
  • Entender
  • Definir
  • Bocetar
  • Decidir
  • Prototipar
  • Validar
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
46
Q

¿Qué beneficios tiene utilizar retículas?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
47
Q

Nombra los seis componentes de un formulario.

A
  • Estructura
  • Campos (input fields)
  • Rótulo (labels)
  • Botones
  • Feedback
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
48
Q

¿Por qué es importante la Grid?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
49
Q

¿Qué tipos de retículas existen?

A
  • 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/).
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
50
Q

¿En qué consiste un rótulo de un formulario?

A

Son quienes indican al usuario qué dato corresponde en cada campo (field).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
51
Q

¿Qué Herramientas utilizamos para hacer los procesos de las metodologías?

A

•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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
52
Q

¿Qué se debe tener en cuenta en la estructura de un formulario?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
53
Q

¿Qué es un Sistema de Diseño?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
54
Q

¿Qué ventajas aporta un Sistema de Diseño?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
55
Q

¿Qué es el modelo del doble diamante?

A

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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
56
Q

¿Para que sirve la fase de observar en el doble diamante?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
57
Q

¿En qué consiste la Ley de Miller?

A

La persona promedio solo puede mantener alrededor de 7 elementos en su memoria de trabajo.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
58
Q

¿De que se encarga la fase de PROTOTIPAR en design sprint?

A

Es hora de que todo el equipo comience a crear una primera versión del concepto previamente elegido.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
59
Q

¿De que se encarga la fase de VALIDAR en design sprint?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
60
Q

¿De que se encarga la fase de ENTENDER en design sprint?

A

Se crea una conversación inicial para comprender el tema que se pretende abordar.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
61
Q

¿Qué es design thinking?

A

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.,

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
62
Q

¿Cuáles son las características de design thinking?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
63
Q

¿Los conceptos Mobile First y Responsive Design significan lo mismo?

A

Mucha gente piensa que son lo mismo, pero son completamente distintos.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
64
Q

¿En qué consiste el concepto Mobile First?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
65
Q

¿Qué es un formulario?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
66
Q

¿Cuáles son los tipos de affordance?

A
  • Perceptible
  • Oculto
  • Falso
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
67
Q

¿Qué incluye la estructura de un formulario?

A
  • El orden de los campos.
  • Posicionamiento en la pagina.
  • Conexión lógica entre los campos.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
68
Q

¿Qué incluyen los campos de un formulario?

A
  • Los campos de texto.
  • Contraseñas.
  • Check boxes.
  • Radio buttons.
  • Sliders.
  • Cualquier otro tipo de campos diseñados para input del usuario.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
69
Q

¿En qué consiste un rótulo de un formulario?

A

Son quienes indican al usuario qué dato corresponde en cada campo (field).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
70
Q

¿Para que sirve design thinking

A

Pretende identificar las necesidades reales de cada cliente para ofrecerle la mejor solución.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
71
Q

¿Qué es el modelo del doble diamante?

A

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.”

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
72
Q

¿Qué es un feedback?

A

Consiste en notificar al usuario el resultado de su interacción. Estas notificaciones pueden ser positivas o negativas.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
73
Q

¿Para que sirve la fase de observar en el doble diamante?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
74
Q

¿Qué buenas prácticas se deben seguir al realizar un formulario?

A
  • 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.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
75
Q

¿Para que sirve la fase de sintetizar en el doble diamante?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
76
Q

¿Qué elementos entregables se utilizan en la fase de observar?

A

• 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

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
77
Q

¿Qué elementos entregables se utilizan en la fase de sintetizar?

A
  • User Persona. (Ejemplo)
  • Mapas de empatía
  • Customer Journey (ejemplo)
  • Matriz de necesidades. (ejemplo)
  • Matriz de utilidad y viabilidad
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
78
Q

¿Qué elementos entregables se utilizan en la fase de idear?

A
  • 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
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
79
Q

¿Qué elementos entregables se utilizan en la fase de diseñar?

A
  • Moodboard
  • SiteMap
  • Flowchart
  • Wireframe
  • Sistema de diseño
  • Prototipo en alta
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
80
Q

¿Para que sirve la fase de idear en el doble diamante?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
81
Q

¿Para que sirve la fase de diseñar en el doble diamante?

A

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.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
82
Q

Nombra las leyes de UX.

A
  • Ley de Fitts.
  • Ley de Hick.
  • Ley de Miller.
  • Ley de Jakob.
  • Principio de Pareto.
  • Ley de Von Restorff.
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
83
Q

¿En qué consiste la Ley de Fitts?

A

El tiempo necesario para alcanzar un objetivo es directamente proporcional a la distancia e inversamente proporcional al tamaño del objetivo.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
84
Q

¿En qué consiste la Ley de Hick?

A

El tiempo necesario para tomar una decisión es directamente proporcional al número de opciones disponibles.

85
Q

¿En qué consiste la Ley de Miller?

A

La persona promedio solo puede mantener alrededor de 7 elementos en su memoria de trabajo.

86
Q

¿Qué es la Affordance?

A

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
Q

¿Qué es la Affordance en UX/UI?

A

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
Q

¿Cuáles son los tipos de affordance

A
  • Perceptible
  • Oculto
  • Falso
89
Q

¿En qué consiste la Ley de Jakob?

A

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
Q

¿En qué consiste la Ley de Pareto?

A

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
Q

¿En qué consiste la Ley de Von Restorff?

A

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
Q

¿Qué es el tipo de affordance perceptibles?

A

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
Q

¿Qué es el tipo de affordance oculto?

A

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
Q

¿Qué es el tipo de affordance falso?

A

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
Q

¿Qué es el color?

A

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
Q

¿Cuáles son los elementos del diseño visual?

A
  • Color
  • Tipografía
  • Imágenes / Iconos
  • Animación
  • Jerarquía / Composición
  • Sistemas / Retículas
97
Q

¿Qué es el modelo de color?

A

Es un modelo matemático abstracto que permite representar los colores en forma numérica.

98
Q

¿Qué indica la almohadilla al explorador o al editor de imágenes en la representación numérica del modelo de color?

A

Indica el sistema que estamos usando, en este

caso el hexadecimal.

99
Q

¿Cómo está formada la representación numérica del modelo de color?

A

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
Q

¿Qué indican los números y letras en la representación numérica del modelo de color?

A

Representan la intensidad presente de cada uno de los tres colores de la mezcla aditiva.

101
Q

¿Cuál es el color más usado por las grandes empresas e instituciones?

A

El azul

102
Q

¿Qué representa el color azul en la psicología del color?

A

Representa simpatía, armonía, paciencia, eternidad e inteligencia.

103
Q

¿Qué empresas suelen usar estos colores? ¿Por qué?

A

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
Q

¿Qué representa el color rojo en la psicología del color?

A

El amor, la pasión, la fuerza, el calor, la prohibición, el dinamismo y el valor.

105
Q

¿Quién suele utilizar el color rojo en sus marcas?

A

Las marcas de coches y motos más importantes del mercado.

106
Q

¿Qué representa el color amarillo en la psicología del color?

A

Felicidad, inteligencia, alegría y energía.

107
Q

¿Qué color capta más rápido el ojo humano?

A

El amarillo

108
Q

¿Qué representa el color verde en la psicología del color?

A

Esperanza, naturaleza y calma.

109
Q

¿Para qué está indicado el uso del color verde?

A

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
Q

¿Qué nos comunica el color?

A

Jerarquía, dirige la vista y da significado.

111
Q

¿Qué combinaciones de color existen?

A
  • Complementarios
  • Análogos
  • Triada
  • Monocromático
  • Degradados (añadido en diapositivas)
  • Tono pastel (añadido en diapositivas)
112
Q

¿Qué son los colores complementarios?

A

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
Q

¿Qué son los colores análogos?

A

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
Q

¿Qué son los colores triados?

A

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
Q

¿Qué son los colores monocromáticos?

A

Los esquemas de colores monocromáticos usan un color base y matices como una paleta extendida (+blanco o + negro)

116
Q

¿Cómo se hacen en la actualidad los gradientes?

A

Anteriormente, los gradientes del mismo color eran la norma, pero hoy en día son los gradientes complementarios de alto contraste.

117
Q

¿Qué son los colores tonos pastel?

A

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
Q

¿En qué consiste la regla 60-30-10?

A

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
Q

Errores que se suelen cometer al aplicar los colores:

A
  • 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
Q

¿Qué significan las siglas HLS?

A

No son colores, sino parámetros: Hue (tono), Saturation (saturacion) y Lightness (luminosidad).

121
Q

¿En qué consiste Hue?

A

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
Q

¿En qué consiste Saturation?

A

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
Q

¿En qué consiste Lieghtness?

A

Hace referencia a cómo de claro u obscuro es un color.

124
Q

¿En qué se divide la tipografía?

A

En microtipografía y macrotipografía.

125
Q

¿Qué estudia la microtipografía?

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
Q

¿Qué estudia la macrotipografía?

A

Estudia el efecto global de los bloques de texto y cómo se distribuyen en la misma.

127
Q

¿En qué consiste el Kerning?

A

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
Q

¿En qué consiste el Tracking?

A

Permite añadir espacios proporcionalmente iguales entre todas las letras de una palabra.

(Se encuentra dentro de la microtipografía).

129
Q

¿Qué conceptos se tienen en cuenta dentro de la microtipografía?

A

La letra, el espacio entre las letras, la línea y el interlineado.

130
Q

¿Cómo se clasifican las fuentes?

A
  • Serif
  • Sans-serif
  • Handwritten
  • Display
131
Q

¿Cómo son las fuentes Serif?

A

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
Q

¿Cómo son las fuentes Sans-serif?

A

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
Q

¿Cómo son las fuentes Handwritten?

A

Las Handwritten suelen presentar mas dificultad a la lectura pero nos transmiten confianza, cercanía, personalidad y diferenciarse del resto.

134
Q

¿Cómo son las fuentes Display?

A

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
Q

Define el concepto Tipo (de fuente).

A

Diseño de una letra determinada.

136
Q

Define el concepto Tipografía.

A

Técnica de crear y componer tipos para comunicar mensajes

137
Q

Define el concepto Peso (tipográfico).

A

Grosor de las distintas fuentes dentro de una familia tipográfica

138
Q

Define el concepto Fuente.

A

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
Q

¿Qué tamaño de fuente recomienda Google para el texto del cuerpo?

A

Google, en las pautas de Material Design, establece que el tamaño mínimo para este es el de 16pt.

140
Q

¿Qué tamaño de fuente recomienda Apple para el texto del cuerpo?

A

Apple, en sus Human Interfaces (Directrices de Interfaz Humana), establece que el tamaño mínimo para este es el de 17pt.

141
Q

¿Cuál es un buen tamaño para el cuerpo del texto?

A

Entre los 16 y 18 pt.

142
Q

¿Qué se debe tener en cuenta al crear los botones?

A
  • 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
Q

¿Para qué son útiles los Botones Inactivo?

A

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
Q

¿En qué consiste la accesibilidad web?

A

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
Q

¿Qué es la AI?

A

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
Q

¿Qué es Findability en arquitectura de información?

A

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
Q

¿En que consiste el World Content Accessibility Guidelines (WCAG)?

A

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
Q

¿Cómo describimos las unidades de información?

A

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
Q

¿Cómo se aplica la accesibilidad web?

A

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
Q

¿Qué es card sorting?

A

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
Q

¿Qué tipos de limitaciones o discapacidades existen en la accesibilidad web?

A
  • 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
Q

¿En que consiste el Proyecto Ally?

A

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
Q

De los cuatro principios en los que se basa la WCAG 2.0 ¿Cómo se puede cumplir el principio de “perceptible”?

A
  • 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
Q

De los cuatro principios en los que se basa la WCAG 2.0 ¿Cómo se puede cumplir el principio de “operable”?

A
  • 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
Q

¿Qué factores hay que tener en cuenta para aplicar la accesibilidad web?

A
  • 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
Q

Dentro de las pautas de accesibilidad de contenido web 2.0 ¿en qué consiste la WCAG 2.0?

A

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
Q

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?

A
  • 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
Q

De los cuatro principios en los que se basa la WCAG 2.0 ¿Cómo se puede cumplir el principio de “perceptible”?

A
  • 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
Q

De los cuatro principios en los que se basa la WCAG 2.0 ¿Cómo se puede cumplir el principio de “operable”?

A
  • 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
Q

De los cuatro principios en los que se basa la WCAG 2.0 ¿Cómo se puede cumplir el principio de “entendible”?

A
  • 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
Q

De los cuatro principios en los que se basa la WCAG 2.0 ¿Cómo se puede cumplir el principio de “robusto”?

A

Maximizando la compatibilidad con herramientas actuales y futuras

162
Q

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?

A
  • 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
Q

Para que una página web cumpla con las pautas de WCAG, deben conformarse varios requerimientos, ¿cuáles son estos requerimientos?

A
  • 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
Q

¿Cuáles son los errores más habituales en la accesibilidad web?

A
  • 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
Q

¿Qué se debe tener en cuenta para diseñar de forma accesible?

A
  • 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
Q

¿Qué es la AI (arquitectura de la información)?

A

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
Q

¿Qué es la Findability?

A

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
Q

¿Qué son las unidades de información?

A

Unidad mínima de contenido que se ofrece

de manera homogénea en la web.

169
Q

¿Cómo se describen las unidades de información?

A

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
Q

¿Cuáles son los tipos de etiqueta?

A

Libres

Lenguajes controlados

Facetas (filtros)

Social

Metadatos

171
Q

¿Cómo se organizan las etiquetas?

A

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
Q

¿Cómo se organizan las unidades de información por medio del card sorting?

A

Unidades de información:

Facetas/ categorías/ filtros
• Época •Color •Hombre/Mujer

  • Género •No Puertas •Deporte
  • Corriente • Precio • Talla
173
Q

¿Cómo recuperamos la información?

A

Por medio de navegación y de búsqueda con:
Sistemas de navegación básicos

  • CONSTANTES
  • LOCALES
  • CONTEXTUALES
174
Q

¿¡Como tener un buen sistema de navegación?

A
  • 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
Q

¿Cómo tener un buen sistema de búsqueda?

A
  • 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
Q

¿Qué son los diagramas de flujo?

A

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
Q

¿Cuándo se utiliza un flowchart?

A

-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
Q

¿Cómo hacer la creación de un diagrama de flujo?

A

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
Q

¿Cuáles son los tipos principales de acciones que contribuyen a la creación de un diagrama de flujo?

A

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
Q

¿Qué es un Wireframe?

A

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
Q

¿Cuál es la Relación entre la AI y el diseño en los Wireframe?

A

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
Q

¿Para que sirve un Árboles de contenido?

A

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
Q

¿Cuales son las características de los Wireframe?

A

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
Q

¿Cuales son las ventajas de los Wireframe?

A
  • 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
Q

¿Qué son los Embudos de conversión?

A

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
Q

¿Qué son los storyboards?

A

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
Q

¿Cuáles son los consejos para hacer un buen Wireframe?

A
  • 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
Q

¿Qué es la Psicología Gestalt?

A

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
Q

¿Qué es la Ley de Pregnancia (Prägnanz)?

A

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
Q

¿Qué es la Ley de Figura y fondo?

A

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
Q

¿Qué es la Ley de Semejanza?

A

Los elementos que son similares tienden a ser agrupados.

La semejanza depende de los atributos: forma, tamaño, color…

192
Q

¿Qué es la Ley de Igualdad?

A

Cuando concurren varios elementos de diferentes clases, tendemos a agrupar los que son iguales.

193
Q

¿Qué es la Ley de Simetría?

A

La mente, siempre en busca de la belleza, prefiere las apariencias simétricas

194
Q

¿Qué es la Ley de Cierre?

A

Reconocemos formas familiares incluso si están incompletas.

195
Q

¿Qué es el peso visual?

A
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
Q

¿Qué es la Ley de Continuidad?

A

Percibimos como una unidad los elementos dispuestos

a lo largo de una dirección/trayectoria/línea.

197
Q

¿Qué es la Ley de Dirección común?

A

Los elementos visuales que se mueven en la misma dirección tienden a ser vistos como un conjunto.

198
Q

¿Qué es la Ley de Experiencia?

A

Las experiencias y conocimientos que acumulamos

condicionan nuestra percepción.

199
Q

¿Qué es la Ley de Simplicidad?

A

Los elementos visuales son percibidos en la forma más simple posible.

200
Q

¿Qué es el Atomic Design?

A

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
Q

¿Cuáles son los 5 niveles del Atomic Design?

A
Nivel 1: Átomos
Nivel 2: Moléculas
Nivel 3: Organismos
Nivel 4: Plantillas
Nivel 5: Páginas/Sistema
202
Q

¿A que se refiere el nivel 1: átomos de atomic design en UI?

A

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
Q

¿A que se refiere el nivel 2: moléculas de atomic design en UI?

A

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
Q

¿A que se refiere el nivel 3: organismos de atomic design en UI?

A

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
Q

¿A que se refiere el nivel 4: plantillas de atomic design en UI?

A

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
Q

¿A que se refiere el nivel 5: paginas/sistema de atomic design en UI?

A

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
Q

¿Qué es un focus group?

A

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
Q

¿Cuándo hacer un focus group?

A
  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
Q

¿Cómo planificar un focus group?

A
  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.)