Weniger Vertrauen, mehr Wahrheit: Best Practices und Muster für Web3-Design

Entwickler träumen von einem neuen Internet. Web3 ist ein dezentralisiertes Modell, das Benutzern die volle Kontrolle über die Plattformen und Inhalte gibt, die sie online erstellen. Aber der Versuch, das Internet zu revolutionieren, bringt mehrere Design-Herausforderungen mit sich – hauptsächlich das Erstellen von Benutzeroberflächen, die die Verwirrung und Sicherheitsbedenken beseitigen, die durch die besonderen Funktionen von Web3 verursacht werden.

Web3 erklärt

Um Web3 zu verstehen, ist es hilfreich, eine kurze Geschichte des Internets zu kennen:

• Web 1.0 war dezentralisiert, was bedeutet, dass Eigentum und Kontrolle über Inhalte und Plattformen auf viele Einzelpersonen und Unternehmen verteilt waren.
• Web 2.0, die aktuelle Iteration des Internets, entwickelte sich dank einer kleinen Anzahl von Softwareunternehmen mit benutzerfreundlichen Plattformen wie Apple, Google, Facebook (jetzt Meta) und Twitter. Als immer mehr Menschen online zu aktiven Schöpfern und Verbrauchern wurden, wurde das Web immer zentralisierter und befand sich größtenteils im Besitz und unter der Kontrolle einiger weniger Unternehmen.

Mit Web3 machen Entwickler das Internet wieder dezentral. Tech-Monopole werden nicht mehr den Besitz und die Kontrolle über die Inhalte und Plattformen haben, die Benutzer erstellen. Web3 zielt auch darauf ab, die Sicherheits- und Datenschutzprobleme des Internets zu lösen.

Web3 ist:

• Vertrauenslos: Entwickler, Ersteller von Inhalten und andere Benutzer behalten die Kontrolle darüber, wie Web3-Plattformen und DApps – dezentralisierte Anwendungen – erstellt und gewartet werden und welche Inhalte gepostet werden können. Sie haben vollen Einblick in den Code und die Art und Weise, wie Dienste ausgeführt werden. Dies steht im Gegensatz zu Web 2.0, wo Unternehmen und Regierungen die Kontrolle haben und Benutzer Informationen darüber, wie Anwendungen entwickelt und verwaltet werden, nicht unabhängig überprüfen können.
• Berechtigungslos: Benutzer können jede Web3-App ohne Genehmigung eines Unternehmens oder einer Regierungsbehörde aufrufen. Sie melden sich mit den digitalen Krypto-Geldbörsen an, die ihre privaten Schlüssel enthalten, die Passwörter, die sie für den Zugriff auf digitale Währungen verwenden. Wallets können Hardware ähnlich wie USB-Laufwerke oder mobile Apps wie MetaMask und TrustWallet sein.
• Verteilt: Macht und Kontrolle über Internetprodukte und -dienste liegen nicht in den Händen von Investoren oder CEOs, sondern verteilen sich gerecht auf die Nutzer, die aufgrund ihrer Beiträge zur Entwicklung und Wartung von Web3-Plattformen Eigentumsanteile erwerben.
• Offen: Web3 läuft auf einer Blockchain, die Daten in einzelnen Gruppen, sogenannten Blöcken, speichert. Sobald ein Block mit Informationen gefüllt ist, wird er mit dem vorherigen verknüpft und bildet eine Kette in chronologischer Reihenfolge. Blockchain ist ein offenes Hauptbuch, das am häufigsten zur Aufzeichnung von Finanztransaktionen verwendet wird.

Viele Web3-Apps werden von kleinen Teams erstellt, die größtenteils aus Entwicklern bestehen und von diesen geleitet werden. Einige Teams sind unabhängig; andere werden von Unternehmen beschäftigt, darunter NFT-Marktplätze (Nonfungible Token) und Krypto-Börsen. Häufig sind es Entwickler, die Designer einstellen, um an Web3-Produkten zu arbeiten. In vielen Fällen werden Designer mit vorheriger Web3-Erfahrung aufgrund der steilen Lernkurve in diesem sich schnell verändernden Bereich bevorzugt.

Web3-Anwendungsfälle und Expansionsbarrieren

