fossar / selfoss

multipurpose rss reader, live stream, mashup, aggregation web application
https://selfoss.aditu.de
GNU General Public License v3.0
2.36k stars 343 forks source link

Setting for enabling the columns back for reading articles #1372

Closed desbest closed 1 year ago

desbest commented 1 year ago

I was looking at the changelog (or release notes) for version 2.19 and I saw this.

Long articles will no longer be arranged into columns, allowing for smoother reading experience (https://github.com/fossar/selfoss/pull/1081)

But I like the columns. Can you add a new setting in config.ini that allows me to add the columns back? That way people can choose whether to have it turned on or not.

jtojnar commented 1 year ago

That could have been worded better – there are still columns when the content split into columns fits into a single screen. But I think having columns does not really work with having to scroll – in the worst case you would have to scroll down, up, down, up and down in a single article, potentially for minutes. I did not think anyone would want that.

If you really want that I can come up with a user.css change you can apply but for an option, I would have to be convinced it is worth it.

desbest commented 1 year ago

Sorry for not wording it better. My laptop was slow due to mandatory hardware compatibility scans and Windows Update, so I couldn't post any screenshots earlier. I mean something like this.

selfoss article with singular column view

selfoss article with multiple,column view

I like having the columns because I have an autism induced visual processing disorder that is unclassifiable. I just know that I have problems with visual noise, time perception. And finally when mixing up the transversing, transforming and transmuting of the same type of attribute across multiple entities, which would then have me do the wrong thing when doing any sort of work or highly focused reading. It's long to explain.

Across various blogs and news websites, they tend to change the design of the website, as according to the reading grade, technical nature, level of field-set terminology, varying sequential nature and the varying burden of short-term and long-term memory, that is required for the reader to sufficiently understand, correctly interpret, infer and remember the article.

For example, if I read a highly technical website like The Economist that is flooded with economics terminology, their website design will be designed in a way, to not detract from the writing style of the article at hand and to make you into a better reader of it. Whereas a viral journalism website like Buzzfeed which is aimed at a young demographic, they're going to design their website differently than that one, in order to accommodate to the nature of the writing style.

Also can you come up with the user.css code so I can put the changes back?

jtojnar commented 1 year ago

You can use something like the following:

.entry-content.entry-content-nocolumns {
    column-count: 3;
    max-width: initial;
}

But I would expect having multiple columns to actually be worse for visual noise. Compare reading in forced multiple columns:

https://gfycat.com/inexperiencedwellinformedizuthrush

With the new single column:

https://gfycat.com/cheerfulillustriousblacklemur

Maybe there is a better way to adjust the style to make reading even better for users with such disorders. For example, making the single column narrower?

desbest commented 1 year ago

It's not about how much content is on the web page or how crowded the web page is. Anything about how much whitespace the web page has or how much elements it has is or how crowded it is - is irrelevant.

It's about asking the question "If I had never seen that website before in my life, within a space of 3 seconds, how long would it take me to figure out what the purpose of this web page is? And also to figure out how I can go about achieving my desired daily objective? All without accidentally confusing one thing for something else or mis-reading it.

Example 1 (goal driven design and zoned off areas)

If you compare the 2007 and 2012 web design of microsoft.com, which design do you think would allow the user to make the most sense of the web page, in regards to firstly knowing which area is for what purpose, secondly how to reach their desired daily purpose whilst also finally avoiding confusing one thing for something else?

If I wanted to buy a Microsoft keyboard or download Visual Studio, where would I go?

My answer is that even though the 2007 design is less crowded and more whitespace, it also counter-intuitively has more visual noise.

microsoft website screenshot 2007

microsoft website screensht 2012

Example 2 (avoiding accidental clicks of correctly interpreted visual cues and also avoiding accidental mis-reading of two similarly worded yet different options)

Look at the legacy and modern designs for Jumpchart and also 2 competing yet popular FTP software, Filezilla and WinSCP, both free and open source.

Which design do you think will cause the least amount of accidental clicks and the least amount of accidentally confusing one thing for something else (in instances where two different dialog boxes or icons appear similar to each other), by mis-reading it?

I would say that the modern Jumpchart design has more visual noise, even though it has less elements on the page and is less crowded.

jumpchart legacy media manager

jumpchart modern media manager

jumpchart legacy edit page

jumpchart modern edit page

I would also say that WinSCP has less visual noise than Filezilla, despite WinSCP making their user interface be more flooded with icons and toolbars.

filezilla 3 screenshot

winscp screenshot

jtojnar commented 1 year ago

It's about asking the question "If I had never seen that website before in my life, within a space of 3 seconds, how long would it take me to figure out what the purpose of this web page and also figure out how I can go about achieving my desired daily objective? All without accidentally confusing one thing for something else.

I am not sure how does re-flowing the article text into columns help with this. The purpose of the article will typically be to convey some information, the details of which you could infer from the article title, source name and the content itself. There is no other structure as the article is purely linear.


I am not really sure what you mean by visual noise. I mean both of the Microsoft websites are pretty terrible, with majority of the real estate spent on ads – I would definitely call those a visual noise since they do not play any role for furthering my goals.

Microsoft website in 2013, annotated

I would say the 2013 is better for the tasks because the menu is front and center (although I am not sure whether I should look into Products or Buy for a keyboard), rather than stuffed to the site. But I do not think that is related to the noise – I think 2013 page has more noise.


For Jumpchart, I again think both are suboptimal designs. But I still would not say there is much of a difference in their noise levels – the bigger issue is how are the features organized:

In fact I would say the modern file list in Jumpchart is more crowded and I prefer it that way. But for working with images, the larger thumbnails would be useful so there probably should be a switch.

The paper clip and chain link icons in the text editor could look nearly identical to people with poor eyesight so that should probably be improved.


For WinSCP, if I disregard the toolbars overflowing with icons, which definitely succeeded in distracting me, I only see four elements in FIlezilla that are lacking from WinSCP:

I am not counting the red and yellow lines since that is a comparison mode, which is not active by default.

So again I am not sure what you mean by the visual noise except maybe the progress bars and message log.

jtojnar commented 1 year ago

Closing as it is not clear what to do here.