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

FR: A hint for books in collections #11846

Closed
ichnilatis-gr opened this issue May 18, 2024 · 46 comments · Fixed by #11868
Closed

FR: A hint for books in collections #11846

ichnilatis-gr opened this issue May 18, 2024 · 46 comments · Fixed by #11868
Milestone

Comments

@ichnilatis-gr
Copy link
Contributor

This issues has been discussed here.

Now that the collection feature has been added (thank you for this), there is the following "problem": Even if a book has been added to a collection, in the pop-up window, after long pressing on a book, there is the option "add to collection". So we can't know, even with this practical way, if the book has been added to a collection. I mean, when only Favorites existed, this was a way to see it, as, in case that the book had been added to Favorites, there was the option "Remove from Favorites" (something like that).
So, now there is need for a hint (both for list and mosaic mode) that will indicate if a book has been added to a collection.
@hius07 I remind your promise 🙂

Thank you!

@hius07
Copy link
Member

hius07 commented May 19, 2024

For Classic and List mode it can be an empty star in the mandatory.
Grid mode requires more design thinking.

1

2

3

4

@hius07
Copy link
Member

hius07 commented May 19, 2024

In Grid text cover the star can be appended at the beginning of an author, a title, or a filename.
(I added the folder to folder shortcuts for comparison)

5

If the metadata is ignored, the filename only is displayed:

7

No good idea for image cover so far.

6

@ichnilatis-gr
Copy link
Contributor Author

I give you an example from Pocketbook. They use a heart inside a white circle. We could use a star at the upper right corner of the book's cover.

scr0009 (Medium)

@hius07
Copy link
Member

hius07 commented May 20, 2024

To remain in consistency with our corner mark it can be:

1

2

3

4

5

@ichnilatis-gr
Copy link
Contributor Author

I was thinking of a transparent star, so that only its outline would be visible. But maybe sometimes it's not very distinct...

@Frenzie
Copy link
Member

Frenzie commented May 20, 2024

I think that was just meant to show the concept, not a lack of transparency. Unless I'm misreading it. ^_^

@hius07
Copy link
Member

hius07 commented May 20, 2024

transparent star

1

@ichnilatis-gr
Copy link
Contributor Author

ichnilatis-gr commented May 20, 2024

It is indeed indistinct.
Could we try a white star? :-)

@hius07
Copy link
Member

hius07 commented May 20, 2024

white star

1

@ichnilatis-gr
Copy link
Contributor Author

ichnilatis-gr commented May 20, 2024

I have to think before I speak... 🙂
I leave it to you to decide.

@poire-z
Copy link
Contributor

poire-z commented May 20, 2024

Could it be a white-filled star with thick-black-borders and a transparent outside ?
Or, as does Pocketbook, a (solid filled or not) black star inside a solide white disc. It may look better (can't be sure before seeing it :)) than the solid white square ?

@ichnilatis-gr
Copy link
Contributor Author

Could it be a white-filled star with thick-black-borders and a transparent outside ?

I think that's what I had in mind...

@Frenzie
Copy link
Member

Frenzie commented May 20, 2024

I think that's what I had in mind...

Same, yes. ;-)

@hius07
Copy link
Member

hius07 commented May 20, 2024

1

2

3

@hius07
Copy link
Member

hius07 commented May 20, 2024

Smaller star

7

8

9

@hius07
Copy link
Member

hius07 commented May 21, 2024

a white-filled star with thick-black-borders and a transparent outside ?

1

2

3

@Frenzie
Copy link
Member

Frenzie commented May 21, 2024

With the white circle around it is probably clearer but either way seems okay.

@ichnilatis-gr
Copy link
Contributor Author

ichnilatis-gr commented May 21, 2024

I would prefer the white-filled star with thick-black-borders and a transparent outside. The other one with the circle I think looks like an emblem. After all, on a white background only the star will be visible.
But I wouldn't want to impose my opinion. I trust your own judgment as well.

@hius07
Copy link
Member

hius07 commented May 21, 2024

Final comparison:

1

2

3

@benoit-pierre
Copy link
Contributor

Second one, for me.

@ichnilatis-gr
Copy link
Contributor Author

If the star with the circle will be preferred, I think the black star with the white circle would be better.

@Frenzie
Copy link
Member

Frenzie commented May 21, 2024

The reason I think with the circle is slightly better is because otherwise it somewhat disappears into darker backgrounds. Perhaps one with an additional thin white line around it to see what that would look like?

@hius07
Copy link
Member

hius07 commented May 21, 2024

the black star with the white circle would be better

Added to the above post with screenshots.

@ichnilatis-gr
Copy link
Contributor Author

ichnilatis-gr commented May 21, 2024

Added to the above post with screenshots.

Yes, I've seen it. I didn't want you to give us a screenshot.

@hius07
Copy link
Member

hius07 commented May 21, 2024

Perhaps one with an additional thin white line around it to see what that would look like?

Thin line - white circle, or thin line - white star outlining the black border of the star?

@jonnyl2
Copy link

jonnyl2 commented May 21, 2024

Of the above options, my preference would be the 2nd one (star with no background). (Possibly the star could be enlarged a bit if it seems not discernible enough for some.)

If a background, then I think a square background in the top-right corner (maybe with something like 50% opacity) would look better than a circle, as it would blend better with the rectangle-shaped cover. Star on circle on rectangle seems like a bit too many shapes in one per cover.

@Frenzie
Copy link
Member

