MangaDex v3 is coming!

[Truck-kun]

Unlike the current reader, the beta reader doesn't work at all on iOS 6.

The main page, namely the large and animated carousels, is very busy and distracting.

Settings that only have "Enabled" and "Disabled" states should be checkboxes or equivalent.

The keyboard shortcuts use "^" to indicate the Shift key, which is conventionally used for Control. Use "⇧" instead.

The page bar at the bottom of the reader uses up vertical real estate and can't be hidden. Hovering over it makes the thumb look draggable, but dragging does not scroll pages as expected, but jumps on mouseup.

The buttons in the reader sidebar are laid out and look like tab headers, but are not. I expected clicking the comment "tab" to load the comments next to the chapter in the largely empty space below, which would have been an interesting feature. Instead, the buttons and sidebar are simply taking up a lot more space for mostly equivalent behavior and functionality.

Many controls and buttons have lost their clear hover states in the beta (for example, the time period headers in the top chapters box).

I prefer the gradients and shading of the current styling to the stark flatness of the beta.

There are line separators within the reader and sidebar, but not between them and the header/footer. This is inconsistent and weird.

"Latest updates" is a button but doesn't look like one. It looks very close to the unclickable "Top chapters". The two columns of chapters within that box line up neatly under the two headers "All" and "Follows", which is totally misleading.

I suggest a reading mode where pressing space will advance to the next page, but only when the current page has been fully scrolled to the bottom. This allows full-width images taller than the screen to be scrolled up and down with space/shift+space, advancing and retreating naturally at the ends. By splitting the difference between paging and long strip mode, it would keep the concept of distinct, full-size pages while still minimizing page-to-page friction.

 

[Rebulien]

Hello, can u code the history?
I know it will be hard and I will understand, if u won't but I think it would be cool feature for people, who didn't finish the chapter and wanted to read it later. This feature would be only for MangaDex users.
Thx. Rebulien

 

[Holo]

@Rebulien
Like a record of your past read chapters (like the last 10 or something)?

 

[Teasday]

_{@rancor1223 posted:}

- And lastly, I'm not a fan of the changed reader behaviour. My usecase is such that I often hold the tablet with my left arm, so I really can't touch the right side of the screen to move pages. I much prefer the old system where tapping anywhere would go forward and swiping back would move backwards.

- The reader UI could use some polishing as it feels cluttered, but it's not too bad.

- And then there is the Edge/IE bug where reader doesn't work at all. I would be great if you could fix that, though I understand old Edge/IE users are in minority.

How about just changing the direction then? Also, would be nice if let me know what exactly you feel is cluttered about it, since the aim has been to use as few elements as possible. And yeah Edge bugs will be fixed, I just didn't bother testing it yet.

_{@FloatyBee posted:}

I really like the double page feature, but is there a way to hide the bottom bar? It's kind of annoying to look at. Having the option to hide the show sidebar button until you mouse over to the side would be nice too.

I'm frankly surprised some people find the page track annoying for whatever reason. Especially on double page, since I tend to use it to fix the pages when they're in the wrong order.

It's not exactly the most elegant solution, but I suppose I could add a toggle in the settings for track visibility. It's probably not a setting that most people tend to switch back and forth between anyway. Unfortunately it'll mean that I'll have to keep the "Page X/Y" panel at mobile resolutions (that's actually a bug in the current reader, it's supposed to be hidden).

Hovering for the sidebar doesn't seem like a good idea since the chances are most users will just get confused about it, but I'll consider it.

_{@pipmanga posted:}

Just a small thing and hopefully it won't matter much with preloading anyway, but it would be nice if the previous page stayed on the screen until the next page loads instead of being blank with a loading icon. Personally I prefer this since it means I can at least look at something for a few seconds while it loads.

Understandable, and the current system isn't set in stone anyway so I'm open to suggestion, but I will have to do something that indicates when the next page is still loading, otherwise the reader would seem unresponsive.

 

[Rebulien]

@Holo
Just the last page for each chapter they have opened.
I like this feature in MangaZone (but this is the best manga reader I have ever try ?).
Btw that beta MangaDex looks pretty cool, good job. Glad u kept RSS.

 

[Teasday]

_{@Truck-kun posted:}

Unlike the current reader, the beta reader doesn't work at all on iOS 6.

The keyboard shortcuts use "^" to indicate the Shift key, which is conventionally used for Control. Use "⇧" instead.

