Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setting for enabling the columns back for reading articles #1372

Closed
desbest opened this issue Oct 12, 2022 · 6 comments
Closed

Setting for enabling the columns back for reading articles #1372

desbest opened this issue Oct 12, 2022 · 6 comments
Labels

Comments

@desbest
Copy link

desbest commented Oct 12, 2022

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 (#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 jtojnar added the ux label Oct 12, 2022
@jtojnar
Copy link
Member

jtojnar commented Oct 12, 2022

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
Copy link
Author

desbest commented Oct 12, 2022

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
Copy link
Member

jtojnar commented Oct 12, 2022

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
Copy link
Author

desbest commented Oct 12, 2022

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
Copy link
Member

jtojnar commented Oct 12, 2022

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:

  • Why is the file highlighted in a way that catches attention?
  • Why is there “No files found” message?

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:

  • Quick connect form – but that is part of the toolbars. Never used it maybe it is useful to some people.
  • FTP message log – this could probably be hidden by default. User should have most of that info from Transfers pane so it should only be needed for debugging. Though, with how reliable FTP is, I was looking at the panel all the time when I was using Filezilla, so maybe it is needed after all. Edit: Actually, it looks like they merged it into the Transfers pane in recent versions.
  • Directory trees – these are quite useful for quickly jumping through a directory tree, can be hidden if annoying.
  • The green progress bars in the Transfers pane – I imagine they can be distracting to some people, personally, I find them useful to quickly gauge the progress without having to focus on the number.

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 added a commit that referenced this issue Oct 13, 2022
These lead to confusion like:

- #1372
- #1373
@jtojnar
Copy link
Member

jtojnar commented Apr 13, 2023

Closing as it is not clear what to do here.

@jtojnar jtojnar closed this as completed Apr 13, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants