Menos confiança, mais verdade: melhores práticas e padrões de design Web3

Os desenvolvedores têm um sonho de uma nova internet. O Web3 é um modelo descentralizado que dá aos usuários a propriedade total das plataformas e do conteúdo que estão criando online. Mas tentar revolucionar a Internet apresenta vários desafios de design – principalmente, construir interfaces de usuário que resolvam a confusão e as preocupações de segurança causadas pelos recursos distintos da Web3.

Web3 explicado

Para entender a Web3, é útil conhecer um breve histórico da internet:

• A Web 1.0 foi descentralizada, o que significa que a propriedade e o controle do conteúdo e das plataformas foram distribuídos entre muitos indivíduos e empresas.
• A Web 2.0, a atual iteração da internet, evoluiu graças a um pequeno número de empresas de software com plataformas fáceis de usar, como Apple, Google, Facebook (agora Meta) e Twitter. À medida que mais pessoas se tornaram criadores e consumidores ativos online, a web se tornou mais centralizada, em grande parte de propriedade e controlada por algumas corporações.

Com a Web3, os desenvolvedores estão tornando a internet descentralizada novamente. Os monopólios de tecnologia não terão mais posse e comando do conteúdo e das plataformas que os usuários criam. O Web3 também visa resolver os problemas de segurança e privacidade da Internet.

Web3 é:

• Sem confiança: Desenvolvedores, criadores de conteúdo e outros usuários mantêm o controle sobre a forma como as plataformas Web3 e DApps – aplicativos descentralizados – são construídos e mantidos, bem como qual conteúdo pode ser postado. Eles têm total visibilidade do código e da forma como os serviços são executados. Isso contrasta com a web 2.0, onde corporações e governos têm controle e os usuários não podem verificar independentemente as informações sobre como os aplicativos são desenvolvidos e gerenciados.
• Sem permissão: os usuários podem entrar em qualquer aplicativo Web3 sem autorização de uma empresa ou agência governamental. Eles fazem login com as carteiras de criptomoedas digitais que guardam suas chaves privadas, as senhas que usam para acessar moedas digitais. As carteiras podem ser hardware semelhante a unidades USB ou aplicativos móveis como MetaMask e TrustWallet.
• Distribuído: O poder e o controle sobre os produtos e serviços da Internet não estão concentrados nas mãos de investidores ou CEOs, mas distribuídos de forma equitativa entre os usuários, que ganham participação acionária com base em suas contribuições para o desenvolvimento e manutenção de plataformas Web3.
• Aberto: Web3 roda em blockchain, que armazena dados em grupos individuais, conhecidos como blocos. Uma vez que um bloco é preenchido com informações, ele é vinculado ao anterior, formando uma cadeia em ordem cronológica. Blockchain é um livro-razão aberto mais comumente usado para registrar transações financeiras.

Muitos aplicativos Web3 são criados por pequenas equipes compostas e lideradas por desenvolvedores. Algumas equipes são independentes; outros são empregados por empresas, incluindo mercados NFT (tokens não fungíveis) e exchanges de criptomoedas. Muitas vezes, são os desenvolvedores que contratam designers para trabalhar em produtos Web3. Em muitos casos, os designers com experiência anterior em Web3 são preferidos devido à curva de aprendizado íngreme nesse espaço em rápida mudança.

Casos de uso da Web3 e barreiras à expansão

A Web3 é dominada por aplicativos financeiros: criptomoeda, trocas de criptomoedas para negociação (trocas descentralizadas ou DEXs) e NFTs, que são usadas para significar a propriedade de itens digitais ou físicos exclusivos. Além disso, as finanças descentralizadas, ou DeFi, permitem que os usuários ignorem os bancos e acessem serviços financeiros ponto a ponto, como empréstimos, empréstimos, ganhos de juros e ativos de negociação.

A expansão da Web3 para outros setores provou ser difícil. Por exemplo, não há como diferenciar um site legítimo da Web3 de uma fraude - um problema que é ampliado porque os usuários devem inserir suas credenciais de carteira de criptografia para obter acesso às plataformas Web3. Se um site Web3 for uma farsa, qualquer usuário que entrar poderá perder todo o seu dinheiro.

Outro problema é que o blockchain não permite o upload de imagens ou vídeos. Os usuários podem armazenar mídia em redes criptográficas como Ethereum, mas é caro.

Nos videogames Web3, os NFTs podem representar os avatares dos jogadores e itens comprados, mas muitas vezes é impossível transferir esses ativos para outros jogos ou aplicativos, diminuindo os investimentos dos jogadores e impedindo-os de jogar na Web3.

