Please enable JavaScript.
Coggle requires JavaScript to display documents.
Diseñador de experiencia de usuario, image, image, Captura de pantalla…
Diseñador de experiencia de usuario
Partituras de interacción
Representa a través de iconos:
Las acciones que desea realizar el usuario final y que responden a sus objetivos, intenciones y emotividad.
Comunicación que establece la interfaz con el usuario final por medio de mensajes y acciones.
La programación del producto digital que lo hace responder a las peticiones del usuario.
Patrones para el diseño de la interacción
Los patrones se utilizan en el diseño de la interacción para reducir los tiempos de desarrollo.
Son soluciones de terceros, ya que especifican cuando deben utilizarse y como deben ser implementadas.
1.- Librerías para patrones de interacción
2.- Elige algún sitio web listado
3.- Encuentra la pestaña de patterns y haz clic
4.- Observa las soluciones que están clasificadas
5.- Elige el patrón que necesitas.
6.- Ejecuta los pasos que indica el portal web para incorporar el patrón
Estos patrones servirán para mejorar la usabilidad del producto
Modelos cognitivos del usuario
Los elementos de la interfaz cuyo funcionamiento debe ser explicado al usuario final mientras utiliza el producto digital.
Los patrones de arquitectura de la información con los que debe estructurarse el contenido de un producto digital.
La posición del menú, iconos multimedia y texto en el layout del sitio web.
Las dimensiones de los controles de la interfaz (botones, menús
Arquitectura de la información
Consiste en estructurar el contenido de un sitio para facilitar el acceso del usuario ala información.
Técnica Card Sorting
consiste en observar y documentar como un grupo de usuarios asocia y agrupa contenido de un tema.
Pasos
1.-Reunir personas con perfil de usuarios.
2.-Explicarles el sitio web
3.-Ordenar secciones
4.-Englobar categorías
5.-Anotaciones de la interacción del grupo
6.-Realizar mapa de navegación.
Patrones para arquitectura de información
Patrones para escritorio
1.-Jerarquía estricta:
Consiste en una página índice que está asociada a una o varias páginas principales que a su vez están ligadas a subpáginas.
2.-Jerarquias multidimensionales:
Consiste en una página índice asociada a varias páginas principales que a su vez permiten el acceso a una o varias subpáginas
3.- Concentrador
Consiste en un sistema de navegación lateral en donde se encuentran todos los enlaces para que el usuario acceda los contenidos
4.- Lineal
Consiste en un sistema de navegación secuencial, por lo que el usuario accede a los contenidos del sitio web mediante el recorrido de cada una de las páginas del portal.
5.-Plano
Todas las páginas tienen la misma jerarquía, por lo que el usuario puede acceder al contenido que sea de su interés de forma directa.
6.-Jerarquico
La pantalla principal tiene enlaces para dirigir al usuario al resto de los contenidos y regresar con el mismo recorrido; pero en sentido inverso
7.-Centralizador
La pantalla principal de la aplicación contiene los enlaces de las interfaces secundarias.
8.-Tabs
Las pestañas tienen la misma jerarquía en la pantalla principal, por lo que es necesario que el usuario haga tap en cada una de ellas para acceder a los contenidos de la aplicación.
9.-Matrioska
Los elementos de la pantalla principal cambian su jerarquía conforme el dispositivo va escalando en tamaño y viceversa.
Mapa de navegación
Identificar el tipo de contenido y jerarquía en el producto digital
Nivel 1: elementos que facilitan la interacción entre el usuario y el sitio.
Nivel 2: elementos para la navegación del usuario.
Nivel 3: elementos que no afectan con su ausencia.
Plasma la jerarquía de los contenidos
Parte superior: Colocar HOME
Nivel 1: escribe (1,1), indica la jerarquía y orden de aparición.
Nivel 2: subsecciones del producto digital e indica su jerarquía.
Nivel 3: Secciones con su jerarquía y orden de aparición.
Wireframe
Es una representación grafica de la arquitectura de la información de un producto digital
Carece de colores e imágenes.
Su objetivo es mostrar la estructura y distribución de sus elementos.
Retícula de construcción
Es un conjunto de columnas que funcionan como una guía para organizar los espacios en donde colocaras a cada elemento de la interfaz de un sitio.
Composición
Módulos
Márgenes
Rejas
Uso del color
Es un elemento indispensable para el diseño de la experiencia, ya que es capaz de afectar la percepción que el cliente tiene sobre el producto.
Sensaciones
Rojo, amarillo, marrón, naranja y dorado producen la sensación de calidez en los usuarios, mientras que el azul, morado y verde producen la sensación de frialdad
Circulo cromático
Representa de forma visual los colores y sus combinaciones.
clasificación
1.- Primarios: rojo, amarillo y azul
2.- se producen al combinar dos colores primarios
3.- se producen al combinar un color primario con un secundario o al combinar todos los colores primarios.
Elementos en el diseño de interfaces
1.-Botones
Su rol principal, más allá del sentido estético, es facilitar la interacción entre el usuario y el producto digital.
2.-Iconos
Son elementos de soporte ya que ofrecen información concreta sobre acciones que se pueden ejecutar en un portal o aplicación web.
3.-Imagenes
Facilitan la comprensión del usuario sobre la información que se aborda en el sitio o aplicación web.
4.-Tipografia
Se refiere al tipo de letra que se utiliza en el texto del producto.
Creación de Mock Ups
Es la representación grafica de la interfaz de un producto digital, incluye colores, tipografía e imágenes.
El maquetado con Mock ups permite definir el color, contraste y tipografía.
Guais de estilo
Es un documento que contiene las directrices del diseño visual del proyecto para que tanto diseñadores como programadores conozcan la tipografía, colores, imágenes.
Fomentan productos útiles y accesibles.
Permiten que el diseño tenga un diseño uniforme.
S e puede reutilizar.
Ergonomía cognitiva
Estudia la relación que existe entre la percepción, la memoria y el razonamiento en el aprendizaje de las personas y la forma en como éstas interactúan en ambientes en donde predomina el uso de las tecnologías.
Es necesario que adaptes el funcionamiento de las interfaces de tu aplicación o sitio web para que sean accesibles para personas con capacidades diferentes o necesidades especiales.
1) Las personas con discapacidad auditiva utilizan el sentido de la vista para identificar las acciones que se ejecutan en la interfaz.
2) Las personas con movilidad limitada requieren de productos digitales cuya interfaz esté integrada a un sistema de reconocimiento de voz.
3) Las personas con debilidad visual necesitan de un producto digital cuya interfaz sea capaz de transformar texto en voz y de esta forma describirle los elementos que se encuentran en la pantalla para que el usuario pueda utilizar el producto digital
