Display indicator for episodes that are both downloaded and watched

[ConnorKrammer]

Currently there's no way to tell which episodes have been downloaded for completed series, because the green progress bar overlaps the download progress bar. I suggest something like the following:

Description:

• Items 1-4: completed series, all episodes downloaded
• Item 5: completed series, no episodes downloaded (unchanged from current UI)
• Item 6: in-progress series, no episodes downloaded (unchanged from current UI)
• Item 7-8: in-progress series, all watched episodes downloaded
• Item 9-10: in-progress series, fewer episodes downloaded than watched

Notes:

• There are duplicates of some kinds to give a sense of how they would look in a larger list
• I used blue to indicate downloaded episodes to tie into the blue titles for shows that have been completely downloaded. That gives an implicit sense of context, assuming the user knows why the titles are blue to begin with.
• The exact shades of blue/green may need tweaking. Specifically, the blue should match the series titles as closely as possible, but needs sufficient contrast with the green that it's easy to differentiate even when one of the colours is small, such as in list item #9, above. Right now the contrast is acceptable (maybe not for colourblind users?), but it's a noticeably different shade from the series titles.

Edit: I've done some colour tweaking and added an intermediate shade of blue to avoid contrast issues. This is significantly better than the version above, but still retains some issues:

The colours for the blue bar and divider are #00baff and #009387 respectively.

[erengy]

The titles are blue because of the "Highlight anime if next episode is available in library folders" option, which explains the fact that it's not related to the show being completely downloaded. In other words, what makes a title blue is actually at the right side of the green bar, so to speak. Also, the highlight color just happens to be blue. It can change depending on the user's Windows theme setting, albeit unlikely.

Honestly, I'd rather avoid introducing another color to represent available episodes in library folders and covering the green bar entirely. This is why I've been trying to extend the dark gray in my experiments. So far, I'm not quite satisfied with how it looks. Would you happen to have any suggestions in this regard?

Another idea is to add a separate column for episode availability. It could either be a custom-drawn bar as in Progress column, or it could just display the total number of episodes available in library folders. The former would look better, but take a considerable amount of horizontal space. The latter doesn't have the same precision (i.e. can't directly see which episodes are missing) but should be enough in most cases.

[ConnorKrammer]

Ah, my mistake about the blue titles. I rarely download episodes one at a time so I'd forgotten that it only indicated the next available one.

I agree that four layers of colour (five if you count the background) might be a bit much. Introducing a new column is the simplest method, especially if it's just a counter, but it does take up horizontal real estate. Another point against the counter is that the dark grey "downloaded" indicator gives information about individual episodes being present/not present, but a counter wouldn't do the same thing -- it doesn't make sense for that information to be lost simply because the series has been watched before.

I do have an alternate suggestion, using a smaller bar indicator below the main one. I'm not sure how tricky it would be to implement, but it would require no more layers of colour are currently used.

I mocked up 9 variations of it in Photoshop and exported them as a single gif for comparison. Took me a bit, but I think the end result is pretty nice. If you'd like the original files or a different gif sequence, feel free to ask.

[erengy]

Okay, here's a try with 3px bar and no border, directly drawn by Taiga:

I did try placing the smaller bar at the bottom before, but it didn't look as good as it does now. Removing the border and using slightly darker gray seems to do the trick.

You can try out the latest build yourself, but note that you'll need to modify your Theme.xml as well:

        <progress>
            <border      type="solid" value_1="E0E0E0"/>
            <background  type="solid" value_1="F0F0F0"/>
            <button      type="solid" value_1="646464"/>
            <separator   type="solid" value_1="E0E0E0"/>
            <watching    type="solid" value_1="60C653"/>
            <completed   type="solid" value_1="60C653"/>
            <onhold      type="solid" value_1="60C653"/>
            <dropped     type="solid" value_1="60C653"/>
            <plantowatch type="solid" value_1="60C653"/>
            <available   type="solid" value_1="A6A6A6"/>
            <aired       type="solid" value_1="D8D8D8"/>
        </progress>

---

Here's another try, with a light green (9FD998) alternative:

[ConnorKrammer]

I tried the new build and like how that turned out. Oddly enough though, zooming in to count the pixels yields 4px, not 3px. I'm not sure if that was intended.