The page bar at the bottom of the reader uses up vertical real estate and can't be hidden. Hovering over it makes the thumb look draggable, but dragging does not scroll pages as expected, but jumps on mouseup.

The buttons in the reader sidebar are laid out and look like tab headers, but are not. I expected clicking the comment "tab" to load the comments next to the chapter in the largely empty space below, which would have been an interesting feature. Instead, the buttons and sidebar are simply taking up a lot more space for mostly equivalent behavior and functionality.

There are line separators within the reader and sidebar, but not between them and the header/footer. This is inconsistent and weird.

I suggest a reading mode where pressing space will advance to the next page, but only when the current page has been fully scrolled to the bottom. This allows full-width images taller than the screen to be scrolled up and down with space/shift+space, advancing and retreating naturally at the ends. By splitting the difference between paging and long strip mode, it would keep the concept of distinct, full-size pages while still minimizing page-to-page friction.

The current beta reader is a mostly untested mess I didn't expect to be made this publicly available. Regardless, the operating system shouldn't have much at all to do with whether the reader works or not, it's the browser that determines it.

I'm aware ^ is traditionally for control, but I went with it anyway since the vast majority of the readership knows nothing about that subject, and because ^ is much more readable than ⇧ especially at a font size that small.

Again, I find it a bit weird that people complain the 15px track uses up vertical space when nobody seems to care that the unhideable header on the current site takes up even more, but I guess it's not an invalid complaint. Making the thumb draggable would be nice, I'll look into it.

