Amazing work,

I tried this out and I have a few feedback:

• Everytime you go back to the home screen there are two separate "loading" screens before the book covers pop up
• Book covers should be cropped imo, otherwise we get a white part below or on the right
• When a book does not have a book cover, it appears blank. There should be a default book cover
• Bottom bar buttons do not align with the physical buttons I think they should be a bit wider to match the actual ones
• Nit: Right buttons should be a few pixels higher to match the physical ones.
• I find it a bit counterintuitive to have Left-Right (< / >) buttons on the right and up down buttons on the bottom because of the positions of the buttons. I think they should be switched

Overall really liked the theme and how quick it is to browse around. I think all of my feedback can be taken care of very easily even as a follow-up PR.

Great job with the Themes. Agreeing with @el's observations here, don't want to repeat everything, but things I found most noticable:

• Switching left-right, up-down is not intuitive yet for switching categories and settings, respectively.
• The active status of the category (Display, Reader) is too faint, I find it barely noticeable (only when switching). I think the selected category should also be filled with gray or be bolded.
• Browse files/ File Transfer in the main menu look a bit too minimalistic and lost, especially with very few books (I only have two), so there is a lot of white space underneath. It feels like this part of the menu should be separated more with some kind of border or fill

Apart from this, I think this looks really professional, and I love the introduction of Themes.

Thanks a lot for the detailed feedback guys!

The two separate "Loading" popups you get every time you return to the home screen, is that the plain popup and then the popup with the progress bar? The way it works is we show the plain popup when we're loading existing thumbnails (which should be most of the time) and the progress bar one when we have to generate the thumbnails (which should be the first time only, or whenever a new book is added to the list). I didn't test the case where a book doesn't have a cover, it might try to generate it every time and show you the progress bar, is that what's happening? We need a special case for that then.

On the subject of button bindings, we had initially set the side buttons for Up and Down and the front buttons for Left and Right, which would seem more intuitive. But while using it that way all of us found it almost unusable. Switching tabs will happen a lot less than scrolling the list so in the end it makes sense that it's bound to the less prominent side buttons. We could make this a setting too if you'd like.

I will leave the designers respond to the visual feedback. I can update the PR today with corrections. Thanks team!

I updated the PR with a fix for the crashes some users were experiencing while testing, and an empty thumbnail is now created when the book has no cover, so that you don't get the loading popup repeatedly on the home screen. This is now stable and awaiting a response from the design team for the rest of the feedback.

Switching tabs will happen a lot less than scrolling the list so in the end it makes sense that it's bound to the less prominent side buttons. We could make this a setting too if you'd like.

I agree with @el and @DavidOrtmann that this feels a bit unintuitive. Additionally, I tend to use the side buttons more easily, maybe because I'm left-handed. Adding a setting to control this would be a good idea.

Another thought I've had: Maybe we just don't separate category and setting navigation from each other? We could do all these with the same button pair:
Select category > Select > Select setting
Go to start or end of list to change the category.
(I would prefer a button logic most people "get" instead of too many granular settings.)

Another thought I've had: Maybe we just don't separate category and setting navigation from each other? We could do all these with the same button pair: Select category > Select > Select setting Go to start or end of list to change the category. (I would prefer a button logic most people "get" instead of too many granular settings.)

You mean like in the 0.15 release where there's a first settings menu with the 4 categories, and then another screen for each of them?

You mean like in the 0.15 release where there's a first settings menu with the 4 categories, and then another screen for each of them?

Not like an extra page, no. The page layout would stay the same as in the current dev version. This currently has Settings Categories and the settings themselves on one screen. Now imagine you can reach the categories and the settings with the same button. It would feel like this:

(Symbol ↓ means "clicking down button"; bold text is a category)

Display ↓ Reader [click select = enters Reader settings] ↓ Controls ↓ System ↓ Font Family ↓ Font Size

The above would be the path to change the font size. It would only need the up/down button and the select button, no need for left/right.

You mean like in the 0.15 release where there's a first settings menu with the 4 categories, and then another screen for each of them?

Not like an extra page, no. The page layout would stay the same as in the current dev version. This currently has Settings Categories and the settings themselves on one screen. Now imagine you can reach the categories and the settings with the same button. It would feel like this:

(Symbol ↓ means "clicking down button"; bold text is a category)

Display ↓ Reader [click select = enters Reader settings] ↓ Controls ↓ System ↓ Font Family ↓ Font Size

The above would be the path to change the font size. It would only need the up/down button and the select button, no need for left/right.

Dude this is actually a step in the right direction! To expand on that we could even treat the tab bar as just another line, meaning you can highlight the tab bar when you land on it with the up/down arrows, and when it's highlighted you can press enter to change tabs. The selection cursor would be the same as any other lines, light grey background and selected tab on black background.

Thanks man this sounds like it would be way more intuitive than what we have now, but since we're not using the side buttons at all we could probably keep them as a shortcut to change tabs still.

Really neat work @CaptainFrito! Agree with a lot of the feedback already here, but counter to a few of the others, I actually prefer the new tab/item navigation button layout for basically the reason you mentioned, the side buttons feel like a "higher-order" control and them controlling the sections makes more intuitive sense to me, that being said, I'm sure I'd adjust to either option.

Not sure if it is related to my device, but the Calibre URL screen is broken for this branch.

Also, instead of hiding the button completely, can we hide partially like the Figma mocks?

Not sure if it is related to my device, but the Calibre URL screen is broken for this branch.

Also, instead of hiding the button completely, can we hide partially like the Figma mocks?

Thanks @el it is now fixed, and I added the little inactive button indicator which looks pretty cool!

I worked on the controls for the tab bar, and I think we're now at a point where it's a lot more usable:

So when we land on a screen with tabs, they are in a selected state first, which lets you change tabs with the confirm button. You can move up and down normally to select the settings, and the tab bar is considered the first item in the list, so when you move your selection to the top they get selected. It's really nice overall to be able to control everything with just up/down/confirm.
So now we can decide what to do with the side buttons, they can either be also linked to up/down, just like the left/right buttons, for people who like to use the side buttons for scrolling, or we can link them to tab left/right for a quick shortcut when you're down the list and want to change tab.

The selected tab was also made more visible.

In order to simplify interactions on the Library screen, the design team proposed we split the My Library screen into Browse Files and Recents. Both are accessible from the home screen which also gives the main menu a bit more substance. I have updated the PR with this change.

This will leave extra room on either screen for extra features that are included in the Lyra mockups:

• In the File browser, icons and a toolbar with the current path
• In the Recents screen, a grid of book cover thumbnails

Most of the other feedback has been addressed, except for:

• Different cover aspect ratios cause a white bar under the cover when selected
• No default cover for books without one

These things could be added in a separate PR to avoid having this one drag on too long and accumulating conflicts with master.

@CaptainFrito Awesome work! Personally, I prefer a fast, responsive UI over thumbnails. Would it be possible to add a setting to disable thumbnails on the home screen?

Maybe it could show simple book icons with the names of recent books instead. That would allow instant loading, while still giving users the option to enable thumbnails if they prefer.

Oh yeah good idea! Let's save this for another PR though so we don't pile features into this one

PR updated with UITheme as a singleton

I've improved the upgrade path for recent books coming from versions 1 and 2. Now it will reload the books to get the title, author and cover.

Since some people only read one book at a time, would it be possible to display just a single featured book on the homepage?

Single featured book can come as a followup PR, keen to get this one merged to close out this monster