NNS dapp towards new UI & UX (including test link)

In last week post about the last milestone of the rewrite in Svelte of NNS dapp, I mentioned that we would share some more details about our plan regarding UX/UI.

In following lines I’ll share some questions and propositions we have about the subject and, in addition to the screenshots, I’ll also share a link to a test version of the NNS dapp that implements parts of our suggestion and goal.


Navigation

As we might add more features to NNS dapp - such as SNS (discussed here) or “node providers” - we might have to add more pages (views) to the app. Therefore we might have to expend the navigation.

However, given the current design of the navigation - “Tab bar” - with do face a limitation.

Indeed, there is no more available space to add further links, particularly on mobile devices (see Figure 1).

That is why we have the idea to replace the “Tabs” with a new “Menu” that can handle countless (or at least many more) navigation entries.


Desktop support

Regardless if we like its design or not, one topic we might all agree on, is the fact that the dapp currently feels like it offers a mobile like experience on any devices - i.e. on desktop too. This is something we would like to improve in the future by proposing miscellaneous improvements to the UI design and user experience.

On one hand, the idea is notably to take better advantages of larger screen by spreading the content in one, two or three pseudo columns according available space. On the other hand, our UX designer (Mischa) also put lots of thought generally speaking on how information and any actions can be presented and executed in a more comprehensive way.

Such goal won’t happen in a short term but we plan to develop and propose next features - e.g. SNS - following these analysis and approach.

To compare current approach and this idea, you can have a look to Figure 2 and 3. Both mockup relates to the “Neurons” page. It should give I hope a more concrete picture of what I meant.


Theming - “light skin”

Nowadays, it is quite common (in my opinion) for a web or mobile application to support theming. Generally two “dark” and “light” themes are implemented. We think that NNS dapp should offer the best experience and accessibility to anyone. As theming is part of such scope, we think we should also propose such customizability.


Summary

  • We propose to modify the navigation from a “Tab” based nav to a “Menu” based navigation
  • The new UI/UX should also offer the best experience on desktop
  • Theming should be introduced to customize design and accessibility according user choice

Planning

  • in next days: we are going to propose the changes related to the navigation (new menu, navbar and split-pane components)

  • in a week or two: we would like to propose the addition of the “light skin” theme

  • on a mid-term: we would like to implement SNS and other new features with the new UX/UI mindset that amend both mobile and desktop

  • as longer-term goal: we would like to iteratively introduce such improvements to existing features too


Sneak peek and test

A demo is probably better than my explanation (:sweat_smile:), so would you like to test NNS dapp new “Navigation” and “light skin” that we aim to propose soonish?

Have a try to the test version we deployed on testnet :hugs:

:point_right: https://7icuz-piaaa-aaaaa-aabca-cai.nnsdapp.dfinity.network/

Let us know what you think, looking forward to your feedback!


Notes

  • the test version uses a test deployment of II, therefore your anchor won’t work. You can use my test anchor 10032 or if you rather like create a dummy one, go for it

  • the test version lives on a testnet - no production data - if you modify anything it won’t affect mainnet


Screenshots, mockups, etc.

Figure 1: Tabbar lack of spacing for more options

Figure 2: New UX/UI mockup (with dummy content) - Neurons tab

Figure 3: “Light skin” mockup - Neurons tab

16 Likes

I like the changes to the NNS UI and UX and I am sure it will evolve. I was not able to login and view the new features but the pics gave me the idea.

I would like to ask a question in relation to the future changes and how it my evolve but I am not sure if my thinking is mislead or just dumb but I would like your opionion.

I did post this before but no one responded.

Should we not have our own internet engine that we login to the NNS where we are not using 3rd parties, that is built on the NNS for future searches on the NNS services?

Err Img

This seems like a job for a community developer. I think kinic.io is building something similar to what you are talking about.

https://74iy7-xqaaa-aaaaf-qagra-cai.raw.ic0.app/

This is awesome, love seeing the UX/UI mockups for the new NNS dapp interface.

My only feedback would be that the UI feels a bit generic and looks like a UI that comes with a bootstrapped project. Since this is the interface for a DAO that governs a billion dollar blockchain network, it would make sense for it to have at least a custom UI skin. Projects like Flower Power DAO and PapyrsApp have very unique UI designs that make them feel special and high-quality. In terms of UX, it seems like you guys have done a great job of designing the interactions. Nothing to change on that end. Thanks for the hard work!

4 Likes

For neurons I wish we would provide more information on neurons people are following. I don’t like that we only have five groups right now. I know the foundation distributes voting across employees but even still we want to have a decentralization factor to how votes flow from the top neurons. If a few people are captured it is not good decentralization. I think a good UI would incentivize people to follow a wide variety of people. Specially if they can see the percentage of voting so they don’t lose out on rewards.

I also think the UI looks very generic. I appreciate the work, but it looks like an early version of facebook. If we are going to rewrite this we need more versions before the community makes a decision. Otherwise we are just doing work that will cost more to remove and redo.

1 Like

I also think nuerons are focused too much on staking/rewards and not enough on governance. We need to focus more on governance as it is the bed rock of the IC.

1 Like

Thank you I was able to login as for community I have suggested it and nothing.

Happy to read you both like to see the new UX/UI mockups of NNS dapp and … the design of my personal app :grin:.

Fair point. I’ll forward your feedback to the team, thanks!

Thanks for the feedback. Mischa, our UX specialist, has put lots of thought in the way NNS dapp handle and display neurons, so I guess the outcome suggestion will be way more handy than current implementation. Will forward your comments too.

My apologies, I did not understand your question.

Can you share the post your are mentioning? Can you try to rephrase, not sure what you mean with “our own internet engine that we login”?

I will work on some designs and see if I can get some ideas across better. I think with all of this we just need more iteration before we do any development.

Can you share the figma link. I want to take a look at all the designs as I think about this problem more and create variants on those designs.

Our files contain lots of design and ux information, therefore we think it is not really a good support for such discussion as it would need quite some guidance at first to get into these. We will share often mockups that we can discuss, it will ease and focus the exchange of idea. Meanwhile of course, your inputs and drawings are most welcomed.

While I have your attention I would like to further expand on my reasoning for why our own search engine may be important.

When the web started we were able to view content then it upgraded to web2 that gaves us interaction and then security was bolted on with the problems we have today.

Just like the IC was redesigned with security first to overcome the problems of the past, we now have the chance to redesign a search engine that overcomes the problems as I see it today.

Searches that can be set to local, state, region or all. This can overcome regions that have security issues and their governments would feel it is in their best interest to clean up local problems and put users in control of their concerns and security.

But most of all the NNS community, which has brought up participation issues many times, would have a project that they can vote on and participate in building this new engine. At the moment I feel like a bystander and can only vote for the system teams which I can follow for rewards.

Give the NNS community a project that they can participate in and turn around this negative rhetoric that seems to only weaken the NNS and then their word of mouth would bring in new stakers

What’s this? Are we getting proposal creation capabilities through the NNS?

It’s a test action that never makes it to mainnet. An action we use to generate test proposal for manual and e2e testing.

Aw shucks, I actually would like a better proposal creation UX. Maybe this gets put on the back burner until we solve the spam issue :rofl:

2 Likes

Thanks for the answer and details. I think I get it a bit better now. To be honest with you, feels like it is not related to this thread as it has to do with user experience and design - i.e. no features per se.

Being said, if I get it right, you are advocating for a secure search engine on the IC. Did you had a look to the Kinic (https://74iy7-xqaaa-aaaaf-qagra-cai.raw.ic0.app/) project? Is that project solving or resolving partially maybe your idea?