New Ethereum talks, every Monday. The week's conference uploads by event, in your inbox.

Loading player…

ETHParis: Simple design - it’s complicated

ETHGlobalWed, Oct 9, 2019, 12:00 AM

ETHParis workshop: Simple design - it’s complicated. In this workshop Alex Van Der Sande explains design principles for developers and hackers attending ETHParis. ETHParis took place in Paris, France, as part of the ETHGlobal series of ethereum focused hackathons. For more information go to ethglobal.co March 9, 2019 at the coding school 42 in Paris, France

Transcript

everyone I will be talking about universal logins and the sign mostly could design it's complicated right so we here I think we are hearing like this debate scalability versus disability where oh you like the last Alex just said you need usability but I mean you need to scale now and I'm here to argue the other thing that usability is as important or maybe more than scalability and the reasons is first in order to have a billion transactions you need a billion users or something on the order magnitude and so if you have like 10 million users it doesn't really matter that you don't scale but even if you do scale I would argue that we have already a lot of good enough scalability solutions today right you have you have a lot of small things that you can do that we may not work for a billion users but we will allow your app to like your app to have a plasma your app to have a side chain that will allow you to a few thousand transactions per second and more than that you can't know what solve for the future and users get there right because you are all optimizing the scalability is transactions per second transactions per second but often that's that's not necessarily what you want from your user right that's not the problem your user has maybe all you're either wants is to have one type of transaction and that can be solved by by a state channel or you can solve it in other other ways right and so anyway I want to talk about this usability and I think the things that we need focus on good design is a first if you want to build something let's try to fix a problem that wasn't created by crypto or in the sense that I mean everyone is let's build a new wallet let's build a new easier way to trade a turf or be a Bitcoin and etc but then like first we need to focus on what is the sort of magic power you're giving to someone who is not into crypto which will convince them to get into crypto because most of the world is not into crypto already and for that we need to do onboarding and onboarding on warning because for very essential apps they can they will figure out right like people figure out their taxes every every year because otherwise someone door but for for something else it's sort of good that you could have used good usability and and it serves it's important to have good design and good design is not decoration right the difference between that clock and that clock is not what I'm calling design right that's just something you call like someone to paint something on top of it what if you like to think as design is the way that all the complexity of the clock in itself is hidden and then you get that face on top right if that's the color of that face the skin is not very important but it is because the thing is there's a lot of complicated things in the backend if you want to show something simple on the front end more than that I could design hides option I would argue right because I if you're in a discussion and you're like you're the designer and heater and like your solution is let's add the user setting and then the user can decide if he wants a and B you're slowly killing your app it was this way right like just make the choice for the user and if it's very important we can talk about later or adding an option but don't just try to don't avoid taking the decision by just giving the decision to the user giving too many decisions to the users make that's how you get a very bad design and the follow up on that is good design is opinionated right of course like you made the decision your decision may be wrong right but but the reason that users comes to they come to you is that you're making a choice right so if there is like a hundred ways in which you can trade if you want to do something where you can trade die for either and you wanna buy die you can do a bunch of exchanges you can do any swap you can do shape-shift or and you can present oh you're okay you can tell your user look here is the list of 100 exchanges decide which one you want to use or you can simply say look here's what here's what you don't want to do I'm gonna do the exchange bit I'm gonna choose this thing because I know it's gonna work better so here's a scenario right imagine a defy wallet or as the new kids like to say don't fight for some reason so landing right and the basic the firewall that I think of is basically you have a bunch of crypto assets you can use them to lend them and you can gain interest on them and then you can or you can use them as a son or you can take them and you can borrow something out of it right so that's I would say the basic thing and there's tons of like compound and F land ARMA maker it is also doing something like that and and if you're building let's say you are building the fire wallet right you can point the user look I want integrate all those things and you can show the user all the options and everything that that's there or you can just choose something for them right and just look I'm gonna pick this thing that has a best compound interesting I'm gonna put there and like I'm gonna take your money I'm gonna put it to to create compound without having to ask you because that's probably what you want and if you didn't want that you can just go to another wallet so imagine it like you have like your user has 1,000 I I would argue that the first thing I would do is just encode I just call it cash or something like that and show them in dollars maybe it's died but it's not important and more than that how do you show them that you are actually how do you show them the option of creating lending it so you can create compound interest I would argue that the best way to do it would be to do this don't show them already put them into like put that in practice and just show them on ehm grow growing up and I think it is a nice interface because it's addictive you kind of you easily understand what's going on and you want to put more money here now here's on a thing like first of all notice how many like the order of magnitudes I think it's very small but you can just add another like another number here and the person will just look oh that's nice my wanting money waiting and going up and you don't need and you can even you don't need to follow it block by block you can just show them look that's I know that each block is 15 seconds so that's that's zero zero zero zero zero two per second so just show them already that right so that would be like part one of how how will you do a lending wall that's right just put the money in and the money grows that's how it would I would do it then there's the second part where you can use that money you have already to borrow and there's a tons of stuff you can tons of ways in which you can do it and tons of levers and you choose a collateral rate and there's like a payback and there's a bunch of numbers and if let's say you're you just want a very simple wallet like you you do this thing where we you add you show how much catch cash the person has you show them how much assets they have and you can do this you could simply say you can spend up to this amount right the idea behind this is you could hide out that complexity and just tell down with them look you have ten thousand dollars of assets you have one thousand dollars of of cash if if you go over this we we will do the whole crypto loaning long a long thing and give it to you my point is it could be as simple as like what the user is used to in your bank that's not something for most user for every user but that could be enough for 80 percent of your users so here's another thing let's try to avoid asking for them loads right why do you need to necessarily have the user have a madam asked wait maybe it's just a small amount just manage the keys in the browser and I think the best example of that is burner wallet right we're like the burner wallet has such a great onboarding exactly because doesn't ask you for a install metamath save this private key generate this thing and it's a burner thing it's like $1 $2 $5 hey you've lost it that's okay it's not for your fare life things and they'd hear the nice thing about this is that it keeps the keys like locally with you and the next thing you can do if you keep the keys is you can start avoid asking for eater right how do you do that magic it's it's called meta transactions and you can always try to do it an idea being simply is that you have a bunch of keys an H H let's say each tab or each transaction or each each device you use has its own key and instead of like and each one could be a burner wallet when you stay the storing funds here you store funds on a contract and you interact with that contract as the key so you're basically using your key as an authorization token we just say look here's I'm just basically signing a message telling a contract to do something and that contract will do something you give it to a server or network of your layers or maybe a single relay errs and those people take that transaction put it on the blockchain and here's another nice thing you can avoid asking for gas also I think guests want one of the most complicated parts especially when the user converts other eater and then they realize they don't have either anymore than they have to buy more either for gas you can try to avoid all that using meta transactions true by paying them in tokens wait wait how does that happen remember that you have the keys of over here and you have the and you have the relators what you can do is whenever a relayer makes a transaction for the contract the contract can pay that transaction back and they can pay they can pay in dye or any tokens that you want to create which means that the user themselves did not necessarily have a need to have either like the relays only theater but you can have whatever token you you want to have and also let's not show them hex codes right I would say that give them the NS name right and if you want to do a link like if you want to call an action try try keep giving a link there are multiple links tenders links are better and clearer codes but you can I can have links Kira codes are better than than hacks hacks addresses and so on so I think the last thing they did till the lace last option you want to give your user is something that they need to copy paste hex addresses from one side to the other so if you go back to our little crazy I forgot to take off the animations but if you go back to or or thing based what you have right now is we have ans address pointing to or to our contract right so that is the basic architecture I suggest everyone does right which is like every time you add an app you have you have a key on your browser or you know app on your machine use that to sign messages instead of signing keys give them to a real layer or network of layers those will go to a contract which you can deploy and using create - so you already have the address you give them an S name and then they pay back to relators which is I would say a sort of complicated thing for you especially for you to build in a hackathon which is why we build this little thing called Universal again right universal logins is an SDK that sort of takes all those architectures and gives you in a very very simple easy way and how it could look is you can see yourself by going to example that Universal logins is basically your your login into application could be you just go into your app you type a username that you want and you created right just type of create and you won't need to have a Mara mass download or anything like that you just create it for you and we do give you some tokens that allow you to do interactions with with that application [Music] and then you whenever you do an interaction here you like we we take some tokens out of it of you and the nice thing like I gave you those tokens I'm giving I have whatever spam mechanism III need and then if if I want to login I never typed a password or anything and if I want to log in a second device oh here you go you can see a bunch of people who have interacted with that you can see it's life on example let's say like how do you log in again if you don't don't have a device like if you don't have a password you can just go to your other device and type also the same name notice that now Bob is instead of created says connect there's also recover we won't go into that but the idea is basically just request and you will receive the request here what's happening actually is that this browser has a private key these other browser has another private key and this request there is act asking authorization for adding these guys private key as one of the outer is authorized keys in the address which is great meaning that now you have to sort of keys storing the same funds and you can see it's the same address it's the same it's even like and for any any any app right for this app here which is doesn't know anything if you click here or click there the app you only see that that particular address clicked on it because it that there is there is a you could call a person out there a more ecig or a smart contract account and I think that's a much nicer or easier way to do the to do the onboarding because you're removing so many steps so how I can play with that right you can go to Universal login dot IO we have a website where you can take it take a look I even created like if you go there we have a github universal again and there's even like a universal login like for hackathons where you can just use a quick quick and dirty boilerplate which you can try to access either need to like this link you can find from like from here so don't worry about about it right so so how many minutes should I have to have okay so that's I have about 10 minutes right so I can sort of try to show how how how it sort of works right because I just wanted you to show like the hackathon thing so it's it's like go to the universal login hackathon and you can like you don't even need to get clone is right you can just use those commands here it will create a little script app for you and then it's it's a simple thing here where it's like 50 lines of code oh sorry okay I think it's yeah I forgot it it's not some mirroring display arrangement your displays so universal login login hackathon universal login data you you will be able to like in and then there's a quick we can do anything how to create your own react app in here in a few instants you just add a few things and then what's gonna create for you is an app that sort of looks like this right where you can just add any user name here you register it and it's gonna basically deploy make a contract deploy register E&S and then create a device private key create a contract key and you can do a bunch of other stuff later right so it's a it's a shore and it creates a short react app that you can you can use to play and sort learning about it right so way I highly recommend anyone wants to play around of ENS with wave of that so questions so I would recommend not putting that information on chain right and I think the best I would use for that I think that three bucks is a good solution because three bucks is basically a way for you to keep a database of private information for one single private key it's not perfectly working with universal logins because universal login to have multiple private keys but I think we can we couldn't make it work by simply sharing there for my information between them because I don't don't think like your banking information one should be put on chain it's just probably informational II trade between multiple accounts it is a motive signature wallet one of the one of the cool things that we are doing is we like I say that we are tricky users into using a Modi cig because it's a contract and that contract has multiple keys and each Key has different prayer permissions and you can we we start by the folder having like any key can do anything but you can just increase that we're acquiring for two keys so you can confirm something with your device like your laptop on on your phone and more than that what we actually want to do is for you to be able to give some per specific permissions to key saying look you go to let's say kickback event add and you add the kickback event key and then you can tell look kickback event key has the right to spend up to fifty died and to do unlimited transactions that are to the kickback contract right so a whitelist tree contract that they can interact to and they can interact as much as they want with that contract and they can interact with we've died up to fifty dollars per month or something like that and once you have those permissions you only need to a single key for doing that if you go above that then you need a second key so first of all I would disagree that there are not a lot of people experiment on that I would say that like yet there are people trying to do a game experimentations and I would say like one of the nice things about the this pattern is that where you can have once you have a key that is controlled by order by the browser you can do multiple signatures or or you can do bootable actions without having to confirm each one of the user right your app has permissions but and once you have those permissions you can do a bunch of transaction with the user sign them constantly and then only put a few things on chain and it permits you to do to do stuff where you're playing the game and you don't need to every time you do something there's a new pop-up window you have to confirm pop-up window you have to confirm right because you're like the game interface is already the confirmation I think that's super interesting especially if you're using a side chain right maybe maybe your game your whole game is a side chain and it is controlled by a key that is stored on your idea your device or your browser in order so I think that's that's very exciting and the second part about gamification is that because you can use internal tokens and most games already have tokens what you can do is you do let's say a simple verification some sort of verification you give them a hundred game credits already and then you're basically charging them in-game credits another interesting thing you can do is since the relay err is a volunteer thing the the relator doesn't even need tokens you could have a schema where do a layer is it's just posting any transactions from a list of yiy traces of the addresses and those white lists of the addresses are our customers who were let's say subscribing via credit card right so you have you have a subscriber you have a monthly subscription using like an old thing like the credit card and then what you do is is you think the game will be paying like your transactions fees and the nice the nice thing that it adds centralization is that since the game isn't lying what happen if that's the company that is receiving the president car goes bankrupt or disappears you can replace all that by just adding another layer or running your own trailer and start paying your own transaction fees if that does it anything less questions okay thank you [Applause]

Automatic transcript — names and jargon may be misspelled.