Alicornutopia

I like bullet-go stronger, but worry it wouldn't show up well on starry dark.

In cases where there isn't a previous post, this seems like it would be clunky and inconvenient. In cases where there is one, we'd… have to line it up appropriately to fit on that bar, or have it below, and … I mean that location doesn't seem like the best one to me but I might just be imagining particular implementations that don't work. I was thinking maybe an italic link at the footer of the first post? Or somewhere in the pagination bar.

Given that the typical use case is for when people misclick on mobile, I think it's important that it be visible on the screen that's loaded when people click on the thread name (i.e. a /posts/xxx page), rather than requiring scrolling or additional clicking on navigation elements (since it's basically useless if it's more convenient to instead just hit the back button and click on the proper link instead). So I think it needs to go above the actual text of the first post, at least on the mobile layout. I picked post-navheader because it's below the thread name but above that text; presumably you could add a separate div element above or below that instead but I think that's around the right place for it.

I, for one, want a better click target rather than having to load two pages. Perhaps (without any necessary visual changes) some of the whitespace to the left could be made part of it (to use CSS jargon, making the link a block or table-cell element rather than inline).

Unbitwise wrote:I, for one, want a better click target rather than having to load two pages. Perhaps (without any necessary visual changes) some of the whitespace to the left could be made part of it (to use CSS jargon, making the link a block or table-cell element rather than inline).

The icon is actually part of the same table cell as the text. If you look at narrow columns with long titles, it wraps around and below the icon. So unless I'm misunderstanding it wouldn't be a simple matter of making it into a block element and having no visual changes?

I could probably screw around with the CSS to increase the hitbox without changing the UI, but this feels like a weird solution to the problem. If it were a separate cell, yeah, we could make it take up the whole cell, but as is it's a button in the same cell as the title (for UI reasons when we introduced it). I'd be wary about moving which cell it's in as this would either make the table wider or taller, and I'm also wary of increasing its size as it's a 16x16 pixel image.

jalapeno_dude wrote:Given that the typical use case is for when people misclick on mobile, I think it's important that it be visible on the screen that's loaded when people click on the thread name (i.e. a /posts/xxx page), rather than requiring scrolling or additional clicking on navigation elements (since it's basically useless if it's more convenient to instead just hit the back button and click on the proper link instead). So I think it needs to go above the actual text of the first post, at least on the mobile layout. I picked post-navheader because it's below the thread name but above that text; presumably you could add a separate div element above or below that instead but I think that's around the right place for it.

Okay, fair – for me, having to navigate backwards / close a tab and re-click is more annoying (unaesthetic? weird-feeling?) than simply waiting for the page to load, finding the larger link, and zooming in to click it, so I didn't really think about that.

I'm not sure how to integrate it into the top of the UI without breaking the flow for users who don't want it. (A text link seems weird up there.) Perhaps adding the note_go / bullet_go icon to the end of the title? This seems dispreferable / somewhat ugly. Perhaps some other location near the top? (This has the same issue of being hard to click, unfortunately.)

The main problem [for me] with zooming in enough to be guaranteed to hit the button is that it's then difficult to look at the rest of the page (means I have to re-zoom appropriately). A simple button near the title would let me zoom in without much care and tap it, so this would fix most of the problem for me, though possibly not for others.

Moriwen wrote:I like bullet-go stronger, but worry it wouldn't show up well on starry dark.

That's a good point! I also like bullet-go stronger. Here are some screenshots for people to decide – maybe I could lighten it? Or make it bluer (or, well, more cyan) instead of being so purplish?

In the following: "temp4" has been marked unread; "temp3" is partially read; "temp2" and "temp1" are both fully read.
starry light
starry dark

It looks to me like the 'stronger' icons are a different size, but that's because the border matches the background rather well. I'm not sure if this is a problem (inconsistent appearance looks ugly) or a good thing (helps to distinguish the icons more clearly). It looks noticeable to me and I don't think I'd have a huge problem with it.

(I apologize for my repetitively long posts.)

Edit: Forgot to say – thanks for the responses! UI has been noted to be hard and I'm trying to get through the issues related to it by getting consensus from other people. This is useful.

If it were a separate cell, yeah, we could make it take up the whole cell, but as is it's a button in the same cell as the title (for UI reasons when we introduced it). I'd be wary about moving which cell it's in as this would either make the table wider or taller,

After a bit of poking at the problem, I would suggest making it its own cell, and in rows having no such icon use a colspan to make the title occupy the entire space. Then the only additional space occupied is that the title will wrap to the right of the unread icon rather than below it.

Is anybody particularly strongly attached to how the title wraps below the icon? I thought it was neat but don't care too much. If other people are attached maybe we should look for a different solution, but if nobody cares too much this works.

I actively dislike it. It makes it easier to think I hit the icon instead of the title. If the hitbox is increasing for the button this is less of a concwrn, but I would still prefer it wrap to the side instead of beneath.

Hm… I didn't notice this at the time but I'm not sure colspan works for left overlap? Unless we put it in the 2nd cell (i.e. the unread button cell) and give it colspan, but that seems… semantically incorrect.

I think I… probably agree, in a lot of ways, that I actively dislike… parts of it? But I also enjoy the aesthetics of it and shoving it into another column as appropriate would be somehow less pretty. This isn't a strong argument against it, but probably means I'm going to try to fiddle with it so I find an acceptable compromise… (I apologize in advance? :\ I'll try to be non-awkward about it.)

I'm not sure colspan works for left overlap?

Eh? I mean that with-unread is <td>unread<td>title and without-unread is <td colspan=2>title.
Colspan isn't "left" or "right". It is "this one cell occupies two columns equally".

Now I'll certainly agree that it's a bit “semantically incorrect” to do this to the table structure for the sake of layout, but it's not actually harmful in any particular way and if you want to go down that path I'm sure there are bigger fish to bicycle.

Unbitwise wrote:

I'm not sure colspan works for left overlap?

Eh? I mean that with-unread is <td>unread<td>title and without-unread is <td colspan=2>title.
Colspan isn't "left" or "right". It is "this one cell occupies two columns equally".

Now I'll certainly agree that it's a bit “semantically incorrect” to do this to the table structure for the sake of layout, but it's not actually harmful in any particular way and if you want to go down that path I'm sure there are bigger fish to bicycle.

colspan is 'right' in the sense of "It is the third cell in order of the number of <td>s and then it has a colspan of 3 so it takes up 3-5". I have tried not to introduce semantic horribleness anywhere I can and have fixed various places where it's bad and overall have a very strong dispreference for introducing more of it if I can avoid it. Using a dedicated column for the unread button would be far better than using a weird thing like this, for me.