Bitácora personal del Curso Diseñador UX/UI 2021, Programa Talento Digital.
Resumen: (C13/25/6/2021) .
Resumen: (C12/24/6/2021) .
Algunos tipos de test son:
Tasa de Éxito: Es un tipo de test donde el facilitador interactúa con el participante dando instrucciones para llevar a cabo la tarea. Como es remota, el facilitador y el participante no se encuentran en el mismo lugar, y se realiza a través de software de videollamada o reuniones online.
Severidad de Errores: Es un tipo de test donde el facilitador no interactúa con el participante durante la prueba de usabilidad. El investigador utilizar un herramienta de testeo remota que los participantes utilizan para llevar a cabo la tarea, donde aparecen las instrucciones y posibles preguntas. La misma herramienta entrega resultados, métricas, y una grabación de la sesión.
Time on task: Es un versión rápida de los test donde se prescinde de un lugar o laboratorio y de la etapa de reclutamiento, porque se buscan participantes en espacio públicos o cotidianos. Se les pide realizar una acción acotada y se les puede retribuir de forma rápida, con giftcards por ejemplo. A pesar de los beneficios de este técnica, solo se puede realizar si nuestro usuario final es un segmento amplio y no muy específico o acotado.
SEQ: Es un versión rápida de los test donde se prescinde de un lugar o laboratorio y de la etapa de reclutamiento, porque se buscan participantes en espacio públicos o cotidianos. Se les pide realizar una acción acotada y se les puede retribuir de forma rápida, con giftcards por ejemplo. A pesar de los beneficios de este técnica, solo se puede realizar si nuestro usuario final es un segmento amplio y no muy específico o acotado.
SUS: Es un versión rápida de los test donde se prescinde de un lugar o laboratorio y de la etapa de reclutamiento, porque se buscan participantes en espacio públicos o cotidianos. Se les pide realizar una acción acotada y se les puede retribuir de forma rápida, con giftcards por ejemplo. A pesar de los beneficios de este técnica, solo se puede realizar si nuestro usuario final es un segmento amplio y no muy específico o acotado.
Si pensamos que diseñamos nuestros productos o servicios en torno a nuestros usuarios, es lógico que parte del proceso sea evaluar nuestros prototipos con las personas para los que diseñamos. Ese el objetivo de las pruebas de usabilidad; propiciar que las personas interactúen con el producto en proceso, para observar cómo reacciona y cómo se comienza una experiencia de usuario.
Cuando desarrollamos pruebas de usabilidad nos aseguramos de cumplir con los objetivos de eficiencia, usabilidad de nuestro producto, y si realizamos un test en el momento justo y con el número de participante ideal (5 según Jacob Nielsen que son capaces de identificar el 80% de los problemas de usabilidad de un sistema), podemos reducir costos, tiempo y recursos. Ya sea que se realice en etapas de temprano con prototipos de bajo costo o en etapas más avanzadas, donde un teste de usabilidad entrega datos de la tasa de éxito y el tiempo de completación de las tareas.
Resumen: (C11/23/6/2021) Una herramienta de testeo de producto muy útil en cualquier etapa del diseño son las pruebas de usuario, evaluaciones de producto con los usuarios para detectar errores y posibles oportunidades de mejora de nuestros prototipos.
Las pruebas de usabilidad es una herramienta para evaluar nuestro producto en estado de prototipo con un grupos de los usuarios representativos. Se elige una tarea (con objetivo y subtareas) por prueba, y se observa al usuario realizarla. Las pruebas de usabilidad se pueden realizar a lo largo de todo el proceso de diseño.
Vista general de las etapas de prueba de usabilidad:
Los beneficios de los test de usabilidad se podrían resumir en los siguientes: (Tomado de NN Nielsen Group)
Algunos tipos de test son:
Remoto y Moderado: Es un tipo de test donde el facilitador interactúa con el participante dando instrucciones para llevar a cabo la tarea. Como es remota, el facilitador y el participante no se encuentran en el mismo lugar, y se realiza a través de software de videollamada o reuniones online.
Remoto no moderado: Es un tipo de test donde el facilitador no interactúa con el participante durante la prueba de usabilidad. El investigador utilizar un herramienta de testeo remota que los participantes utilizan para llevar a cabo la tarea, donde aparecen las instrucciones y posibles preguntas. La misma herramienta entrega resultados, métricas, y una grabación de la sesión.
Pruebas de “guerrilla”: Es un versión rápida de los test donde se prescinde de un lugar o laboratorio y de la etapa de reclutamiento, porque se buscan participantes en espacio públicos o cotidianos. Se les pide realizar una acción acotada y se les puede retribuir de forma rápida, con giftcards por ejemplo. A pesar de los beneficios de este técnica, solo se puede realizar si nuestro usuario final es un segmento amplio y no muy específico o acotado.
Si pensamos que diseñamos nuestros productos o servicios en torno a nuestros usuarios, es lógico que parte del proceso sea evaluar nuestros prototipos con las personas para los que diseñamos. Ese el objetivo de las pruebas de usabilidad; propiciar que las personas interactúen con el producto en proceso, para observar cómo reacciona y cómo se comienza una experiencia de usuario.
Cuando desarrollamos pruebas de usabilidad nos aseguramos de cumplir con los objetivos de eficiencia, usabilidad de nuestro producto, y si realizamos un test en el momento justo y con el número de participante ideal (5 según Jacob Nielsen que son capaces de identificar el 80% de los problemas de usabilidad de un sistema), podemos reducir costos, tiempo y recursos. Ya sea que se realice en etapas de temprano con prototipos de bajo costo o en etapas más avanzadas, donde un teste de usabilidad entrega datos de la tasa de éxito y el tiempo de completación de las tareas.
Dentro de la Diseño centrado en el Usuario (C10/22/6/2021).
Ejemplo de Repositorio y Documentación de Flapjack: https://zeroheight.com/7c774a0f4/p/76dd0d-foundation
Raster: Imagen vectorizada:
Optimización de Imagen en Photoshop
¿Cuándo usar cada uno?
Dentro de la Diseño centrado en el Usuario (C9/18/6/2021).
Ejemplo de Repositorio y Documentación de Flapjack: https://zeroheight.com/7c774a0f4/p/76dd0d-foundation
Dentro de la Diseño centrado en el Usuario (C8/17/6/2021).
https://zeroheight.com/7c774a0f4/p/98ee49-layout/b/193be2
Ejemplo de Material Design: https://setproduct.com/material
https://assets.uigarage.net/content/uploads/2020/10/unit-ui-kit-thumb.jpg
Estados del Botón (Componentes)
Componentes (Button, Input, Checkbox)—Carpetas son páginas. Solo aparece estilo y componentes.
Community>Showcase.
Títulos y párrafos
Botones
Input+label
Grilla/Lay out
Elementos a elección.
Resumen: Dentro de la Diseño centrado en el Usuario (C7/16/6/2021).
TIpos de Elementos de Interfaz:
https://zeroheight.com/7c774a0f4/p/98ee49-layout/b/193be2
Material Design: Sistema de diseño de google.
Ejemplo de Material Design: https://setproduct.com/material
https://assets.uigarage.net/content/uploads/2020/10/unit-ui-kit-thumb.jpg
Letter case and text legibility in normal and low vision https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2016788/
10 Principles Of Readability And Web Typography https://www.smashingmagazine.com/2009/03/10-principles-for-readable-web-typography/
Guide for designing better mobile apps typography https://uxdesign.cc/guide-for-designing-better-mobile-apps-typography-5796495ef86f
Understanding Recommended Font Sizes https://eldertech.org/font-size-apps-for-elderly-people/
A guide to interface design for older adults https://uxdesign.cc/a-guide-to-interface-design-for-older-adults-31109468d46d
https://material.io/components
https://ionicframework.com/docs/components
https://dev.to/abiolaesther_/an-overview-of-the-top-10-vue-ui-component-libraries-in-2021-3dhm
Resumen: Dentro de la Diseño centrado en el Usuario (C6/15/6/2021).
Design systems were created to bring order into an inevitable entropy. The first design system was introduced by NASA in 1976, and today nearly all large organizations like Uber, Pinterest, Airbnb, or Shopify have such a system to bring consistency into the chaos of more products and teams.
In a nutshell, a design system is a collection of documents, articles, examples, code snippets, screenshots, design guidelines, components, philosophies and other digital assets for a product design company. It’s usually hosted online as a website (public or internal). Think of it as a big knowledge-base that is part UI kit, part documentation with instructions, language and coding guidelines all wrapped up together.
¿Qué elementos tiene un Sistema de Diseño?
Plataformas de Documentación de Design System:
Sistemas de Diseño: Zeroheight
Zeroheight (Ver), es un repositorio para documentar Sistema de diseño. Es un manual de normas gráficas más digitales. Lo guardas ahí, en «foundation» es el manual de marca.
https://assets.uigarage.net/content/uploads/2020/10/unit-ui-kit-thumb.jpg
Un sistema de diseño es la única fuente de verdad que agrupa todos los elementos que permitirán a los equipos definir, prototipar y desarrollar un producto. Por lo tanto, un sistema de diseño no es una entrega, sino un conjunto de entregables. Evolucionará constantemente con el producto, con las herramientas y con las nuevas tecnologías.
Para crear un Design System nos basamos en el concepto Atomic Design. Este método, inspirado en los principios de la química, fue ideado por Brad Frost y nos permite construir productos complejos en base a:
Se parte diseñando los componentes, elementos que cumplen una función, por ese se le denominan átomos. Un organismo es una sección que se comportan e la misma forma y se vuelve un patrón. Después vienen las plantillas y se transforma en lay out.
Ejemplo de Átomo a Página.
El branding se compone de los elementos tradicionales de diseño, pero contemplando el ámbito digital y las buenas prácticas de este. Elementos a considerar:
Arquetipo de marca: Brand Archetype test. Ejemplo es Match y cómo construyó su marca. Y Material design. Personalidad de marca. «Voice and tone principles».
Test de Brand Archetype Quiz
Las 20 mejores tipografías de Google Fonts: https://www.awwwards.com/las-20-mejores-tipografias-de-google-fonts.html
Ejemplo de Branding: https://indd.adobe.com/view/c1bed700-690c-493c-b401-5d9e5cb6b6b1
Designing for Senior Citizens | Organizing Your Work Schedule
Vision Changes: Typography for Aging Audiences
Display Content Clearly on the Page
Ejemplo de Voz y tono, Retorno de la inversión http://gammaux.com/blog/2019/09/03/la-importancia-de-definir-la-voz-y-el-tono-de-una-marca/
Aside from implementing design systems into your workflow, design systems are a tremendous untapped resource for learning how to create better user experiences and interfaces just by studying them! What better way to understand how to design an e-commerce user flow than from Shopify?!? These are what we call Design Patterns and smart designers know how use these to inform the decisions they make with their own designs. No need to reinvent the UX wheel when the best companies in the world have already paved the way, tested them with actual users and published their UI/UX and product design methodologies online!
Resumen: En el marco de diseño de interfaz (C5/14/6/2021) exploramos en este artículo cómo realizar un wireframe en la aplicación Figma. En este proceso se incorporan métodos propios de la UX para alcanzar prototipos de alta calidad.
Los wireframes son una de las herramientas más simples que puede utilizar para visualizar las ideas generales en torno a la aplicación que se está diseñando.
Una buena definición de lo que es un Wireframe lo proporciona, Toni Gemayel:
«Un wireframe es una guía visual simple que representa el marco esquelético de un sitio web o producto digital. Piense en ello como el anteproyecto de su diseño final. Proporciona suficientes detalles para que todos conozcan la forma de la pared, pero no profundiza tanto en ella como para dar detalles exactos sobre el tipo de ladrillo del que deberían estar hechas las paredes (que viene más adelante). Aunque los wireframes son creados con mayor frecuencia por diseñadores, deben ser lo suficientemente básicos para que todos los demás diseñadores, partes interesadas, desarrolladores y usuarios puedan comprender las ideas.»
Kit de Wireframes con componentes ya diseñados para crear pantallas. Estos kits o templates se pueden trabajar en las aplicacione de diseño de interfaz, como Figma, Sketch, Invision, etc.
Las wireframes son bosquejos que se pueden diseñar tanto a mano en hojas de papel como en aplicaciones web, como Figma. En Figma existen muchas plantillas para comenzar a trabajar con wireframe, como por ejemplo esta plantilla de Wireframe.
Como en todo proceso de diseño, garantizar que la etapa de Wireframe sea significativa y concrete el producto a diseñar, contribuye a las etapas siguientes de los productos. Un buen proceso de Wireframe cimenta las demás etapas de diseño.
Resumen: En el marco de Diseño de interfaz, nos encontramos que las aplicaciones se basan en flujos, y para diseñarlos correctamente. En las etapas tempranas de diseño podemos diseñar los flujos de diseño para lograr una interacción y experiencia que agrade al usuario. (C4/11/6/2021).
Para definir el concepto de Userflow, vamos a citar a Camren Browne:
«El concepto de flujo en el diseño de UX fue acuñado por primera vez por el psicólogo Mihaly Csikszentmihalyi. Lo consideró un estado mental altamente enfocado en el que el usuario está completamente inmerso en lo que está haciendo y la tarea que pretende lograr. A menudo se dice que está «en la zona». Los flujos de usuarios ayudan a los diseñadores a comprender y anticipar los patrones cognitivos de nuestros usuarios para crear productos que permitan este estado de flujo.»
«Los flujos de usuario, los flujos de UX o los diagramas de flujo, como a veces se les llama, son diagramas que muestran la ruta completa que toma un usuario cuando usa un producto. El flujo de usuarios describe el movimiento del usuario a través del producto, mapeando todos y cada uno de los pasos que da el usuario, desde el punto de entrada hasta la interacción final.»
Para concluir, el flujo de usuario es el proceso de cómo el usuario interactuará con su producto, desde que el usuario se entera de la existencia de su aplicación / sitio web, hasta que se descarga / abre y cada paso que el usuario puede dar o tener, incluidas las pantallas, decisiones, resultados, pantallas después de esos resultados, y ya tienes la idea.
La clave de una aplicación o sitio web exitoso está en la intuición de su diseño. Cuando los usuarios pueden fluir fácilmente a través de una interfaz sin vacilación ni confusión, existe una mayor probabilidad de que compren el producto del cliente o visiten el sitio nuevamente. Los flujos de usuarios son una gran herramienta para la caja de herramientas de cualquier diseñador, ya que pueden ayudar a evaluar la eficiencia y simplicidad de su diseño creativo. Al mismo tiempo, los diagramas de flujo y los flujos de UX ayudan a otros miembros del equipo de diseño y comunican fácilmente el diseño de una interfaz a socios e inversores. Al proporcionar una representación visual de lo que encontrarán los consumidores, puede asegurarse de que la experiencia de sus usuarios sea gratificante y libre de frustraciones.
Bitácora de Darío Tapia 