Menos confianza, más verdad: mejores prácticas y patrones de diseño Web3

Los desarrolladores tienen el sueño de una nueva Internet. Web3 es un modelo descentralizado que brinda a los usuarios la propiedad total de las plataformas y el contenido que están creando en línea. Pero tratar de revolucionar Internet presenta múltiples desafíos de diseño, principalmente, crear interfaces de usuario que resuelvan la confusión y las preocupaciones de seguridad causadas por las características distintivas de Web3.

Web3 explicado

Para comprender Web3, es útil conocer una breve historia de Internet:

• La Web 1.0 se descentralizó, lo que significa que la propiedad y el control del contenido y las plataformas se distribuyeron entre muchas personas y empresas.
• Web 2.0, la iteración actual de Internet, evolucionó gracias a un pequeño número de empresas de software con plataformas fáciles de usar, como Apple, Google, Facebook (ahora Meta) y Twitter. A medida que más personas se convirtieron en creadores y consumidores activos en línea, la web se volvió más centralizada, en gran parte propiedad y controlada por unas pocas corporaciones.

Con Web3, los desarrolladores vuelven a descentralizar Internet. Los monopolios tecnológicos ya no tendrán la posesión y el control del contenido y las plataformas que crean los usuarios. Web3 también tiene como objetivo resolver los problemas de seguridad y privacidad de Internet.

Web3 es:

• Sin confianza: los desarrolladores, creadores de contenido y otros usuarios conservan el control sobre la forma en que se construyen y mantienen las plataformas Web3 y las DApps (aplicaciones descentralizadas), así como sobre qué contenido se puede publicar. Tienen visibilidad completa del código y la forma en que se ejecutan los servicios. Esto contrasta con la web 2.0, donde las corporaciones y los gobiernos tienen el control y los usuarios no pueden verificar de forma independiente la información sobre cómo se desarrollan y administran las aplicaciones.
• Sin permiso: los usuarios pueden ingresar a cualquier aplicación Web3 sin la autorización de una empresa o agencia gubernamental. Se registran con las billeteras criptográficas digitales que contienen sus claves privadas, las contraseñas que usan para acceder a las monedas digitales. Las billeteras pueden ser hardware similar a unidades USB o aplicaciones móviles como MetaMask y TrustWallet.
• Distribuido: el poder y el control sobre los productos y servicios de Internet no están concentrados en manos de inversores o directores ejecutivos, sino que se distribuyen equitativamente entre los usuarios, quienes obtienen participaciones de propiedad en función de sus contribuciones al desarrollo y mantenimiento de las plataformas Web3.
• Abierto: Web3 se ejecuta en blockchain, que almacena datos en grupos individuales, conocidos como bloques. Una vez que un bloque está lleno de información, se vincula con el anterior, formando una cadena en orden cronológico. Blockchain es un libro de contabilidad abierto que se usa más comúnmente para registrar transacciones financieras.

Muchas aplicaciones de Web3 están creadas por pequeños equipos compuestos en gran parte por desarrolladores y dirigidos por ellos. Algunos equipos son independientes; otros son empleados por empresas, incluidos los mercados NFT (token no fungible) y los intercambios de cifrado. A menudo, son los desarrolladores quienes contratan a los diseñadores para que trabajen en productos Web3. En muchos casos, se prefieren los diseñadores con experiencia previa en Web3 debido a la pronunciada curva de aprendizaje en este espacio que cambia rápidamente.

Casos de uso de Web3 y barreras para la expansión

Web3 está dominado por aplicaciones financieras: criptomonedas, criptointercambios para el comercio (intercambios descentralizados o DEX) y NFT, que se utilizan para indicar la propiedad de elementos físicos o digitales únicos. Además, las finanzas descentralizadas, o DeFi, permiten a los usuarios eludir los bancos y acceder a servicios financieros entre pares, como préstamos, obtención de intereses y activos comerciales.

La expansión de Web3 a otros sectores ha resultado difícil. Por ejemplo, no hay forma de distinguir un sitio Web3 legítimo de un fraude, un problema que se magnifica porque los usuarios deben ingresar sus credenciales de billetera criptográfica para obtener acceso a las plataformas Web3. Si un sitio Web3 es una estafa, cualquier usuario que ingrese podría perder todo su dinero.

Otro problema es que blockchain no permite cargar imágenes o videos. Los usuarios pueden almacenar medios en redes criptográficas como Ethereum, pero es costoso.

En los videojuegos Web3, los NFT pueden representar los avatares de los jugadores y los artículos comprados, pero a menudo es imposible transferir estos activos a otros juegos o aplicaciones, lo que disminuye las inversiones de los jugadores y los disuade de jugar en Web3.

Lo que los diseñadores deben saber

