Show HN: WikTok – A Recommendation UI for Wikipedia

by b3n • 3 years ago

73 11 3 years ago

Hi HN,

WikTok is a UI for Wikipedia that lets you quickly swipe (or use your arrow keys) to navigate between random and recommended articles (based on the previous articles you interacted most with).

It's just a fun project I hacked together this weekend, so may be a little rough around the edges, but I'd love to get your thoughts.

Let me know if you have any suggestions (or find any interesting articles!)

Cheers,

bgoldste• 3 years ago

Really enjoying this, thanks for sharing!

shpx3• 3 years ago

This is great. I had a similar idea recently as I was reading Python documentation: suggest to me random technical things I would like to read or would benefit from reading. We could even have this for all text on the internet (and books), or for all webpages really.

I read a few dozen articles on my phone on Safari, here's my feedback:

- implement some visual feedback like a swipe animation (the next/previous article pulling in from the side or something that lets me quickly evaluate the next article like a minimap or its Contents) and increase the cancel zone a bit (it should be relative to phone width), it feels brittle, I feel like I have to be careful when scrolling.

- I wondered whether the swipe direction is a like/dislike or if the direction doesn't matter. I assumed it didn't matter but turns out right goes back, but after you go back, left swipe gives you a new article instead of going back to the article you went back from, this is not good because I don't mind swiping a few extra times as much as I mind losing an interesting article, so doing it this way means I need to consider anytime I want to go back whether I'm okay with losing the current article instead of having "back" be a safe operation. Also, maybe make it scroll the same way as TikTok, down. So I can scroll down for the next article after I scroll through the entire article or up to go back to the previous one, that way left/right scrolls can be used for something else. This would make it hard to skip long articles, maybe make both left swipe and down swipe go to the next article? I'd have to test to see if it was a good idea.

- going back/forward should preserve scroll position

- the back button doesn't always work, I often lost articles I wasn't done reading because

- scrolling up can refresh the page and lose my current article

- scrolling sideways on a table or long formula triggers a swipe

- I experienced some jank where I sometimes get sent to another page, I'm not sure why it happens maybe I refreshed and it sent me to a new recommendation

- I like that you removed citations and other "cruft". I saw an empty Footnotes section header on "Sub-pixel resolution" that should've also been removed. Also, the articles have extra padding at the end from the last section that you should shorten

- sometimes when I click on an article while reading an article, I'll get the article I clicked on recommended soon after, sometimes more than once actually

- some articles have lowercase titles but on WikTok they are capitalized

- image previews are lower resolution than they are when I open the page on Wikipedia, you might need 2x srcset directives to the image elements

- tapping on an image should open the max resolution image file

- I was recommended some genetics article and clicked through a couple articles and the algorithm didn't start only suggesting those articles, which was good

- I got a place disambiguation page of some villages in Poland and then one of the villages, not very interesting

- improve the top text: drop the ".org", just "WikTok" (it's cleaner), make it the same sans serif font as the article or the serif of the headers and use an actual minimal shuffle icon and don't make it part of the hyperlink (if you keep it a hyperlink at all, it should really be a button)

- some articles are more fundamental than others and should be recommended first. some articles (especially for math) require prerequisite knowledge so it's less efficient to show me the more specific one first, I might waste time trying to understand regardless but it would be better to show me simpler articles first, I guess an advanced algorithm would have to try to intuit how much I know (simple heuristic: the average person doesn't know what Lie groups are) and have some kind of graph of knowledge dependencies that Wikipedia articles form, probably from how they link to each other. At that point it's more like teaching, you estimate what I know to guide me through the graph of concepts more efficiently

- preload the next page

- it seems like when I tab out you might not be tracking that and considering that as me still reading the article

- does the algorithm track how I scrolled the page, which words I dwelled on etc.? You could probably determine the level of my understanding of an article from how I scroll it and then re-suggest articles I didn't understand or read fully

- external links in infoboxes aren't clickable links, which is bad when the article is about a website and I can't click to go to it

- some long, important articles I want to read but not right now

You're solving a bit of a different problem than TikTok because there's only 6 million Wikipedia articles (much less useful ones) so your "power users" would be people trying to read it (or some section of it) exhaustively over a longer period of time, so you might want to cater to that by letting people see more of what you track, like what articles they've read and show them long lists of related articles for the current article, so that you can see that you're making progress instead of feeling that it's an endless pit of information. You could paint links purple manually because I bet the browser starts to lose that data, or just make a global percentage progress bar... I think Wikipedia has some metadata for which project an article belongs to that you could use here as well.

Will you open source this?

b3n• 3 years ago

Thank you for taking the time to share all this great feedback! Appreciate it :)

I agree with all your points. I will only comment on a few, but will go through each of them and fix what I can.

I assumed it didn't matter but turns out right goes back, but after you go back, left swipe gives you a new article instead of going back to the article you went back from

This is actually a bug, it's supposed to go forward but it seems `window.navigation.canGoForward` is not implemented in Safari. I'll add a workaround, and then think about better ways to navigate between articles.

preload the next page

This is supposed to happen already (the API is queried in advance), but it might be slow due to updating the DOM. I'll see if there's a way I can pre-render the next page (might work well with your visual feedback suggestion).

does the algorithm track how I scrolled the page, which words I dwelled on etc.?

No but I'd like to try something like this and see if it helps the suggestions.

