kukai-wallet / kukai

Web wallet for the Tezos blockchain
Apache License 2.0
182 stars 100 forks source link

🧽🧼 NEW UI / UX FLAWS #169

Open babycommando opened 3 years ago

babycommando commented 3 years ago

First of all, I as a designer and Ui/UX designer, stand here as a user, with a manifesto.

FIRST STATEMENT: COLOR

The world is loosing it's color. All grey everywhere. From grey cities to grey skyes of Co² on the atmosphere because of climate change. Grey systems, grey rooms, grey life. Sometimes we just need a deep comfy, calm blue, the one that Kukai had at first.

We don't need more grey in the world. But we need design. Colors have emotions, their own psychedelic, psychological meanings.

SECOND STATEMENT: HYPERREALITY AND HYPERINFORMATION WORLD

We are bombarded with information daily. Right now you might have at least 10 tabs open in your browser, music spinning, instagram, facebook, twitter and all that. What you need when you open your banking app? See how many moneys you have in there, and that's all for most of us. The rest is secondary information, that don't need to be competing with other components.

This will actually break a natural cycle of opening your wallet and keep coming back. This may present a major loss in users, as they search for simpler tools for do what they want, quick, fast and without being bombarded with unnecessary information.

Statements made, we procceed to the actual design concerns;

### FLAW 1: Too Big Some people need glasses, I understand that! XD But! But, not all of us does. Size is in matter of fact a gamechanging in all apps. If something is out of size, everything becomes chaos, specially CSS. Font sizes; border radius; buttons and it's shapes/positions.

1A. Navbar Size Starting from the beginning, the navbar. The navbar REALLY need to have almost like 6 lines of text? The logo is astonishing, but too big makes it all too noisy. Maybe moving the "STAKING:" component would already make some difference.

1B. Navbar Icon Colors These really don't match the Kukai visual ID. They should have the same color as the "send" button, or even the logo maybe. This dead gray gives me sad feels :/ specially that arrow on the wallet dropdown button. Let's try something more alive? And pastel! haha.

1C. Navbar Icon Border Colors, Radius and Existance Why making borders? They really need a border? Why not "glowing" when hovering? Color changing the button background would give a smooooth UX feels, not only that boring text that appears under.

2. WHERE IS MY BACKGROUND? I miss blue. I really can't look for so long to this screen.. The blue got me calm, smarter, positive on growing my portfolio, my tezos, my nfts. Grey white makes me close the window in about max 8 seconds. Not eye catching at all. Where's the life??

3. Balances Component It's awesome to have utility tokens together with my main tezos value, this must be stated! Congrats ::) BUT why the value in currency is so small? It's literally the main information about 90% of the traffic want's to see at first when they arrive on the site. It's super small compared to everyting else. The position is kinda ok, but the SEND button is taking ALL the attention you want to throw at how much money you actually have! this button need to be improved to stop sucking so much attention! When hovering show color maybe?

4. NFT / DISCOVER Big Component ok now this one needs some major design updates. It's a really nice idea, but the implementation may cause the reverse effect of destroying completely the user experience, eye perception path and even make the mind fog bigger!

Also, this component really should exist? The "DISCOVER" really needs to be there? this makes the component have two interfaces in one, what is really bad for experience, and make it way dirtier and bigger than should be. Why not a normal component like the others?

4a. NFT/Collectibles on APP Mode Selected I don't think this is by far the best way to represent the idea of multiple NFT categories. A dropdown just makes everything more complex, ugly and unnecessary. You feel wasting your time everytime you open that goddamn dropdown. Also you still can't filter by date, by name, by anything. What if I want to see them as a list, not columns of squares?

When you open the dropdown, for example HIC ET NUNC, I see two columns of NFTs. These columns are feeling really strange on size. Font is too big, margins are too big, everything is so separated.

4b. Discover Every text really needs to be underlined? And this should even exist, considering the size of tezos ecosystem right now? Why not make it on the footer, or under everything else? Definetly not 1st tier information 99% your public will be looking when they open the wallet! ~w a l l e t~

FINAL STATEMENTS I know a wallet, in blockchain terms, means way more than just storing money. It's where your personal profile, assets and even information may live. In the future of the "big one computer" where everything will be on chain, from you medical data to your apartment contract, so we must keep things really organized. It's nice to see kukai stepping further to this world, but need some serious research on interfaces on fintech apps, other wallets and even on design itself.

I miss the old interface, let's make upgrades, not downgrades. This is only a critic, because I love Kukai and always will. All the other wallets I tried have countless bugs, Kukai was the major solution, specially for hicetnunc users. I want to see this project evolve as it's deserve to.

Thanks for your time.

ps. Little suggestion: Browser addon! Pls ::)

nicky-creative commented 2 years ago

Hi! Fellow UX/UI specialist here! I agree with what you're saying and following along. I only created a Kukai wallet in December, so never saw the old UI, but there are a lot of improvements I can think of too!

babycommando commented 2 years ago

I miss the old UI :/