Hacker News Reader

Comment by zoul | Hacker News Reader

The tap targets are minuscule and close to each other.

I had to pinch-to-zoom to upvote this comment. :-)

That's a feature IMO -- HN could even make them even smaller.

It should take conscious effort to vote, and the small target size mentally reinforces this model; that it's not supposed to be the most common action.

EDIT: See, clearly the vote targets simply aren't small enough! </s>

I’ve also down voted comments by mistake...

They have added an undown link a while back.

But the undown/unvote links are hard to tap on mobile as well. On firefox on android it's always an exercise in patience.

Adding undo changed the feel of downvotes a little. Irreversible accidental downvotes were scattered randomly on comments and they made the occasional downvote feel less harsh.

I rarely wish to click on the username or time links (“3 hours ago”), but that’s what I click on the most due to size and placement issues (when trying to vote or collapse a thread). I agree one should not blindly vote, but at the same time if you have decided to vote, it shouldn’t be maddeningly difficult and error prone to execute.

Usability-wise, isn't it kind of weird that the click target you use the most (upvote arrow) is the smallest of the three? And the ones that you use rarely or never, are so easy to hit by accident. Why must world be like this?

Related question: what is the easiest way to increase the tap zone of a HTML element using CSS?

Aside: I have noticed Safari auto-inceases the touch zone for inputs and elements with ontouch/onclick events (I noticed because I had to fix an issue caused by this!)

a {padding: 1rem}

This increases area by padding the link. Just don’t want the rap areas of different elements to overlap with too much padding.

You can also put a border around the new area, or a box shadow, to indicate larger click area, making it a button sort of:

{border: thin solid grey}

Note that the <a> element is inline by default, which means top and bottom padding is not applied. Set display: inline-block; to have padding apply all around while retaining the element’s flow in the layout.

Thank you! I’m still learning CSS and will have to adjust my style sheets! :)

Probably just add some extra "padding: 5px". All the padding area registers "clicks" for the element.

For the thread collapsing functionality I think the long press/touch could mitigate the need for pinch zooming. Just hold your thumb on the comment long enough and bang, it's gone. For me this is the most commonly performed interaction with the site.

I find this behavior on Reddit annoying when I’m reading a long comment and the thread suddenly collapses because I left my finger on the screen. There’s pros and cons to the approach.

The trick is to keep your karma below 500. xD

Thanks! As someone who lurks here much, much more than commenting, I wasn't aware that the interface would change over 500 karma.

This does put the discussion in a different light (not to mention helps avoids me making comments that don't apply to more karmarific users).

That's weird - must be an iPad specific thing. It works just fine on Android Chrome.

I've noticed that an Android Chrome I have no issues hitting the links on this site, but if I switch over to Firefox I can barely click anything. It's not just this site. That annoyance alone has almost driven me back to Chrome.

Reply on news.ycombinator.com