Building a DApp: Design Principles for Dapp developers

Transcript

[Music] so I'm going to going to do just a quick overview on how to how to apply design into contracts so first what what I'm doing here I mean what's what's my job here what of course you know know the designer is the guy that came comes after Fabian done his job and just make it prettier right so I I don't really see it that way I think that the purpose of the interface of course is to translate the code into what the user user sees so in the same way the purpose

of the interface designer is to be some sort of translator between the developer and the end user so I think it's important that the purpose of the designer is to be the guy that tries to connect the two words and in order to do that you need to do something that designers don't like really to do which is understanding the code and understanding what's going on under under I mean of course it's not the job of the designer to develop but if he doesn't understand what he's designing he he will not be doing a very good job at designing anything so here's an example so the first time that Chan came up with this code we are talking and we are exchanging ideas this was the the

first layout of the of the purchase function and you might notice that I mean just looks like something we we saw but there is this one detail which is the buyer was set at the contract uh when the contract was created which made the my job needed that the way that someone would interact with the contract was the seller would announce the price of blockchain the buyer would answer him look I want to buy your stuff and then the seller would deploy would get the contract the address from the buyer deploy the contract and communicate the address of the contract back to the

buyer and then the buyer needs to send the money to a contract which in some sense might make sense and there are some advantages to it but it creates a lot of problems it makes the the the interface a lot more complex ated and and creates a lot of problems like what if the buyer NE never answers back what what if the buyer disappears then you have to add some way to refund so if you need to refund anyway so why do you need to create the seller in the beginning so that's why now we we decided that the seller just puts the the seller doesn't Define who the buyer is the buyer defines himself by actually giv the money so if the buyer doesn't deposit the money he's not the buyer which makes

sense and simplifies my job because now the seller deploys the contract with already the price information so the way that he communicates the price is via the contract and then all he has to do all the buyer has to do is send money to the contract which makes more it's easier for both of them and simplify the what we need to do so now take let's take another look at the contract and that's all the functions that the interface has to do so you have to imagine that interface needs to be able to abort to confirm the purchase to confirm the received so it's probably something that we need four buttons and we need to add somewhere you can add the address of the contract so you can

interact with it but before we go there and try to design it on Photoshop let's try to think about let's try to simplify it so if you remove it you see that those are the functions and those are the modifiers of the functions and if you try to rearrange them you notice that we have have like three states and we have three two states and they can be in three conditions and there's only one function that you can actually do meaning that um you have to remember that a d can know who the other person is so in a d has can ask for an access asking for the user look who who are you

give me the address of your if account so I can recognize you meaning that the app knows if she's talking to she it is talking to the seller the buyer or anyone else meaning that actually what happens is that if you and since the states are doesn't happen all the time it means that there always only one single function you can do so if there is no buyer and it's if there's no buyer then the seller can abort the purchase or anyone else can confirm the purchase if there is a buyer already then the seller can refund and the buyer can confirm Rees and everything else is just a state that is actived meaning that actually we

don't need to design the whole app we can realize that the app is just a button we don't need to do the whole app with a buying and selling actually the our whole design process is that it is is realizing that the app is a single button which is kind of cool because Don tap Scott was talking about how how the next Uber could actually be the car that owns itself and it's doing like the transactions and this is a very nice example of a button that holds the money itself so which I think I think it's kind of cool and takes me to the second point which is you shouldn't try to design too try too to do too much when

you're trying to design a dep so of course this is a great app we could think about how the other the ways you can build a Marketplace you can build amazon.com you can can be on eBay trustless eBay you can add search functions but you don't need to do it right now actually since it's a very decentralized tool tool set if you just build a single button and allow other people to use your button that might be a bus a viable business model because you might like charge a few cents for people to use your button and of course they can deploy their own contracts if you want but that's your job to to convince them why they should you be using your contract that they have to

pay which is interesting because you can imagine a web where instead of you going to Amazon and Amazon builds the whole page maybe Amazon has a single card that it's from another another developer and it's a it we think less about big portals and think about bunch of components that can work together in the new web now a third point which is a more design oriented thing is just when we are we are talking about depths we want to be able to distribute them on the on on a bit torrent like Network and ipfs and swarm so fonts the fonts you use should be open source that you can distribute them those are some great