Aprovechar los siguientes patrones de UI y principios de diseño de UX puede impulsar el crecimiento de las plataformas Web3:

Entregue indicaciones claras e información completa

Muchas aplicaciones Web3 asumen erróneamente una experiencia considerable por parte de los usuarios. En su lugar, los diseñadores deben aclarar las implicaciones de las funciones y acciones desconocidas de Web3. Por ejemplo, antes de depositar fondos criptográficos en un grupo de liquidez, los nuevos inversores deben saber que su dinero podría perder valor, una advertencia que podría enviarse con un mensaje emergente en la pantalla de depósito.

Las actividades en las aplicaciones DeFi se rigen por estándares conocidos como protocolos. La mayoría de las aplicaciones DeFi realizan auditorías de seguridad periódicas y documentan hallazgos clave, incluidas vulnerabilidades y problemas y correcciones de código. Los diseñadores pueden asegurarse de que las aplicaciones DeFi notifiquen a los usuarios cuando haya nuevos informes de auditoría disponibles, y pueden ayudar a que las auditorías sean más fáciles de entender al resumir secciones complejas en texto claro.

Asimismo, muchas personas leen la documentación del producto Web3 para comprender la mecánica de los protocolos y tomar decisiones informadas sobre el uso de una aplicación. Gran parte de este material está compuesto de jerga técnica que es difícil de entender.

Una vez más, los diseñadores pueden garantizar un contenido fácil de usar al proporcionar resúmenes de conversaciones al comienzo de las secciones de documentación, junto con enlaces a contenido más técnico. Los glosarios emergentes se pueden incrustar como íconos de enlace en el texto, lo que permite a los usuarios aprender los significados de los términos con un clic del mouse o un toque con el dedo. Y la copia se puede dividir con imágenes que ilustran conceptos importantes de Web3.

Utilice monedas conocidas para comunicar tipos de cambio

A medida que las criptomonedas como bitcoin se vuelven más populares y sus precios fluctúan, puede ser difícil rastrear cuánto valen. En las billeteras digitales y las aplicaciones de comercio electrónico donde estos tokens se compran, venden e intercambian por activos como NFT, los diseñadores deben mostrar a los usuarios las conversiones de precios de criptografía a su moneda nativa y evitar usar más de unos pocos decimales.

Haga que los hash de billetera y transacción sean fáciles de leer

De forma predeterminada, cada dirección en blockchain es una larga cadena de caracteres, hasta 42, conocida como ID o hash. Al enviar fondos, las personas deben verificar toda la cadena. Es fácil cometer un error y hay mucho en juego: todas las transacciones de blockchain son definitivas. Si los activos se envían a la dirección de billetera incorrecta, no hay forma de recuperarlos. En una empresa de inversión en la que trabajé, negociamos acuerdos de ICO (oferta inicial de monedas), enviamos enormes transferencias a las empresas participantes, y seis personas verificaban la dirección de la billetera del destinatario cada vez.

El Servicio de nombres de Ethereum (ENS) permite a las personas cambiar sus hashes en algo más fácil de leer y recordar, como sus nombres más .eth . Sin embargo, no todos usan ENS porque es costoso.

Los diseñadores de Web3 UX pueden hacer que las transacciones sean menos estresantes al mostrar solo los primeros y últimos cuatro caracteres del hash para que los usuarios puedan verificarlo sin verificar toda la cadena. Los diseñadores también pueden crear un requisito para que los usuarios verifiquen dos veces los hashes antes de cualquier transacción, y pueden incluir un logotipo de identificación junto a la dirección de cada destinatario. Estas capas adicionales de verificación deben ir acompañadas de un recordatorio de que enviar activos a la dirección incorrecta resultará en una pérdida total de fondos.

Aclarar los tiempos de espera de las transacciones

Al transferir fondos en línea a través de un banco, recibe inmediatamente una actualización de estado o una confirmación de que la transacción se realizó. Esto no es así con Web3 DEX. El tiempo mínimo de procesamiento para las transacciones de blockchain es de unos tres minutos, pero tuve que esperar hasta dos horas. He estado usando la tecnología durante seis años y todavía tengo pánico cuando el dinero sale de mi billetera y no recibo una confirmación de entrega a tiempo.

Más DEX deberían mostrar el estado de la transacción a través de texto o animaciones, ya sea en la barra de estado o en las notificaciones. Si no es factible mostrar actualizaciones en la interfaz de usuario, proporcionar un enlace al explorador de bloques de código abierto, como Etherscan en Ethereum, es una buena alternativa.

Implementar un botón "Enviar Max"

