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 (
), 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 
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
.
