Nostr Web Client

I like Nostr because it challenges many paradigms, including those of interfaces and user interactions, and forces those who build it to think critically outside the box.

I was working on a new design for Blowater by nostr:nprofile1qy2hwumn8ghj7un9d3shjtnyv9kh2uewd9hj7qgewaehxw309aex2mrp0yhxymr0washgetj9eshqup0qy88wumn8ghj7mn0wvhxcmmv9uqzq6ua4ysvfdhvhukpyqv20gk3gw6dlhuc0rpmatrfuwdmt9uyrnrwufzavy and asked myself: the bubbles UI, typical of chat programs we are used to, is really the best and so inevitable solution?

Quick valuation:

- Pros: it makes clear the two parts in a conversation, both with the position and the colors.

- Cons: it reduces the width available space; it gives equal importance to the two parts, while the user is usually interested on the content by the other part; doesn't scale naturally to group chat.

This is an alternative solution that came out.

In linear structure with full width available; other part messages are prominent while their own are dimmed and collapsible to save space.

The line on the right permits to immediately spot the conversation flow/frequency, also on rapid scrolling.

Can adapt to groups putting a minimal profile pic near the date and customizing the right line with the main color picked from the pic itself.

What do you think?

#nostrdesign #asknostr

Reply to this note

Please Login to reply.

Discussion

djmeistro✝️ 🍊💊⚡️ 1y ago

First off, is that Latin? 😂😂😂

So the lines on the right side denote replies to your message? If so (even though I see what you're saying about the full width), a slight indentation makes things more understandable for me

daniele 1y ago

Yes :) "Lorem ipsum" is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. - https://loremipsum.io

Indentation is the main point of the bubbles UI, it has of course this advantage. Mmh ok, so the dimmed text is not enough for you. Thanks for the feedback.

djmeistro✝️ 🍊💊⚡️ 1y ago

Hmmm interesting, learn something new every day

Josua Schmid 1y ago

I like the idea of color-coding. For how many participants (group chats) could this work?

Did you think about threads as well? I somehow always think we would need some spatial representation.

Are you aware of the color theory regarding distance? I think this was Cezanne: blue is distant, orange is close.

daniele 1y ago

I don't know how many participants, I was thinking about small groups (<10), a typical friends and family scenario. Maybe the color code could be activated if the user's activity goes over a threshold, otherwise it stays gray; so there are fewer risks of overlap colors and messages from usually silent users are easily spotted.

No, I didn't think about threads. On mobile, probably a linear structure, just quoting the message I was replying to, is more usable.

I don't know the Cezanne theory, I will study it, thanks for pointing it out. Btw, it makes sense, warm/vibrant color naturally signal activity, while cold/desaturated ones convey the opposite feeling.

Nostr gives us the unique opportunity to test different UI on the same data, the perfect lab.

τέχνη 1y ago

This is just 2002 era IRC chat. It lost to better UIs.

Full width is just never desirable. Psychologically, we just need breathing room. Empty space is not wasted, it serves a purpose.

But as you said, Nostr can allow for people to experiment. So if you really believe in it, go for it. Usually a bad sign though if you have to explain to someone why a UI is good

daniele 1y ago

Actually you guessed it, I was thinking about IRC while I was drawing it! :)

