Discussion: upgrades to the NNS App focused on eliminating confusing neuron following UX/UI

Governance
1

Disclaimer: I am not a member of DFINITY, nor were any of the proposed changes mentioned below initiated by DFINITY.

Goal of Discussion

To align on solution(s) that will reduce friction and confusion in voting on the NNS with respect to following neurons, culminating in either a NNS proposal or allocated DFINITY engineering time in order to make these improvements.

The proposed changes, refined through this discussion will be evaluated individually as distinct proposals to the NNS/DFINITY engineering backlog, unless all of the changes receive overwhelming support (then only a single all-inclusive proposal will be submitted). Allowing time for discussion, these proposals will then be finalized and submitted in the next 1-2 weeks (March 14-21).

Motivation (Why should I care about the NNS App UI as a voter?)

The NNS App is the defacto UI tool of choice for managing ICP through neurons and staking. As such, the NNS App user experience (UX) passively reflects on the Internet Computer project on a whole, and contributes in part to the confidence existing and new investors have in the broader Internet Computer ecosystem.

Take a look at the dfinity.org or smartcontracts.org (the developer docs), or even this forum in comparison to the NNS Voting UX/UI (shown below with just identifiers removed for confidentiality) - the UX/UI is not close to the same level. While understandably this is not the main funnel point for the IC, the NNS App is the currently the defacto governance app for the IC and financial/investment location for the ICP token.

Many individuals from this forum have been critical of governance proposals that would affect the NNS App not just because of the proposal itself, but because of the complexity and confusion of how those changes would further complicate the UX involved in important financial and governance decisions. This implies that any deficiencies in the NNS App could potentially slow or impede governance changes.

Therefore, NNS voters may find it their best interest to prioritize UX upgrades to the NNS App.

Proposed Changes (Follows from “Background: Issues” section below)

Note: reference screenshots from the NNS App are shown in the Issues section

1a. Issue: User is not easily able to find the UI for following a neuron

  • Provide an indication to the user directly from one of the top level tabs (“Neuron”, “Voting”, etc., not hidden behind clicking on a neuron) on how to view and interact with setting up followees. Solutions could range from modifying the Neurons/Voting Tab page UI to as creating a FAQ/Getting Started Tab, and providing a link to documentation (i.e. answer from an official DFINITY site).

2a. User is unable to see the voting rewards associated with a type of proposal (i.e. Governance vs. Exchange Rate)

  • Add next to each of the governance topics a weight proportional to the reward received from voting on a proposal for that topic. In addition, some sort of informational element should be added to allow the user to understand what that value represents.

3.“Follow Neurons” overlay window UI (shown below) is misleading
a. Nesting level of topics is misleading

  • Create an expandable list, reorganizing the Follow neurons topic hierarchy UI so that only “All Topics Except Governance” and “Governance” appear at the top level of the topic hierarchy. “All Topics Except Governance” can then be expanded to show all topics encompassed by this top level topic (“Exchange Rate”, “Network Economics”, “Node Admin”, etc.), and then collapsed to hide those second level topics.
  • The selection of followees functionality will remain the same as is currently, in that all followee selections made for a top level topic will apply to any second level topics unless a different selection is explicitly chosen for those second level topics. This change to the UI solely aims to better demonstrate that hierarchy.
  • Below is an example of an expandable list. Imagine “All Topics Except Governance” and “Governance” at the top level, with a “^” or “+” button next to “All Topics Except Governance” indicating that topic is expandable can contains multiple second level/sub-topics, while no such button appears next to “Governance” is it is not expandable
    android-expandablelistview-example

b. Number of followees next to each topic is misleading

  • Fixing the topic hierarchy (as stated in proposed change 3a) should partially fix this confusion, but the followee number assigned to each top level topic should apply and show next to each of the second level topics unless explicitly overridden

4a. Links in the NNS App do not work (copy/paste required)

  • To better address FAQ and provide NNS user documentation resources, as well to easily view a forum discussion associated with a proposal, functioning links to relevant DFINITY controlled resources (governance proposals, NNS related documentation) should be added to the NNS. To prevent malicious links from being added to NNS proposals, a simple parser can ensure the proposal link is from forum.dfinity.org, and a CORS policy can be enabled to prevent resources being loaded from unwanted domains.

NNS_Neurons_tab_UI_anon
NNS_Neurons_tab_UI_anon1198Ă—936 105 KB

Background: Issues with the Current Voting UI

  1. User is not easily able to find the UI for following a neuron
    a. Setting up a followee from the “Voting” tab is not possible, and a UX flow for doing so is not directly visible from the “Neurons” tab. Following a neuron involves clicking on an individual neuron from this page and then setting up followees, and is therefore hidden from the user.

  2. User is unable to see the voting rewards associated with a type of proposal (i.e. Governance vs. Exchange Rate)
    a. User has no insight into the weights assigned to each of the proposal types, and is therefore unaware of which proposals they would benefit the most from voting on

  3. “Follow Neurons” overlay window UI (shown below) is misleading
    a. User sees all of the topics at the same nesting level (i.e. “All Topics Except Governance”, “Exchange Rate”, “Network Economics”, “Governance”, “Node Admins”). Regardless of the description below each topic, this UI decision gives the impression that “All Topics Except Governance” is at the same hierarchy level as the rest of the Topics.

    b. User currently can see a number next to each topic representing the number of followees for the topic. Upon selecting neurons to follow for “All Topics Except Governance”, none of the numbers update for the other topics except “Governance”, which is misleading since each of these topics are at the same hierarchy level.

Follow_Neurons_UI
Follow_Neurons_UI694Ă—784 75.9 KB

4a. Links in the NNS App do not work (copy/paste required)

9 Likes
2

These are very reasonable suggestions and I agree they would be improvements for end users. I can think of two other changes I’d like to see, which you are welcome to include if you think they fit with the goals of this proposal.

  1. enable the user to assign text based names to neurons and allow the user to customize the order in which neuron appear on the neurons tab.

  2. improve the login experience by reducing the number of clicks required.

4 Likes
3

Great ideas, but I’d like to keep the work in this specific proposal focused on updates that just require changes to the NNS App frontend, where no additional backend work is required (i.e. storage, additional user specific data storage/relationships, changes to authorization/authenication flows). That’s usually a much heavier lift for an engineering team.

This would be a nice addition, although I see this as not just a UX/UI (frontend) change, but a change to the backend as well, requiring the NNS App to store associations between neurons and identifiers.

An additional complication is that although neuron IDs are uniquely identifiable, enforcement that their nicknames are unique as well is trickier, and would either need to enforce this requirement as well, or create profiles based on the account principal logged in (more backend and data storage work/costs for the NNS).

I think we would all love this idea, but this is work is also more backend focused, and would require significantly heavier lifting.

2 Likes
4

Fair points. These ideas will just need to wait for another day. Thanks for taking the initiative to formulate your ideas into an actionable proposal and engaging the IC community in deliberation. I think they will be great improvements.

2 Likes
5

This discussion welcomes any additional feedback. If there is no additional input, I will be publishing the “Proposed Changes” section (as is) as a proposal to the NNS a week from today.

2 Likes
6

Hi, lots of cool idea in this thread :+1:. I am part of the team that works on rewriting nns-dapp. We are currently porting the Flutter dapp to Svelte. In this process, we stick to current UI and UX with few minor improvements. However, for the future, we also have the plan to improve the UX. In this vision, we actually share lots of the points you mentioned. We will share the progress in several blog posts beginning with the one that has just been published here on the forum. I’ll also forward your ideas to my colleague in charge of the UX.

3 Likes