I'd also suggest adding a slight tint to the lower bar to help differentiate it from the surrounding grey of the background and the green bar above it. Here's a comparison using #90a2bband #c9d5e2for the available and airing shows respectively:

The difference with a tint is especially apparent when most of the shows haven't been viewed, but have either aired or are available on-disk (such as the plan to watch list) and most of the surrounding area is plain grey, though I didn't show that here.

Edit: After using the colours I first suggested for most of the day, I've tweaked them to be slightly less saturated and therefore not as obtrusive. Originally I suggested #7e96b5 and #bac7d5, but I have since changed it to #90a2bb and #c9d5e2.

[ConnorKrammer]

Just saw your light green version. I think I like the original one you did better, for a two primary reasons (the second of which being the main one):

1. Your original has better contrast
2. Aired episodes are shown on the same plane as watched episodes, while available episodes are shown by themselves in the small bar. Conceptually I would put "aired" and "available" closer than "aired" and "watched", so I think they make more sense when grouped. Additionally, there's some redundancy when an episode has been aired and is available, but has not yet been watched. Available implies aired, so being able to see both at once doesn't add information.

You might want to try this website by Adobe to help look for appropriate colours. If you want to stick to green, #4ed38d isn't a bad choice for available episodes. We might want to consider changing the shade of green used for watched episodes as well.

I've been playing around with it on and off all day though, so my sense of perspective could be a little off. Any thoughts on your end?

[erengy]

Oddly enough though, zooming in to count the pixels yields 4px, not 3px. I'm not sure if that was intended.

It's scaled up depending on your DPI setting (i.e. text scaling). Otherwise it'd look small compared to the larger progress bar. It's 3px/11px on the default DPI setting, and 4px/14px on yours.

Conceptually I would put "aired" and "available" closer than "aired" and "watched", so I think they make more sense when grouped.

On one hand, it's true that "aired" and "available" are both secondary information (both can be disabled). On the other hand, the other grouping makes more sense to me because only "available" is a local information. There's also the issue that the aired episodes indicator is not always reliable; Taiga doesn't really know the last aired episode number, it just makes an estimate based on how many weeks it's been since the day it started airing... All in all, I think there's no absolute truth to be found here.

there's some redundancy when an episode has been aired and is available, but has not yet been watched. Available implies aired, so being able to see both at once doesn't add information.

It can be argued that being able to see "aired" and "available" align is reassuring in terms of "I have all episodes there is". Moreover, in the first design, there's another redundancy between "aired" and "watched": If you've watched an episode, obviously it's already aired.

If you want to stick to green, #4ed38d isn't a bad choice for available episodes.

Another try with a darker green, #4B9940:

1. Same with first design
2. Middle ground, no redundancies
3. Same with second design

[ConnorKrammer]

It's scaled up depending on your DPI setting (i.e. text scaling). Otherwise it'd look small compared to the larger progress bar. It's 3px/11px on the default DPI setting, and 4px/14px on yours.

Makes sense.

On one hand, it's true that "aired" and "available" are both secondary information (both can be disabled). On the other hand, the other grouping makes more sense to me because only "available" is a local information.

That's fair enough, and that grouping also makes a certain amount of sense to me. I don't know how many users will actually look at it in terms of local and remote information though -- they won't see the inner workings like a developer does. Another perspective: "aired" is actually a form of availability, one that indicates if an episode can be viewed in any form, not necessarily a local copy. The aired indicator tells a user that they can find the episode online immediately if it's simulcast and that fansub groups will be able to start work on it now. "Watched" is source-independent, so to speak, and I think from a user's perspective that's more important than where the data came from.

There's also the issue that the aired episodes indicator is not always reliable; Taiga doesn't really know the last aired episode number, it just makes an estimate based on how many weeks it's been since the day it started airing.

That's a good point. Kekkai Sensen is still waiting for its 12th episode at the time of writing, and God Eater has been delayed. I double-checked Taiga and the relevant episodes are shown as aired. This is a problem inherent to the "aired" bar itself though, and applies no matter which way it's rendered.

Another try with a darker green, #4B9940:

Of the three choices, I think I like the second one the best. Lack of redundancy is good, and it has a clean appearance. My second choice would be the first option.

[erengy]

Committed the changes in d7c1596952fb3fb20eeacf5acf7a9df065d2100b. The second one was my favorite too, so I used that as the final design. Thanks for your help!