search

aragon / design

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

Notifications and popovers #16

Open luisivan opened 6 years ago

luisivan commented 6 years ago

Right now we are thinking of using popovers and notifications to inform the user about the status and progress of transactions.

The problem is that having two different sources of information for the same thing can be confusing. I have a couple thoughts to share about how to balance this.

Mix popvers and notifications

When a user is inside an app performing transactions, the popover provides very useful feedback on the transaction. That's great because the user doesn't have to open the notifications panel, although both the popover and notification info would be a click away.

If we user stays inside the app, we could just render popovers and not have any notification. However, as the user goes to another app, the popover could transform into a notification. However, I think this is not the best because:

Use notifications only

We could still provide the user with some feedback when performing actions, such as the Save button being changed to Transaction pending..., but when the user clicks to see the action progress, we would open the notifications panel and highlight the relevant item. Similarly, it would be great that if a notification is clicked, we could direct the user to the relevant app and highlight the relevant UI item that caused that notification (e.g. the Save button). But I'm guessing that wouldn't be easy to implement.

Any other ideas?

izqui commented 6 years ago

I support having pending actions in the notifications panel first, as it will bring the benefits to all Aragon apps without any changes.

I don't think highlighting the UI item that caused the transaction would be very hard, but I'm not sure it would be really useful, as users probably remember where they originated the transaction (if it is properly described). For most users it will probably be more useful to be able to see the transaction in a block explorer than taking them back to the app UI.

After the transaction has been mined, then clicking on the notification could link them to the side effect of the transaction. This is quite important as we could take them to the Voting app for example if their intent created a vote because it couldn't be performed directly.

sohkai commented 6 years ago

I like the idea of popover "toasts" for non-intrusive in-app contextual information, even if they're not related to a transaction from the user. It would also be nice to have a visual way to explain to the user that the app's state has changed if they didn't initiate the action (e.g. a new vote from someone else, a deposit was mined).

It's important for the notifications panel to show all of the current user's outgoing transactions, and we could potentially have another tab / filter that shows all transactions related to an organization, but it's still a click away and would be distracting to the user to reach for.

Similarly, it would be great that if a notification is clicked, we could direct the user to the relevant app and highlight the relevant UI item that caused that notification

I think rather than highlighting the UI item, it would be best to direct the user to the "optimistic state" that will be mined (e.g. show the new vote that will be created, the new deposit, etc.).

bpierre commented 6 years ago

I see it as two very different things.

First we have the notifications panel, as a unique “source of truth”. It is managed by the wrapper and should display all the transactions related to the current organization, from the apps or the wrapper itself. When a user signs a transaction from an app, the only visible change should be the badge number on the panel icon, and optionally the color of the badge (see https://github.com/aragon/aragon/issues/117 for the proposed rules), since the panel itself is hidden at this point and should not attract the attention. But if the user is not sure about what is happening, this is where the pending, failed, and successful transactions should always be. I also think that we should rename the notifications panel to something like “journal”, or just “transactions” (if we exclude any other notification from this panel), or something like that.

Then, we have different representations of the state of a transaction in app context. It encapsulates various things, like items in pending state (“optimistic UI”), UI changes like disabled buttons, or the use of toast messages to represent events if needed. In other terms, anything that an app author can do, depending on the context, to give more feedback to the user. These solutions are specific to each app and can be challenging to implement, and might only partially solve a problem because of their nature. For example, a vote can be created from outside the voting app, or some UI representation might depend on several transactions, or the result of the transaction might be unknown until it is actually executed. I think we should improve and promote these solutions by using them in the core apps, but they should be made optional: we don’t want users to rely on apps to know what the state of a transaction is.

but when the user clicks to see the action progress, we would open the notifications panel and highlight the relevant item.

Totally agree with that, we should be able to “open a transaction” from the panel. That would open the relevant app, and send it back some data initially attached to the transaction. If the app doesn’t implement anything, it would only do that: opening the app. But if an app is making use of this data, it can offer a better way to show a representation of the transaction, by highlighting an item as you suggested (in a failed, pending or successful state), opening a page representing a created item, or anything else.

jounih commented 6 years ago

Design for toast component for quick notifications (for instance a confirmation message after an interaction with the UI, like saving preferences)

https://github.com/aragon/aragon-ui/issues/215#issuecomment-429263808

Design for activity panel for showing list of user's transactions in the currently viewed DAO, and the status of those transactions.

https://github.com/aragon/aragon/issues/117#issuecomment-430980075