Cómo diseñar aplicaciones Web3 centradas en el usuario (DApps): consejos y trucos

En el cambio lento pero seguro de la Web2 a la Web3 , las aplicaciones descentralizadas (dApps) prometen ser un paso adelante respecto de sus contrapartes de la Web2, con un mayor empoderamiento del usuario y propiedad de los datos.

Sin embargo, los principios tradicionales de UX/UI (es decir, elementos de interfaz consistentes, integración fluida del usuario y lenguaje conciso) aún tienen valor; por otro lado, existen desafíos únicos que enfrentan los diseñadores y desarrolladores de UX/UI que se esfuerzan por crear experiencias de usuario atractivas en dApps.

De hecho, una estadística ha demostrado que sólo el 25% de los usuarios de Web3 se sienten seguros al utilizar aplicaciones descentralizadas.

Los usuarios esperan más autonomía y exigen interfaces intuitivas que les permitan navegar sin esfuerzo por conceptos y redes Web3 complejos.

Los desarrolladores de Web3 a menudo requieren una estrecha colaboración con los diseñadores para realizar sus creaciones; la naturaleza descentralizada de Web3 los invita a repensar variables de comportamiento humano como el factor de confianza, considerando que las dApps ya no dependen de intermediarios y agencias centralizadas.

¿Qué es lo que motiva a un usuario de Web3?

A diferencia de las aplicaciones web tradicionales, Web3 está dirigida a un público diverso, que va desde entusiastas experimentados de las criptomonedas hasta principiantes que se inician en DeFi . Al diseñar una dApp, tenga en cuenta estos distintos niveles de comprensión técnica.

• Criptonautas : estos usuarios se sienten cómodos con conceptos como billeteras, claves privadas y tarifas de gas. Pueden priorizar funciones avanzadas y opciones de personalización.

  
  

• Principiantes : estos usuarios pueden no estar familiarizados con la terminología de blockchain y requieren explicaciones y orientación claras. La simplicidad y la facilidad de uso son fundamentales para este grupo.

Principios clave del diseño intuitivo para la Web3

Al profundizar en el diseño intuitivo para aplicaciones descentralizadas de la Web3 y blockchain , comprender la mentalidad y el recorrido del usuario se vuelve primordial. Comience por considerar el modelo mental de su audiencia. ¿Son nuevos en las tecnologías blockchain o veteranos del espacio?

Diseñar teniendo en cuenta su nivel de conocimiento puede mejorar drásticamente la usabilidad.

1. Llevar la familiaridad de la Web2 a la Web3

Incorpore metáforas y flujos de trabajo de la Web2 cuando sea pertinente. Esto no significa que deba evitar los elementos innovadores de la Web3, sino más bien incorporar componentes de interfaz de usuario tradicionales. La familiaridad derriba barreras; cuando los usuarios reconocen patrones, navegan con más facilidad y confianza.

2. Menos es más

La idea de la Web3 en sí misma ya es... mucho. La claridad y la simplicidad deben guiar las decisiones de diseño. Los diseños confusos pueden hacer que el usuario no se desvíe de su interés. En su lugar, apunte a una interfaz limpia y despejada que enfatice las características principales. Los elementos esenciales deben estar al frente y en el centro, reduciendo la carga cognitiva y ayudando a los usuarios a tomar decisiones rápidas.

3. Ciclo de retroalimentación

Otro aspecto crucial es la retroalimentación. En una aplicación descentralizada, cada acción, como una transacción de intercambio o una entrada de datos, debe reconocerse mediante retroalimentación, como pantallas de confirmación o animaciones obvias. En la misma línea, debe haber retroalimentación instantánea y ofertas de soluciones cuando los usuarios se topan con mensajes de error (o, en la jerga de UX/UI, "caminos desafortunados").

Esto garantiza a los usuarios que sus acciones quedan registradas y son efectivas, lo que genera un sentimiento de confianza y confiabilidad.

4. Experiencia consistente en todos los tipos de dispositivos