Loading comments inside the reader in any way will have to wait until Holo gives me an API for it. Also, I don't quite follow your point about the buttons taking up space, since in the previous sentence you just said there's a "largely empty space below" (which is resolution-dependant anyway, so I couldn't rely on it as the only way to display comments). Making the buttons smaller wouldn't free up horizontal space either.

Footer is a good point, but a line below the header looked weird to me. I'll ask around about it.

Already on the possible todo list.

 

[Truck-kun]

Regardless, the operating system shouldn't have much at all to do with whether the reader works or not, it's the browser that determines it.

The OS determines the available browsers, and that determines the capabilities. The new reader code uses extensive ES6 syntax and features with no fallbacks, so does not run on older or less-compliant browsers. A barebones HTML version without much JS, or even keeping the old reader around as an option, could solve this without shims.

...nobody seems to care that the unhideable header on the current site takes up even more...

The current header is hideable.

Also, I don't quite follow your point about the buttons taking up space, since in the previous sentence you just said there's a "largely empty space below" (which is resolution-dependant anyway, so I couldn't rely on it as the only way to display comments). Making the buttons smaller wouldn't free up horizontal space either.

The empty space is the majority of the sidebar itself, as I mentioned. Right now, as an interface element, it doesn't have much raison d'être over the current navbar/control strip, which has less dead space, can be scrolled off the top of the screen, and doesn't offset the content from center.

 

[Kisuru]

Nice, but I still prefer the simpler current layout.

 

[siscon]

The old homepage is better than the new homepage since it shows the manga better, however I prefer the current reader instead of the old reader.
So yeah, good luck on the new layout!

 

[SERPENTLORD]

Any chance the search page will sort by newest update in my chosen language rather than all?

 

[yurifag]

I would really prefer it if there was an option for the old reader, as it feels much faster and uncluttered.

 

[daijokay]

just checkin, is there a way to exit the comments in chapters option instead of returning or am i just lost lol

 

[MajorGilbert]

Personally prefer the new one.

 

[rancor1223]

@Teasday: How about just changing the direction then? Also, would be nice if let me know what exactly you feel is cluttered about it, since the aim has been to use as few elements as possible. And yeah Edge bugs will be fixed, I just didn't bother testing it yet.

(I don't know how to quote properly)

The old reader controls were ambidextrous. It didn't matter which hand I grabbed the tablet with. Having to switch the direction around every time I want to switch hands is annoying.

As for the cluttered UI, I can give it a try, but it's kinda hard since I'm so used to dark UI. It looks so different, haha. Keep in mind I'm strictly talking about portrait mode on 13" 1080p tablet.

- Big one are the horizontal lines. 6 (technically 7 if I count the navigation bar). It's just distracting.

- I imagine this isn't supposed to appear here?

- Duplicate page controls. There are the 2 arrows above the page, then there is the clicking the page itself, and lastly the bar at the very bottom. There is no need for all of these at once

- Duplicate page indicator. Text based above the page (doesn't allow to skip to specific page) and the bar below the page, which allows to skip to any page, but it's hard to identify which page specifically I'm jumping to (unless I count up to there, which is annoying).

- Huge buttons. The old version had 3 small buttons. New version has 4 buttons that span the entire width of the page!

I ended up doing a quick mock-up

Spoiler

-Remove all new page control. Add back Select box with page.
-Make buttons smaller and put them on the same line as the TL group. At this resolution it fits fine even with much longer names).
-Left align manga title as it's distracting centered to the middle.
-Make horizontal lines less pronounced. Separate header better (added bottom border). Another possibility is to remove them and give the Nav bar, controls (everything between nav bar and the actual page of the manga) and the manga page itself different backgrounds, but I think this might only be reasonably possible in dark mode.

I actually do webdesign, so I understand what a pain this would be to make responsive. But I think it looks way cleaner.

EDIT: And please, make navigation buttons (even without titles, just the icons) not hidden in the hamburger menu at this size (like it is in v2). It's such a pain having to do that one additional click that is all the way up in the left corner.

 

[Teasday]

_{@Truck-kun posted:}

The OS determines the available browsers, and that determines the capabilities. The new reader code uses extensive ES6 syntax and features with no fallbacks, so does not run on older or less-compliant browsers. A barebones HTML version without much JS, or even keeping the old reader around as an option, could solve this without shims.

The current header is hideable.

The empty space is the majority of the sidebar itself, as I mentioned. Right now, as an interface element, it doesn't have much raison d'être over the current navbar/control strip, which has less dead space, can be scrolled off the top of the screen, and doesn't offset the content from center.

Yeah, since I didn't bother transpiling it yet for what I thought was just a test run. I'll do that eventually, don't worry about it. As for a barebones HTML version, I don't see that as likely to happen. The site should be moving further away from being straining on the server, not closer.

Oh so it is, I forgot. Thought it only hid the upper bar and added one at the bottom.

One of the goals with the sidebar was specifically to display chapter information alongside the pages, without having to scroll around. Another major intent was to bring attention to the available alternative groups for a given chapter, which in the old reader is something the user must explicitly check from the dropdown every time, regardless of whether alternative releases exist or not. It basically sounds like you would like to use something more resembling the mobile layout on desktop, which wouldn't necessarily be an impossible request to implement as an option. I am getting a bit concerned about the growing amount of settings options though, I'd prefer to keep it as low as possible to avoid intimidating some users.

_{@rancor1223 posted:}
The old reader controls were ambidextrous. It didn't matter which hand I grabbed the tablet with. Having to switch the direction around every time I want to switch hands is annoying.

etc.

I think I'll just modify the "page turn by tapping" option into something like "Directional turns / Always turn forward / Disabled". Simple enough, doesn't really complicate the settings.

Yeah, the extra footer and page controls you mentioned are just a bug caused from forgetting to update the relevant Bootstrap 3 classes to 4's equivalents. The top of the page should look more like this:

The buttons are a bit on the larger side, yeah, but I don't see the point in making them small, especially on mobile where having large tapping targets should be exactly what the users need.

As for your mockup, I'm not sure I agree with left-aligning the title (especially with long titles), removing the chapter arrows or the button sizes (as just mentioned). The placement of the buttons there is also a little questionable, considering chapters that get several groups and less wide screens.

I do agree that the page track isn't that great on mobile, and since I'm probably going to end up giving an option for hiding the page track, the page dropdown idea is well worth considering. I've also been considering hiding the chapter title (when it exists) on mobile since it's usually visible enough in the chapter dropdown.

 

[Harry_Dong]

I like the new layout. Always did feel like the front page could have used up more of the space available for other stuff.

One thing I want to point out is, IMO, I feel like adding an arrow icon pointing downward at the bottom of the Latest Updates, under the All column--would be more intuitive. Clicking it would show more previous latest, like it is for the featured section that's scrolling side to side. Might make life a little easier than having to scroll all down the list, then have to go all the way back up and clicking "Latest Updates" for the normal latest updates pagination...although keeping that there would be helpful for people who prefer pagination over continuous endless scrolling. I'm personally in the latter camp.

Either way, I'm cool with the current version and the beta.

 

[ununseti]

General things I like:
+ Large buttons: Presumably this is for mobile friendliness, which is always nice.
+ Directional page navigation: I'm used to clicking on the right side of the page to go to the next page and clicking on the left side of the page to go to the previous page, so this is nice.
+ Reader settings: No more clicking the gear button and waiting for a page to load, and having to wait for the page to load again to go back! The pop-up dialog is nice. I like all the new options.
+ Adaptive layout: If you make the window narrow enough, the reader sidebar moves to the top to avoid eating up too more horizontal space. Nice!

I have a few nitpicks:
- I would recommend removing the buffering UI. This is an image-viewing site, not a video-viewing site. It makes the site feel more laggy than it actually is. The image typically loads very quickly anyway, so all the buffering UI really does is unnecessarily draw attention to "hey, look I'm still loading!"

- Animations: This may be just me, but in general, I dislike unnecessary animations and fancy UI effects, because I feel like it detracts from the content, and makes the UI feel somewhat slower and less responsive. Why wait 0.3 seconds for that UI thingy to animate from A to B when you could just make it appear at B instantly?
- For instance, I feel that the slider animation is unnecessary. I do like the navigation bar, since it can be handy to be able jump to a specific page. However, the movement in my peripheral vision draws my attention away from the manga and to the bar, which I don't like. I'd prefer for the slider to just jump immediately.

- I also feel that the carousels on the front page would be better off paused by default. If I want to see more, I'll click on the next button myself. When I see something move in my peripheral vision, my mind immediately registers that as "ADVERTISEMENT" and "YUCK".
- Also, as for the shortcuts: I'd prefer "⇧" instead of "^" to indicate Shift. "^" is ambiguous. For computer nerds, it looks like Ctrl. For ordinary people, it looks like, "wait, so I have to press Shift + 6 to get the caret or something?..." Meanwhile, "⇧" is very clear.

Overall, I like the new reader. It's more customizable, and jumping to settings and back to the manga is a lot faster. The new front page feels a bit more busy and cluttered, but it's not that much of a change, and I could probably get used to it.

 

[MangaFreak6]

I love it!

 

[Teasday]

_{ununseti posted:}

- I would recommend removing the buffering UI. This is an image-viewing site, not a video-viewing site. It makes the site feel more laggy than it actually is. The image typically loads very quickly anyway, so all the buffering UI really does is unnecessarily draw attention to "hey, look I'm still loading!"

- Also, as for the shortcuts: I'd prefer "⇧" instead of "^" to indicate Shift. "^" is ambiguous. For computer nerds, it looks like Ctrl. For ordinary people, it looks like, "wait, so I have to press Shift + 6 to get the caret or something?..." Meanwhile, "⇧" is very clear.

Like I mentioned in a previous post, I'm not married to the current "loading screen", but even if I scrapped it I would still have to use some other visual cue to make it clear when the system is loading something in the background. There has to be a visual response to an action, otherwise people will rightly complain that the reader sometimes freezes up or feels unresponsive. It's great that most of the time the images load rapidly, but that is absolutely not something we can rely on. Even if the server magically worked 100% of the time, some people may be on slow connections.

And again, it seems to me that using ⇧ would be only good for the tiny minority of people who are aware that ^ is traditionally used for control and get bothered by it. It's definitely not visually as clear, and I see that as the more important issue.

 

[rancor1223]

@Teasday: The buttons are a bit on the larger side, yeah, but I don't see the point in making them small, especially on mobile where having large tapping targets should be exactly what the users need.

I'm specifically talking about "tablet" size. They are huge on 13" 1080p screen and I imagine they would. And you are right, this layout wouldn't work on mobile, but that's what Bootstraps responsive grid layout is for. It could change for smaller screens.
Anyway, to sum it up, I think that the clutter is caused by too many duplicate elements/features and those horizontal lines. Honestly, the old controls (the 3 select boxes) may have been unnecessarily large for desktop, but they worked perfectly fine on mobile (and didn't look cluttered/busy). It would have been enough to stack them on one line for desktop to save space.
Anyway, I will save further feedback for what the dark mode (and presumably again updated version of the V3 is out).

@Teasday: And again, it seems to me that using ⇧ would be only good for the tiny minority of people who are aware that ^ is traditionally used for control and get bothered by it. It's definitely not visually as clear, and I see that as the more important issue.

That was supposed to be

Shift + f

?! I couldn't figure out how do you expect me to hit

^ + f

Not that I would ever use it since I mostly use touch screen, but I was bit confused by those instructions.
I agree with @ununseti on the animations though. They make the website feel slower than it really is.