FeX: Forum Explorer – Rethinking how we interact with threaded conversations

https://www.mcnutt.in/forum-explorer/

by merqurio • 7 years ago

218 70 7 years ago

ventedfins18• 7 years ago

Hi hackernews! I'm the author of this site/chrome extension/app. I'm happy to answer any questions you might have/field any comments

chrisweekly• 7 years ago

Thanks for sharing. I'd suggest adding a bit of descriptive prose / "about" / readme / FAQ on the linked page. Also, its layout is suboptimal on mobile safari.

JohnFen3• 7 years ago

I'd suggest adding a bit of descriptive prose / "about" / readme / FAQ on the linked page.

I think this would be essential. I've been clicking around on it, and it's not entirely clear to me how to work it. I may be an idiot, but I'd really love some instructions.

EDIT: I just now managed to see the "wait I'm lost" link toward the bottom. It took some doing (that's part of the page that gets clipped). I'm now following the walkthrough -- perhaps that will clarify things for me.

Edit edit: OK, I think I have a basic understanding of what's up. It's overly complex for my needs, though -- I think I prefer the normal comment threads.

ventedfins18• 7 years ago

Unfortunately this work isn't really targeted at mobile devices. It seems to work reasonably well on tablet size device (IMO), but I wasn't really sure how to address phones. I think there was some work in the earlier 00's that tried to use treemaps as a way to explore social graphs on phones that had styluses but I haven't really heard of stuff since then

iandanforth• 7 years ago

I like being able to browse answers by the OP. Using your tool I found the OP name in the Top Poster's section and clicked that name.

I then wanted to see the context for a specific comment so I clicked on it. Great that worked!

Then I wanted to go back to where I was in the list of comments by the OP. I clicked the back button ... that didn't work.

Ideally either the back button would work (each state has an equivalent URL) or the UI provides a way to return to the last state.

Thanks for the interesting tool!

theoh2• 7 years ago

When I started reading Usenet in the 90s, trn (threaded read news) was the state of the art in news readers.

It might be worth mining the trn user interface for ideas.

The author tried to write a major new version (4) in the late 90s, but from what I could see of the development process (being on a mailing list), the codebase became unmanageable and there were lots of bugs that proved impossible to catch. Usenet was on its last legs by that stage anyway. So that's a cautionary tale: make sure the specification and basic architecture remains clear and clean. (I'm not sure how many of the bugs back then were related to managing ncurses and other fiddly issues that won't arise in the architecture of a web app.)

u801e• 7 years ago

In terms of the interface, what did trn have over other newsreaders that were capable of displaying threads?

mthoms3• 7 years ago

Very cool.

I've got to admit though, I'm a little jaded towards "Chrome only" extensions. Is there a reason you couldn't build this in Firefox?

As web developers, we've really got to stop this practice lest the web become further fragmented.

Anyways, I don't want to come down on you specifically - I realize this is probably just an MVP. You did a great job.

ventedfins18• 7 years ago

Thanks!

I totally agree, I was just trying to minimize the number of things I was designing for while I was building it.

That said, Firefox addon is in my todo! https://github.com/mcnuttandrew/forum-explorer/issues/45

jodrellblank2• 7 years ago

Is there a reason you can't build this in FireFox?

How does "someone built a Chrome extension" justify you asking them to explain themselves for why they didn't build it the way you want?

solipsism• 7 years ago

People are going to build their apps where there are users, whether it's Chrome apps or iOS apps or Windows games. Asking people not to is the wrong move. It will lose almost every time.

sm4rk02• 7 years ago

This site is crashing my Firefox Klar (ie. Focus) with: https://gist.github.com/sm4rk0/bc35eafbd516047b73d9dec2e2663...

ventedfins18• 7 years ago

Huh, i had not heard of that browser! cool i will investigate

Kinnard• 7 years ago

Have you checked out arc?

http://arclanguage.org/

Hackernews is written in arc. I also think its interesting the the comment structure is a tree, just like an S-expression:

https://en.wikipedia.org/wiki/S-expression

ventedfins18• 7 years ago

I haven't! That's super cool!!

eps• 7 years ago

Viewing site on iPad, it just shows a stack of "LOADING" messages on the left, "Some interesting examples" on the right and that's it. Nothing happens.

scott_s• 7 years ago

Go to the comments for a story.

oh_sigh• 7 years ago

Off topic but your home page(https://www.mcnutt.in/) has a typo in bold: LANGUGAGES instead of LANGUAGES.

ventedfins18• 7 years ago

:8 someone else actually went to the trouble of filing me a PR https://github.com/mcnuttandrew/mcnuttandrew.github.io/pull/...

I really wish my tooling for spell checking while writing jsx-y code was better, i feel like this happens a lot

s188• 7 years ago

I'm definitely going to give this a try over the next few weeks. I like that its live. I like that I can mouse over an end point and pull up and entire thread (an interesting use case). I reckon this could become my 'go to' HN comment reader. I've been a long time lurker but created an account simply because of this. Great work!

taliesinb2• 7 years ago

Funny story, I had almost exactly the same idea in 2013 and prototyped it in Mathematica (probably a lot of people have had this idea). Here's a screenshot of some random thread that I happened to visualize (comments were visible as tooltips in my rough and ready implementation): https://imgur.com/a/9xfw6cA (color represents common authorship, size is comment length). I didn't have the Javascript chops to do anything usable, let alone as polished as the linked Chrome plugin; kudos to the author!

Another thing I was doing at the time was visualizing Twitter and Facebook friend graphs, and the first insight there was to deliberately drop the 'ego' node, as it destroys any hope of effectively showing community structure of the friends themselves (it also carries no extra information as everyone is necessarily connected to the ego).

So perhaps a similar thing would be effective for threaded conversations: if you drop the root node, disconnected discussions will become separate trees in the visualization, which will help with efficient use of space, and the tail of singleton comments that no one replied to will become isolated disks that can space-fill the background. Switching to an actual rectangular tree layout as I used in my prototype will also help in that one consistent direction (down) represents nested depth.

ventedfins18• 7 years ago

I've talked to a few people who've had similar ideas! In fact there is a pretty long history of people in visualization/hci communities creating applications like this. There's an extended abstract that goes along with this work that details this history.

Dropping the root node is an interesting idea!

taliesinb2• 7 years ago

Do you mind linking to the abstract? Would like to read that history.

jcims• 7 years ago

Have you thought about extending the graph to include links found in the individual comments? Internal links to HN could surface those threads and external link nodes could show all stories with said link to find related content.

Unrelated, might be fun to surface some kind of iconography to indicate semantics of the content (e.g. flames/smilies/etc)

jjtheblunt• 7 years ago

You could look up Prof Simon Kaplan's Conversation Builder effort at UIUC in 1989 and thereafter, for the earliest variant i know of. Mark Allender worked on it there, for instance.

ventedfins18• 7 years ago

that's so cool! i had previously thought that the first link in this line of work was in '99 with Donath's visualizing conversation https://academic.oup.com/jcmc/article/4/4/JCMC442/4584411

JohnFen3• 7 years ago

That page has a major layout issue for me: it appears to have a fixed height with no vertical scrollbar, so the bottom portion of the page is completely inaccessible to me even if I maximize the window.

Is that part of what you're trying to test, or is it just an unimportant artifact of the test page?

Also, I'm not actually on board with the visualization -- it just makes everything more confusing and harder to follow. But that might be my personal idiocy.

jolmg2• 7 years ago

It also happens to me. The graph resizes and reorganizes as the window size is adjusted, but it always shrinks less than it should. There's always a part of the graph that goes beyond the bottom of the window.

ventedfins18• 7 years ago

What type of browser are y'all on? I'd love to fix this issue. It would be a big help if you would file me an issue here https://github.com/mcnuttandrew/forum-explorer/issues

yellowapple• 7 years ago

The bottom cutoff happens intermittently for me, too (e.g. when viewing the graph for these comments). When it does, changing the layout to TreeX under settings seems to help.

In general, the different layouts might be more to your liking.

paulgb2• 7 years ago

Ooh, this is neat, thanks for sharing! I made something similar for Twitter conversations (shameless plug: https://treeverse.app) so it's neat to see the UI decisions you made, especially the timeline interaction.

ventedfins18• 7 years ago

I love treeverse! I spent a lot of time looking at treeverse when I was building forum explorer. Did you see that it got used in this paper https://mw18.mwconf.org/paper/to-journey-in-twitter-canoes-m...

paulgb2• 7 years ago

I did not see that, thanks for the link! Glad I could be an influence :)

torvald• 7 years ago

Nice. I wonder if this something like this could be applied to code, to easier get a overview of how classes and functions relate to each other.

cheschire• 7 years ago

Visual Studio provides a feature called Code Map. To create them you need VS Enterprise, but the other versions can open them.

https://docs.microsoft.com/en-us/visualstudio/modeling/map-d...

AndrewHampton• 7 years ago

Although I believe it was a good idea to remove them, I miss the vote score shown on comments. I had a script that would highlight the top comments. This would frequently reveal insightful comments 2 or 3 levels deep in a random thread I would have otherwise missed.

magicalhippo• 7 years ago

Slight issue, graph node highlight color should be the same as comment highlight color.

Some of the nodes in a vertical tree, for example here[1], are very close to each other while there is room for them to be a bit more separated.

Comment scrollbar goes beyond window edge.

Firefox 67.0b18 64bit Windows 10.

Overall looks neat and interesting, thanks for sharing.

[1] https://www.mcnutt.in/forum-explorer/?id=19902965

Deimorz• 7 years ago

Reminds me a little of the "Wikum" project that was worked on at MIT: http://wikum.csail.mit.edu/

ventedfins18• 7 years ago

That's super cool! I hadn't seen that, very neat. That reminds me a lot of this https://github.com/enamulh/ConVis

miki123211• 7 years ago

Can someone explain what exactly does this do? I'm a screen reader user and it seems totally inaccessible.

soperj• 7 years ago

It just takes a conversation thread and turns it into a tree graph, so you can follow it more visually.

jamesgeck0• 7 years ago

It's not particularly easy to use for people without screen readers either. A pane on the left shows a DAG, with nodes representing Hacker News comments extending from a central node. Mousing over a node shows the comment in a pane on the right. It's impossible to move the mouse pointer from the left pane to the right without changing the visible comment.

ventedfins18• 7 years ago

It's not particularly easy to use for people without screen readers either.

That's very true. This hasn't really been designed around screen readers, making this type of graph + comment tree interface work accessibly well is a really interesting challenge!

It's impossible to move the mouse pointer from the left pane to the right without changing the visible comment.

If you click anywhere on the graph then it locks the current comment selection. You can then click to unlock!

daww• 7 years ago

Looks like something I did some time ago[0], nice to see that this space is being explored. Wikum[1] from MIT's CSAIL is also an interesting alternative.

[0] https://mrandri19.github.io/comments-as-a-graph/?thread=hn3

[1] http://wikum.csail.mit.edu/

vanous• 7 years ago

Might be very nice, but unfortunately all I see are many lines that say "loading". Is this intended for people with "web browsers" or is it only for those who installed the "Google Chrome" software?

ventedfins18• 7 years ago

The demo page (which is linked above) should transform those loading message into a list of threads you can click into. Would you mind filing a bug over on https://github.com/mcnuttandrew/forum-explorer ?

Eiriksmal• 7 years ago

https://www.mcnutt.in/forum-explorer/?id=19615895

The circular tree your code generates is very cool. That presentation makes it a lot easier to see how the different threads relate than a flat tree structure.

It's especially fun to see how the topics weave through the conversations. Though commenters mostly stick to one topic on a particular tree, some of the same topics appear on siblings of adjacent trees.

chaostheory• 7 years ago

I feel the main issue with forum UI is the limitation of 2 dimensions. Once AR and VR become more mainstream with higher resolution, I predict we'll have more interesting conversation UI

duxup• 7 years ago

I like the idea although I can't help but think the visualization sort of draws me to comments with lots of responses....and on HN that is ok.

On sites that heavily rely / encourage getting responses such as Twitter I worry it just encourages posts that are trite, obnoxious and such as those get the most responses.

Granted this is a visualization tool so it's not "responsible" for issues that are largely human / platform issues.

kolinko• 7 years ago

+1.

I like that mini-summaries on the left-hand side ("subconversations about XX"), but the graph view seems to prioritise responses with the maximum amount of comments.

E.g. if there is a flame-war going on in one of the subthreads, it will be more visible than a highly rated comment with a few interesting subcomments.

ventedfins18• 7 years ago

I know what y'all mean. As i've used the extension myself I find myself reading a really different type of comments then when i read linearly. It makes it easier to find people have discussions (which are, admittedly, often arguments), and it makes it easier to see when a couple people are just all over the conversation.

sitkack• 7 years ago

This is freak'n awesome. Please, we need to do more experiments like this. There are small usability nits about things going out of focus and changing when you move the mouse but for the most part, it is pretty good.

I'd like to see sentiment analysis color code the nodes and maybe node to node distance represent response time. And link width represent number of characters in post.

davidy123• 7 years ago

I'm sorry to be a cynic. I love graphs. The web is a graph, web pages are graphs, linked data, machine learning all use graphs. And they can look really cool. I especially loved the hyperbolic graphs that were the rage a decade or two ago. I don't know how many projects I've dropped this type of viz in. Then removed it, because there are three different reactions from end users: It's scary and confusing, it looks neat but it's never used, or it looks neat and it's clicked on a few times. I hope as we move into massive data they become digestable for ordinary UI, but until then they're mostly actually useful for specific edge cases.

zestyping• 7 years ago

Nice! The Chrome extension description sounds like it works on more than just Hacker News. What kinds of threaded discussions does this work on? (e.g. Disqus? Reddit? Facebook?)

bryanrasmussen• 7 years ago

I really hate these, although of course I like the way they look. But the normal way is I come in I start reading there - I need to click on stuff to read things, I loose the context of where I was, if I am hovering nodes I see that node - oh there's a link in the content I want to click on oops I hovered another node I need to go back and hover the node I was on before, click it to lock it in place and then go over to other side of the page to click on the link I wanted to look at.

But I sure do like graphs.

Fnoord• 7 years ago

Have you considered keybinds? Vim-like keybinds, for example?

Already__Taken• 7 years ago

Some visual feedback would be nice, I think that;

* The circle should plot threads clockwise newest<->oldest (or reversible?)

* Node connection length should be the reply delay in the chain

* Node size should reflect comment size

* Node color/opacity should reflect comment score/vote amount (if present, which HN doesn't have.)

umurgdk• 7 years ago

Have you seen arguman.org ? Similar ideas (visual wise).

FeX: Forum Explorer – Rethinking how we interact with threaded conversations

Related Stories