← Back to context

Comment by aleem

9 years ago

Some UI issues and recommendations.

1. The up/down arrows after a vote leave behind a clickable void. That means you can still click that void after you have voted. If you changed the visibility on .votelinks instead of the buttons this would get fixed. Though even better UX would be to have togglable up/down buttons ala stackoverflow and others.

2. Why not provide the favourite link directly on the comment instead of forcing an extra click and page load. If it's a UI clutter issue maybe consider adding star and flag UNICODE characters. Again, having togglable icons for the same would be nice.

3. The collapse icon would be better off on the left for improved UI consistency.

EDIT: UNICODE characters don't show in comment. Is this a bug? They show in the textarea while composing the comment.

EDIT2: Add the following User CSS using your preferred browser addon for a bit of cleanup.

    .togg {
      float: left;
      margin-right: 5px;
    }

    .votearrow {
      margin-bottom: 10px;
    }

15 comments

aleem

Reply
hacker42  9 years ago

It would also be handy to have some visual guides for the indentation levels of nested comments as on Reddit. I've hacked my own indentation marks using a CSS injection for now, but this is clearly still not optimal:

    @-moz-document url-prefix(https://news.ycombinator.com/) {
      td { vertical-align: top }
      td > img { background: repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 38px, rgba(0,0,0,0.3) 38px, rgba(0,0,0,0.3) 40px); margin-top: 4px; height: 12px!important; }
      div.votearrow { padding-bottom: 3px; background: url('http://localhost/uparrow.png') !important; background-size: 12px 20px !important; width: 12px!important;}
    }

I've also increased the size of the voting arrow because it's just uncomfortably small. By Fitt's law [0], smaller buttons require more time and effort to click!

[0] https://en.wikipedia.org/wiki/Fitts%27s_law

  • basseq  9 years ago

    Riffing off your code, this extends the bars all the way up/down.

      td.ind > img {
      background: repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 38px, rgba(0,0,0,0.1) 38px, rgba(0,0,0,0.1) 40px);
      margin-top: 0px;
      height: 100%;
  }
  
  table.comment-tree td,
  table.comment-tree tr,
  table.comment-tree th,
  table.comment-tree,
  table.comment-tree tbody,
  table.comment-tree table {
      margin: 0;
      padding: 0;
      border-spacing: 0;
  }
  
  table.comment-tree td.default {
      padding: 0.5em 0.5em 1em 0.5em;
  }
  
  table.comment-tree td.ind {
      padding: 0 0.5em;
  }

    • hacker42  9 years ago

      Slight addition using wider, shadowy gradients to conceal some aliasing issues:

          td.ind > img { opacity: 0 }
    td.ind {
        background: 
            linear-gradient(to left, rgba(246,246,240,1) 0px, rgba(246,246,240,1) 14px, rgba(246,246,240,0) 14px),
            repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0.03) 39px, rgba(0,0,0,0) 40px);
     }

      Screenshot: https://i.imgur.com/f2WfHyp.png

      Unfortunately it breaks on the 'threads' page.

  • arviewer  9 years ago

    Proper nesting layout will only work if they use proper nesting. Given the limitations - great job! I only use the first two lines as the png does not load.

    • hacker42  9 years ago

      Try this:

          background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='20'><polygon points='0,20 12,20 6,0' style='fill:rgb(179,179,179);stroke:none;' /></svg>") !important;

    • y4mi  9 years ago

      of course it doesn't.

      the url leads you to localhost. you'd need a local webserver which serves your preferred upvote picture.

fazzone  9 years ago

Re: #3, I think when Reddit first implemented comment tree collapsing they also put the button on the right, but I saw a thread where someone pointed out that since the length of usernames is variable, putting the button on the left makes it impossible to mass collapse/uncollapse several comments by only moving the mouse vertically. After that they moved the collapse icon to the left, which I think is a much better UX.

dang  9 years ago

#1 should be fixed now. Thanks!

Re #2: yes, clutter (icons don't solve the clutter problem, and HN's design is emphatically textual), plus there should be a bit of a speed bump before favoriting much as there is before flagging.

  • krapp  9 years ago

    > clutter (icons don't solve the clutter problem, and HN's design is emphatically textual)

    Even if you don't want to add more icons, you could still improve the visual elements you have (the vote arrows.) Links with title tags around Unicode glyphs would arguably be more textual than empty divs with gif arrow backgrounds and no accessible text fallbacks.

    I still think they should work something like this: https://jsfiddle.net/84q0zecv/10/ even without the colors I think it communicates the states well, and is visually not that different from what the site already has.

sctb  9 years ago

Regarding Unicode, we do strip the most distracting codepoint ranges: emoticons, dingbats, misc symbols, etc.

dmix  9 years ago

The "pointer" cursor state remaining after clicking an up/down arrow looks like it was rushed or not quite finished.

I understand HN likes to keep things limited, which has been a real benefit to the overall UX on HN. But minimalism is often something that requires more time to get right, rather than just the result of having spent less time working on it. I feel like that might have been the issue here.

  • dang  9 years ago

    Alas, one can spend plenty of time working on something, care quite a bit about one's minimalism, and still have bugs.

    That one should be fixed now.