This document provides guidance on designing user interfaces for decentralized applications (Dapps). It discusses 6 key principles: 1. Understand the underlying code to suggest improvements and ensure the interface properly translates it for users. 2. Focus on doing one job well rather than building large complex interfaces on decentralized networks with transaction fees. 3. Use open source fonts that can be freely redistributed to avoid reliance on third parties. 4. Employ grid systems for consistent and aligned layouts. 5. Constantly test interfaces with users through tools like usabilityhub.com and invision.com. 6. Keep users in control of their own data and funds rather than holding it centrally.

1. Build a DApp:
Writing Contracts
Christian Reitwiessner
@ethchris

2. Selling over the internet without an intermediary
What could possibly go wrong?
AliceBob
$

3. $
Buyer is a scammer
Bob Alice

4. Bob Alice
$
Seller is a scammer

5. Bob Alice
$
Use an escrow intermediary
Escrow is a scammer.
Escrow

6. $
Original idea: Oleg Andreev
Two party escrow
Smart
Contract
Bob Alice

7. $
If there’s no buyer, seller can still cancel the sale
1. Seller puts 2x deposit
$
$
Smart
Contract
Bob Alice

8. $
2. Buyer puts price + deposit
$
$
He knows the contract can send the deposit back
$
Smart
Contract
Bob Alice

9. $
3A. Buyer receives product
$
$
Legitimate transaction
$
Smart
Contract
Bob Alice

10. $
4A. Buyer confirms they received
$
$
Buyer gets deposit back, seller gets deposit + sale
$
Smart
Contract
Bob Alice

11. $
3A. Buyer not satisfied with product
$
$$
Smart
Contract
Bob Alice

12. $
4A. Seller refunds buyer
$
$
Or the money get stuck until they resolve it
$
Smart
Contract
Bob Alice

13. Let’s implement it!

14. Build a DApp:
Design Principles for Dapp Developers
Alex Van de Sande
@avsa

15. What's the job of a user
interface designer?

16. The purpose of the interface is to
translate the code to the user’s screens

17. The purpose of the interface designer
is to be the translator between the
developer and the end user

18. Understand the code
1
It might not be your job to develop it, but it’s your
job to understand it and suggest changes if needed

19. function Purchase(_buyer)
require(msg.value % 2 == 0)
{
seller = msg.sender;
buyer = _buyer;
value = msg.value / 2;
}

20. Seller announces price
Buyer answers intent to buy
Seller deploys contract and
communicates address to buyer
Buyer sends money to contract

21. function Purchase()
require(msg.value % 2 == 0)
{
seller = msg.sender;
value = msg.value / 2;
}

22. Seller deploys contract
with price information
Buyer sends money to contract

23. function abort() onlySeller inState(State.Created)
function confirmPurchase() inState(State.Created)
function confirmReceived() onlyBuyer inState(State.Locked)
function refund() onlySeller inState(State.Locked)

24. abort
confirmPurchase
confirmReceived
refund
onlySeller
onlyBuyer
State.Created
State.LockedonlySeller
State.Created
State.Locked

25. abort
confirmPurchase
confirmReceived
refundonlySeller
onlyBuyer
State.Created State.Locked State.Inactive
anyone
- -
-
--

26. Created
STATE
ASSEENBY
Neither
Seller
Buyer
Locked Inactive


CANCEL SALE
CONFIRM RECEIVED
BUY 10 ETHER
REFUND BUYER SALE DONE
RECEIVED
SOLD OUT SOLD OUT
Returns you 20 ether
To unlock 10 ether in security deposit
+10 ether in security deposit
Returns you 10 ether

27. Don’t try to do too much
2
You don’t need to build a giant web portal. On a
decentralised network you can make fees from
doing one job very well

28. Use open source fonts
3
Don’t rely on third party sites. If you want
to escape the default system fonts, use
fonts that allow redistribution.

29. Source Sans Pro
MONTSERRAT
Roboto
Cooper Hewitt
Source Code Pro

30. Use grids
4
That applies everywhere.
Always use grids.

31. 32px
18.4px
Width divisor of
320px,
480px,
960px,
1024pxHexagon
grid allows
alignment of
circles

32. Test. Test. Test.
5
Get constant user feedback by creating
small and constant user testing

33. usabilityhub.com
invision.com
Quick user testing tools
Whoever is on the office

37. “Describe the image as
you remember it”

38. “Write five substantives”

39. “Write five adjectives”

40. “What does that
represent?”

41. “Describe the image in
your own words”

42. “Describe the image in
your own words”

43. Keep the user in control of his data
6
You don’t need to hold customers
funds or data. Let the user keep that.

44. Mist keeps the user in control of authentication and privacy