UX: change read and unread icons to match FreshRSS'

[christophehenry]

Ok, this one will probably be a bit controversial but I find the icons to mark as read and unread in the ItemScreenBottomBar confusing. This PR adopts the icons used by FreshRSS that are IMHO more expressive.

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 5 lines in your changes missing coverage. Please review.

Project coverage is 22.42%. Comparing base (8652bc9) to head (d5ccb6c).
Report is 1 commits behind head on develop.

Files with missing lines	Patch %	Lines
...eadrops/app/item/components/ItemScreenBottomBar.kt	0.00%	3 Missing ⚠️
...m/readrops/app/timelime/components/TimelineItem.kt	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             develop     #259   +/-   ##
==========================================
  Coverage      22.42%   22.42%           
  Complexity       462      462           
==========================================
  Files            190      190           
  Lines          10207    10207           
  Branches        1466     1466           
==========================================
  Hits            2289     2289           
  Misses          7781     7781           
  Partials         137      137           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[Shinokuni]

I have mixed feelings about this. It's true that current icons aren't the most understandable, but when I see yours, I understand them as if I had red a message or a mail. They are less suitable to articles or any kind of reading content which is not a message.

I'm just sharing my thoughts here, if you would like to argue, don't hesitate.

[christophehenry]

I get your point. I just don't have a better idea since I'm not a designer. My opinion is that using the icons of one of the providers is at least a bit better.

Edit: Nextcloud News seems to use an eye:

I can't find the ones for Fever. I guess it should not be difficult to use different icons depending on the provider.

[christophehenry]

Check out my last commit.

[Shinokuni]

I find the Nextcloud icon a little more relevant. It is more context neutral and enough self-explanatory. What do you think?

On the other hand, I don't think we have to go as far as using an icon per account type, it seems way too much to me. I think our responsibility is to use the right icon.

[christophehenry]

I find the Nextcloud icon a little more relevant. It is more context neutral and enough self-explanatory. What do you think?

It depends on how it is used under Nextcloud News. On FreshRSS, the icon is used to indicate current status and not action. So the open letter is used to denote a read item on a button to mark as unread. But another provider may choose to do the other way around: the icon is used to indicate the action and not the current state. So an open eye icon (or an open letter icon) may be used to indiciate an action to mark as unread on an item that is read.

What bothers me with the current implementation is that it chooses the second: the barred check mark denotes an action to mark as not read on a read item as opposed to FreshRSS.

The current proposed solution solves that by sticking to the habits of the selected provider. But I'm ok with just adopting Nextcloud's icons if it matches FreshRSS' behavior (icon shows the current state, so barred eye denotes an unread item, normal open eye to denote a read item)

[Shinokuni]

Okay I understand where you want to go. Nextcloud News use icons to reflect the current state and not the action.

Here are my thoughts:

• I am now against using icons and behaviors per account type. A user might have multiple different account types and he could be lost if this behavior change depending on the account he is using
• I don't think Readrops should adopt every provider behavior, it isn't a FreshRSS first app, even if (including myself) a lot of people use with it with FreshRSS.
• Are you that much annoyed by the fact that currently icons are used as an action and do not reflect current item state? Is it really confusing for users? 2.0 has been out for a few months, and there hasn't been much feedback on this. And we have to take into account that if a behavior change is made here, it will have an impact on users habits.

So with all of that, I am in favor of changing the current icon which could be better self-explanatory, but not a fond of changing to indicate current status.

Of course, I don't want to maintain things like they are today in the sole purpose of making them differently. If there are implicit conventions used by the majority of RSS providers or even globally instituted UX patterns, then it is a good argument in favor of change.

[christophehenry]

Are you that much annoyed by the fact that currently icons are used as an action and do not reflect current item state?

Yes, it still requires me a moment of reflection each time. And I guess if I'm affected by this behavior, I'm probably not the only one. I think this requires the expertise of a trained UX designer.

[Shinokuni]

I agree too. But until then what do we do? Do you agree to only merge Nextcloud News icons without changing current behavior?

[christophehenry]

How about just a setting to use NC of FreshRSS or default icons?

[Shinokuni]

No, I don't think this is good idea. Maybe then we should postpone this discussion with more qualified people here?

[Natouille]

Hi, I am a UX designer and Augier asked me to have a professional look at your thread regarding this icons issue.

My first recommendation would be to check with some users to see what they think of the current UI and behavior regarding that specific icon.

If this is not possible to do so, here is my proposal. I should rely on the [Jakob's heuristic 4: Consistency and standards](https://www.nngroup.com/articles/ten-usability-heuristics/#toc-4-consistency-and-standards-4).

"Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions.Failing to maintain consistency may increase the users' cognitive load by forcing them to learn something new."

In my personal experience, I have never seen the "remove done" icon in use anywhere.  Maybe Google Material created this for a resaon, but as it's not a common icon, it is not very understandable. 

In our context, I recommand to use the classic mail / envelope icons (open and close) as Augier suggested. I noted your concern about the change this may bring to users. But just changing the icon and keep the behaviour is not a big change. And the use of this mail icon is not meaningless, even if what is opened are articles and not emails, as long as people understand the open - closed states of this icon.

Here's what should happen:

• the icon is "open envelope" when the article is read
• on the article, I can click on the open mail icon to mark it as unread and the icon should change to "closed envelope"

Hope this help

 

[christophehenry]

@Shinokuni So what do you think? Can I change the icons? Is it acceptable?

[Shinokuni]

Okay let's go for this, thank you @Natouille for your opinion on this situation!

[christophehenry]

Awesome, thank you! I updated the PR.

[christophehenry]

The icons are reversed compared to TimelineItem and the previous implementation. This is intentional. On this screen, the icons represent state, the same as the favorite icon next to it, whereas in TimelineItem, they represent action. This change makes this button consistant with the favorite icon throughout the app.

[Shinokuni]

Thanks for this!