{"id":784,"date":"2022-05-26T07:25:40","date_gmt":"2022-05-26T07:25:40","guid":{"rendered":"http:\/\/oqtacore-blog-473533498.us-east-1.elb.amazonaws.com\/?p=784"},"modified":"2022-12-15T16:29:01","modified_gmt":"2022-12-15T16:29:01","slug":"ux-ui-design-for-todays-blockchain-platforms","status":"publish","type":"post","link":"https:\/\/oqtacore.com\/blog\/ux-ui-design-for-todays-blockchain-platforms\/","title":{"rendered":"UX\/UI design for today&#8217;s blockchain platforms"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">The popularity of blockchain and Web3 is witnessing an exponential boom right now. <\/span><a href=\"https:\/\/www.insiderintelligence.com\/insights\/us-adults-cryptocurrency-ownership-stats\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Insider Intelligence<\/span><\/a><span style=\"font-weight: 400;\"> has reported that the number of U.S. adults who own at least one cryptocurrency will surge to 33.7 million by the end of 2022, up 19% over last year. The report also shows that 3.6 million people will pay with crypto in the US, up 68.6% over the year 2021. According to\u00a0 <\/span><a href=\"https:\/\/www.blockchain.com\/charts\/my-wallet-n-users\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">Blockchain.com<\/span><\/a><span style=\"font-weight: 400;\">, the number of crypto wallets increased from 44.71 million in 2020 to 80.26 million in 2022.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\"><a href=\"http:\/\/blog.oqtacore.com\/ux-design-in-modern-business\/\" target=\"_blank\" rel=\"noopener\">Earlier we talked about what UX design<\/a> is and why it is important for any digital product. Today, we&#8217;ll look at the specifics of UX and usability for Web3 digital platforms and blockchain-based apps. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">OQTACORE will talk about why UX\/UI design largely plays a crucial role for such digital products. We will also touch on the existing design principles and patterns for decentralized digital products.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Why_cant_any_blockchain_project_succeed_without_top-quality_UX_design\"><\/span><b>Why can&#8217;t any blockchain project succeed without top-quality UX design?<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">For now, decentralization can\u2019t replace the more traditional and popular technologies, for example, in the world of digital and internet banking. However, it is already penetrating deeply into the life of the average user. Very soon, blockchain-based platforms will become commonplace among users.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">OQTACORE have highlighted three reasons why UX is essential for decentralized digital products:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>New users would always want to trust a product.<\/strong> Blockchain offers a new financial system in the form of cryptocurrency, new art in the form of NFTs, and a new form of social interaction in the form of metaverse. However, people usually view new technology with skepticism. Here, financial products are the worst affected. So, the user needs to adapt to the new environment and ask themselves the question, &#8220;What if they scam me?&#8221; UX and UI design has a strong influence on user trust. A study by researchers from the <\/span><a href=\"https:\/\/www.popwebdesign.net\/popart_blog\/pdf\/Effect_of_aesthetics_on_web_credibility.pdf\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">University of Surrey<\/span><\/a><span style=\"font-weight: 400;\"> has shown that users&#8217; judgments on website credibility are 75% based on a website\u2019s overall aesthetics. According to <\/span><a href=\"https:\/\/www.mytechlogy.com\/IT-blogs\/15792\/30-insanely-elevated-website-design-stats-for-2017\/#.YoIqKahBxPY\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">MyTechnology<\/span><\/a><span style=\"font-weight: 400;\">, 94% of users don&#8217;t trust outdated or poorly designed websites. Therefore, today&#8217;s blockchain app designers need to pay more attention to user experience and how users will interact with the product.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Users care about comfort and ease of interaction.<\/strong> If a person wants to use some product on a daily basis to solve their tasks, that user expects that the product can be used without struggling to figure out what to do. Convenience and comfort, to put it differently, usability and user experience, are directly related to the speed of performing a user task and the frequency of using the product in general. For example, if a person wants to add a new token to their NFT collection, they expect that the NFT marketplace would allow them to buy a token in just a few clicks, without complex navigation, long search for the right buttons, and so on.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>New users prefer a distinctive product.<\/strong> Each of the categories of blockchain-based products always share a few basic features. For example, in most crypto wallets, you can manage and view your crypto assets, control your private keys, send and receive cryptocurrency, etc. However, these basic features do not make all crypto wallets the same. If that were the case, there wouldn&#8217;t be such diversity on the market. UX makes your product stand out from competitors. In the blockchain business, your UX design is often your unique selling proposition. That\u2019s why you would see a crypto wallet with a well-functioning chatbot and a user-friendly menu, and another that clearly visualizes data and displays transaction information to the user in detail, but in a simple way. Therefore, from all the market offerings, the user will choose for themselves the wallet that suits them most.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">So, we have figured out the reasons why high-quality UX is not just important but necessary for new blockchain-based apps. Now let&#8217;s move on to the design features. What&#8217;s different about UX and UI design for such apps?<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Blockchain_Design_Principles\"><\/span><b>Blockchain Design Principles<\/b><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">OQTACORE uses 3 principles of UX\/UI design that allow you to design a quality user interface for blockchain-based projects:<\/span><br \/>\n<b><\/b><\/p>\n<h3><b>Consistency<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">This is a universal principle of UX\/UI design, but it has its own peculiarities for decentralized products. <\/span><span style=\"font-weight: 400;\">Consistency originally means repetition of elements in design, which allows the user to apply past experience to the current product. This is mainly done through common elements in UX \u2013 layout and positioning of menus, checkboxes, cards, radio buttons, and so on, as well as strict use of grid in layout, color, and typographic hierarchy in UI design. <\/span><span style=\"font-weight: 400;\">A designer uses available templates in the interface and lets the user know how to interact with the interface. Since the user has already seen common elements many times on other sites or in mobile apps, they will comfortably solve their tasks. <\/span><\/p>\n<p><span style=\"font-weight: 400;\">The peculiarity of consistency for blockchain-based apps is that the user does not yet have much experience with such apps. The user doesn&#8217;t have strong cues, so designers need to be careful in styling, especially when it comes to text and iconography. If you come up with a visual metaphor in your design (for example, an image of a completed transaction in a crypto wallet, when transferring currency using a cube depicting a block in a blockchain, with a green checkmark &#8220;done&#8221;), you should first check, through UX research methods, how well the user understands it.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<h3><b>Simplicity<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Make your app as simple as possible. This will make the user experience easier because any decentralized digital product creates an almost endless stream of transaction data. This principle will also help the user more quickly understand how the product works. With that said, there are a few points to keep in mind when designing for blockchain, while keeping it simple.<\/span><\/p>\n<h3><strong>Security and privacy<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">This relates to entering login credentials (be it a strong password or biometrics) even with 2FA. Moreover, every page, file and transaction should give the user a sense of security through the UI, while keeping the design and navigation as simple as possible.\u00a0<\/span><\/p>\n<ul>\n<li><span style=\"font-weight: 400;\"><strong>Data exposure.<\/strong> Blockchain projects 5-7 years ago were clearly unable to cope with content visualization; transaction data were the most affected. For instance, the user was shown long chains of cryptographic hashes. But these were unreadable and therefore useless to the user. Before showing some data to the user, you must decide whether it is actionable or necessary to build trust. If not, such data can be left out of the design.<\/span><\/li>\n<li><b>Feedback. <\/b><span style=\"font-weight: 400;\">It is also a universal design principle. This involves providing the user with information about the status of a task \u2013 whether the command is being executed or not, and if so, what progress is being made. For decentralized products, this principle is particularly important, especially for any pages of their interface where transactions are done. This is because blockchain as a high-bandwidth platform is asynchronous, transactions can be delayed. And the UI response time is one of the most important components of user experience. According to UX researcher <\/span><a href=\"https:\/\/neilpatel.com\/blog\/loading-time\/\" target=\"_blank\" rel=\"nofollow noopener\"><span style=\"font-weight: 400;\">Neil Patel<\/span><\/a><span style=\"font-weight: 400;\">, even a one-second delay in page response time can immediately reduce y<\/span><span style=\"font-weight: 400;\">our conversion rate by 7%. Therefore, you need to indicate to the user the response time via animation and feedback.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">These are general principles of UX\/UI design that are worth paying attention to when designing the user interface of any blockchain-based product. However, depending on the type of product, more specific UX\/UI patterns can be highlighted. Let&#8217;s talk about them.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Examples_of_UXUI_design_solutions_for_different_types_of_blockchain_projects\"><\/span><strong>Examples of UX\/UI design solutions for different types of blockchain projects<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Based on the principles discussed above, the OQTACORE team presents the following examples of UX\/UI solutions:<\/span><\/p>\n<h3><span style=\"font-weight: 400;\"><strong>For crypto wallet<\/strong>:<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Making the wallet address simple to handle<\/strong>. Each wallet has its own transaction address. It is a specially generated set of numbers and letters that is hard to remember and can be misspelled. Modern crypto wallets should always find the easiest way to store this address, look it up and send it. For example, the user could copy the address directly from the main menu page. Just don&#8217;t forget to additionally remind the user about this using a visual cue.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-785 size-full\" src=\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2022\/05\/Crypto-wallet.png\" alt=\"Copying account wallet\" width=\"1440\" height=\"1024\" \/><\/span><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Security patterns<\/strong>. The user must confirm the account and access to the wallet. You could make them enter a phrase, a numeric code or any other password generated by the wallet itself. The user should not be able to copy and paste the code in the input field.\u00a0<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-786 size-full\" src=\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2022\/05\/confirm.png\" alt=\"Selecting each phrase to confirm your own sect phrase\" width=\"1440\" height=\"1024\" \/><\/p>\n<h3><span style=\"font-weight: 400;\"><strong>For DeFi platforms<\/strong>:<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>User error messages.<\/strong> There are not many DeFi users yet, people are still learning how to use these platforms and will naturally make mistakes. You should warn or notify them when connection to the wallet in the DeFi platform fails, when there are not enough tokens in the account, when the wrong address is entered, etc. It is important to tell them why the error occurred; just a warning will not help the user.\u00a0<\/span><\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-787 size-full\" src=\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2022\/05\/warning.png\" alt=\"The wallet window is already open text\" width=\"1440\" height=\"1024\" \/><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Learning<\/strong>. DeFi uses a lot of new blockchain terms. A user, especially a beginner, won&#8217;t always understand what staking or farming is. The easiest way to educate the user through the interface is to give them a visual cue. For example, you can show them the definition of a new term when they hover over a word or tap on it.\u00a0<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\"><strong>For decentralized exchange<\/strong>:<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>Swap<\/strong>. The main function of DEX is swap. DEX always has a separate page with a swap window for transactions. There should be available information about what cryptocurrency you can choose, a window where you can enter the amount for exchange, the exchange rate, your wallet balance, and the exchange balance. At the same time, it is worth experimenting with the layout of this information and windows \u2013 via UX testing \u2013 to find out which option would be most convenient for the user.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-788 size-full\" src=\"http:\/\/blog.oqtacore.com\/wp-content\/uploads\/2022\/05\/swap.png\" alt=\"Swap ETH to USD window\" width=\"1440\" height=\"1024\" \/><\/span><\/p>\n<h3><span style=\"font-weight: 400;\"><strong>For an NFT marketplace<\/strong>:\u00a0<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\"><strong>View your collection<\/strong>. It may seem strange, but not all marketplaces allow users to view their purchased NFTs right inside the site or app. OpenSea, which is a hub for Ethereum-based NFTs, is more of an exception to this rule. And in order to view your tokens, for example, on the Binance Smart Chain network, you&#8217;ll have to use third-party personal analytics platforms. So, inside your NFT marketplace, you should also design a separate menu for overview.\u00a0<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Given that blockchain technology is just evolving, all the design features for such projects have not yet been implemented. It&#8217;s important not only to follow the design principles that are emerging right now, but also to experiment on designs on your own. This combination will bring more customers to your platform.\u00a0<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<p><span style=\"font-weight: 400;\">OQTACORE uses cutting-edge tech trends in the creation of its products. We also keep an eye on all UX\/UI design features for decentralized platforms. <\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The popularity of blockchain and Web3 is witnessing an exponential boom right now. Insider Intelligence has reported that the number of U.S. adults who own at least one cryptocurrency will surge to 33.7 million by the end of 2022, up 19% over last year. The report also shows that 3.6 million people will pay with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_mo_disable_npp":"no","yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[1],"tags":[13,17,26],"class_list":["post-784","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-business","tag-it-consulting","tag-tech-stuff"],"acf":{"image":789},"yasr_visitor_votes":{"number_of_votes":0,"sum_votes":0,"stars_attributes":{"read_only":false,"span_bottom":false}},"_links":{"self":[{"href":"https:\/\/oqtacore.com\/blog\/wp-json\/wp\/v2\/posts\/784","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oqtacore.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/oqtacore.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/oqtacore.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/oqtacore.com\/blog\/wp-json\/wp\/v2\/comments?post=784"}],"version-history":[{"count":7,"href":"https:\/\/oqtacore.com\/blog\/wp-json\/wp\/v2\/posts\/784\/revisions"}],"predecessor-version":[{"id":1037,"href":"https:\/\/oqtacore.com\/blog\/wp-json\/wp\/v2\/posts\/784\/revisions\/1037"}],"wp:attachment":[{"href":"https:\/\/oqtacore.com\/blog\/wp-json\/wp\/v2\/media?parent=784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oqtacore.com\/blog\/wp-json\/wp\/v2\/categories?post=784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oqtacore.com\/blog\/wp-json\/wp\/v2\/tags?post=784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}