Mist concept introduction with notes

1. MIST BROWSER CONCEPTS AND INTRODUCTION What are you guys building there anyway? Yell at me here: AvsA@ethdev.com Thanks for coming, I hope you all can hear me well over my terrible accent  So this presentation is about 20 minutes and we’ll go on explaining what is we are building. I hope you like.

2. BASELINE LOADING PROGRESSIVE LOADING Everything I’m about to show, though, is a sketch. I’m not going to show part of a fully formed work, like a baseline Jpeg loading. Instead, think of it as a progressive loading file, showing a rough outline and then going into further detail. I’m showing now the rough view so we can compare notes, and then I’m going to absorb your feedback, go back around and add more details and more screens. It’s a constant iteration.

3. BASELINE LOADING PROGRESSIVE LOADING Everything I’m about to show, though, is a sketch. I’m not going to show part of a fully formed work, like a baseline Jpeg loading. Instead, think of it as a progressive loading file, showing a rough outline and then going into further detail. I’m showing now the rough view so we can compare notes, and then I’m going to absorb your feedback, go back around and add more details and more screens. It’s a constant iteration.

4. WHAT IS MIST? First of all, what is Mist? Mist is the new named for the Go-ethereum, also known as the Ethereum Dapp Browser.

5. WHAT IS MIST? Mist is the Ethereum Ðapp Browser First of all, what is Mist? Mist is the new named for the Go-ethereum, also known as the Ethereum Dapp Browser.

6. WHY MIST? But I think the second question would be, why are you building it, what’s it’s purpose? Mist is the end user interface for Ethereum. (CLICK) If you are not a cryptographer or a developer and have just read about this Ethereum thing in the Sunday Paper, I hope you download Mist. It’s the first experience users will have with the whole concepts, so it’s incredibly important that we get it right. ! So how should it look like? Something I’m told a lot is “Why are we even building a browser? Let’s simply fork chromium, or do a browser plugin. It should look exactly like a browser!” Let’s start by doing that.

7. WHY MIST? It’s the end user interface for Ethereum. But I think the second question would be, why are you building it, what’s it’s purpose? Mist is the end user interface for Ethereum. (CLICK) If you are not a cryptographer or a developer and have just read about this Ethereum thing in the Sunday Paper, I hope you download Mist. It’s the first experience users will have with the whole concepts, so it’s incredibly important that we get it right. ! So how should it look like? Something I’m told a lot is “Why are we even building a browser? Let’s simply fork chromium, or do a browser plugin. It should look exactly like a browser!” Let’s start by doing that.

8. This is Mist being just a clone of chrome. Top tabs, big navigation link, all the rage. You can already see a problem here with the top tabs: text strings are horizontal rectangles, yet we are stacking them side by side. As space quickly runs out, we have to make the space smaller and use a combination of side scroll and cutting off text. There’s barely space for the title, even less for any extra information. ! This might work for browsing the world wide web, where you are expected to open dozens of new tabs, but for ethereum this isn’t the case. Tabs are navigation helpers, they are disposable, you open dozens per session, they have no space for further information. Ethereum Dapps, are applications, software, you might be keeping important assets there, you might use it to keep track of critical information.

11. Property People Mining Catalog Make a deal Learn Ethereum Let’s rotate everything. By putting the tabs on the side, we allow more space for the title, and if we have more apps it can go inside a vertical, more natural, scrolling. ! With this extra space, we have room for information, so we can add a second line of data, and even a badge..

12. Property $1045 (+3%) People NEW MESSAGES Mining NEXT REWARD 10S Catalog Make a deal Learn Ethereum User know this, it’s a sidebar. It’s how you pick the disk in Windows or Mac, it’s how you pick the inbox in gmail. ! On the top right corner we have a “add new app”, “search” and “settings”. ! This is one example of the things we can gain when we break some older molds—without too much of a cost in user familiarity. ! But there’s a bigger point here..

17. Which is one of perception: we didn’t gather this great team just to build a browser plugin. Ethereum is a new platform and I don’t believe we can reach it’s potential by trying to retrofit old concepts in it since the beginning. If we sell ourselves as an alternative browser, then the standard that we will be judged will be “Is this better than chrome to go on facebook?”. If we give them an URL bar, the first thing they’ll type on will be google.com. And by then, we have already lost, because for those tasks, Mist is not any better than the alternatives. !

18. ARE WE HERE? Which is one of perception: we didn’t gather this great team just to build a browser plugin. Ethereum is a new platform and I don’t believe we can reach it’s potential by trying to retrofit old concepts in it since the beginning. If we sell ourselves as an alternative browser, then the standard that we will be judged will be “Is this better than chrome to go on facebook?”. If we give them an URL bar, the first thing they’ll type on will be google.com. And by then, we have already lost, because for those tasks, Mist is not any better than the alternatives. !

