aragon / design

UI/UX designs for the Aragon client and associated apps
Creative Commons Zero v1.0 Universal
30 stars 5 forks source link

Aragon Identity app #5

Open jounih opened 6 years ago

jounih commented 6 years ago

While de facto identity standards/providers for Ethereum are still forming, we need a lightweight Aragon Identity app for human readable identities with some metadata (Avatar image, ENS domain, name and about).

The intent is to have a UI where the underlying implementation can be replaced with a standard once one has matured.

The design also includes an optimistic "pending" UI state while an on-chain tx is being mined, with the "pending" portions at 50% opacity.

The "pending" loader animation also has a popover on hover which gives the user an estimation of the transaction time, and the ability to increase gas and resubmit the action if the time is deemed too high.

The idea is to use the same UI pattern elsewhere in the Dapp for all on-chain transactions which are being mined - analogous to use of loader animations for HTTP requests in non-blockchain applications, with the difference of latency being higher on the blockchain and tx result being less determined.

Clickthrough prototype:

https://invis.io/S9MX8OIT8MV

My Identity - empty state webapp-1366px - my identity 2x

My Identity - filled webapp-1366px - my identity filled 2x

Organisation identity webapp-1366px - org identity 2x

Organisation identity - filled webapp-1366px - org identity filled 2x

Post-tx signing pending state - optimistic UI webapp-1366px - org identity pending 2x

Pending indicator hover popover - approximate tx time and Etherscan link webapp-1366px - org identity pending popover 2x

Low gas - resubmit tx webapp-1366px - org identity pending gas low 2x

Pending tx loader animation aragon-ethereum-animation2.svg

adamstallard commented 6 years ago

Is this just a design at this point, or has any code been written yet? This would be a great integration point for BrightID. (See the nest proposal @mariapao linked to.)

jounih commented 6 years ago

@adamstallard still design at this point, I think some solidity code has been written before for this but if the timelines with BrightID work it could be very nice. @sohkai what do you think?

luisivan commented 6 years ago

Stellar work

sohkai commented 6 years ago

@adamstallard we have some contracts written for the ENS integration, to make sure users have ownership of their ENS name. Apart from that, most of the metadata will likely just be held in an ENS txt resolver, and likely in a schema.org Person as a JSON-LD blob.

adamstallard commented 6 years ago

Thanks @sohkai . I think the contracts you're talking about live here https://github.com/aragon/aragon-id is that right?

sohkai commented 6 years ago

@adamstallard Yes, aragon-id is the one!

adamstallard commented 6 years ago

Will there be a way to view someone else's identity--or is this just a vanity thing :) ?

adamstallard commented 6 years ago

Is the idea that there will be integration points throughout other Aragon apps so that if you click on an address or pseudonym, it will bring you to their identity page and let you view their profile? This view profile page would be the ideal place to show someone's BrightID badge with trust score that shows they're human and unique.

adamstallard commented 6 years ago

I just wanted to say that we took this design so far to think about how we might integrate BrightID into Aragon-ID and put our thoughts in the pull request https://github.com/aragon/nest/pull/63

mariapao commented 6 years ago

That is great! :) cc @sohkai @lkngtn

sohkai commented 6 years ago

@adamstallard So it's meant to be shown along side the AddressBadge component: https://github.com/aragon/design/issues/3.

Right now these IDs have been designed to be "locked" to the respective organizations and personal identities, but they could easily be modified in design to show anyone's (one could imagine an address / ENS name input field that refreshes the view based on what information it can grab out of the ENS txt record).

sohkai commented 6 years ago

@adamstallard The updated Nest grant looks fantastic! I'm not sure exactly how we'd architecturally integrate BrightID into the identity yet, but it could be as simple as having a BrightID registrar contract that we look up in the frontend.

adamstallard commented 6 years ago

(one could imagine an address / ENS name input field that refreshes the view based on what information it can grab out of the ENS txt record).

@sohkai Yes this sounds really good. Basically a screen or tab for viewing the profile information linked to an address. If there's nothing in ENS, the screen would be mostly empty, which is o.k. That would be where we'd integrate the BrightID badge.

Thanks for the suggestion about the registrar contract. I had a long brainstorm with @abramsymons and came up with this basic architecture doc for linking a BrightID to an ethereum address used in Aragon. I also pasted it in the pull request.

stellarmagnet commented 6 years ago

I'm thinking a lot about identity related things today as it relates to some Planning app features too.

One thing that came to mind when reviewing this design is the UX for the "Pending transactions". I think that the information in the popup could easily be displayed within the page, so I would suggest to not go with the popup as the design pattern and instead show it within some informational-like block directly inside the page.

For example: once I submit a transaction, I will for sure want to know the state it is in, and not have to keep clicking the button to open the popup. Also, is it possible to include a cancel action, instead of only retry? I can see myself canceling if I realized i had a typo in my identity. (Edit: I guess this is a blockchain limitation that cancelling wont be possible though, right?)

Here's a quick mockup I made of an inline version. The colors and other styles are not perfect, but something I thought of quickly that was close to the popup, but more space-saving.

image

Also thinking about Pending Transactions generally, is there a plan to have a "Transaction Manager" somewhere, similar to how a Web Browser has a "Downloads Manager", bc I also can't see myself waiting on the Identity page for like 3 mins, but I could see myself wanting to know when the transaction is done. Maybe similar to how there is a bottom bar on browsers that shows a slim version of the download progress, may want to update aragon.js wrapper to have a bottom status bar-like component where pending or recent transactions are always just listed there, but can X it out to close.

luisivan commented 6 years ago

Curious to know what @jounih thinks, thanks @stellarmagnet! We thought about the transaction manager as a notifications panel with an icon in the top left, next to the Aragon logo