Replying to Avatar hodlbod

Finally got around to doing some usability testing with Flotilla. I'm sharing the video since it might be of interest to see what nostr onboarding looks like right now. It's not actually too bad! There were a few hiccups that could be easily solved, and would make the process mostly painless.

https://coracle-media.us-southeast-1.linodeobjects.com/flotilla_usability_250716.mp4

nostr:nprofile1qythwumn8ghj7un9d3shjtnswf5k6ctv9ehx2ap0qy08wumn8ghj7mn0wd68yttsw43zuam9d3kx7unyv4ezumn9wshszymhwden5te0danxvcmgv95kutnsw43z7qg4waehxw309aex2mrp0yhxgctdw4eju6t09uqsuamnwvaz7tmwdaejumr0dshsqgpn2m0xrvukg7f3e69jzs9jh2ur0cypps8029dmayk7qfyqgzutm5pysd0q this might be helpful to you for refining nsec.app

nostr:nprofile1qyghwumn8ghj7mn0wd68ytnhd9hx2tcprfmhxue69uhhq7tjv9kkjepwve5kzar2v9nzucm0d5hsz9nhwden5te0v96hg6pwdehhxarjxyhxxmmd9uq32amnwvaz7tmhda6zuer5dahx7m3wvdhk6tcprdmhxue69uhkx6rjdahxjcmvv5hxgar0dehkutnrdakj7qpq0000003zmk89narqpczy4ff6rnuht2wu05na7kpnh3mak7z2tqzsxkttm3 nstart should probably remember the callback information throughout the session, clicking a help link broke the flow. Also, keeping the accent color would be a nice improvement.

nostr:nprofile1qythwumn8ghj7enjv4h8xtnwdaehgu339e3k7mf0qyv8wumn8ghj7enfd36x2u3wdehhxarj9emkjmn99uq35amnwvaz7tms09exzmtfvshxv6tpw34xze3wvdhk6tcqypl62m6ad932k83u6sjwwkxrqq4cve0hkrvdem5la83g34m4rtqegs90fqs Chachi gets a little bit of screen time, relay.nostrtalk.com wasn't found when searched.

Looks a bit disastrous to me. He saved a key but had nowhere to input it… lol.. and then had to learn about bunkers?! Does that seem like smooth onboarding to anyone?

Reply to this note

Please Login to reply.

Discussion

I think any normal person would quit at this point. He only persisted to be nice / knows you.

I agree, but fixing this is pretty actionable. njump screwed up by not sending him back to flotilla, and he managed to recover with nsec.app. Surprising it worked at all, especially since I handicapped myself by not accepting raw private keys.

The problem here is that the user visited njump.me to learn more about Nostr and then pressed "Join Nostr" from this page; this resets the calling app refer, and so it got the standard registration path.

Currently Nstart uses session storage to be sure the key is wiped ASAP after the workflow finishes, so it's tab specific. I could evaluate to migrate to localstorage only these additional settings, but then the user could be trapped in some old workflow and I should offer him the possibility to reset the procedure.

Probably the easiest solution is to remove the external link when Nstart is used by a third app, to create a direct path without distraction. What do you think?

> remove the external link when Nstart is used by a third app

This already happens with the modal integration! But it's not present in the redirect one. Why don't you use the modal, I think it is a superior UX, it helps a lot keeping the context.

In the meantime I removed the link also for the redirect integration.

> Currently Nstart uses session storage to be sure the key is wiped ASAP after the workflow finishes, so it's tab specific

That makes sense, probably not worth confusing the user by persisting stuff, although maybe you could pass it from page to page. Removing the link works pretty well too, although it's clearly useful since he clicked it. Maybe you could open it in a new window? Anyhow, I'll take another look at the popup workflow.

One request, could you enable CORS on the popup script? I'm trying to load it via dynamic import and getting `Access to script at 'https://nstart.me/modal.js' from origin 'http://localhost:1847' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.`

Would be great if the FROST bunker worked too.

A couple other things:

- The font size is quite large when loaded in a popup, causing overflow/scrolling issues. Similarly, some screens show a big white section on the bottom if they're too short. Maybe adjust the font size if it's in a popup? Or use percents to control height? Screenshots below.

- `asf` isn't being applied in the popup version

The white block is weird!

I will take a look asap.

"Large" fonts are a design choice, I like them better and I think they are more accessibile.

Reducing the font size it's not the solution for the scrolling, it's inevitable with this kind of design (see the initial form); of course minimizing it would be preferable. I'm thinking about a solution, but offering a setting for the font size is quite hard with Tailwind.

Instead I cannot reproduce the white block. Jumble works just fine (with the npm):

Tailwind uses rem, so if you want to globally affect the font size, that should be possible just by redefining the font-size of your html element.

Thanks for the advice, I will check that.

> - `asf` isn't being applied in the popup version

Fixed, use v2.1.0

Maybe the npm is a better approach?

https://www.npmjs.com/package/nstart-modal

Ah, I didn't realize that was an option

> t's clearly useful since he clicked it.

I think the calling application is responsible for explaining Nostr in relation to its nature, evaluating how far pushing it, and should do so before the user starts the sign up workflow. Having an outbound link in the first step (in this integration context) is dangerous for the funneling.

I finally watched the full video, I agree, actually it was a crazy workflow, I don't know how he managed to create a bunker, a lucky step!

The good news is that this all happened because of a small problem in the first phase, which was solved and the procedure should be quite smooth.

Yes, agree - not user friendly at all. I would’ve quit the flow.