[Discussion] New home page #110

Open
opened 2023-08-11 21:47:44 +02:00 by AntoineD · 8 comments
Member

Hello, I'm opening this ticket to propose a collective reflection on what could be a new home page design.

In order to make an Iceshrimp instance visually stand out from other Misskey forks and offer an even better experience.

Here's a first draft of an idea

entirely open to criticism (just to get the ball rolling)

Desktop :
Desktop
Mobile :
Mobile
Demo : https://codepen.io/Atn-D/full/KKrjzNP

Diff

Just to mark a big visual difference:

  • Invert the left and right sides
  • Wave separation
  • Icone Border-Radius
  • Remove bottom left emojis #56
  • Remove bottom right server list

To add practicality:

  • Use of pictograms to illustrate buttons
  • Highlighting the link to the "Term of Service", which is very important. #105
  • Add statistics on the number of users, notes, emojis and federated servers.

For privacy and welcome:

  • Instead of displaying the latest local posts, display a markdown message that presents the instance in much greater detail.
Hello, I'm opening this ticket to propose a collective reflection on what could be a new home page design. In order to make an Iceshrimp instance visually stand out from other Misskey forks and offer an even better experience. # Here's a first draft of an idea entirely open to criticism (just to get the ball rolling) Desktop : ![Desktop](/attachments/5d8642b9-9fcb-4214-850d-93cbf064ddf2) Mobile : ![Mobile](/attachments/011e84e2-2c19-4ae3-884c-0eabc52ccbb5) Demo : https://codepen.io/Atn-D/full/KKrjzNP # Diff ## Just to mark a big visual difference: - Invert the left and right sides - Wave separation - Icone Border-Radius - Remove bottom left emojis #56 - Remove bottom right server list ## To add practicality: - Use of pictograms to illustrate buttons - Highlighting the link to the "Term of Service", which is very important. #105 - Add statistics on the number of users, notes, emojis and federated servers. ## For privacy and welcome: - Instead of displaying the latest local posts, display a markdown message that presents the instance in much greater detail.
jeder added the
enhancement
discussion
frontend
labels 2023-08-11 22:13:00 +02:00
jeder removed the
frontend
label 2023-08-11 22:14:06 +02:00
Member

Related to #56

Related to https://iceshrimp.dev/iceshrimp/iceshrimp/issues/56
Member

Some things I don't like about this draft:

  • I don't like the idea of putting any kind of numbers or statistics on the logged-out view, at least not so prominently. I'd maybe be fine with it if it was like a small, low contrast text on the bottom of the view or something.
  • The introduction page / element shouldn't be visible by default.
  • Instead of a terms of service button, we should copy Mastodon here and have a "Learn more" button that then brings up an instance info page (mentioned in the last point) as a pop-up that also shows server rules and 'moderated servers'
  • On mobile there should be more space at the top so the logo can fit properly and not look out of place.

I am on board with getting rid of the random emojis on bottom-left, the status bar and the local posts on the right though.

Small nitpicks:

  • For sign-up button, maybe user-circle-plus icon would be better?
  • The Explore button should probably use hash icon to be consistent with PR #94 (if it gets merged that is)

Other notes:

  • Instance admin should have the option to hide the Explore button.
  • Three-dot menu could probably be removed if we decide to go with the "Learn more" button I suggested.
  • The buttons in this mock-up have less corner radius than what is currently. We should either keep the corner radius here as is currently, or change other buttons to have less corner radius as well for consistency.
Some things I don't like about this draft: - I don't like the idea of putting any kind of numbers or statistics on the logged-out view, at least not so prominently. I'd maybe be fine with it if it was like a small, low contrast text on the bottom of the view or something. - The introduction page / element shouldn't be visible by default. - Instead of a terms of service button, we should copy Mastodon here and have a "Learn more" button that then brings up an instance info page (mentioned in the last point) as a pop-up that also shows server rules and 'moderated servers' - On mobile there should be more space at the top so the logo can fit properly and not look out of place. I am on board with getting rid of the random emojis on bottom-left, the status bar and the local posts on the right though. Small nitpicks: - For sign-up button, maybe `user-circle-plus` icon would be better? - The Explore button should probably use `hash` icon to be consistent with PR https://iceshrimp.dev/iceshrimp/iceshrimp/pulls/94 (if it gets merged that is) Other notes: - Instance admin should have the option to hide the Explore button. - Three-dot menu could probably be removed if we decide to go with the "Learn more" button I suggested. - The buttons in this mock-up have less corner radius than what is currently. We should either keep the corner radius here as is currently, or change other buttons to have less corner radius as well for consistency.
Author
Member