19. We don’t want the user to think as Mist is a browser for ethereum. CLICK ! Instead, it’s better for him to think of it as a work bench, a swiss army knives, a collection of tools. Blockchain tools encryption tools, decentralized tools, packaged in away that allows non technical users to take advantage of them. CLICK ! We are not building a better way to go to facebook.com we are giving them tools to go beyond the web. We want the user to open it and not compare it with the stuff he already knows, but we want him to visualise the stuff he can do. Which is why I believe one of the first screens should be about what you can do. (CLICK)

20. Mist is not a browser for ethereum. We don’t want the user to think as Mist is a browser for ethereum. CLICK ! Instead, it’s better for him to think of it as a work bench, a swiss army knives, a collection of tools. Blockchain tools encryption tools, decentralized tools, packaged in away that allows non technical users to take advantage of them. CLICK ! We are not building a better way to go to facebook.com we are giving them tools to go beyond the web. We want the user to open it and not compare it with the stuff he already knows, but we want him to visualise the stuff he can do. Which is why I believe one of the first screens should be about what you can do. (CLICK)

21. Mist is not a browser for ethereum. It’s a tool kit that brings blockchain technologies to non technical users lives We don’t want the user to think as Mist is a browser for ethereum. CLICK ! Instead, it’s better for him to think of it as a work bench, a swiss army knives, a collection of tools. Blockchain tools encryption tools, decentralized tools, packaged in away that allows non technical users to take advantage of them. CLICK ! We are not building a better way to go to facebook.com we are giving them tools to go beyond the web. We want the user to open it and not compare it with the stuff he already knows, but we want him to visualise the stuff he can do. Which is why I believe one of the first screens should be about what you can do. (CLICK)

22. We are seeing a page inside the app catalog. I imagined this as the first screen a new user sees. So instead of explaining what ethereum is using a video or text, I’m showing you a bunch of stuff and encouraging exploration. ! Those categories come from my community surveys. “Make safer business” are contracts that involve only a few parties. “New societies” are for all kinds of experiments on DAOs and similars..

23. “Money Together” are apps that are more useful as more users put their money down, like exchanges, coin mixers, crowdfunders, etc. Finally in a general category of “information is power” I’ve put multiple apps whose purpose is to trade purely on data: betting markets, cpu markets, insurances etc. ! For the final users, those aren’t apps or websites, those are actions, examples of what they can do. In a glance they understand what they can do with Ethereum that they can’t with a common browser. ! For developers or more advanced users, those can be seen as sample codes. Very basic apps, all open source, to encourage innovation and kickstart new app development, built by both the dev team or the community at large, that will serve as templates and sample code, apps by the community that represent what we want to show new users.

24. (CLICK) this button on the top left is what I call the “App Button”. (CLICK) It contains app specific actions. We haven’t defined them yet, but here is where we’ll display information about the trustability of an app, what actions we can do with it etc. If the app has published it’s source code, this is where we’ll link to the git. ! (CLICK) Finally there’s the integrated URL bar. Upon tap or hover it becomes editable, so you can change it. Again, I’m testing this I’m not 100% sure it’s a practical idea. ! Below the header we can see the main navigation tabs. Since this page won’t change much, in these areas the user could find new and upcoming apps. This is tab specific and is integrated in the header. The header integration allows more space in the screen dedicated to the app itself and less for browser chrome and meta data. This has some issues with backwards compatibility so I’m still considering it. Maybe we’ll allow this kind of header only in QML based apps. (CLICK) Let’s go into an example. I’m picking the crowdfunder app.

31. Notice that the icon here has changed from the app icon to an alert icon. (CLICK) This is because this particular app has not published it’s source code anywhere so we can’t audit it. This is the default mode of production on the web, you have to trust blindly the app provider, but in ethereum we want to alert the user of any possible breach of trust. ! So let’s build a lighthouse..

35. Again, I come back to the menu button. Here’s a good advantage of having a the front end know about the backend: if the app is open source, we can link you to the source and allow you to quickly clone anything you see. It’s great for many reasons. First of all, it encourages active development of apps, secondly it increases reliability: if many people are running sligoty modified copies of a code, then the chances are that if one goes down others will be there. Of course, this assumes our user is a developer, which we defined back there as not true. But I believe there’s a more subtle hint here, which is that this button “fork me” is, in some sense saying: “here’s an opportunity to make money”. Here it is, a very very simple crowd funding app that has 0% profit for any developers, yet is being used. If you have a good idea on how to improve it, you could fork it, add a small fee going to you and put it live immediately. It’s a constant advertising for learning more.

36. Again, I come back to the menu button. Here’s a good advantage of having a the front end know about the backend: if the app is open source, we can link you to the source and allow you to quickly clone anything you see. It’s great for many reasons. First of all, it encourages active development of apps, secondly it increases reliability: if many people are running sligoty modified copies of a code, then the chances are that if one goes down others will be there. Of course, this assumes our user is a developer, which we defined back there as not true. But I believe there’s a more subtle hint here, which is that this button “fork me” is, in some sense saying: “here’s an opportunity to make money”. Here it is, a very very simple crowd funding app that has 0% profit for any developers, yet is being used. If you have a good idea on how to improve it, you could fork it, add a small fee going to you and put it live immediately. It’s a constant advertising for learning more.

37. I don’t want to present here the app itself, what I want to talk about the elements that we’ll use to make apps. ! Most of these elements are commonplace. You have an image, a title, a text box with an explanation (CLICK), you have a text area and a submit button.. but wait, what’s this? ! (CLICKS ID PICKER) ! This is a private key picker. It lists all profiles you have saved locally for which you can use a private key to sign it. This is a rather advanced and important step: you’re choosing which key to use in order to sign a message you will be sending privately.. but for the final user, you are just picking among three profiles. In this case you want to send the message not as Jane, but as the small bike shop you work for.

42. Now we are ready to submit the message ! (CLICKS SUBMIT) ! This is an additional confirmation given by the app: it’s not optional for the developer of the app, but the user can skip the confirmation the next time. It’s here to ensure that the interface is not lying, that the message you are sending is the same that you just typed. ! Before any irreversible action, Mist should confirm with the user his intentions.

45. (CHANGES DONATION) ! I don’t want to give that much to a app I don’t trust. Let’s just send 25 dollars.. ! (CLICK DONATE) ! Now again, the confirmation dialog. You didn’t need to pick an identity again because the app is assuming you will be donating with the same ID that you commented, but this is up to the developer. Also, the user can change the origin of the funds.

48. (CHANGE FUNDS) ! This is a wallet picker. It lists all your public profiles and the wallets from which it can send money from. This isn’t necessarily and address, this is just a way for the user to better manage his funds, as maybe some of these wallets might have some specific limitations given by their specific contract. ! (SEND MONEY) ! Done, sent. Now we’ve gone some very advanced tasks here, we’ve sent an encrypted message to an app, chosen from many public keys. We’ve sent money from multiple wallets managed by a series of contracts that are associated with those keys.. But everything was made transparently to the user. ! I would like to take some even bolder steps now.

54. (GOES TO CATALOG AGAIN) !! The crowd funding example is one of a more traditional web type: a service created and maintained by someone else which you use. But Ethereum is about allowing direct agreements between peers, we would be amiss if people couldn’t create a small app intended for a very limited set of users, without needing to hire a developer? ! (CLICKS MARRIAGE)

55. (GOES TO CATALOG AGAIN) !! The crowd funding example is one of a more traditional web type: a service created and maintained by someone else which you use. But Ethereum is about allowing direct agreements between peers, we would be amiss if people couldn’t create a small app intended for a very limited set of users, without needing to hire a developer? ! (CLICKS MARRIAGE)

56. LOADING Let’s create a family trust. This is a joint account, that allows two or more people to share assets and decisions, and that allows automatic inheritance for the family in case something bad happens with one of them. I think it’s a great example of why someone who never was interest in crypto currencies might use our software.

57. Let’s create a family trust. This is a joint account, that allows two or more people to share assets and decisions, and that allows automatic inheritance for the family in case something bad happens with one of them. I think it’s a great example of why someone who never was interest in crypto currencies might use our software.

58. (SELECT FIRST PARTNER) ! So you’ve seen most of these inputs. This is the familiar “identity picker”, but with a difference: this is for picking public keys that you have available. This means your own keys, but also friends and contacts. ! (SELECTS JANE) ! So jane selected herself here ! (SELECT SECOND PARTNER) ! For the second partner, let’s pick Zek. And just like that we just became the first place ever to legalize truly equal marriage between humans and robots! ! (CLICK HEIR PICKER) !

63. Let’s now choose a heir. A heir is a profile that works both as a backup but also as a automatic inheritance system, so you can leave your assets to your children. But here’s a problem: what if your children are too small? Well you could, theoretically download ethereum in a new computer, create a new identity and keep it in a USB stick for 20 years, but what is the point of the whole system if we are just sending transactions with ourselves? ! Also, it’s a bigger problem than that: most people in the world have never heard about ethereum, and most of them certainly won’t have an account. Can you imagine having to telephone your family and have to explain to them over the phone how to create and send you their public key by email? There was an app, not long ago that promised to be a social network only for your closest friends. You know what was it’s biggest downfall? Well turn out my closest friends and family aren’t all early adopters, and the people I knew who were likely to download and test new apps where just colleagues with whom I had nothing intimate to say! ! So to solve this conundrum I created what I called an “invitation token”. How does it work? ! (CLICK INVITE NEW) ! All I have to do is click this button, “invite new person”. First I just type a name so I can remember who am I inviting.. ! (TYPE NAME) ! This will create a new, temporary transaction that can be only redeemed once. It’s protected by a secret key encrypted by a secret question/answer passphrase. ! You ask a question that only your partner will know the answer, then you type the answer. Twice for security. ! (WAIT) ! This creates an image (or some other simple file) with the encrypted keys. Now you can send this file through an insecure connection, like email or a social network, and then — if they don’t know already—you give them the passphrase separately. ! Now something very important here, is that this never expires. So you could keep it printed on a paper in a safe or you can simply give to a loved one and ask them to hold that “Until the time is appropriate”. The only instructions needed will be

70. (CLICK OK) ! Now, we are almost finished with our app. Now we can add an optional maturity date, so your heirs can only unlock their account after a given date in the future. ! (CLICK ON NAME) ! Also, let’s write a title and change the icon and I think we are all set up to create a marriage contract. .. But before we go on the next part. I want to talk about terms of use. I hate them. Almost all software requires you to scroll past a wall of text of questionable legal value before they can use it, and everyone knows that that thing is out there to protect the software maker, not the user. ! But I think we can use that to our advantage. (CLICK NEXT)

71. (CLICK OK) ! Now, we are almost finished with our app. Now we can add an optional maturity date, so your heirs can only unlock their account after a given date in the future. ! (CLICK ON NAME) ! Also, let’s write a title and change the icon and I think we are all set up to create a marriage contract. .. But before we go on the next part. I want to talk about terms of use. I hate them. Almost all software requires you to scroll past a wall of text of questionable legal value before they can use it, and everyone knows that that thing is out there to protect the software maker, not the user. ! But I think we can use that to our advantage. (CLICK NEXT)

72. See, because most people are aware about that pattern, we can twist their expectations. In this screen you see the code of the contract we are about to create. A terms of service is a text written in a special language that is almost like english, which defines the future interaction between the users and software maker. Even when the user ignores it, he knows that it is there for a reason and that there are people out there who can read that and check it’s legality. ! This is almost the same thing: it’s almost, but not quite, english, and this code defines future interactions between users and themselves. Even if he doesn’t want to read it, the user will be aware that someone, somewhere is probably reading. ! Plus, unlike a terms of use, this one is editable. And has a links which will lead you to suggestions on how to tweak it, if you’re so inclined.

73. See, because most people are aware about that pattern, we can twist their expectations. In this screen you see the code of the contract we are about to create. A terms of service is a text written in a special language that is almost like english, which defines the future interaction between the users and software maker. Even when the user ignores it, he knows that it is there for a reason and that there are people out there who can read that and check it’s legality. ! This is almost the same thing: it’s almost, but not quite, english, and this code defines future interactions between users and themselves. Even if he doesn’t want to read it, the user will be aware that someone, somewhere is probably reading. ! Plus, unlike a terms of use, this one is editable. And has a links which will lead you to suggestions on how to tweak it, if you’re so inclined.

74. (CLICKS NEXT) ! Now we define a fee. Again, I tried to explain clearly what this is and what it does.. ! (CONFIRM)

77. Some splines need to be reticulated first… ! (WAIT)

78. Some splines need to be reticulated first… ! (WAIT)

79. And here we are! This is a very specific page, that will allow two or more people to hold money and assets, and take joint decisions on what to or not to buy. There’s probably some option to add more children and even to end the marriage at any point. !

80. And here we are! This is a very specific page, that will allow two or more people to hold money and assets, and take joint decisions on what to or not to buy. There’s probably some option to add more children and even to end the marriage at any point. !

81. So let’s review what we accomplished here We were able to make a complete novice user, create and publish his own app. (CLICK)

82. We allowed him, many opportunities to learn more about contracts, how to edit them and how to use more of them in their daily lives.

83. We got a user to generate a private key encrypted to a passphrase and encouraged him to keep a cold storage of that key !

84. We got a user to pick and manage a collection of public and private keys.

85. We encouraged users to check the hash of a built app against it’s source code, and incentivised them to fork our apps.

86. We even got a user to sign securely and send his own encrypted message without ever needing to signup into any app, without ever exposing their private data or trusting other a blind server. !

87. All of that, without pushing too many technicalities, all without users mostly unaware of cryptographic complications behind that. Because Mist isn’t an app for people who want to play with cryptography, this is an app that gives ordinary people the tools that cryptography and blockchain gives them to make their lives a little easier. ! Thanks!

88. MIST Yell at me here: AvsA@ethdev.com

Mist concept introduction with notes

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to Mist concept introduction with notes

Similar to Mist concept introduction with notes (20)

Recently uploaded

Recently uploaded (20)

Mist concept introduction with notes