Web3 DX and UX in 2024 by Eric Bishard

Transcript

so this talk is designed for everyone from hackers Engineers product managers um again this talk is for designers CEOs investors average users smart contract developers there's something for everyone but uh mostly it's geared towards Builders um my name is Eric bashard and I am from consensus uh and metamask if you want to follow me I'm httv junkie on Twitter Telegram warcast and any other account that I don't uh that I've probably signed up for uh yeah I'm currently working with consensus in metamask in developer relations I'm the metamask uh devil manager and today uh we're pretty much just going to be talking about ux it's not going to be super technical I will go into a few technical slides um about EIP 6963 if we

have time for that but um basically I just created this because uh we had a we had some crazy experiences this week so as we prepare to welcome uh the next however many users into web 3 ecosystem uh into the ecosystem I think we need to fortify our uh foundations with accessible interfaces that can withstand the flood pun intended uh basically ensuring that trust and comprehension are not washed away um a quick overview of the talk we're going to talk a little bit about about user experience developer experience uh what might DX influence in ux in web 3 uh products and Technologies that I think

can help you right now in web 3 to build uh a better user experience for your users yeah so let's go ahead and get started um so what is user experience I'm kind of old school uh if you can't tell by the Grays I'm trying to hide in my beard um when I think of user experience I don't think of a ux designer uh first um I think of the overall experience that a user is going to have with a product or a tangible good so in my honest uh in my honest opinion the user experience is everything that touches upon your user's experience period uh be it a web three application or you know the shitty scooter that I rode uh to eth Dubai the other day um a a user's experience is

everything and I find kind of a lacking in a lot of daps that I uh that I visit uh in web 3 it's getting better but um I think that we're forgetting sometimes we're putting a lot of um putting a lot lot of detail into the infrastructure and the overall uh our smart contracts and all this stuff but we're forgetting about the basic user experience I see a lot of daps that um sometimes feel like an MVP or a demo to me or that they've uh forgot to include a product designer in kind of creating uh their their final product um a great resource that I think that everyone should watch um even uh

kind of front end developers specifically though product designers is this uh this is a talk from Ben sharfstein and it goes a lot more in depth about product design than I'm going to be able to go into this talk and uh I just think that it's uh it's it there's a lot of very obvious things that you can do and I think we all know them but I think we forget to think about them and we forget to uh second guess our applications before pushing them out to production and um so I'm I've been trying to develop this talk to uh I guess try to harp on those things and to get people to to remember that the things that we learned in web 2 as web 2 developers whether it's accessibility um or uh good good design

in ux and UI uh shouldn't be forgotten as we build in web 3 or we're not going to be able to attract those people that we want to come over to web 3 um ux is everything on the right we're looking at Unis swaps connect wallet experience it uses EIP 69 63 so they were one of the first daps that I saw to actually implement this and it's a very simple kind of uh technology um the EIP 6963 is a few interfaces and types that you can pull into your application and uh it gets away from using the window. AUM object and now although I do think that there's going to be different ways of connecting to wallets in the future right now this is a step in the right direction it's fair fairly easy to implement and basically what it does is

it just looks through your browser extensions to figure out what wallets you have and it displays them um you can still do it the o old way where you have a certain number of wallets that you kind of um approve for your dap that that you have these uh very specific ways of connecting to them kind of uh hardcoded into your dap but um with EIP 6963 allows you to uh at least uh find those providers in the the browser and kind of iterate over them and give a a very easy way of connecting to each of them um Unis swap is also just overall a good user experience in web 3 and always has been uh it just works and they have gone the extra mile to ensure that most

everyone can use this interface in their language and in their currencies that's super important uh more importantly Unis swap is great because everyone on their team from the backend front end smart contract devs uh and when I say backend I mean kind of like the the decentralized smart contract backend stuff ux designers PMS every everyone on their team seems to have been lock stepped in creating a usable product something that I don't see in every single dap but when you finish building that new MVP or this product that you're going to release to the world I think you should um at least ask yourself how does it stack up to something like Unis swap even if it's not similar to it or find that that piece of ux out there in

the web 3 world that you think is a great user experience and say how how does my dap stack up to something like that even if they're not similar um ux designers need to work directly with uid devs and know what tools to use so as you have a team and you have these uh these basically front-end developers that are building your product it's good to have a ux designer and to have those two people working together um so it's not practical to Outsource ux design and not have those ux designers know what tools and Technologies and Frameworks that the UI and web developers are using this creates unnecessary work for your devs uh takes a lot longer to do it and

the product ends up being nothing like the design the ux uh designer actually invention so if your devs are using react Tailwind or maybe even God forbid something like bootstrap the ux designer needs to know about those things and needs to design for those those tools um this this is obvious but I think it suggests that if you don't know your target audience if you don't know who your users are and you don't know um you don't do the proper testing research studies uh interviews and receive feedback from your users you won't be able to build a product that is actually great for your users to use and that provides them with a good user experience