Al igual que la mayoría de las aplicaciones Web2, las dApps se ejecutan en dispositivos móviles, computadoras de escritorio y tabletas. El diseño consistente en varias plataformas mejora la experiencia del usuario. Ya sea en una aplicación de escritorio o en una interfaz móvil, la navegación consistente y las señales visuales ayudan a los usuarios a formar un mapa mental de la aplicación, lo que hace que la transición entre dispositivos sea fluida.

También reduce la paranoia innecesaria durante ciertas actividades de transacción, como el uso de dos dispositivos diferentes para escanear códigos QR e ingresar direcciones de billetera.

5. Seguridad y privacidad

La seguridad no puede subestimarse en la Web3, ya que los usuarios a menudo manejan activos digitales valiosos (imaginemos el gran volumen que mueven las ballenas solamente). Priorice los métodos de autenticación robustos, las advertencias claras sobre los riesgos potenciales y los recursos educativos sobre las mejores prácticas de seguridad.

Aunque la Web3 y la cadena de bloques son conocidas por sus registros inmutables, se recomienda el uso de técnicas de cifrado sólidas para proteger los datos de los usuarios y comunicar claramente las precauciones que deben tomarse para tranquilizarlos. Ofrecer resúmenes detallados de las transacciones y el historial de actividades también es una forma de fomentar la tranquilidad.

Consejos prácticos para el diseño UX/UI en la Web3

Traduzcamos estos principios en estrategias de diseño viables:

1. Incorporación

Las primeras impresiones son importantes. Los usuarios pueden desconfiar de la complejidad o los riesgos de seguridad, por lo que será una buena práctica crear un proceso de incorporación sencillo y atractivo que guíe a los nuevos usuarios a través de los aspectos básicos de la dApp. Considere la posibilidad de utilizar tutoriales interactivos o guías paso a paso, tanto en la aplicación como en la web.

El registro en una sola pantalla es un enfoque clásico que puede ser más adecuado para usuarios experimentados de Web3 que ya saben qué esperar y se sienten cómodos al lanzarse directamente al meollo del asunto.

Las pantallas de incorporación deslizables pueden ser ideales para los recién llegados; el formato digerible los ayuda a absorber las características principales y la propuesta de valor de la dApp. Incluso en ese caso, una buena práctica es limitar la cantidad de deslizamientos a no más de tres veces, ya que cada paso adicional aumenta la tasa de abandono del usuario.

2. Integración de la billetera Web3

Conectar una billetera de criptomonedas suele ser la primera interacción real que tiene un usuario con una dApp. Un proceso de integración de billetera complicado puede generar frustración y abandono. Algunas formas de hacerlo sin inconvenientes incluyen:

• Conexión con un solo clic: siempre que sea posible, intente establecer una conexión con un solo clic. Utilice WalletConnect o protocolos similares para minimizar la cantidad de pasos necesarios.

  
  

• Detección de billeteras: detecta automáticamente las billeteras instaladas del usuario y muestra sus opciones preferidas de forma destacada

  
  

• Compatibilidad con códigos QR: ofrece escaneo de códigos QR como método de conexión alternativo, especialmente para usuarios móviles

  
  

• Compatibilidad con múltiples billeteras: atienda a una amplia gama de usuarios mediante la compatibilidad con billeteras populares como MetaMask, Coinbase Wallet, Trust Wallet, Argent, Rainbow y, por supuesto, Portkey , la billetera de abstracción de cuenta (AA) construida sobre el ecosistema aelf.

  
  

• Orientación para recién llegados: proporcione instrucciones claras y ayudas visuales para guiar a los usuarios a través del proceso de conexión, especialmente si son nuevos en las billeteras Web3.

  
  

• Recordatorios de seguridad: Muestra recordatorios de seguridad claros y concisos durante el proceso de conexión, enfatizando la importancia de proteger sus claves privadas.

3. Integración de Conozca a su cliente (KYC)