Web3 wird von Finanzanwendungen dominiert: Kryptowährung, Krypto-Börsen für den Handel (dezentrale Börsen oder DEXs) und NFTs, die verwendet werden, um das Eigentum an einzigartigen digitalen oder physischen Gegenständen zu kennzeichnen. Darüber hinaus ermöglicht die dezentrale Finanzierung oder DeFi den Benutzern, Banken zu umgehen und auf Peer-to-Peer-Finanzdienstleistungen zuzugreifen, wie z. B. Kreditaufnahme, Verleih, Verzinsung und Handel mit Vermögenswerten.

Die Ausweitung von Web3 auf andere Sektoren hat sich als schwierig erwiesen. Beispielsweise gibt es keine Möglichkeit, eine legitime Web3-Site von einem Betrug zu unterscheiden – ein Problem, das noch verstärkt wird, da Benutzer ihre Krypto-Wallet-Anmeldeinformationen eingeben müssen, um Zugriff auf Web3-Plattformen zu erhalten. Wenn eine Web3-Site ein Betrug ist, kann jeder Benutzer, der sie betritt, sein gesamtes Geld verlieren.

Ein weiteres Problem ist, dass die Blockchain das Hochladen von Bildern oder Videos nicht zulässt. Benutzer können Medien in Krypto-Netzwerken wie Ethereum speichern, aber es ist teuer.

In Web3-Videospielen können NFTs die Avatare und gekauften Gegenstände der Spieler darstellen – aber es ist oft unmöglich, diese Assets auf andere Spiele oder Apps zu übertragen, was die Investitionen der Spieler schmälert und sie von Web3-Spielen abhält.

Was Designer wissen müssen

Die Nutzung der folgenden UI-Muster und UX-Designprinzipien kann das Wachstum von Web3-Plattformen fördern:

Liefern Sie klare Eingabeaufforderungen und vollständige Informationen

Viele Web3-Apps gehen fälschlicherweise von erheblicher Erfahrung der Nutzer aus. Stattdessen sollten Designer die Implikationen der unbekannten Funktionen und Aktionen von Web3 verdeutlichen. Beispielsweise müssen neue Anleger vor der Einzahlung von Kryptogeldern in einen Liquiditätspool wissen, dass ihr Geld an Wert verlieren könnte – eine Warnung, die mit einer Popup-Nachricht auf dem Einzahlungsbildschirm angezeigt werden könnte.

Die Aktivitäten auf DeFi-Apps werden durch Standards geregelt, die als Protokolle bekannt sind. Die meisten DeFi-Apps führen regelmäßige Sicherheitsaudits durch und dokumentieren wichtige Ergebnisse, einschließlich Schwachstellen und Code-Probleme und -Korrekturen. Designer können sicherstellen, dass DeFi-Apps Benutzer benachrichtigen, wenn neue Auditberichte verfügbar sind, und sie können dazu beitragen, Audits leichter verständlich zu machen, indem sie komplexe Abschnitte im Klartext zusammenfassen.

Ebenso lesen viele Menschen die Web3-Produktdokumentation, um die Mechanismen von Protokollen zu verstehen und fundierte Entscheidungen über die Verwendung einer Anwendung zu treffen. Ein Großteil dieses Materials besteht aus schwer verständlichem Fachjargon.

Auch hier können Designer benutzerfreundliche Inhalte sicherstellen, indem sie zu Beginn der Dokumentationsabschnitte Gesprächszusammenfassungen zusammen mit Links zu eher technischen Inhalten bereitstellen. Pop-up-Glossare können als Link-Icons in den Text eingebettet werden, sodass Benutzer die Bedeutung von Begriffen per Mausklick oder Fingertipp lernen können. Und Texte können mit Bildern aufgelockert werden, die wichtige Web3-Konzepte veranschaulichen.

Verwenden Sie vertraute Währungen, um Wechselkurse zu kommunizieren

Da Kryptowährungen wie Bitcoin immer beliebter werden und ihre Preise schwanken, kann es schwierig sein, ihren Wert nachzuvollziehen. In digitalen Geldbörsen und E-Commerce-Apps, in denen diese Token gekauft, verkauft und gegen Vermögenswerte wie NFTs eingetauscht werden, sollten Designer den Benutzern die Preisumrechnungen von Krypto in ihre Heimatwährung zeigen und vermeiden, mehr als ein paar Dezimalstellen zu verwenden.

Machen Sie Wallet- und Transaktions-Hashes leicht lesbar