Bitcoin, ether y otras criptomonedas a menudo se expresan en muchos lugares decimales, por ejemplo, 0.0000085191. Es difícil escribir el monto total de manera precisa y eficiente cuando se envía dinero a una persona o empresa para comprar un activo, como un NFT, o cuando se depositan fondos en un contrato inteligente. Recomiendo que los diseñadores creen un botón "Enviar máximo" en las aplicaciones, lo que permite a los usuarios transferir todo el saldo de su billetera a otra dirección con un solo clic.

Esto es conveniente cuando el saldo de la billetera de una persona es igual o ligeramente superior a la suma que necesita transferir; algunos usuarios tienen varias billeteras, lo que aumenta la probabilidad de que esto suceda. Pueden enviar el saldo completo y la función lo convierte automáticamente a bitcoin o ether. Esta función no realiza ninguna contabilidad cuando el saldo de la billetera es mayor que el total adeudado, por lo que los diseñadores deben incluir un cuadro de diálogo de confirmación para asegurarse de que los usuarios no envíen por error más de lo que pretenden.

Explicar cómo funcionan los precios de la gasolina

El gas es probablemente la cosa más molesta y confusa en Web3, especialmente para alguien nuevo en criptografía. Los precios de la gasolina son cargos adicionales que pagan los usuarios para cubrir el costo de la potencia informática necesaria para procesar las transacciones. Los usuarios pueden optar por pagar tarifas más altas para acelerar las transferencias.

Los diseñadores deben explicar qué es el gas y cómo funciona. Si es posible, deben mostrar el precio del combustible en la moneda fiduciaria nativa más común entre los usuarios (generalmente USD). Los diseñadores también podrían sugerir una combinación viable del precio del gas y la velocidad de transferencia resultante; si las transacciones se estancan o fallan debido a los bajos pagos de gas, los diseñadores deben permitir que los usuarios paguen tarifas más altas para acelerar las transferencias.

Haga que los historiales de transacciones de los usuarios sean fácilmente accesibles

Prácticamente todos los sitios web de comercio electrónico centralizados (web 2.0) permiten a los usuarios consultar sus completos historiales de compras. Es difícil acceder a un registro de este tipo en un intercambio descentralizado: las billeteras proporcionan un historial de transacciones, pero solo para una cuenta a la vez, y es difícil o imposible filtrar por DApps. Para obtener el tipo de historial disponible en una plataforma centralizada, los usuarios de Web3 deben ir a un explorador de bloques como Etherscan, que no es fácil de usar y dificulta encontrar una transacción específica.

Los diseñadores de Web3 deberían brindar a las personas una forma simple de revisar las transacciones en cadena que realizan dentro de DApps individuales. Debe colocarse en una ubicación que sea fácil de encontrar, como un panel lateral o un menú. Otra opción sería crear un modo de "vista en cadena" activado por un botón: una vez que se haga clic, colocaría un filtro sobre toda la interfaz de usuario, indicando todo el contenido dentro de la DApp que está almacenado en la cadena de bloques, incluido el historial de transacciones. . También sería útil permitir a los usuarios filtrar y exportar fácilmente sus registros de transacciones.

Habilite la administración fácil de claves privadas

Las claves privadas que permiten a los usuarios acceder a sus monederos digitales no son fáciles de almacenar. Las personas a veces se olvidan de respaldarlos o no saben cómo hacerlo. Estas claves no se pueden recuperar una vez perdidas: No existe la opción de "restablecer contraseña". Los diseñadores pueden resolver este problema siguiendo el ejemplo de MetaMask y proporcionando a cada usuario una frase semilla, una serie de palabras que pueden usarse para desbloquear su billetera.

Los diseñadores también deben advertir a los usuarios que sus fondos serán inaccesibles y vulnerables al robo si pierden sus claves privadas o frases iniciales. Dicho mensaje debería aparecer en la aplicación de billetera de un usuario, primero como una notificación al configurar la billetera y luego como un recordatorio recurrente en un horario preestablecido.

Conclusiones clave

Para que Web3 crezca en popularidad y se expanda más allá de las billeteras digitales y las plataformas financieras, los diseñadores deben hacer que las aplicaciones de Web3 sean más consistentes e intuitivas. También tienen que proporcionar una educación del usuario más sencilla para ayudar a familiarizar a los recién llegados con las funciones e interacciones novedosas que se encuentran en las plataformas Web3.

Hacer que las DApps se sientan seguras también debe ser una alta prioridad. Es imposible controlar la naturaleza sin confianza y sin permiso de Web3, pero los diseñadores pueden predecir lo que puede salir mal y ayudar a prevenir esos sucesos. Las advertencias más transparentes sobre los riesgos contribuirán en gran medida a calmar las preocupaciones de las personas y convencerlas de adoptar Web3.

Lectura adicional en el blog de Toptal:

Cómo diseñar para obtener la máxima confianza en el producto

Impulse su UX con estos exitosos principios de diseño de interacción

Ventajas de Webflow para el diseño web sin código: un estudio de caso