Frenzie commented May 21, 2024

Thin line - white circle, or thin line - white star outlining the black border of the star?

The latter.

@hius07
Copy link
Member

hius07 commented May 21, 2024

Thin line - white circle, or thin line - white star outlining the black border of the star?

The latter.

We need an artist to draw the new svg icon for that.

@hius07
Copy link
Member

hius07 commented May 21, 2024

I personally tend to option 2.
Black star with white filling is visible well on dark and light covers.

@Frenzie
Copy link
Member

Frenzie commented May 21, 2024

Option 2 is fine.

@hius07
Copy link
Member

hius07 commented May 21, 2024

Should we show a star when browsing a collection (all books would have the mark, obviously)?

@poire-z
Copy link
Contributor

poire-z commented May 21, 2024

I don't know if there exists a solution to this, but with the standalone star, it feels it is larger on a white bg cover, and it feels quite smaller on a dark bg cover:
image

@hius07
Copy link
Member

hius07 commented May 21, 2024

I spent a day with white circles as background, and they look very irritating.

@Frenzie
Copy link
Member

Frenzie commented May 21, 2024

Should we show a star when browsing a collection (all books would have the mark, obviously)?

Seems unnecessary.

@poire-z
Copy link
Contributor

poire-z commented May 21, 2024

The white circle is probably not the solution :) I get the same feeling with your circle screenshots.
Maybe @offset-torque (with his background in human perception and studies) has an idea ? (without having to guess the "tone" (light/dark) of the cover).

@offset-torque
Copy link

poire-z - Could it be a white-filled star with thick-black-borders and a transparent outside ?

This is the correct solution. Also you see this in movie subtitles where background is unpredictable. A thick dark border with bright text has the best visibility.

poire-z - I don't know if there exists a solution to this, but with the standalone star, it feels it is larger on a white bg cover, and it feels quite smaller on a dark bg cover

Unfortunately this is the side effect, border joins either to foreground or background.

Best solution is to provide a stable bg color as jonnyl2 said:

jonnyl2 - If a background, then I think a square background in the top-right corner (maybe with something like 50% opacity)

A dark square or a dogear to cover the star's background. In this case star can be just white too, since border wouldn't be necessary.

Also I agree that star should be enlarged a bit as jonnyl2 said.

A mockup (quickly hand drawn, not to scale):
dogear_collection

@hius07
Copy link
Member

hius07 commented May 23, 2024

A dark square or a dogear to cover the star's background.

Can it be the square?
We have a triangle at the bottom (book status hint), if a dogear is of the same size, the star will be too small.

1

Gray square

2

@offset-torque
Copy link

Why not. Main idea is giving it a stable background so users can immediately recognize it without the book cover interfering with the outline of the star.

Can we combine these two indicators, something like:

  • "Empty triangle" for book status
  • "Filled triangle with star" for collection

Since lower right corner is the least important part of the book cover (no title there, generally empty) we can use that corner for both indicators.

@hius07
Copy link
Member

hius07 commented May 23, 2024

Book on hold

3

@offset-torque
Copy link

offset-torque commented May 23, 2024

Star in this last screenshot looks pleasant and easily recognizable to me.

I see combining them might not be a good idea :)

@jonnyl2
Copy link

jonnyl2 commented May 23, 2024

Can the square be made partially transparent to let some of the cover image shine through?

@offset-torque
Copy link

Can the square be made partially transparent to let some of the cover image shine through?

This will probably interfere with the instant shape recognition of the star and will decrease the icon/background contrast. My perspective is that since we already ruin that corner of the cover, at least we can try to maximize ux effectiveness.

I want to remind everyone that everything looks much nicer in screenshots with their perfect contrast and lighting until they meet the reality of our e-ink screens :)

@Frenzie
Copy link
Member

Frenzie commented May 23, 2024

I want to remind everyone that everything looks much nicer in screenshots with their perfect contrast and lighting until they meet the reality of our e-ink screens :)

Largely disagree (well, not for partial transparency stuff), most things in that screenshot look much nicer on a real device. :-D

@offset-torque
Copy link

I meant nicer as "close to ideal contrast ratio and grayscale palette". Two shades of gray that look distinct on screenshots can turn into a greyish blob in real world conditions. Also they are on a perfect white background which is only (approximately) achievable under direct sunlight with e-ink screens.

@offset-torque
Copy link

After Frenzie's comment I got curious about "why e-ink looks nicer?" and found this relatively old study. Although they didn't specifically studied e-ink, I found their results fascinating and wanted to share this useful information with my fellow e-ink enthusiasts.

According to their findings, a recent generation e-ink screen in an office with standard lighting (this is approximate because I calculated/converted) has the optimal contrast ratio for comfortable reading. I guess this explains why these screens are less tiring (which I was always curious about).

Probably colors on other screen types like LCD can be adjusted for a similar improvement but the advantage of e-ink comes from its nature. Apparently when we put pure black text on pure white background on an e-ink screen, we automatically reach this optimum reading contrast because the substrate softens both ends (black and white) acting as a natural clamp filter.

As a speculation, I think this means probably we reached the peak with the current gen grayscale screens and all the improvements from now on will come from the color e-ink technology.

Here is the link to the study if you want to read the details:
Effects of polarity and luminance contrast on visual performance and VDT display quality

@hius07 hius07 added this to the 2024.06 milestone May 26, 2024
@ichnilatis-gr
Copy link
Contributor Author

It looks pretty good. Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants