Help us steer development in UX/UI by commenting on the Ethereum forum.

This video provides an introduction to Mist, the Ethereum browser. Mist was designed to be the gateway for users to interact with the Ethereum network, providing a user-friendly interface for:

• Browsing and managing Ethereum accounts
• Interacting with decentralized applications (dApps)
• Exploring the app catalog
• Participating in crowdfunding campaigns
• Bridging traditional web applications with Ethereum

Transcript

[00:10] SPEAKER_00: This presentation is about 30 minutes long and we're going to be explaining what is it that we're building, and I hope you like it. Before we start, I'd like to emphasize that everything I'm about to show you is just a vision, not a roadmap. Jeff wants everyone to be completely clear that this isn't what they're promising to deliver on the Genesis launch, as many of those concepts might be some years ahead, but it's definitely the direction we are heading. The Mist browser to be launched at Genesis will be a step in this direction, albeit a small one. But we are not committing or promising any particular feature. We are just showing your vision for the project.

A lot will change as we go the path together and as we gather your feedback on what is your vision of Ethereum. Because after all, you need to know where you're going in order to go. But we also believe that software should fit deadlines, not the opposite. So we will be building the best we can until winter, and we'll continuously evolve from there. And the community feedback on which of those things you want will certainly influence our prioritization. So please, please, please, feedback is welcome. Reddit is there, Twitter is there, and the forum on ethereum.org. I'm on all of them as AVSA.

So, first of all, what is Mist? Mist is the new name for the Go Ethereum, also known as the Ethereum dapp browser, the Ethereum interface. But why, why are we building it? What's the purpose? Mist is the end user interface for Ethereum. If you're not a cryptographer, if you're not a developer, and you just read about this Ethereum thing in the Sunday paper, I hope you download Mist. It's the first experience that users will have of the whole concept. So it's incredibly important that we get it right.

So how should it look like? Something I'm told quite a lot. Why are you even building a browser? Let's simply fork Chromium, do a browser plugin. It should look exactly like a browser. Okay, so let's start by doing that. This is Mist being a clone of Chrome. Top tabs, big navigation link, all the rage. You can already see the 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 space smaller and use a combination of side scrolling and cutting off text. There's barely any space for the title, even less for any extra information. I mean, it might work for browsing the whole wide web because you're expected to open dozens of new tabs. But for Ethereum this is not the case.

Tabs are navigation helpers. They're disposable. You open dozens per session, they have no space for further information. Ethereum dapps are apps. They are software. You might be keeping important assets there, you might use it to keep track of critical information. So let's just rotate everything, let's just put the tabs on the side. It allows you for more space for the title. And if there are more apps than that, we can just use it in a vertical, more natural scrolling. And with this extra space we have room for extra information so we can add a second line of data and maybe even a badge.

I mean users know this. This is a sidebar. It's how you pick your disk in Mac. It's how you pick your inbox in Gmail. On the top right corner we have add new app, search, and settings. This is one example of the things we can gain when we break some older modes without too much of a cost in user familiarity.

But I think there's a bigger point in here which is one of perception. We did not create this great thing just to build a browser plugin. Ethereum is a new platform and I don't believe that we can reach its potential by trying to retrofit some old concepts inside it since the beginning. If we sell ourselves as an alternative browser, then the standard that we will be judged upon is, is this better than Chrome to go on Facebook? If you give them a 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.

We don't want the user to think of Mist as a browser for Ethereum because it's not. Instead, it's better for him to think it as a workbench, as a Swiss army knife, a collection of tools, blockchain tools, encryption tools, decentralized tools, all packed away in a way that allows non-technical users to take advantage of them. 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. We want him to visualize the stuff he can do.

Which is why I believe that one of the first screens should be about what you can do. We are seeing a page inside the app catalog. I imagine this as the first screen a new user gets to see. So instead of explaining what Ethereum is using video or text, I'm just showing you a bunch of stuff. Am I encouraging exploration? Those categories come from a community survey.

Make Safer Business are contracts that involve only a few parties, peer-to-peer contracts. New Societies are for all kinds of experiments on DAOs and similar. Money Together are apps that are more useful as more users pool their money inside, like exchanges or insurances or trustless crowdfunders. And there's a general category of Information is Power where I've put multiple apps whose purpose is to trade purely on data. Betting markets, CPU markets, insurance for the final users.

Those are not apps, those are not websites, those are not software, those are actions. Those are examples of things of what they can do in Ethereum. In a glance they understand what they can do with Ethereum that they cannot with a common browser. For developers or more advanced users, those can be seen as sample code, very basic apps, all open source to encourage innovation and kickstart new app development. Those are built both by the dev team and the community at large. They will serve as templates, having assets, and so if you want to build a new app, you can just find the one that's more similar to the one that you're building and you can fork it.

This button on the top left is what I call the app button. It contains specific app action specific. I haven't defined them yet, but here is where they will display information about the trustability of the app, actions you can do with that app, etc. If the app has published its source code, it's where we will link to the Git.

