Onboarding Wizard

mikedilger commented

2023-07-03 14:08:39 +12:00

(Migrated from github.com)

[EDITED]

Create the onboarding wizard.

[EDITED] Create the onboarding wizard.

dtonon commented

2023-09-24 11:30:09 +13:00

(Migrated from github.com)

@mikedilger this is a first raw review of the partial wizard branch [9fa268ca].
At this stage I don't offer any design suggestions, just basic advice to make it more usable. We can review the UI later, maybe with @bu5hm4nn's help.

Welcome

W1 ◾️ "Create a new nostr account" and "I already have a nostr account" buttons in accent (blue) because are the main actions.
W2 ◾️ Rename "> Exit the wizard" in "X Exit the wizard" (all the occurrences).
W3 ◾️ ~~The default DPI does not match the system value; I'm using a 144dpi display but the default is set to 72, if I apply this value the interface is resized by 50%. Would be nice to set it correctly.~~ Moved to https://github.com/mikedilger/gossip/issues/511
W4 ◾️ Because we are now taking about zoom, DPI does not make much sense. I would show a percent and let the user move between 25% and 200%.

Import keys

A1 ◾️ The three "Import" buttons in accent (blue) because are the main actions.

Import a private key

B1 ◾️ The "Import" button in accent (blue) because is the main actions.
B2 📍 The "Password not match" error message is not visible in the status area, should be placed near the second password input.
B3 ❓ In the password not match only the second input should be cleared.

Import > Read your nostr configuration data

C1 ◾️ The relays list push the bottom outside the view, so the full list is not visible and the "Exit this wizard"; a select with the relays would solve this.
C2 ◾️ Automatically add the protocol if the user input only the host.
C3 ◾️ It's not possibile to escape from this step, even restarting the app. A "Reset the wizard" button would be nice.

Using my real key all the data is "Missing".
"Fetch from this relay" is unimplemented.
So I'm blocked here.

Create a new account

D1 ◾️ The main title should be "Create a new nostr account".
D2 ◾️ I would move the introduction to the Welcome step and just leave the "The account you will create here will work on all the other clients too... ".
D3 ◾️ The "Generate" button in accent (blue) because are is main actions.

Create > Read your nostr configuration data

All the data is "Missing", of course. I suppose this wizard should be completely different.
So I'm blocked here.

General consideration

Probably I would move the three "Import.." buttons of the "Import keys" section and the create keys form in the first welcome step, creating two horizontal sections:

I'm new to nostr (with the form)
I already have a nostr account (with the three buttons)

I would remove the status bar, it is not not the right places for blocking error messages and in a wizard the user should focus just the main are following the instructions, without watching around.

Legend:
◻️ Low low priority
◾️ Normal priority
📍 High priority
❓ Need more analysis

@mikedilger this is a first raw review of the partial wizard branch [9fa268ca]. At this stage I don't offer any design suggestions, just basic advice to make it more usable. We can review the UI later, maybe with @bu5hm4nn's help. ## Welcome - [ ] W1 ◾️ "Create a new nostr account" and "I already have a nostr account" buttons in accent (blue) because are the main actions. - [ ] W2 ◾️ Rename "> Exit the wizard" in "X Exit the wizard" (all the occurrences). - [ ] W3 ◾️ ~~The default DPI does not match the system value; I'm using a 144dpi display but the default is set to 72, if I apply this value the interface is resized by 50%. Would be nice to set it correctly.~~ Moved to https://github.com/mikedilger/gossip/issues/511 - [ ] W4 ◾️ Because we are now taking about zoom, DPI does not make much sense. I would show a percent and let the user move between 25% and 200%. ## Import keys - [ ] A1 ◾️ The three "Import" buttons in accent (blue) because are the main actions. ## Import a private key - [ ] B1 ◾️ The "Import" button in accent (blue) because is the main actions. - [ ] B2 📍 The "Password not match" error message is not visible in the status area, should be placed near the second password input. - [ ] B3 ❓ In the password not match only the second input should be cleared. ## Import > Read your nostr configuration data - [ ] C1 ◾️ The relays list push the bottom outside the view, so the full list is not visible and the "Exit this wizard"; a select with the relays would solve this. - [ ] C2 ◾️ Automatically add the protocol if the user input only the host. - [ ] C3 ◾️ It's not possibile to escape from this step, even restarting the app. A "Reset the wizard" button would be nice. Using my real key all the data is "Missing". "Fetch from this relay" is unimplemented. So I'm blocked here. ## Create a new account - [ ] D1 ◾️ The main title should be "Create a new nostr account". - [ ] D2 ◾️ I would move the introduction to the Welcome step and just leave the "The account you will create here will work on all the other clients too... ". - [ ] D3 ◾️ The "Generate" button in accent (blue) because are is main actions. ## Create > Read your nostr configuration data All the data is "Missing", of course. I suppose this wizard should be completely different. So I'm blocked here. ## General consideration Probably I would move the three "Import.." buttons of the "Import keys" section and the create keys form in the first welcome step, creating two horizontal sections: - I'm new to nostr (with the form) - I already have a nostr account (with the three buttons) I would remove the status bar, it is not not the right places for blocking error messages and in a wizard the user should focus just the main are following the instructions, without watching around. --- Legend: ◻️ Low low priority ◾️ Normal priority 📍 High priority ❓ Need more analysis

mikedilger commented

2023-09-24 11:49:07 +13:00

(Migrated from github.com)

The default DPI issue is, if broken, a pre-existing problem that is independent of the wizard. I think that egui/winit are sometimes unable to determine it. I get 72 too, which is also wrong for my system. Let's remove that from this issue and make a separate issue. #511

👍 1