@aylamz I have applied the various returns with the exception of

The introduction page / element shouldn't be visible by default.

It's assumed that the left part will have to be redone anyway.
I'm personally not a big fan of showing local posts, which is why I proposed the idea, but it could be replaced by anything more relevant (or stay local posts if that's what everyone prefers).

Screen Shot 2023-08-12 at 18.59.17.png
Screen Shot 2023-08-12 at 18.58.59.png

@aylamz I have applied the various returns with the exception of > The introduction page / element shouldn't be visible by default. It's assumed that the left part will have to be redone anyway. I'm personally not a big fan of showing local posts, which is why I proposed the idea, but it could be replaced by anything more relevant (or stay local posts if that's what everyone prefers). ![Screen Shot 2023-08-12 at 18.59.17.png](/attachments/8318898a-8fa4-4c6d-9f13-8baabc2557be) ![Screen Shot 2023-08-12 at 18.58.59.png](/attachments/ea163194-16a7-4782-b6f9-67d316819549)
Member

It's assumed that the left part will have to be redone anyway.
I'm personally not a big fan of showing local posts, which is why I proposed the idea, but it could be replaced by anything more relevant (or stay local posts if that's what everyone prefers).

Announcements might fit there, but if we don't have anything to put there then we shouldn't put anything there.

I still don't like showing stats on the logged-out view. They are kind of useless and more of a distraction.