Finally there's an integrated URL bar. Upon tab or hover it becomes editable so you can change it. Game, I'm testing it. I'm not 100% sure it's a practical idea. Below the header you can see the main navigation tabs. Since the page won't change much in these areas, this user could find new and upcoming tabs. It's app specific. It's integrated in the header. This header integration things allow more space for the screen to be dedicated to the app because you're taking very common tasks and integrating everything on the browser. Chrome has some issues with browser backwards compatibility so I'm still considering it. Maybe you just allow this for Kitty-based apps.

On the sidebar you can see our favorite apps. Those are bookmarks. Buddhism enhancements. One of the proposed uses for Ethereum is to allow you to keep track of all kind of data about the world that you can't see otherwise. This might mean the price of some currency, the price of some commodity, might be the possibility of something happening that you might not be otherwise known because dapps, they allow you to provide a financial incentive and some anonymity. Or maybe you just want to know your health in real time. So the second line of information, the apps are there for that reason, but it also allows a more full, more immersed experience.

This is the dashboard. It allows all the apps you have taken and the apps that you have saved. It standardizes a few basic kinds of data type: time-based, map-based, table-based, etc. And then it displays it in standard views. These interfaces aren't created by the app developer. He just picks some kind of more appropriate data type. And of course those can span in the future.

One big advantage of having that is that it supports, of having all apps support a common simple output, that it makes integration with the Internet of Things very easier, a lot easier. In the browser, for example, a number might be displayed as a real-time updating ticker graph. Put in a smart lamp that could pick the same data and output it as a color. Or a smart sound system could make it into music. So this allows Ethereum use cases to be expandable to wherever the developer wants to take them.

Let's see more examples of how developers can build apps. I want to show you not the apps themselves, but the building blocks that we are envisioning. So let's pick the Crowdfunder app. Notice that the icon here has changed from the app icon to an alert icon. It's because that particular app has not published its source code anywhere, so we can't really audit it and tell you what it does. But notice that this is the default mode of production on the web. You have to just trust blindly the app provider, the third-party client. But in Ethereum we want to alert the user of any possible breach of trust.

So let's build a lighthouse together. Again, I come back to the menu button. Here's a good advantage of having the frontend know about the backend. If the app is open source, we can link to the source code and allow you to quickly clone anything you see. It's great for many reasons. Of course it's for advanced users. But first of all, it encourages active development of apps. Also, it increases reliability. If many people are running slightly modified copies of a code, then the chances that if one goes down, the others will be there to take part.

Of course, it's more for the more advanced users, supposed users and developers. But there's a subtle hint there, which is that this button saying "fork me" is in some sense, here's an opportunity to make money here. It is a very simple crowdfunding app that has 0% profit for any developer, yet many people are using it. If you have a good idea of how to improve it, you can simply fork it, add a small fee going to you, and you put it live. The advertisement for you to be an entrepreneur, and maybe learn more or hire someone who can do it. And do it.

I don't want to present the app itself. I want to talk about elements that we use to make apps. Most of those elements are commonplace. You have an image, a title, a text box, an explanation. You have a text area and you have a submit button. But wait, what is this? This is the point in a normal web where you'd be asked to sign up, create a username or login, or maybe sign up with your Facebook credentials. And this is also where the app starts collecting information about you and they store it on their servers. So it's where your information gets out of your control on their normal web.

So here is how we are trying to take a different approach. This is a private key picker. It lists all the profiles you have saved locally for which you can use a private key to sign in. It's a rather advanced and important step. You're choosing which key to use in order to sign a message that you'll be sending privately. But for the final user, you're just picking among three profiles. It's easy. In this case, I want to send a message not as Jane, but as a small bike shop she works for.

Now we are ready to submit a message. 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 next time. It's here to ensure that the interface is not lying, that the message that you are about to send is the same that you just typed before any irreversible action. Mist should always confirm the users about his intentions.

Okay, hit send. Okay, now. Well, again, I don't want to give $100. Let's just change its donation. Click donate. And again, this is the confirmation dialog. You did not need to pick an identity again because the app is assuming that you'll be using the same. But it's up to the developer. But also the user can change the origin of the funds.

This is a wallet picker. It's another interface element that's made for Ethereum. It lists all your public profiles and the wallets from which they can send money from. They're not necessarily equivalent to Bitcoin addresses. They're just a way for the user to better manage their funds, as maybe many of those wallets have specific limitations by their given contract. So, for example, you cannot donate from the employee salary, you cannot take out from the pension fund unless you are one of the authorized providers.

Okay, now I just pick it from the stipend sent. Done. Now, we've done some very advanced tasks here, but we've sent an encrypted message to an app. We've 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 very transparent to the user.

But I think I would like to take some bolder steps now, because the crowdfunding example is very like a traditional web type. It's a service created by someone else, maintained by a third party that you choose to use and trust. But Ethereum is really about allowing direct agreement between peers. And so it would be amiss if people couldn't create a small app intended for a very limited set of users. And I think no example is more appropriate than a marriage, than a wedding.

A marriage is a contract between two parties that involves other parties, their children, their family, and that it should only matter to the people who are involved in that contract. So let's do that. Let's create a family trust. What is a family trust? It's a joint account that allows two or more people to share assets and take decisions together about what to do about the assets and money. And it allows automatic inheritance for the family, for the rest of the family, to the children or other extended family in case something bad happens on one of them.