mikedilger commented

2023-09-24 11:54:03 +13:00

(Migrated from github.com)

I disagree with B3. If you type it twice, you can't be sure which one was mistyped. Clear them both.

dtonon commented

2023-09-24 11:58:29 +13:00

(Migrated from github.com)

I disagree with B3. If you type it twice, you can't be sure which one was mistyped. Clear them both.

You are right, but in my experience usually is the repeated input that is wrong.
If the user is no sure about the first input can wipe it himself.
However it is not a big issue.

> I disagree with B3. If you type it twice, you can't be sure which one was mistyped. Clear them both. You are right, but in my experience usually is the repeated input that is wrong. If the user is no sure about the first input can wipe it himself. However it is not a big issue.

mikedilger commented

2023-09-24 12:01:21 +13:00

(Migrated from github.com)

The wizard isn't ready for review. It is still changing a lot. I just wanted high-level thoughts on it. But I'll take all that feedback into consideration.

dtonon commented

2023-09-25 06:28:19 +13:00

(Migrated from github.com)

@mikedilger

The wizard isn't ready for review.

Yes I got it, mine was just some thought I wrote down while I was testing it.
Would you like I propose a design/UX, so you can validate it, develop the tech part and maybe the @bu5hm4nn step in with the egui work?

@mikedilger > The wizard isn't ready for review. Yes I got it, mine was just some thought I wrote down while I was testing it. Would you like I propose a design/UX, so you can validate it, develop the tech part and maybe the @bu5hm4nn step in with the egui work?

mikedilger commented

2023-09-25 08:22:51 +13:00

(Migrated from github.com)

I'd like to finish it functionally before I rearrange and style it. That has required me to make changes to the code that aren't directly wizard related on the unstable branch. Hopefully I can finish soon without too many more sidetracks.

👍 1

mikedilger commented

2023-09-27 13:51:06 +13:00

(Migrated from github.com)

I have pushed an updated 'wizard' branch. There are still some small functionality issues I need to work out, and more tests to run.

dtonon commented

2023-10-10 10:22:17 +13:00

(Migrated from github.com)

I tested the update, nice and really improved!

New account

If it is a new account creation could make sense to add also 2+2 random relays for inbox and outbox? New users probably cannot evaluate which relay choose, so we save them time and energy with a good default. If they know what they want with max 4 clicks they can remove the pre-set and choose something different.

About the UI to add the relays to the 3 list I would do it a little different:
A select at the top of each column; each time the user click an item it is added to the list below. The select include a first field "Input custom -->". If the user choose this value the select is replaced by a input and a small "+" button; the input can be used to add custom values to the list. (we should add a way to switch back to the select).

The labeling option with/without publishing in every step could be a little confusing.
I would simply use a "Continue".
Then add a last step the ask the user if he want to publish the new profile, maybe with some checkbox if we want to give this sort of granularity (profile, relays, contact list).

I wold put the followed list below the form.
Why do you use the term "DNS ID" instead of NIP-05?

I would then review some text and small details, but nothing really important.

Instead of showing this page with the three failed checks, why don't immediately try to fetch from the proposed relay (purplepages.es)? It is fastest and offer a "just work" flow.

Both "Fetch from this relay" and the next screen "Next >" should have the accent color.

I tested the update, nice and really improved! ## New account ![image](https://github.com/mikedilger/gossip/assets/89577423/257fd614-a1d8-4ff7-8d2e-a9b6d484be2f) If it is a new account creation could make sense to add also 2+2 random relays for inbox and outbox? New users probably cannot evaluate which relay choose, so we save them time and energy with a good default. If they know what they want with max 4 clicks they can remove the pre-set and choose something different. About the UI to add the relays to the 3 list I would do it a little different: A select at the top of each column; each time the user click an item it is added to the list below. The select include a first field "Input custom -->". If the user choose this value the select is replaced by a input and a small "+" button; the input can be used to add custom values to the list. (we should add a way to switch back to the select). The labeling option with/without publishing in every step could be a little confusing. I would simply use a "Continue". Then add a last step the ask the user if he want to publish the new profile, maybe with some checkbox if we want to give this sort of granularity (profile, relays, contact list). <img width="830" alt="Screenshot 2023-10-09 alle 22 40 43" src="https://github.com/mikedilger/gossip/assets/89577423/2daa9952-9cff-41b2-ab04-b028d20f7e4e"> I wold put the followed list below the form. Why do you use the term "DNS ID" instead of NIP-05? I would then review some text and small details, but nothing really important. ## Login with private key <img width="833" alt="Screenshot 2023-10-09 alle 23 12 48" src="https://github.com/mikedilger/gossip/assets/89577423/d7721548-7c5c-488d-bb37-ac3934c7eda1"> Instead of showing this page with the three failed checks, why don't immediately try to fetch from the proposed relay (purplepages.es)? It is fastest and offer a "just work" flow. Both "Fetch from this relay" and the next screen "Next >" should have the accent color.

dtonon commented

2023-10-10 10:25:11 +13:00

(Migrated from github.com)

I forgot: starting a new account, I had to reboot to make the relays operational; unlucky the bug is still here

dtonon commented

2024-03-08 04:26:01 +13:00

(Migrated from github.com)

I opened a dedicated issue for the "create new account" flow: https://github.com/mikedilger/gossip/issues/675

bu5hm4nn commented

2024-03-08 16:14:45 +13:00

(Migrated from github.com)

Superseded by #671 for 0.10 and #675 for 0.11 release

Rows
Columns

Onboarding Wizard #421

Welcome

Import keys

Import a private key

Import > Read your nostr configuration data

Create a new account

Create > Read your nostr configuration data

General consideration

New account

Login with private key