Make it easier to open external links

[Nutomic]

Since the recent change which made clicking the post title open the comments instead of the link, it has become much more complicated to open external links on Lemmy. Now the only way is to click on the domain name, which is very easy to miss with its grey text, and especially on mobile is extremely hard to click.

I dont think we should revert the change and open the external link when clicking on the post title, because that is not consistent with image posts or text posts. But we should provide a method to open the link that is easier to discover and use.

My suggestion is to use the image thumbnail for this: disable thumbnail expansion, put a transparent "link" icon over the thumbnail, and when the thumbnail is clicked, open the external link.

Thoughts, or other suggestions?

[StaticallyTypedRice]

I would say that if you're aiming to make it as unambiguous as possible, make it so that when you mouseover to the icon that's supposed to open a link, dim the image and display an outgoing link icon over it, or always have the outgoing link icon just in the corner of the image or something.

Or, have the outgoing link as a dedicated button in front of the "by " line. For text posts the button can just go to the thread, maybe in that case it can have a different icon.

While we're talking images: We should crop the image thumbnails so they're all square, that way the UI looks more consistent.

[Nutomic]

While we're talking images: We should crop the image thumbnails so they're all square, that way the UI looks more consistent.

Makes sense, but please open a seperate issue for that.

[dessalines]

One point: I also made it so that when you're viewing a single post, on its own page, clicking the post title also takes you to the link.

I'm against taking away the image expand click in favor of going to a link, even for non-image only posts, because I often do find myself just wanting to see the expanded image, and not necessarily go to the link. Clicking the image to expand it is the main way that makes sense.

I would consider adding an overlay over a corner of the image that looks like a link tho. Or maybe half of the image with a plus, and the other half with a link.

For the record I don't really like overlays tho because they're pointless for anything without a mouse.

[Nutomic]

One point: I also made it so that when you're viewing a single post, on its own page, clicking the post title also takes you to the link.

I had no idea about that, its nothing I ever thought to try. This needs to be made more obvious somehow.

I'm against taking away the image expand click in favor of going to a link, even for non-image only posts, because I often do find myself just wanting to see the expanded image, and not necessarily go to the link. Clicking the image to expand it is the main way that makes sense.

I would consider adding an overlay over a corner of the image that looks like a link tho. Or maybe half of the image with a plus, and the other half with a link.

By "overlay" i basically just meant an edit of the thumbnail, to show a link icon there. No mouse-over animation or anything. Guess we can go half-half for now and see which one people find more important :)

[StaticallyTypedRice]

I would consider adding an overlay over a corner of the image that looks like a link tho. Or maybe half of the image with a plus, and the other half with a link.

I stand by my recommendation for a separate open link button below the post, like where old Reddit has their expand link button.

[dessalines]

I'm very confused. Every place I've circled here opens up the link.

[StaticallyTypedRice]

I'm very confused. Every place I've circled here opens up the link.

That's in the thread page. In the community pages the title goes to the thread, and it's not immediately obvious that clicking on the domain goes to the actual link and not to the domain itself or to a search for all the times the domain was posted on Lemmy (Reddit has it set up like this). I'm suggest that we add a dedicated button for the external link that's obvious and consistent everywhere.

[dessalines]

I'm suggest that we add a dedicated button for the external link that's obvious and consistent everywhere.

The external link icon doesn't fit that?

[StaticallyTypedRice]

I'm suggest that we add a dedicated button for the external link that's obvious and consistent everywhere.

The external link icon doesn't fit that?

It's not immediately obvious for new users, which UX guidelines advise against especially for a basic action like opening an external link. Also, it can imply that it's going to just the domain, as in example.com as opposed to example.com/page.

[dessalines]

I'll see if there's a way to overlay a semi-transparent link icon onto the image, and have that go to it.

[StaticallyTypedRice]

I'll see if there's a way to overlay a semi-transparent link icon onto the image, and have that go to it.

In that case, my suggestion would be to make it big enough so people don't accidentally click on the image when they want the link.

[StaticallyTypedRice]

Just saw the change, and two major problems I have is that it's really easy to misclick and open the image instead, especially on mobile. Also, putting the external link icon in the corner of the image like that implies that clicking anywhere on the image opens the external link.

[Nutomic]

Yeah that icon is so tiny that its completely useless. I thought we were going for half and half.

[dessalines]

I've been able to click it fine. I don't wanna do half and half, because it would cover up the image. And I don't wanna do hover overlays because you never see them on mobile.

But since I'm the only one who cares about image expand, I'll change that top right overlay to a plus icon, and clicking the main image will take you to a link.

[StaticallyTypedRice]

I'll change that top right overlay to a plus icon, and clicking the main image will take you to a link.

I think a good look would be having the plus icon be slightly offset from the image itself like how Mastdon shows two profile pictures when displaying a post that someone boosted.

[Nutomic]

Much better now! But it seems like you forgot to remove the small icon on the top right, there is a broken image now.

Edit: Just noticed that images hosted on pictshare are also opened in a new tab now instead of expanded, this is obviously not how it should be.

[StaticallyTypedRice]

Much better now! But it seems like you forgot to remove the small icon on the top right, there is a broken image now.

Edit: Just noticed that images hosted on pictshare are also opened in a new tab now instead of expanded, this is obviously not how it should be.

I think the best way is to change the mouseover icon to correspond with the action. Expand for local images and direct image links (and have it display a plus sign on mouseover), and go to the link for normal links and have an external link icon. The icon in the corner can have the opposite icon and perform the opposite action as an alternative.

[dessalines]

I have to rework this anyway to use pictshare as the thumbnail source.

#555