um some final thoughts that I kind of have on ux is as as you start to build your next dap product or service think about it from a user's point of view always start small and iterate um starting too large large and having your hand in too many pots doing too many things uh and initiatives at once is always a recipe for disaster uh sweat the details build the most obvious features first and nail them your user requirements should dictate what the next feature is beyond that as well um so overall what is developer experience so um from your docs to your tutorials articles workshops and presentations uh the actual experience

of developer has when building your tools so maybe you're not building depths maybe you're building tools uh in the case of Dev tools put your product in front of hackers get the feedback that's needed to shape the product and iterate your developer experience uh for your product um for your tools I'm sorry on the right this is an example of the wagm docs um I don't know how many front-end developers we have in here I'm a front-end developer but um what they have front and center is a get started why wag me GitHub link I mean those are kind of important but they have the react hooks that I need the typescript support that I need uh how to connect to wallets information about VM which wagm is built on top of so everything I need as a as a Dev is at my finger print uh

fingertips with the minimal amount of clicks to get to it and when I try these docs when I try these tools they just work another one is a quick node um if you're a web 2 developer versell these people have docs that just work and it's the first part of developer experience but is also in in my opinion one of the most uh important ones as a devil when I go to a company and I'm working for a company for the first time the first thing that we tackle is the the docks put oursel in the shoes of the developers that are going to be using these tools find the gaps fix them and then start to build um start to build demos from there on how to use it um your users don't want to know about your

features either as you release new features don't just tell them what the features are or you know do blog posts about what the features are um there's this thing I like to call like the Super Mario analogy and it's it's applicable to more than just kind of developer experience but I think it's a good analogy for developer experience is that Mario the guy in Super Mario Brothers doesn't give a about the flower right the Little Flower that he gets he he cares that allows him to shoot Fireballs right so show your users uh or your developers or or whoever is building with your tools or your product how they can shoot fireballs and I think if you remember that um you're always going to be able to uh create a good developer experience for them or at

least uh teach them and educate them on how to use your tools um how does DX influence ux and web 3 I don't hear people talking about this a lot but I think um using products providing a good DX uh or developer experience makes it easier for those developers to in turn create a good user experience hello hello yes um um yeah so um I think there's been a lot of experimentations with onchain identity management tools in the past and I don't any that has been particularly successful apart from maybe W coin and I think she had something more important than me to say she didn't like my talk like AI makes most that being said it's

on build to know how on now I'm gone check check check one two all right so with that being said I don't know what I just said but uh it's on us the builders to know how to use these tools versus outof thebox features or customiz in more specific technology uh you can't rely solely on on on the tools like uh I mentioned earlier uh tailwind wagy and VM uh you need subject matter scalability blockers in between like what Vincent was talking about and there are um uh me is that if you have a good developer experience yeah yeah yeah here we go if

you have a good if you if you build tools now I'm in a now I'm in a pool or something okay now I got to Echo um if you if you have tools that have a good user experience one of the things that we're starting to see in web 3 is we're starting to see all these tools that allow developers to build better uh products and better user experiences um and that just wasn't the case when I started in web 3 even four years ago right um in web 2 we had all these amazing tools and and we still use some of those tools in web 3 as front-end developers um I think you have to remember that a lot of the tools that we're using our web tool to tools and uh as far as creating a user experience a

lot of the same rules still apply yes there's this decentralized nature to everything but when you're building an interface an interface is just an interface um products and features and eips uh for good developer experience in ux in 2024 so a few of these I'm going to go over you can see the list here uh I'm just going to go aad and skip to the next page because I feel like we're running short on time but um AI so although AI is not a specific tool or product uh AI is set to play a huge role in the web 3 ecosystem enhancing ux ensuring robust security and uh opening up blockchain Technologies to a wider audience so by leveraging AI um for

personalization automated smart contracts um security accessibility so we can drastically improve the intuitiveness and inclusivity of web 3 platforms so as we integrate AI with blockchain we're not just building smarter applications but we're actually making them easier to use and more accessible to everyone so it should be a tool in your toolbox to create a better user experience because AI helps um uh cookbook. deev it's a good reason this is a good example of how AI can help uh I don't know if any of you have ever uh gone to cookbook. deev but if you know a developer or even someone who's researching the different protocols in web 3 give them this link they probably haven't heard of it cookbook lets you

find uh any smart contract protocol and library and you can access chain quick starts and fine tuned and they have uh AI chat Bots that make it easier uh to kind of answer your questions about these different documentations that they aggregate into one space but they're also using AI in the background to kind of do all this aggregation of these different uh documentations from across web 3 uh so in web 3 Dev resources are often scattered Builders need to learn many different Technologies and read many docs um cookbook Aggregates like I said those resources and makes the the learning process a lot easier um check out these guys um again this is more of just like making you aware of things

that are going to help you to be a better builder in web 3 or maybe help your team become a better uh builders in web 3 uh gelato networks I don't have to say a lot about them they've been here uh at the conference hopefully you've seen some of their talks but um automation reliability infrastructure developers can focus more on building Innovative features rather than managing like repetitive tasks or custom infrastructure so enhance user interaction by automating smart contracts uh contract executions uh provides users with a smoother and more seamless experience and when you have tools like this at your disposal as a developer the things that you can build in web 3 are amazing um quick node I put