O que os designers devem saber

Aproveitar os seguintes padrões de interface do usuário e princípios de design de experiência do usuário pode promover o crescimento das plataformas Web3:

Entregue prompts claros e informações completas

Muitos aplicativos Web3 assumem erroneamente uma experiência considerável por parte dos usuários. Em vez disso, os designers devem esclarecer as implicações dos recursos e ações desconhecidos da Web3. Por exemplo, antes de depositar fundos criptográficos em um pool de liquidez, os novos investidores precisam saber que seu dinheiro pode perder valor – um aviso que pode ser entregue com uma mensagem pop-up na tela de depósito.

As atividades nos aplicativos DeFi são regidas por padrões conhecidos como protocolos. A maioria dos aplicativos DeFi realiza auditorias de segurança regulares e documenta as principais descobertas, incluindo vulnerabilidades e problemas e correções de código. Os designers podem garantir que os aplicativos DeFi notifiquem os usuários quando novos relatórios de auditoria estiverem disponíveis e podem ajudar a tornar as auditorias mais fáceis de entender resumindo seções complexas em texto simples.

Da mesma forma, muitas pessoas leem a documentação do produto Web3 para entender a mecânica dos protocolos e tomar decisões informadas sobre o uso de um aplicativo. Grande parte desse material é composto de jargão técnico difícil de entender.

Aqui, novamente, os designers podem garantir conteúdo amigável ao usuário fornecendo resumos de conversação no início das seções de documentação, juntamente com links para conteúdo mais técnico. Glossários pop-up podem ser incorporados como ícones de link no texto, permitindo que os usuários aprendam os significados dos termos com um clique do mouse ou toque com o dedo. E a cópia pode ser dividida com imagens que ilustram conceitos importantes da Web3.

Use moedas conhecidas para comunicar taxas de câmbio

À medida que criptomoedas como bitcoin se tornam mais populares e seus preços flutuam, pode ser difícil rastrear quanto valem. Em carteiras digitais e aplicativos de comércio eletrônico onde esses tokens são comprados, vendidos e negociados por ativos como NFTs, os designers devem mostrar aos usuários as conversões de preço de criptomoeda para sua moeda nativa e evitar usar mais do que algumas casas decimais.

Torne os hashes da carteira e da transação facilmente legíveis

Por padrão, cada endereço no blockchain é uma longa sequência de caracteres – até 42 – conhecida como ID ou hash. Ao enviar fundos, as pessoas precisam verificar toda a sequência. É fácil cometer um erro e as apostas são altas: todas as transações de blockchain são finais. Se os ativos forem enviados para o endereço de carteira errado, não há como recuperá-los. Em uma empresa de investimentos em que trabalhei, intermediamos acordos de ICO (oferta inicial de moedas), enviando grandes transferências para empresas participantes - e tínhamos seis pessoas verificando o endereço da carteira do destinatário todas as vezes.

O Ethereum Name Service (ENS) permite que as pessoas mudem seus hashes para algo mais fácil de ler e lembrar, como seus nomes mais .eth . No entanto, nem todos usam o ENS porque é caro.

Os designers de UX do Web3 podem tornar as transações menos estressantes mostrando apenas os primeiros e últimos quatro caracteres do hash para permitir que os usuários o verifiquem sem verificar a string inteira. Os designers também podem criar um requisito para que os usuários verifiquem os hashes antes de qualquer transação e podem incluir um logotipo de identificação próximo ao endereço de cada destinatário. Essas camadas extras de verificação devem ser acompanhadas por um lembrete de que o envio de ativos para o endereço errado resultará na perda total de fundos.

Esclarecer os tempos de espera da transação

Ao transferir fundos online por meio de um banco, você recebe imediatamente uma atualização de status ou confirmação de que a transação foi concluída. Isso não acontece com Web3 DEXs. O tempo mínimo de processamento para transações de blockchain é de cerca de três minutos, mas tive que esperar até duas horas. Uso a tecnologia há seis anos e ainda entro em pânico quando o dinheiro sai da minha carteira e não recebo uma confirmação de entrega em tempo hábil.

Mais DEXs devem mostrar o status da transação por meio de texto ou animações, na barra de status ou nas notificações. Se não for viável mostrar atualizações na interface do usuário, fornecer um link para o explorador de blocos de código aberto – como Etherscan no Ethereum – é uma boa alternativa.

Implemente um botão “Enviar Max”