example of of Open Source fonts we use Source s Source sense Pro for meth and for most of our apps sometimes mon but those other are great I kept Li bar there because it's my favor favorite ENT I love ents and my fourth point is that use grids that applies to everything that the designer makes we use this little grid here which is kind of weird if you say if you take a look at it but it has we use 32 pixel by 18.4 why do I use a height of 18.4 for the simple reason that it allows me to have hexagons on my grid which is nice because it allows you to centralize

circles which is something that is always cool with with with some designs and also we use 32 32 pixels because it's a divisor of 320 480 960 1,24 which is and a bunch of other sizes which if you which are great for mobile which are great for multiple screens finally test test test always test what whatever you do so normally when I first started I always used whoever is in the office as the first the best test is just grab someone who's not working your project show something and ask him a dumb question like okay what is this that you are seeing and never never answer to him

just let him answer you but since I work from home now which made that kind of complicated I was forced to find other other sites that would allow me to do that which I found a great some great like usability Hub I highly recommended in Vision I high recommended so for for example in our design process uh instead of building a document saying what the interface should look like we build an Invision document that has all the screens linked and I can show you I can show the developers I can show some users so they can all they have to do to understand how interface Works they click click click around and they they will be able to to to to see to see how the app is going to feel like this is a

great tool for for exploring everyone and the next next thing I always use is usability Hub which is a great way to do quick design tests so this was the first design of the ALF one Miner which is a CPP tool for allowing a quick quick one button mining which is a great tool but it the first design was very kind of nerdy and complicated and and I suggested a new design where part of it we removed the few buttons like the CPU mining it doesn't make sense and we just have one button that's called start Mining and we've Dr rewards because that's actually what people want and one of in the process of convincing that this design made sense because I think I think it felt like it made it made sense

but sometimes you need some number so I run it run it in a usability test which is a way that you can have 20 people like clicking your design around from all over the Internet and I just ask them look this is a this is some some app that uses your CPU and gives you money so I want you to turn the app on and try to collect your winnings and you can see that on the first app people were like clicking around they had no idea where what it was and they couldn't get to the next point and on the second version everyone was mostly clicking just on those two buttons and we were able to switch the overall rate of people having success in the first try on the first click from 30% only to 70% only which I think it's a great it's a

great success and shows how how important it is to to test it constantly and sometimes you can test just logos for example this is the first logo for mist and of course you can see that's a wave inside Diamond so I I think it's so obvious I almost didn't test it but I decided to test it anyway and that's how the internet described it it's just like a diamond with a shape with purple and then I maybe there no not enough details so I asked people to write substantives I I I made a second version with more details and then everyone just told me okay so this is uh wave monting with water ice I don't know I'm confused so I decided to oh maybe I just should add

some some smug to it and then I okay what is this now and then oh it's a messy scary confusing cold blue sharp and then then I could see that this was not the right approach for the icon so I decided maybe since maybe you can go to Iceberg Iceberg there's this idea of the Deep Web and maybe an iceberg is cool so what is this and everyone say uh uh nothing that's some app thing so I kept trying I kept like making other designs and I think this one was was better and people start think that there's an iceberg there is like an iceberg with a magical M thing

and that's that was finally the the latest iteration of the log I had multiple iterations between them and they they were like oh it's a magic diamond mounting with an iceberg Cho inside so which is which is more what I was going for in the beginning and finally the last point I want is keep the user in control of his data that's something we don't do on the current web that we can totally do on the on on the decentralized web and so just in my for example we allow the user to I was as I was telling in the beginning the user can just tell the app who he is so the user starts all apps anonymously and then he can choose one account to review

himself and it's a great way that the user you don't need to maybe you don't need to have a login password information on on your app you don't need to keep allo that information on and the app site maybe all you need to do is ask for the browser for it to show you some sort of of of proof of ownership of a public public key and your app will be simpler and it will be a better experience for the user because the app can he can keep his private data on his own browser so I think those are the six things I wanted to to tell about how to design for for the new app [Applause]