Standardmäßig ist jede Adresse in der Blockchain eine lange Zeichenkette – bis zu 42 – bekannt als ID oder Hash. Beim Senden von Geldern muss die gesamte Zeichenfolge überprüft werden. Es ist leicht, einen Fehler zu machen, und es steht viel auf dem Spiel: Alle Blockchain-Transaktionen sind endgültig. Wenn Assets an die falsche Wallet-Adresse gesendet werden, gibt es keine Möglichkeit, sie wiederherzustellen. Bei einer Investmentgesellschaft, bei der ich gearbeitet habe, haben wir ICO-Deals (Initial Coin Offering) vermittelt, riesige Überweisungen an teilnehmende Unternehmen gesendet – und wir hatten jedes Mal sechs Leute, die die Wallet-Adresse des Empfängers überprüften.

Der Ethereum Name Service (ENS) ermöglicht es Menschen, ihre Hashes in etwas zu ändern, das leichter zu lesen und zu merken ist, wie z. B. ihre Namen plus .eth . Allerdings nutzt nicht jeder ENS, weil es kostspielig ist.

Web3-UX-Designer können Transaktionen stressfreier gestalten, indem sie nur die ersten und letzten vier Zeichen des Hashs anzeigen, damit Benutzer ihn überprüfen können, ohne die gesamte Zeichenfolge zu überprüfen. Designer können auch eine Anforderung für Benutzer einbauen, Hashes vor jeder Transaktion zu überprüfen, und sie können neben jeder Empfängeradresse ein identifizierendes Logo einfügen. Diese zusätzlichen Überprüfungsebenen sollten von einer Erinnerung begleitet werden, dass das Senden von Vermögenswerten an die falsche Adresse zu einem vollständigen Geldverlust führt.

Transaktionswartezeiten klären

Wenn Sie Geld online über eine Bank überweisen, erhalten Sie sofort eine Statusaktualisierung oder Bestätigung, dass die Transaktion durchgeführt wurde. Dies ist bei Web3-DEXs nicht der Fall. Die Mindestverarbeitungszeit für Blockchain-Transaktionen beträgt etwa drei Minuten – aber ich musste bis zu zwei Stunden warten. Ich benutze die Technologie seit sechs Jahren und bekomme immer noch Panik, wenn Geld meine Brieftasche verlässt und ich keine rechtzeitige Lieferbestätigung erhalte.

Mehr DEXs sollten den Transaktionsstatus über Text oder Animationen anzeigen, entweder in der Statusleiste oder in Benachrichtigungen. Wenn es nicht möglich ist, Updates in der Benutzeroberfläche anzuzeigen, ist die Bereitstellung eines Links zum Open-Source-Block-Explorer – wie Etherscan auf Ethereum – eine gute Alternative.

Implementieren Sie einen „Send Max“-Button

Bitcoin, Ether und andere Kryptowährungen werden oft mit vielen Dezimalstellen ausgedrückt, zum Beispiel 0,0000085191. Es ist schwierig, den Gesamtbetrag genau und effizient einzugeben, wenn Sie Geld an eine Einzelperson oder ein Unternehmen senden, um einen Vermögenswert wie einen NFT zu kaufen, oder wenn Sie Gelder in einen Smart Contract einzahlen. Ich empfehle Designern, in Anwendungen eine „Send Max“-Schaltfläche zu erstellen, mit der Benutzer ihr gesamtes Wallet-Guthaben mit einem Klick an eine andere Adresse übertragen können.

Dies ist praktisch, wenn das Guthaben in der Brieftasche einer Person gleich oder etwas höher ist als die Summe, die sie überweisen müssen. Einige Benutzer haben mehrere Brieftaschen, was die Wahrscheinlichkeit dieser Vorkommnisse erhöht. Sie können das vollständige Guthaben senden, und die Funktion konvertiert es automatisch in Bitcoin oder Ether. Diese Funktion führt keine Abrechnung durch, wenn das Wallet-Guthaben höher ist als der fällige Gesamtbetrag, daher sollten Designer einen Bestätigungsdialog einfügen, um sicherzustellen, dass Benutzer nicht versehentlich mehr senden, als sie beabsichtigt haben.

Erklären Sie, wie die Gaspreise funktionieren

Gas ist wahrscheinlich die nervigste und verwirrendste Sache in Web3, besonders für jemanden, der neu in Krypto ist. Gaspreise sind zusätzliche Gebühren, die Benutzer zahlen, um die Kosten für die Rechenleistung zu decken, die für die Verarbeitung von Transaktionen erforderlich ist. Benutzer können sich dafür entscheiden, höhere Gebühren zu zahlen, um die Überweisungen zu beschleunigen.