Bitcoin, ether e outras criptomoedas são frequentemente expressas em muitas casas decimais, por exemplo 0,0000085191. É difícil digitar o valor total com precisão e eficiência ao enviar dinheiro a um indivíduo ou empresa para comprar um ativo, como um NFT, ou ao depositar fundos em um contrato inteligente. Eu recomendo que os designers criem um botão “Send Max” nos aplicativos, permitindo que os usuários transfiram todo o saldo da carteira para outro endereço com um clique.

Isso é conveniente quando o saldo da carteira de uma pessoa é igual ou ligeiramente superior à quantia que ela precisa transferir; alguns usuários possuem várias carteiras, o que aumenta a probabilidade dessas ocorrências. Eles podem enviar o saldo total e a função o converte automaticamente em bitcoin ou ether. Esse recurso não faz nenhuma contabilização quando o saldo da carteira é maior que o total devido, portanto, os designers devem incluir uma caixa de diálogo de confirmação para garantir que os usuários não enviem por engano mais do que pretendem.

Explique como funcionam os preços do gás

O gás é provavelmente a coisa mais irritante e confusa na Web3, especialmente para alguém novo em criptografia. Os preços do gás são taxas extras que os usuários pagam para cobrir o custo do poder de computação necessário para processar transações. Os usuários podem optar por pagar taxas mais altas para acelerar as transferências.

Os designers precisam explicar o que é o gás e como ele funciona. Se possível, eles devem mostrar o preço do gás na moeda fiduciária nativa que é mais comum entre os usuários (geralmente USD). Os designers também podem sugerir uma combinação viável de preço do gás e velocidade de transferência resultante; se as transações pararem ou falharem devido a baixos pagamentos de gás, os designers devem permitir que os usuários paguem taxas mais altas para acelerar as transferências.

Torne os históricos de transações dos usuários facilmente acessíveis

Praticamente todos os sites de comércio eletrônico centralizados (web 2.0) permitem que os usuários verifiquem seus históricos de compras abrangentes. É difícil acessar esse registro em uma troca descentralizada: as carteiras fornecem um histórico de transações, mas apenas para uma conta por vez, e é difícil ou impossível filtrar por DApps. Para obter o tipo de histórico disponível em uma plataforma centralizada, os usuários da Web3 devem recorrer a um explorador de blocos como o Etherscan, que não é amigável e dificulta a localização de uma transação específica.

Os designers da Web3 devem fornecer às pessoas uma maneira simples de revisar as transações na cadeia que elas fazem em DApps individuais. Isso deve ser colocado em um local fácil de encontrar, como um painel lateral ou menu. Outra opção seria criar um modo “chain-view” ativado por um botão: uma vez clicado, ele colocaria um filtro em toda a interface do usuário, indicando todo o conteúdo do DApp armazenado no blockchain - incluindo o histórico de transações . Também seria útil permitir que os usuários filtrem e exportem facilmente seus registros de transações.

Ative o gerenciamento fácil e privado de chaves

As chaves privadas que permitem que os usuários acessem suas carteiras digitais não são fáceis de armazenar. As pessoas às vezes se esquecem de apoiá-los ou não sabem como fazê-lo. Essas chaves não podem ser recuperadas uma vez perdidas: Não há opção de “redefinir senha”. Os designers podem resolver esse problema seguindo o exemplo do MetaMask e fornecendo a cada usuário uma frase inicial, uma série de palavras que podem ser usadas para desbloquear sua carteira.

Os designers também precisam avisar os usuários que seus fundos ficarão inacessíveis e vulneráveis ​​a roubo se eles perderem suas chaves privadas ou frases iniciais. Essa mensagem deve aparecer no aplicativo de carteira de um usuário, primeiro como uma notificação ao configurar a carteira e depois como um lembrete recorrente em uma programação predefinida.

Principais conclusões

Para que a Web3 cresça em popularidade e se expanda além das carteiras digitais e plataformas financeiras, os designers precisam tornar os aplicativos Web3 mais consistentes e intuitivos. Eles também precisam fornecer uma educação mais direta ao usuário para ajudar a familiarizar os recém-chegados com os novos recursos e interações encontrados nas plataformas Web3.

Fazer com que os DApps se sintam seguros também deve ser uma alta prioridade. É impossível controlar a natureza sem confiança e sem permissão da Web3, mas os designers podem prever o que pode dar errado e ajudar a evitar essas ocorrências. Advertências mais transparentes sobre os riscos ajudarão bastante a amenizar as preocupações das pessoas e convencê-las a adotar a Web3.

Leitura adicional no Blog Toptal:

Como projetar para máxima confiança no produto

Impulsione seu UX com estes princípios de design de interação bem-sucedidos

Vantagens do Webflow para Web Design sem código: um estudo de caso