Si bien la descentralización es un principio fundamental de la Web3, muchas dApps, especialmente aquellas que tratan con transacciones financieras o datos confidenciales, requieren procesos Conozca a su cliente (KYC) para cumplir con las regulaciones y garantizar la seguridad.

• Transparencia y claridad: explique claramente por qué se requiere KYC y cómo se manejarán los datos de los usuarios. Sea sincero acerca de la información que se recopilará y cómo se utilizará.

  
  

• Proceso simplificado: haga que el proceso KYC sea lo más eficiente posible. Minimice la cantidad de pasos y la cantidad de información requerida.

  
  

• Manejo seguro de datos: haga hincapié en las medidas de seguridad implementadas para proteger los datos de los usuarios. Considere utilizar soluciones de identidad descentralizadas para mejorar la privacidad.

  
  

• Verificación fácil de usar: integre con proveedores KYC confiables que ofrecen una experiencia de verificación sencilla y fácil de usar

  
  

• Comentarios claros y actualizaciones de estado: mantenga a los usuarios informados durante todo el proceso KYC. Proporcione comentarios claros sobre el estado de su verificación y las acciones necesarias.

4. Flujos de transacciones

Las transacciones son el núcleo de la mayoría de las interacciones de la Web3. Simplifique los flujos de transacciones proporcionando explicaciones claras sobre las tarifas de gas, los tiempos estimados de transacción y los pasos de confirmación.

• Claridad visual: utilice señales visuales claras para resaltar información clave, como montos de transacciones, tarifas de gas, tarifas de red y tiempos de finalización estimados.

  
  

• Comentarios en tiempo real: utilice cargadores, barras de progreso o notificaciones de estado para brindarles a los usuarios actualizaciones de transacciones en tiempo real.

  
  

• Actualizaciones dinámicas de precios: para las transacciones que involucran intercambios o intercambios de tokens , muestre actualizaciones dinámicas de precios para reflejar las fluctuaciones del mercado. Incluya advertencias claras sobre la volatilidad de los precios y su posible impacto en el monto final de la transacción.

  
  

• Procesamiento en segundo plano: siempre que sea posible, permita que los usuarios abandonen la pantalla de transacciones y realicen otras actividades dentro de la dApp mientras la transacción se procesa en segundo plano. Proporcione notificaciones o alertas al finalizar o si se produce algún error.

  
  

• Pasos de confirmación: Implemente pasos de confirmación claros para evitar transacciones accidentales. Exija a los usuarios que revisen y confirmen explícitamente los detalles de la transacción antes de enviarla.

  
  

• Historial de transacciones: proporcione un historial de transacciones detallado al que se pueda acceder y buscar fácilmente. Permita que los usuarios filtren transacciones por fecha, tipo o estado.

5. Manejo de errores

Los errores son inevitables. En lugar de mostrar mensajes de error genéricos, proporcione orientación específica e informativa sobre cómo resolver los problemas; lo mejor es complementar esto con un lenguaje empático.

• Mensajes específicos e informativos: evite mensajes de error genéricos como "Error en la transacción". Proporcione detalles específicos sobre lo que salió mal, como "No hay fondos suficientes para pagar las tarifas de gas" o "Hay un error de conexión de red".

  
  

• Orientación contextual: ofrece orientación contextual sobre cómo resolver el error. Por ejemplo, si una transacción falla debido a fondos insuficientes, proporciona un enlace directo a la billetera del usuario o una guía sobre cómo adquirir más de la criptomoneda requerida.

  
  

• Prevención de errores: siempre que sea posible, implemente medidas para evitar errores desde el principio. Utilice la validación de entrada para garantizar que los usuarios ingresen los formatos de datos correctos y proporcione advertencias claras sobre los posibles riesgos antes de que inicien acciones.

  
  

• Mecanismos de recuperación: Ofrecer mecanismos de recuperación para errores comunes. Por ejemplo, si un usuario inicia una transacción con una tarifa de gas baja que causa una demora, permitirle "acelerar" la transacción enviando una nueva con una tarifa más alta.

  
  