> It's assumed that the left part will have to be redone anyway. I'm personally not a big fan of showing local posts, which is why I proposed the idea, but it could be replaced by anything more relevant (or stay local posts if that's what everyone prefers). Announcements might fit there, but if we don't have anything to put there then we shouldn't put anything there. I still don't like showing stats on the logged-out view. They are kind of useless and more of a distraction.
Author
Member

I still don't like showing stats on the logged-out view. They are kind of useless and more of a distraction.

On the contrary, I find statistics useful.
They give you an idea of the size and level of activity of the forum, so you know what to expect when you join.

The number of users lets you know whether you're joining a small, friendly forum or a large, more active one.

And the number of emoji, which are for some an important criterion in the way they express themselves.

The number of notes and federated instances is less important.

On the other hand, it's true that this information can be found in "Server Information", which is highlighted here via "Learn more".

It could do with a restyle to make this information more visible in this panel.


Announcements might fit there, but if we don't have anything to put there then we shouldn't put anything there.

Indeed, why not.
If nothing is displayed, maybe just center what is currently on the side?

image

Or directly display the contents of the "Terms of Service" page

Or put up a theoretical explanation that iceshrimp is part of the fedivers, and that it can be used to talk to other instances and other software like mastodon, for people who aren't used to this technical concept.

> I still don't like showing stats on the logged-out view. They are kind of useless and more of a distraction. On the contrary, I find statistics useful. They give you an idea of the size and level of activity of the forum, so you know what to expect when you join. The number of users lets you know whether you're joining a small, friendly forum or a large, more active one. And the number of emoji, which are for some an important criterion in the way they express themselves. The number of notes and federated instances is less important. **On the other hand, it's true that this information can be found in "Server Information", which is highlighted here via "Learn more".** It could do with a restyle to make this information more visible in this panel. --- > Announcements might fit there, but if we don't have anything to put there then we shouldn't put anything there. Indeed, why not. If nothing is displayed, maybe just center what is currently on the side? ![image](/attachments/539d8591-ef87-4218-b915-b75ea584720f) Or directly display the contents of the "Terms of Service" page Or put up a theoretical explanation that iceshrimp is part of the fedivers, and that it can be used to talk to other instances and other software like mastodon, for people who aren't used to this technical concept.
144 KiB
Member

The number of users lets you know whether you're joining a small, friendly forum or a large, more active one.

OK I get how this is useful yeah.

And the number of emoji, which are for some an important criterion in the way they express themselves.

Showing a number of custom emojis is totally pointless though. People don't care about that, what they do care about is what these emojis actually are. So instead of a number, we could have some button like "This instance has custom emojis. Learn more..."

The number of notes and federated instances is less important.

I'd say it's not important at all and more confusing. Users aren't going to understand what these numbers mean: is number of posts only the posts on this instance or all federated posts; does that number include boosts? And the federated servers number isn't relevant at all.

So we should only keep the number of users I think. This is also the only stat Mastodon shows.

If nothing is displayed, maybe just center what is currently on the side?

I don't have a strong preference on this, it could be on right, center or left.

Or directly display the contents of the "Terms of Service" page

No I'd rather not. Also we should call it "Server rules" or just "Rules" so it's less formal sounding.

Or put up a theoretical explanation that iceshrimp is part of the fedivers, and that it can be used to talk to other instances and other software like mastodon, for people who aren't used to this technical concept.

This feels more like something that would fit on a server list page like join.iceshrimp.dev or something. But we could include like a very short 1-2 sentence description sure. For example Mastodon has this (which links to "joinmastodon.org"): mastodon.social is part of the decentralized social network powered by Mastodon.

We could also just leave that space empty and let instance admins put some custom background image there like is possible right now: https://shrimp.simcha.lgbt/

> The number of users lets you know whether you're joining a small, friendly forum or a large, more active one. OK I get how this is useful yeah. > And the number of emoji, which are for some an important criterion in the way they express themselves. Showing a number of custom emojis is totally pointless though. People don't care about that, what they do care about is what these emojis actually are. So instead of a number, we could have some button like "This instance has custom emojis. Learn more..." > The number of notes and federated instances is less important. I'd say it's not important at all and more confusing. Users aren't going to understand what these numbers mean: is number of posts only the posts on this instance or all federated posts; does that number include boosts? And the federated servers number isn't relevant at all. So we should only keep the number of users I think. This is also the only stat Mastodon shows. > If nothing is displayed, maybe just center what is currently on the side? I don't have a strong preference on this, it could be on right, center or left. > Or directly display the contents of the "Terms of Service" page No I'd rather not. Also we should call it "Server rules" or just "Rules" so it's less formal sounding. > Or put up a theoretical explanation that iceshrimp is part of the fedivers, and that it can be used to talk to other instances and other software like mastodon, for people who aren't used to this technical concept. This feels more like something that would fit on a server list page like join.iceshrimp.dev or something. But we could include like a very short 1-2 sentence description sure. For example Mastodon has this (which links to "joinmastodon.org"): _mastodon.social is part of the decentralized social network powered by Mastodon._ We could also just leave that space empty and let instance admins put some custom background image there like is possible right now: https://shrimp.simcha.lgbt/
Author
Member

Screen Shot 2023-08-13 at 14.33.41.png
Screen Shot 2023-08-13 at 14.34.42.png

![Screen Shot 2023-08-13 at 14.33.41.png](/attachments/60d13c7c-716a-4ce6-a8b7-a4cc1eecc694) ![Screen Shot 2023-08-13 at 14.34.42.png](/attachments/9719df24-1551-4323-9f56-35ec03d941e4)

hey first of all, this is awesome guys 💞
second: as we are all about emojis, heres my two cents: maybe make the landing page modular? so for example there could be a option to enable emojis, like we had in the old thing, to swirl around in the background. like, this could be so cool for people to do their own little things!! But thats not the focus of it right now, thats just some thoughts for future iterations, once the new home page is merged ;)

hey first of all, this is awesome guys 💞 second: as we are all about emojis, heres my two cents: maybe make the landing page modular? so for example there could be a option to enable emojis, like we had in the old thing, to swirl around in the background. like, this could be so cool for people to do their own little things!! But thats not the focus of it right now, thats just some thoughts for future iterations, once the new home page is merged ;)
AntoineD added this to the (deleted) milestone 2023-12-03 00:52:34 +01:00
AntoineD added this to the Frontend rewriting project 2023-12-06 19:18:29 +01:00
Sign in to join this conversation.
No milestone
No assignees
3 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: iceshrimp/iceshrimp#110
No description provided.