Brainstorming on restyling - Desktop

[dtonon]

This issue is a brainstorming about a possibile future Coracle restyling. The goal is to keep a visual distinctive characterization while improving the user experience. These first mockups are about the desktop spaces.

The idea is to group all the navigation links, including the profile's ones, in the left sidebar. Keys and relays are an important part of nostr, so I would give them a good visibility, both on the settings and inside the notes. Search is ready to use at the top, a default spot, and the "Post" button is quite prominent in a fixed top right position. Of course if we promote the search this way it should work in a very intuitive way, ex. including notes. I think that a discoverability tool is one of the most attractive features of staying with a client. On this top area we can add more quick filters, ex. related to type (root/reply), kind.

The colors are a work in progress. Probably currently some colors are too prominent (ex. the "Reply" button); we need to take in account the hover interaction.

Because the main notes' column has a controlled width for good readability (I kept it at the standard ~77 chars) I'm searching for a way to make better use of the horizontal space. With this solution I added a secondary sidebar to explore the main areas (feeds, messages and group chats have subsections, for sure).

Maybe we can add a "zen reading mode" too:

[dtonon]

Testing warm background for content/active areas. /cc @staab

[elidyweaver]

Thank you Daniele for all the effort and time you have been putting into these designs. Here's a few thoughts to consider:

Login "Familiarity" is important when it comes to design: Those placements and details we're used to from navigating in other sites. If you think of the last websites you have visited, where you have had to login, you'll often look for the login button on the top right corner. It is there right now, I would recommend against moving it.

Icons It is generally easier to identify icons, instead of words. They are, in a way, universal, as you do not need to speak a specific language to understand them. Regardless of where we are, we all learn "tech symbol" language as we navigate the web. I'd encourage icons in buttons where you have words, like the reply button.

Show Replies Is show replies necessary? Most people are used to clicking through to see them. However, it may be good to test whether it makes desktop navigation easier. If you were to test it, I would encourage a down arrow button instead of the "show replies."

Other Buttons The "quote" and the "tag" options are hidden in the note menu. It would be nice for them to be more easily reached, placed in that bottom bar with a corresponding icon, otherwise people may not know they are there, and may be less inclined to use them. As the Explore tab becomes a differentiating Coracle feature, the option to tag each note should be easily reached.

Secondary Nav Nice styling of the secondary nav. It helps recognize where you are, and it removes the need for tabs at the top of each individual page. I like the bottom button too. You could also consider those categories displaying underneath each menu item as you click, when the window is not as large. Having the icons next to the title is helpful, I would keep them, and the sidebar could collapse to just show those icons in medium-sized windows.

Relays in Notes The current circular buttons are a quick way to know which specific relay the note's been published to, without needing a secondary click. Less clicks to get to the information you want is often better.

Relays & Settings in side nav Choosing whether to make them more prominent on the sidebar will depend on how useful a feature they become over time. If they are sections you'll want to visit often to customize details, you could do that. They could even be part of the main categories, it just depends on relevance. That bottom placement would be nice for the current About section.

[dtonon]

@elidyweaver thank you for taking the time to write this in-depth feedback!

If you think of the last websites you have visited, where you have had to login, you'll often look for the login button on the top right corner. It is there right now, I would recommend against moving it.

I totally agree, but in this mockup the user is already logged in, so a Login button would be unnecessary and confusing; it will be present if the user is not logged-in. The profile area (bottom left) will let the user switch account, an so adding a new one. I could move all the account stuff to the top-right, right now; but the account area is rarely used, so I would not give it such an important spot.

It is generally easier to identify icons, instead of words. They are, in a way, universal, as you do not need to speak a specific language to understand them.

Agree!

I'd encourage icons in buttons where you have words, like the reply button.

I already talked about this with @staab during the internal review and we are considering it! But I have mixed feeling about this. Icons are great but are not always able to express the precise meaning, and I really like interfaces that have a typographic vibe. But icon + text seems a little repetitive. In my opinion, some English words (post, reply, message, chat, etc) are now so widespread that even non-English speakers can recognize them, and can be more informative in some contexts (see below).

Show Replies. Is show replies necessary?

I know that the "X replies" / "Reply" buttons seem a bit strange / repetitive, but I never felt right about the single reply icon next to the replies number, that opens the compose window (Twitter introduced it); I would expect that clicking it would show the replies. So I'm experimenting something different.

The "quote" and the "tag" options are hidden in the note menu. It would be nice for them to be more easily reached, placed in that bottom bar with a corresponding icon, otherwise people may not know they are there, and may be less inclined to use them.

Absolutely agree. The actual review just "migrates" the actual functions, but I would like to give the mentions more visibility. But we will need to do some consideration about this: an interface influences behaviors, so if we don't want to promote the production of low effort content, perhaps it would be better to highlight the reply, and perhaps don't allow empty mentions (that are equal to boost, currently not present!).

You could also consider those categories displaying underneath each menu item as you click, when the window is not as large. Having the icons next to the title is helpful, I would keep them, and the sidebar could collapse to just show those icons in medium-sized windows.

It is what I have in mind for responsive (small screen/tablet) behavior!

The current circular buttons are a quick way to know which specific relay the note's been published to, without needing a secondary click. Less clicks to get to the information you want is often better.

The problem is that these circles are not really informative, add UI confusion because the colors, and above all, are not usable in the mobile version. So I was trying a different approach: first show clearly the most important information, so "how many", then let the user explore the details.

Choosing whether to make them more prominent on the sidebar will depend on how useful a feature they become over time.

We are planning to make them more relevant, starting with the notes themselves (the more prominent button in the previous reply).

Thanks again for the support!