letting people see more of what you track, like what articles they've read and show them long lists of related articles for the current article, so that you can see that you're making progress instead of feeling that it's an endless pit of information

That's a great idea! Once I've fixed the numerous bugs I'll try and add some interesting/fun stats.

Will you open source this?

Yes! The only reason it's not already open source is because I'd like to clean up the code a little first.

shpx3• 3 years ago

I should've said "preload images for the next article", I realize now (after using it on a spotty connection) that you do preload multiple articles (you made a good choice for the amount that I didn't notice my spotty connection that much), but just not the images. Maybe you should preload multiple pages but only preload images for the next page to save data.

More thoughts after using it again today:

- try disabling the network, scrolling right to the end of the preloaded articles and then re-enabling the network, I think it won't load more articles you'll just be stuck on a white screen with no feedback. At least I managed to get it stuck in this mode somehow and I had to refresh the page manually

- remove the # from the url

- if it's not hard to do, make it multilingual. at least for the top, let's say, 12 languages. en.wiktok.org should just redirect to wiktok.org though

- I sometimes want to read a specific article while reading a recommended article, but there's no way to do that, such as an article search (I almost hesitate to bring this up because I like the clean interface without this feature)

- let me create an account to not lose my data (also, let me log in with my Wikipedia account specifically and extract the articles I've edited to gauge what I'm interested in, although careful here because I personally edit things I'm knowledgeable in or things I care about not being wrong, not necessarily interested in reading more about)

- I've seen the article for ISBN about 4 times now

- the recommender needs to be making more varied, exploratory recommendations. But obviously the recommender is the hardest, most important part of this whole thing.

- for long term users you can start showing articles they've already seen if you record a timestamp for when they saw an article

- Wikipedia really is nicer without the citations if you're trying to read a lot

- I end up opening multiple WikTok tabs when I open links on some article, it would be a nice detail to synchronize recommendations across tabs with that in mind. Maybe you do this already, but for example I might open a new tab, then swipe left for a recommendation, close the tab and go back to the first tab I came from and I shouldn't get the same article recommended there again, even though it might already be preloaded. Though here you will have to make sure you avoid preloading the same recommendation 10 times if I have 10 tabs open every time I view a recommendation in one of them that they might all have preloaded

Data sources:

- articles have a short description... on the one hand the short description could help me decide if I'm interested in an article faster, on the other if I end up reading the entire article reading the short description was a waste of time. Maybe it could be a totally separate "blitz" interface of an endless scroll of these short descriptions and I tap on articles I'm interested in

- Wikipedia articles are categorized (most articles belong to some Project and also have a list of categories they belong to) are you making use of that data? Though in my experience that data isn't that reliable and using it directly (instead of as a signal for the recommender and to seed the algorithm's learned categories) would not be the optimal recommendation. When you install TikTok it lets you scroll to start and to get the idea of the app, but when you create an account it shows a list of categories and asks which ones you're interested in to bootstrap, this could be good here too, there's some topics I'd like to read about but the algorithm hasn't started suggesting them yet

- Wikipedia publishes view counts of articles, you could also use this data point in your recommender

- user location: a large part of Wikipedia is geographical articles. These are largely useless, but while there's no chance I would be interested in learning about regions of Finland (what I was recommended once), I might be interested in the places around me, possibly all subdivisions of the country or state I'm in. The whole thing with tiktok is that users want (for some definition of "want") to give you all their data, as long as the recommendations are good.

As I mentioned before, when you detect that I seem to be interested in a certain group of articles, there could be a natural order to show those articles in, these "runs" could also be user curated or maybe use Wikipedia categories somehow.

If this is a project to help people read Wikipedia exhaustively, you could display some kind of time estimate of how long it will take to read everything I seem to be interested in

Another idea (related to my suggestion for doing this for books instead of Wikipedia) is to make this a kind of "jumping off point", where the article is the preamble for the topic. So when I scroll to the end of the article and then scroll even more, past the article, it would open some resource that's more in depth, like a book or a scientific paper or a webpage. Deciding which resource that would be is a complex editorial decision and a lot of work and there might not always be one, you could for example look at the sources of an article and somehow gauge which one is the most important one, you could look at the External Links section if it exists (but they usually suck because no one reads them so no one curates them), you could seed it using these methods but then ultimately let users curate the decision (now we're talking about of course reimplementing Wikipedia), you could have a list of options and choose somehow using what you know about the user and if you can determine why they're interested in this topic. If it's not a freely available paper/book (which it never will be), you could have a setting to open a Google search with the title or to just show the DOI or ISBN number (and users could choose to run some code that does something with that information). Ideally it would open a specific page in the book though, because I don't want to scroll past "this page intentionally left blank" and a book can be authoritative for multiple articles but be 1500 pages long.

73737373733• 3 years ago

Does a "recommendation platform" exist yet? Where users are shown content by recommenders who can bid with points on their attention time, receiving points if the user liked it, and losing points if they didn't? With a general enough interface that both bots and humans can recommend content?

TechBro86152• 3 years ago

This sounds vaguely like Steemit, but not quite.

I like the idea. You should build it!

73737373733• 3 years ago

I will try! The biggest problem will be to get the incentives right

lethologica• 3 years ago

I love this so much. Thank you!

Show HN: WikTok – A Recommendation UI for Wikipedia

Related Stories