Please enable JavaScript.
Coggle requires JavaScript to display documents.
Interacción Humano Computador 1B, Principios de percepción de la GESTAL,…
Interacción Humano Computador 1B
Marcos de trabajo conceptuales para la cognición
Que es cognición?
Pensar, recordar, aprender, soñar, despierto, tomar decisiones, ver, leer, escribir y hablar
Lo que pasa por
nuestra cabeza
Tipos de Cognición
Cognición experiencial
Experiencia directa y el procesamiento rápido de la información
Es automática o intuitiva
Cognición reflexiva
Procesamiento más lento y consciente de la información
Deliberada o analítica
Modelo mental
Una persona adquiere conocimientos de las relaciones estructurales y el funcionamiento del sistema con el que está interactuando
Por consiguiente, el modelo mental no es ni completo, ni consistente, ni exacto.
Importancia
Predicciones e inferencias sobre cómo llevar a cabo tareas con el sistema
Gian el comportamiento del usuario al interactuar con el sistema.
modelo mental preciso permite un uso efectivo del sistema.
correctos
Coinciden con el funcionamiento
real del sistema
incorrectos
suposiciones erróneas del sistema
provoca
Frustración del usuario al no obtener los
resultados esperados
Modelo conceptual
Está formado por un conjunto de elementos (conceptos) y relaciones entre ellos observables desde el exterior.
Debe ser:
Asimilable (mediante el uso de conceptos familiares).
Consistente (coherente y bien formulado).
Simple (uso de descripciones comprensibles por un usuario medio).
Procesamiento de la
información
La mente como un computador
Cognición externa
Externalizar para reducir la
carga de memoria
Uso de diarios, recordatorios, calendarios,
lista de compras, listas to-do
Descarga computacional
Representaciones externas
Calculadora, Lápiz y papel, Reglas
Paradigmas y estilos de Interacción
HCI?
Es el estudio y diseño de la manera en que las personas y los ordenadores interactúan entre sí.
componente
Componente humano
Psicología
Comunicación
Ciencias sociales
Componente Tegnologico
Diseño asistido por computadoras
Ergonomía
Lenguaje de programación
Hardware y Software
Estilos de interacción
Formas en que el usuario puede comunicarse o interactuar con el sistema informático.
Tipos de estilos de interacción:
Lenguaje de comando (o entrada de comando)
Relleno del formulario
Selección de menú
Manipulación directa
Interacción con objetos reales al manipularlos directamente
Interacción asistida
Asistentes, Agentes que colaboran con el usuario
1 more item...
Conjunto de opciones que se muestran en la pantalla donde la selecciona una para una acción
Rellenar los formularios
Forma más antigua de estilo de interacción y todavía se utiliza
Paradigmas de Interacción
Ordenador de sobremesa
Realidad Virtual
Realidad Aumentada
Computación Ubicua (IOT)
Se refiere a la integración invisible de tecnología en nuestro entorno cotidiano.
Aumenta al mundo real con la información sintética del ordenador.
Entorno de escenas y objetos de apariencia real generado mediante tecnología informática
Computadora personal, diseñada y fabricada para ser instalada en una ubicación estática
Color
Círculo cromático
Colores cálidos
Reacciones positivas o negativas
Rojo: Amor, calidez, pasión
Naranja: Amabilidad, alegría, energía
Amarillo: Optimismo, creatividad, hogar
Colores fríos
Sensación de calma pero también de tristeza
Azul: fuerza, frío, calma
Morado: Misterio, sofisticación, moda
Rosa: Ilusión, infancia, dulce
Verde: Crecimiento, renovación, orgánico
Propiedades
Matiz
Color en sí mismo
Saturación
Pureza del color (cantidad de gris)
Luminosidad
Cantidad de blanco o negro presente en un color
Modelos
RGB: aditivo, ideal para pantallas
CMYK: Sustractivo, ideal para impresiones
Prototipado
¿Qué es prototipado?
El prototipado es una versión inicial de la idea de un producto o servicio.
Guía la experiencia de usuario.
Representación de una aplicación o sitio web antes de que este completamente desarrollado.
Planos o Blueprints
Características
Jerarquía de elementos.
Relaciones entre las páginas.
Relaciones entre el contenido.
permite
Ver de un vistazo cómo será el diseño de un sitio web.
A los robots rastrear de manera
óptima el sitio en su totalidad.
Tipos de prototipos
1. Sketches
¿Cuándo?
Fase de conceptualización y visualización inicial.
Características
Bocetos no pulidos.
Dibujos de concepto básico.
Toma fotografías de los sketches.
¿Qué es?
Primer dibujo
Que generara ideas. Alejado del producto final y abierto a cambios.
2. Wireframes
¿Qué es?
centrado
En el diseño del contenido, enriquece al sketch.
¿Cuándo?
Etapas iniciales del proceso de diseño de
producto.
Características
Sin demasiados detalles gráficos.
No usa color, solo escala de grises.
Se refinen los conceptos a mayor
detalle.
Agrega anotaciones.
3. Mockups
¿Qué es?
Representación estática y de alta fidelidad
del diseño.
toma en cuenta
Colores.
Tipografía.
Contenido.
¿Cuándo?
Fase de diseño/ rediseño visual.
Características
Modelo estático.
Uso de tipografía, color, estilo y contenido.
Alta Fidelidad
¿Cómo?
Figma.
Sketch.
Adobe XD.
Photoshop
4. Prototipo
¿Qué es?
es un
Modelo funcional del diseño.
es la
Fase más determinante para validar la usabilidad del producto.
¿Cuándo?
Fase de diseño funcional.
¿Cómo?
Invision.
Figma.
Adobe XD.
JustMind.
Características
Imita la funcionalidad del producto final.
Necesita una herramienta de prototipado.
Varía en fidelidad.
Interactivo.
Herramientas de prototipado
¿Qué es?
son
Aplicaciones o software diseñados específicamente
para
Crear prototipos de productos digitales
Características
Interfaz de Arrastrar y Soltar.
Interfaz de Arrastrar y Soltar.
Interactividad.
Animaciones.
Colaboración en Tiempo Real.
Exportación y Entrega.
Comparación de herramientas
Colaboración en tiempo real
Figma permite
que múltiples
usuarios trabajen simultáneamente en el mismo archivo.
Compatibilidad y acceso
Figma y Adobe XD ofrecen
mejor accesibilidad multiplataforma.
Prototipado y animaciones
InVision y Adobe XD tienen
Capacidades robustas en cuanto a prototipado avanzado.
Atomic Design
¿Qué es?
Etapas del Atomic Design
2. Moléculas
es la
Unión de diferentes átomos para formar un elemento UI más complejo.
Ejemplo
Caja de búsqueda
5. Páginas
son
Instancias específicas de plantillas que muestran como se ve una interfaz
pero con
Contenido representativo real
Ejemplo
1 more item...
1. Átomos
son
Elementos UI que por sí solos tienen alguna funcionalidad
Ejemplos
Botones
Inputs
3. Organismos
estamos
Hablando de elementos que son más complejos
ya que
Son sumas de los niveles anteriores.
Ejemplo
1 more item...
4. Plantillas
son el
Esqueleto que define la estructura del contenido
y se debe
Compartirlo para obtener retroalimentación
Ejemplo
1 more item...
proviene de la
Idea de separar los componentes
sirve
Para estructurar los componentes
Para reutilizar componentes
Para que otros desarrolladores entiendan
Principios de percepción de la GESTAL
Definición
Pilares
Procesos mentales
Interpretación del cerebro humano.
Ley de buena forma
Globalidad o totalidad
Tendencia del cerebro humano a simplificar y organizar imágenes o diseños complejos, agrupando el sus partes como un todo.
Fundadores
Max Wertheimer,
Wolfgang Köhler y Kurt Koffka.
Ley de la Proximidad
Los elementos cercanos son percibidos como un todo
Ley de la similitud
Los elementos parecidos tienen a agruparse en la mente humana
Los elementos parecidos pueden agruparse por características.
Ley de Cierre
Los elementos incompletos se perciben como una figura completa y coherente.
Mayormente usado en logotipos
Ley de la continuidad
Si varios elementos siguen un mismo camino o flujo se entienden como un todo
Ley de la figura - fondo
Una forma no puede ser figura y fondo simultáneamente.
El tamaño de las figuras y los colores pueden influenciar en el proceso cognitivo
Ley de la buena forma
El cerebro humano tiende a percibir patrones, intenta organizarlo los elementos percibidos
Se describen por sus partes
Ley del destino común
Los elementos que parecen seguir una misma dirección se perciben como una figura.
Ley de la familiaridad
Los elementos son percibidos con los objetos del entorno cotidiano
Tipografía
Anatomía
Línea base: la línea imaginaria sobre la que las letras y otros caracteres descansan
Altura x: altura de las letras minúsculas que descansan sobre la línea base sin contar con ascendentes ni descendentes
Altura ascendente: altura desde la altura x hasta el extremo superior del hasta de letras
Altura descendente: medida desde la línea base hasta el extremo inferior de la cola de letras
Estilo o apariencia de las letras
y palabras
Orden
Tracking
Kernel
Interlineado
Serif
Adornos decorativos que aparecen en cada una de las letras
Recomendada para impresiones
Consideradas tradicionales
Facilitan la lectura
Sans Serif
No poseen remates al inicio o final de las letras
Recomendada para ambientes digitales
Consideradas más formales y modernas
Categoría
Principios de Interacción y Usabilidad
Principios de Diseño de Norman
Visibilidad
Elementos perceptibles para los usuarios
Retroalimentación
Después de realizar una acción el usuario recibe una respuesta
Inmediata, clara, concisa, adecuada.
Condiciones
Limitaciones y posibilidades del sistema.
Mapeo
Relación entre los controles de un objeto y sus efectos
Consistencia
Comportamiento similar en apariencia y funcionamiento de todos los elementos. (coherencia)
Asequibilidad
Señales perceptibles que indican como un objeto puede ser utilizado.
Heurísticas de Nielsen
Visibilidad del estado del sistema
Informar a los usuarios sobre lo que está sucediendo con el sistema
La retroalimentación es necesaria
Relación entre el sistema y el mundo real
Lenguaje y elementos visualmente familiares para los usuarios.
Control y libertad del usuario
Los usuarios deben sentir control y libertad en el sistema.
Consistencia y estándares
Elementos congruentes en comportamiento y apariencia
Prevención de errores
Interfaces que minimicen la posibilidad de que los usuarios cometan errores.
Proporcionar mensajes de confirmación claras antes de realizar acciones críticas
Reconocimiento en lugar de recordar
Minimización de la carga de memoria del usuario con elementos visibles, acciones, opciones e información clara y concisa
Flexibilidad y eficiencia de uso
Adaptarse a las necesidades de usuarios con diferentes niveles de experiencia
Proporcionar accesos directos o atajos
Diseño estético y minimalista
Cumplir con lo requerido sin detalles innecesarios
Eliminar información irrelevante
Ayudar a los usuarios a reconocer, diagnosticar y corregir los errores
Mensajes detallados con lenguaje familiar para el usuario que ayuden a corregir errores
Ayuda y documentación
Proporcionar a los usuarios recursos de ayuda para que los usuarios aprendan sobre el sistema
Guías de diseño para crear interfaces de usuario fáciles de usar, intuitivas y eficientes
Diseño de la interacción
Enfocado en crear experiencias significativas para los usuarios con los productos o servicios digitales.
Principio de diseño
Sugerencias de diseño que sirven como guía para crear diseños agradables, funcionales y efectivos
Me dicen que usar y que evitar