Designer müssen erklären, was Gas ist und wie es funktioniert. Wenn möglich, sollten sie den Benzinpreis in der einheimischen Fiat-Währung anzeigen, die bei den Benutzern am weitesten verbreitet ist (normalerweise USD). Designer könnten auch eine praktikable Kombination aus Gaspreis und resultierender Übertragungsgeschwindigkeit vorschlagen; Wenn Transaktionen aufgrund niedriger Gaszahlungen ins Stocken geraten oder fehlschlagen, sollten Designer den Benutzern erlauben, höhere Gebühren zu zahlen, um die Überweisungen zu beschleunigen.

Machen Sie den Transaktionsverlauf der Benutzer leicht zugänglich

Nahezu alle zentralisierten E-Commerce-Websites (Web 2.0) ermöglichen Benutzern, ihre umfassende Kaufhistorie einzusehen. Es ist schwierig, an einer dezentralen Börse auf einen solchen Datensatz zuzugreifen: Wallets bieten einen Transaktionsverlauf, aber jeweils nur für ein Konto, und es ist schwierig oder unmöglich, nach DApps zu filtern. Um die Art von Historie zu erhalten, die auf einer zentralisierten Plattform verfügbar ist, müssen Web3-Benutzer zu einem Block-Explorer wie Etherscan gehen, der nicht benutzerfreundlich ist und es schwierig macht, eine bestimmte Transaktion zu finden.

Web3-Designer sollten den Menschen eine einfache Möglichkeit bieten, die On-Chain-Transaktionen zu überprüfen, die sie innerhalb einzelner DApps durchführen. Diese sollte an einer leicht zu findenden Stelle platziert werden, z. B. in einem Seitenbereich oder Menü. Eine andere Option wäre die Erstellung eines „Chain-View“-Modus, der durch eine Schaltfläche aktiviert wird: Nach dem Anklicken würde ein Filter über die gesamte Benutzeroberfläche gelegt, der alle Inhalte innerhalb der DApp anzeigt, die in der Blockchain gespeichert sind – einschließlich des Transaktionsverlaufs . Es wäre auch hilfreich, Benutzern zu ermöglichen, ihre Transaktionsaufzeichnungen einfach zu filtern und zu exportieren.

Ermöglichen Sie eine einfache Verwaltung privater Schlüssel

Die privaten Schlüssel, mit denen Benutzer auf ihre digitalen Geldbörsen zugreifen können, sind nicht einfach zu speichern. Die Leute vergessen manchmal, sie zu sichern, oder wissen nicht, wie das geht. Diese Schlüssel können nach Verlust nicht wiederhergestellt werden: Es gibt keine Option zum Zurücksetzen des Passworts. Designer können dieses Problem lösen, indem sie dem Beispiel von MetaMask folgen und jedem Benutzer eine Startphrase zur Verfügung stellen, eine Reihe von Wörtern, die zum Entsperren ihrer Brieftasche verwendet werden können.

Designer müssen die Benutzer auch warnen, dass ihre Gelder unzugänglich und anfällig für Diebstahl sind, wenn sie ihre privaten Schlüssel oder Seed-Phrasen verlieren. Eine solche Nachricht sollte in der Wallet-App eines Benutzers erscheinen, zuerst als Benachrichtigung beim Einrichten des Wallets und dann als wiederkehrende Erinnerung nach einem voreingestellten Zeitplan.

Die zentralen Thesen

Damit Web3 immer beliebter wird und über digitale Geldbörsen und Finanzplattformen hinaus expandiert, müssen Designer Web3-Apps konsistenter und intuitiver gestalten. Sie müssen auch eine einfachere Benutzerschulung anbieten, um Neulingen dabei zu helfen, sich mit neuartigen Funktionen und Interaktionen vertraut zu machen, die auf Web3-Plattformen zu finden sind.

Es muss auch eine hohe Priorität sein, dass sich DApps sicher anfühlen. Es ist unmöglich, die vertrauenswürdige, erlaubnislose Natur von Web3 zu kontrollieren, aber Designer können vorhersagen, was schief gehen könnte, und dazu beitragen, solche Vorkommnisse zu verhindern. Transparentere Vorbehalte gegenüber Risiken werden viel dazu beitragen, die Bedenken der Menschen zu zerstreuen und sie davon zu überzeugen, Web3 anzunehmen.

Weiterführende Literatur im Toptal Blog:

Wie man für maximales Produktvertrauen designt

Steigern Sie Ihre UX mit diesen erfolgreichen Prinzipien des Interaktionsdesigns

Webflow-Vorteile für No-Code-Webdesign: Eine Fallstudie