the I think I put the wrong I was going to hide this one because I put the wrong information on this slide but quick node is something like infura um and uh it's just I I think the point I wanted to make with that is they're really doing a great job with providing developers with tools and good documentation we have metam mass snaps if you haven't heard about this uh so through interoperability metam Mass snaps can expand the wallet's functionality as a developer you can build something for metamask that and not have to wait for us to build it uh and cater to users engaging with non-m chains in a secure manner so you know with snaps this is our kind of uh entry point into non-m and kind of omni chain uh managing of

assets with metamask so through security snaps implements measures such as checking recipient addresses against known fishing databases simulating transactions to determine their uh potential outcomes and ensuring users have a clearer picture before confirming any action so I've kind of shifted from talking about tools and technologies that I think can help you uh build a better AI I'm kind of showing you now a few of the things that we're doing at metamask to make our user experience better and to give users of metamask um more confidence in using their wallet we also have an SDK that any developer can use um it's a library that provides a reliable and secure seamless connection from your dap so imagine this connecting to a connecting AAP to a

mobile metamask in the past was super hard um we have a an SDK that allows you to do that it also allows you to batch RPC requests uh and it's that and and you can connect to extension or mobile with the SDK so whenever you go to adap you see this little QR code if you want to connect to mobile or a desktop we just connect in the traditional way to the browser so although a very kind of small product it doesn't do a lot it connects to mobile and does a lot behind the scenes to keep that connection persistent and also cool little um endpoints that allow you to do like uh again RPC batching uh things that you can't normally do with metamask um RPC batching is coming in metamask but we already have it in the SDK uh and so whenever metamask actually gets uh that

in the core code we'll just Swip our switch our implementation to what they're building uh but we already have it here um metamask portfolio uh if you haven't checked out the metamask portfolio basically it allows you to kind of connect your wallet and buy sell swap Bridge stake all this kind of stuff uh in one central place but the reason I'm showing it is because if you haven't heard of it go check it out but what the portfolio is doing is uh for our SDK product is they're being our user zero and they're testing out our SDK and making sure um that the user experience and the developer experience is great and by the time you know they get done helping us with kind of

figuring out all the gaps and and all the issues with the SDK we now have a good product to send out to developers to help them build better user interfaces um account abstraction again not something we need to go into but you should be uh you should be learning about account extraction it is a major kind of technology in web 3 that that's going to uh Usher in uh better user experience better onboarding um as introduced EIP 4337 uh poised to kind of redefine our interactions with the ethereum ecosystem it facilitates gasless transactions and enables uh secure logins and simplifies the overall technical complexities um finally EIP

6963 multi-provider Discovery if you haven't heard of this one yet EIP 6963 is pretty simple it is um it's a new IP EIP it has a few um interfaces and types that you can pull into your application and within a few lines of code you can detect all of the wallets that are installed in the browser iterate over them um show their icon show their name uh create a connect uh function to connect using you know ethor request accounts or um you know the standard way that you would connect to a wallet and um although I can't use my computer comp to do a demo uh because that's uh no matter where I was using mine or this one it just wasn't working

so um well I had some slides in here that show you how to use EIP 6963 but they're on that computer and EV evidently they didn't get transferred over but what I'll say really quickly uh is if you go check out EIP 6963 uh on the ethereum EIP site you'll just see a few types and interfaces there as a developer you can copy those into your uh application and uh through those you can get access to uh the request method of EIP 1193 and um you can now uh find these providers that are in like a an object array iterate over them uh create the user interface that we saw before and

one of the things that EIP 6963 helps you know besides uh kind of pulling us away from using window. ethereum as a developer it also um there's a uui which is like a unique identifier for each wallet which I don't know if anyone's ever done this before but uh there's several different wallets out there that identify as metamask or a a as coinbase or these other ones that that that normal daps get confused with so Rabbi wallet is one example um if I have Rabbi wallet and metamask installed in my browser um typically I'll go to a Dap and it'll say hey connect with your metamask and I'll click on that and it'll open up rabby wallet or some other coin 98 wallet that I didn't even know I

had installed um so EIP 6963 gets rid of that um through using unique identifiers and uh it's just one more step in the right direction in creating a better wall wallet experience um man it sucks I don't have the the the code slides here but um for my talk uh the the first URL here is the slides uh the second and the third link are actually 6963 demos and both react and vanilla typescript and then finally at the bottom here is the U is an article that I wrote which is a guide that every developer who's building user interfaces for web 3 I think should look at it's the guide to

EIP 6963 that I wish I had when I started so I wrote it because there's just not a ton of information out there on how to use it there's a few demos that you can download and figure it out yourself but I kind of go through the whole thing explain the history uh why it's needed what it does to solve things and uh you know it's it's it's very simple uh whether you're a developer or not you can read through that and probably understand it and understand why we need it and why it's a good step a step in the right direction so uh again um we've talked about the fundamentals behind good DX and ux this pertains to building any product not just web 3 uh my name is Eric bashard htb junkie follow me on Twitter um

yeah that's it thanks [Applause]