• Lenguaje fácil de usar: evite el uso de jerga técnica (por ejemplo, Error 404) en los mensajes de error. Utilice un lenguaje conversacional claro, conciso y natural que sea fácil de entender para todos los usuarios.

6. Información sobre herramientas y explicaciones

No asuma que los usuarios comprenden toda la terminología . Considere el uso generoso de información sobre herramientas o pestañas de información expandibles en los puntos de contacto digitales; explique términos complejos como "tarifas de gas", "contratos inteligentes", "redes blockchain" o " NFT " de una manera concisa y sencilla.

También es una buena práctica crear un banco de conocimientos o una sección de preguntas frecuentes dedicada dentro de la dApp para albergar contenido de ayuda más extenso.

7. Pruebas e iteraciones

El trabajo nunca termina, ni siquiera después del lanzamiento. Probar y actualizar diligentemente la dApp para corregir errores es algo que se da por hecho, pero es la columna vertebral para mantenerse al día con las necesidades cambiantes de los usuarios.

Anteriormente en el artículo, mencionamos la investigación de usuarios a través de encuestas, entrevistas y pruebas de usabilidad. Es una mina de oro de hallazgos que ayudan a mejorar la experiencia de la aplicación descentralizada de manera específica.

Las pruebas A/B y las pruebas textuales con usuarios son dos de los métodos más comunes para confirmar los prototipos y las suposiciones de diseño de UX/UI. Esté preparado para cambiar de rumbo en función de los hallazgos y lleve un registro de lo que funciona (y lo que no).

Estos pasos deberían acercarte mucho más a las "Estrellas del Norte" de tu creación.

Para cerrar: un consejo extra

El éxito de tu dApp puede depender de un factor X. ¿Los usuarios recordarán tu creación o volverán a utilizarla?

La respuesta podría ser ofrecer experiencias personalizadas . Esto significa que los usuarios pueden obtener recomendaciones personalizadas a medida que interactúan con la dApp, en función de su comportamiento y preferencias. Podría ser algo tan simple como un acceso directo preestablecido a la función que el usuario utiliza con más frecuencia o sugerencias personalizadas para ayudar en una actividad. La integración de IA puede ayudar con eso, analizando la actividad en cadena, prediciendo las preferencias del usuario e incluso ofreciendo asistencia proactiva.

Las experiencias e interfaces centradas en el usuario también se extienden al software y a las plataformas en las que trabajan los desarrolladores y diseñadores: los desarrolladores también son usuarios.

Si está construyendo sobre aelf , una cadena de bloques de IA de capa 1 de alto rendimiento, su kit de herramientas de IA y la facilidad de uso del entorno de desarrollo integrado aelf Playground eliminan el tedio del proceso de construcción, por lo que usted y su equipo pueden concentrarse únicamente en diseñar la mejor experiencia de usuario posible.

Acerca de aelf

aelf, la cadena de bloques pionera de capa 1, cuenta con sistemas modulares, procesamiento paralelo, arquitectura nativa de la nube y tecnología de múltiples cadenas laterales para una escalabilidad ilimitada. Fundada en 2017 y con su centro global en Singapur, aelf es la primera en la industria en liderar Asia en la evolución de la cadena de bloques con una integración de IA de vanguardia, transformando la cadena de bloques en un ecosistema más inteligente y en evolución automática.

aelf facilita la construcción, integración e implementación de contratos inteligentes y aplicaciones descentralizadas (dApps) en su cadena de bloques de capa 1 con su kit de desarrollo de software (SDK) C# nativo y SDK en otros lenguajes, incluidos Java, JS, Python y Go. El ecosistema de aelf también alberga una variedad de dApps para respaldar una red de cadena de bloques floreciente. aelf se compromete a fomentar la innovación dentro de su ecosistema y sigue dedicada a impulsar el desarrollo de Web3, blockchain y la adopción de tecnología de IA.

Descubra más sobre aelf y manténgase conectado con nuestra comunidad:

Sitio web | X | Telegram | Discord