Conceptos de UX/UI

December 15, 2020
  • Diseño: El diseño parte de la idea de crear o mejorar algo a partir de la observación de una necesidad humana.
  • UX: Se enfoca en que el producto ofrezca una gran experiencia usando recursos como: Técnicas de Investigación, análisis y comprensión de la información y la forma en la que interactúa el usuario con el producto o servicio.
  • UI: Se enfoca más en la parte visual del producto, de crear experiencias memorablemente visuales, aprovechando las ventajas del contexto en el que está el producto.
  • Roles dentro de un equipo de UX
    • UX Researcher
    • UX Writer o Content Strategist
    • Information Architect
    • Product Designer
  • UX Research: Es el proceso de investigación que se realiza para comprender las necesidades, actitudes, motivaciones, experiencias y comportamientos del usuario a través de métodos cuantitativos y cualitativos bajo la observación, recopilación y análisis de datos para la resolución de problemas.
  • Investigación cuantitativa: Es una investigación que permite obtener información que se se puede medir directamente y es objetiva.
  • Investigación objetiva Permite obtener información que se enfoca en opiniones personales y nos permite conocer al detalle cada usuario y el motivo de cada acción o pensamiento.
  • UX Research Methods:
    • Card Sorting
    • Focus group
    • Interviews
    • Prototyping
    • Surveys
  • Lean UX: Busca, a través de experimentos, prototipos y cercanía con los usuarios para encontrar sus necesidades y problemas a solucionar.
  • Google Design Sprint: Metodología de trabajo para resolver grandes problemas en tan solo 5 días en un proceso paso a paso que cualquier equipo puede usar.
  • Knowledge Map: Herramienta para identificar todo lo que sabemos, pero descubrir lo que aún no sabemos que no sabemos.
  • Componentes del Knowledge Map:
    • Verdades: Son hechos absolutos, respaldados por expertos o métricas
    • Supuestos: Creencias de algo que sabemos
    • Limitantes: Entender los contextos en donde se desarrolla el producto.
  • Diseño Centrado en las Personas (human-centered design): Es una aproximación a la solución del problemas que pone el enfoque en las personas para las que estás diseñando un producto.
  • Benchmarking: Nos sirve como punto de referencia para comparar nuestro servicio/producto con nuestros competidores. Se recolectan datos de tipo cuantitativos
  • UX Mapping: es una técnica para comprender qué motiva a los usuarios: cuáles son sus necesidades, sus dudas y preocupaciones.
  • Técnicas de UX Mapping:
    • Mapa de empatía
    • Customer Journey Map
    • Experience Map
    • Service Blueprint
  • Mapa de empatía: Es un mapa donde la persona se encuentra en el centro y se define la personalidad de esta. Define las siguientes áreas: Pensamiento, que ve, que escucha, que habla, que siente y que hace con respecto al nicho al que te diriges.
  • Customer Journey Map: Los customer journey maps son una narración visual de las acciones, emociones, y contexto por el cual pasa un usuario que quiere cumplir un objetivo o satisfacer una necesidad a través de tu producto o servicio.
  • Modelo conceptual: El diseñador crea un modelo conceptual como un plan de alto nivel sobre cómo funcionará y encajará el producto.
  • Skeuomophism: El esqueuomorfismo digital implica tomar características de objetos de la vida real y aplicarlas a interfaces digitales para fomentar un sentido de familiaridad en los usuarios.
  • Heurísticas de usabilidad y leyes de UX
    1. Visibilidad del estado del sistema. El usuario debe saber que está pasando en la web, para eso contamos con bread crumbs, indicadores de progreso, ventanas de configuración.
    2. Relación entre el sistema y el mundo real. El usuario debe entender la información y se le debe presentar de manera lógica, clara y accesible.
    3. Control y libertad del usuario. Los usuarios cometen errores y tenemos que darle la posibilidad de solucionarlo. Ejemplo, la opción de deshacer errores, eliminar objetos de un carrito.
    4. Consistencia y estándares. Un sitio debe mantenerse coherente en la estructura gráfica y organización de la web.
    5. Prevenir errores. Además de ofrecer soluciones es importante hacer un trabajo de prevención de ellos.
    6. Reconocer antes que recordar. En una web usable el usuario debe manejar de manera intuitiva. Para eso es importante que los elementos de navegación estén en el mismo lugar, que los iconos y los recorridos estén claros.
    7. Flexibilidad y eficacia de uso. Una web se adapta al tipo de usuario que lo visita.
    8. Diseño estético y minimalista. Tanto al nivel de diseño como de contenido debe aplicarse el principio de la simplicidad.
      • Información imprescindible
      • Sencillo
      • Eliminar lo innecesario
      • Revisión continua de los contenidos
    9. Ayudar al usuario a reconocer y resolver los errores. Es importante notificar al usuario que ocurrió un error y como puede solucionarlo
    10. Documentación y ayuda. Es fundamental aportar una documentación que complete todos los detalles sobre nuestra web.
  • Arquitectura de información: Es la práctica de decidir cómo organizar las partes de algo para ser comprensible.
  • Wireframes: es una versión ya organizada y estructural de nuestro producto que toma en cuenta.
  • Responsive Web Design: es aquel capaz de adaptarse a diferentes tamaños y dispositivos.
  • Mobile First: es empezar a diseñar un sitio web desde la resolución más pequeña para ir creciendo y adaptando el contenido y el diseño a la resolución más grande.
  • Fixed websites: Los sitios web fijos tienen un width establecido y cambiar el tamaño del navegador o verlo en un dispositivo diferente no tendrá ningún efecto en la apariencia de su sitio web.
  • Fluid websites: Los sitios web fluidos se crean utilizando porcentajes para los anchos esto le permite escalar hacia arriba y hacia abajo con fluidez.
  • Adaptive websites: Los sitios web adaptables pueden usar una cuadrícula fija e introducir media queries para adaptarse a tamaños de dispositivos específicos, como dispositivos móviles o tabletas.
  • Principios de diseño por Don Norman:
    1. Use both knowledge in the world and knowledge in the head.
    2. Simplify the structure of tasks.
    3. Make things visible: bridge gulfs between Execution and Evaluation.
    4. Get the mappings right.
    5. Exploit the power of constraints.
    6. Design for error.
    7. When all else fails, standardize.”
  • Diseño de interacción: Es una disciplina que nació de la necesidad de estudiar y facilitar las interacciones entre las personas y su ambiente.
  • brand style guide: Una guía de estilo de marca es un libro de reglas que contiene especificaciones sobre todo lo que juega un papel en la apariencia de su marca.
  • Diseño atómico:Es una metodología para crear sistemas de diseño, estos a su vez de componen de 5 niveles.
    • Átomos
    • Moléculas
    • Organismos
    • Templates
    • Páginas
  • ¿Qué se debe hacer antes de un customer journey map? Definir los objetivos y metas del negocio.