(and I don't think it lost for that reason)

I am absolutely in favor of spacious interfaces, in fact as you can see between messages there is more space than any other application. But on a mobile we can't ignore the small space, so other solutions like using the full width and compacting not so useful information (progressive disclosure approach) can help.

I did not say it is better, I asked for opinions. This is just a mockup and lacks the whole interactive and feedback part, which is critical to verify usability, so your idea of self-explanation cannot fully work here. Insights and feedback are important before proceeding with development, we are here to share, if you want to join you are welcome.

Paul Allen 1y ago

The reduced width problem is even worse on the narrow front cover screen of something like a Samsung Fold. Cool idea. 👍

daniele 1y ago

Interesting point.

Do you have a screenshot to share?

Paul Allen 1y ago

Depending on the app it will sometimes try to compensate by shrinking everything.

#m=image%2Fjpeg&dim=775x1920&blurhash=%5B7S6DJxB%7EW%25M%3D%7BDiD%24RiVtadIUMxM_n*xtjE%7EXR%25IUt6%25fx%5DxtadW%3D%25M%25MWANExa%25Mt7nin%23WBbG&x=f2fa772c4badc87f74b1e4874a144d6423c9f12e14de7986eb075e2be5d9f500

daniele 1y ago

Thank you.

I understand, the left column wastes valuable space...

It's a layout that works well on desktop, but is too often transposed to mobile without due care.

Niel Liesmons 1y ago

Your cons are not cons in my book. Users are very interested in the reactions, comments and zaps to their own messages + they use their own messages more than anything else as reference points to know where they are in the conversation.

Full width (à la Slack) makes it look a lot less like a conversation and a kot more like a feed. (which might be desired in some cases). But very few people love it (lack of breathing room, storytelling and rounded bubble frame).

daniele 1y ago

I'm a top supporter of "my notes" in the main menu (added in Gossip and was thinking to propose it in Coracle), but zap and reactions in a one-to-one conversation? Btw, they can be displayed also on a compressed note.

Of course it is hard to change when we are used to a obiquous model, I'm questioning if this model is inevitable because has objective advantages.

Niel Liesmons 1y ago

Please keep questioning & experimenting! That's what Nostr allows in the end 😉 Sorry if my tone was harsh btw. It's just funny because I'm currently going in the opposite experimentation direction 👉 making things that are not really chats feel like chats. Because my mom, granddad and the like find that the most intuitive and approachable UI by far.

daniele 1y ago

No worry, you weren't harsh :)

Interesting, love to see more about that!

I'm the past (2017) I followed a similar experiment working on a project that used chat bots to expose typical services to promote local business (and it also had a concept similar to zaps!), with the goal to simplify the UX. The feedback was positive, although we didn't have the current AI to support the conversations. So yes, conversation patterns put users at ease.

Hypno | seedkeys.xyz 1y ago

Very hard to see who said what in your mockup.

HoloKat 1y ago

I can’t tell who is talking to who in that mock-up :(

daniele 1y ago

It's a one-to-one discussion, you should recognize your own text :)

I cannot see how is different a left/right aligned bubble in this respect.

HoloKat 1y ago

so my text is the one with the highlighted line?

I guess I am just used to colored bubbles to know which ones are my messages.

What's the advantage of this over bubbles? a bit of extra space?

daniele 1y ago

No, your own text is the less prominent, you should already know it.

Actually I don't like that the send icon has the same color of the highlighted messages, can be confusing. A plain white is better.

Yes, the advantages should be some extra space, and maybe a more coherent transaction to groups.

I'm also used to bubbles and really don't dislike them, I'm just investigating the status quo.

HoloKat 1y ago

I see. To me, highlighted = mine. This is the way all apps do it and is what I am used to. Maybe if everyone switched over to the opposite, I may get used to it. But for now this is not as intuitive to me as having my messages highlighted.

daniele 1y ago

Do you have any ideas as to why this self-highlight is the standard? Any psychological/perception reasons?

HoloKat 1y ago

Good question! I don’t really know. Maybe the feeling of you being the center of your word 😂 maybe it feels right to check how you replied to someone?

I don’t see any specific reason for it other than it just feels right - but that could be due to a pattern forming from other app usage that seem to do it that way too.

HoloKat 1y ago

Maybe conversations beg for responses and your mind is checking to see if you’ve filled that gap and responded. There’s a psychological principle by some name that I’ve been calling need-to-complete, perhaps your brain is checking to see if you “completed” the conversational ask? Just a theory. Doesn’t explain the fact that not all responses require a response…

mark tyler 1y ago

I bet big chat app companies have oodles written on this topic

daniele 1y ago

Probably. And I would like to investigate the planned outcome before just copying them.

daniele 1y ago

Maybe this comment by nostr:npub149p5act9a5qm9p47elp8w8h3wpwn2d7s2xecw2ygnrxqp4wgsklq9g722q could be a good clue:

> [Users] use their own messages more than anything else as reference points to know where they are in the conversation.

This reinforces the sense of security and stability that we all seek.

HoloKat 1y ago

What does security and stability mean in the context of a conversation? Perhaps it’s the responsibility of fulfilling your part of the social contract that is the conversation- the need to complete.

daniele 1y ago

I was thinking about something beyond the conversation utility, maybe more related to the ego.

The "complete" theory is interesting, but in one-on-one chats, we usually focus on the last messages to check if the social contract has been fulfilled, and in groups, we leverage notifications.