Nostr Web Client

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.

Reply to this note

Please Login to reply.

Discussion

daniele 5mo ago

I will check it, thanks for reporting.

Dawn 5mo ago

That was great to watch... the concepts didn't seem to be the issue at all :)

HoloKat 5mo ago

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?

HoloKat 5mo ago

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

hodlbod 5mo ago

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.

daniele 5mo ago

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?

daniele 5mo ago

> 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.

daniele 5mo ago

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

hodlbod 5mo ago

> 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.

hodlbod 5mo ago

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.`

fiatjaf 5mo ago

Would be great if the FROST bunker worked too.

hodlbod 5mo ago

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

daniele 5mo ago

The white block is weird!

I will take a look asap.

daniele 5mo ago

"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):

Paulo 5mo ago

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.

daniele 5mo ago

Thanks for the advice, I will check that.

daniele 5mo ago

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

Fixed, use v2.1.0

daniele 5mo ago

Maybe the npm is a better approach?

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

hodlbod 5mo ago

Ah, I didn't realize that was an option

daniele 5mo ago

> 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.

daniele 5mo ago

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.

Simon 5mo ago

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

ricky 5mo ago

This is exactly what I've been looking for someone to do! This is what #Nostr needs. We need more nostr:nprofile1qqsf03c2gsmx5ef4c9zmxvlew04gdh7u94afnknp33qvv3c94kvwxgspr9mhxue69uhkscnj9e3k7unpvdkx2tnnda3kjctv9uq32amnwvaz7tmjv4kxz7fwv3sk6atn9e5k7tcppemhxue69uhkummn9ekx7mp0g4rts7's around here

nostr:nevent1qqsrqpv7yys5zaahfr9umv6rg87a5rmule00hej6en5vkuwrwfjnljgppemhxue69uhkummn9ekx7mp0qgsf03c2gsmx5ef4c9zmxvlew04gdh7u94afnknp33qvv3c94kvwxgsrqsqqqqqpm3rg6w

Satoshi 5mo ago

Like I said a lot of stuff has been disappearing. I’m missing over 4000 pictures and a lot of my documents and stuff are gone or I had so many documents and I don’t have none. None of that shit left but I’m sure it’s still the main frame of the phone or whatever you wanna call it.

elsat 5mo ago

nostr:npub1jlrs53pkdfjnts29kveljul2sm0actt6n8dxrrzqcersttvcuv3qdjynqn I know it’s difficult - for the next one consider saying “I’m not going to answer your questions after I give you the instructions, so I can observe the pain and pitfalls of onboarding to my app”. Then observe and record silently, in pain 😅

hodlbod 5mo ago

I know you're supposed to do that, but there's no reason to let him keep usability testing a completely different app

elsat 5mo ago

Yes, heard and saw that part

Dikaios1517 5mo ago

This was painful to watch, and yet very helpful!

Loved when you said, "You're making such logical mistakes."

Really telling to see what folks who haven't been using Nostr for 3 years do when they don't have any (or very little) guidance.