I think it's a great example of why someone who was never interested in cryptocurrencies might use our software. Because they care about privacy and they care about having control of their own private property. Let's select the 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 kids, but also friends and contacts. So Jane selected herself here for a second partner. Let's pick Zach. And just like that, he just became the first place ever in the world to legalize truly equal marriage between human and robots.

Now let's choose an heir. What is an heir? An heir is a profile that works both as a backup, but also as an automatic inheritance system. So you can leave your assets to your small children. But here's the problem. What if your children are too small? You could theoretically download it to a new computer that has never been on the Internet, create a new identity in the name of your newborn kid, and keep it in a USB stick for 20 years. But really, what's the point of the whole system if you're just sending transactions within yourselves?

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 them over the phone how to create a private key and send the public key over by email? There was an app not long ago, I don't remember the name, that promised to be a social network only for your most intimate friends. You know, the biggest problem with that is that my most intimate friends are not the ones trying out new social networks and new apps. So the people who I knew that were using the app were my colleagues, people I had nothing intimate to say.

So that's the problem. The people you want to do business with and want to share intimate things with are not necessarily early adopters. How do we solve this conundrum? To solve this, I'm proposing what I call an invitation token. So how does that work? An invitation token is a temporary transaction that can only be redeemed once. It's protected by a secret key encrypted by a secret question, answer, passphrase.

So you just go here. Instead of choosing a profile, choose invite new. You put the name of your partner so you remember it. You type a question or a hint or how to get the answer. And type the answer, you type it twice for security. This creates an image or some other simple file with encrypted keys. Now, you can send these files through an insecure connection like email or social network, and then, if they don't know already the answer to the private passphrase, you can give them separately via email or via postcard and whatever.

Now, something very important here is that it never expires. So you could keep it printed on a paper in a safe, or you simply can give it to a loved one via postcard and ask them to hold it until the time is appropriate. And the only instructions that you need are just download Ethereum, drag this file on that and type the secret phrase, and bingo, your assets are safe.

There's an extra advantage that I think is so important I think it's worth mentioning. It creates a viral loop. As a user you have an incentive to send files to people who haven't downloaded Ethereum yet. Maybe because you want to do business with them and you want to send them scroll transactions, maybe because you want to have your five closest friends as password recovery, as backup options, or anything like that. What is important is that it stimulates every user to invite other users to be part of this network. And it creates a slope not because it's creating artificially like in a social network asking for donations, but because it's useful, because it's important, because people can see what it's for.

We're almost finished with the app now. We can add an optional maturity date so your heirs can only unlock their account after they are 15 years old or 16 or whatever. Now let's write a title, let's change the icon. I think we are all set up to create a marriage contract.

But before we go to the next part, I want to talk about Terms of Use. I hate Terms of Use. Almost all software requires you to scroll past a wall of text of questionable legality before you can use it. And come on, everyone knows that that thing is out there to protect the software maker, not the user. But I think that we can use that to our advantage. People expected pattern, we can twist their expectations.

In this screen you see the code of the contract that we are about to create. It's very similar to a Terms of Use. A Terms of Use is a text written in a special language that is almost quite like English. But it's not English which defines the future interaction between the users and the software maker. Even when the user ignores it, he knows it's there for a reason. There are people out there who can read it and can check its legality.

So the code, reviewing the code is almost the same thing. It's almost, but not quite English. And it defines future interactions between the users and themselves and their peers. And even if he doesn't want to read it, the user knows that there's someone somewhere that can read it and that maybe he can hire to read it. Plus, unlike Terms of Use, this one is editable and it has links leading to suggestions on how to tweak the code and how to learn more about it if you're so inclined.

Now with the final theme again, I always try to explain clearly what's happening, what are the consequences of changing the fee, the confirmation dialog before any irreversible transaction. You always have to confirm. Now, some splines need to be reticulated first. And here we are.

This is a very specific page that allows two or more people to hold money and assets, take joint decisions, what to buy, what not to buy, what to sign up for or not. There's probably some option up there to add more children, to add some extended family member, and even to end the marriage at any point if both of them agree.

So let's think, let's review what we accomplished here. We were able to make a complete novice user create and publish his own app without ever needing to ask permission of anyone. Even without having to learn about programming. We allowed him many opportunities to learn more about contracts, how to edit them, how to use them more in their daily lives. We got a user to generate a private key encrypted to a passphrase and encourage him to keep a cold storage of that key. We got a user to pick and manage a collection of public and private keys. We encourage users to check the hash of a built app against its source code and incentivize them to fork our apps and learn more about being a developer.

We even got a user to sign securely and send his own encrypted message without ever needing to sign up into any new app, without exposing their private data or trusting blindly a server. And out of that, without pushing too many technicalities, without exposing, making the user unaware of the cryptographic complications behind all that.

Because Mist isn't an app for people who want to play with cryptography. It's an app that gives people, ordinary people, the tools of cryptography and the blockchain to make their own lives a little easier, more powerful, and more decentralized. Thank you. I hope you like it.