Mobile App UX Discussions

[aaronleopold]

Breaking out a conversation which started here: #750 (comment). @Arklaum I figure this is probably a better place for discussions. For any onlookers, my immediate response is to: #750 (comment):

I really appreciate the feedback, thank you!! (note any present-tense below for fixes etc refers to my branch, not an updated build)

Huge annoyance: the icons have different thicknesses (see Favourites and Series vs others)

Fixed 👍

Maybe add some colour

I think for mobile I want to re-think the primary color, at least for light mode because it didn't look great. I do think a pop of color would make this better, though.

If you look at Apple Music, interestingly the lines start at the very right edge of the screen and stop at the left side of the text and don't go under the icons

This is a very HIG-y pattern, SwiftUI's List defaults to that kind of pattern, e.g. here. I've mimicked it for iOS only, Android will be a full-split divider.

Wrt the icons, I agree they are a bit rectangular. I kind of like more rounded or bubbly icons for mobile, but I just used the same set that the webapp uses originally. I'm open to exploring other sets.

I also like chevrons, they kind of scream tap here... I like feedback when tapping / holding before releasing... There is a line missing from under Smart Lists

Done and done ✅

Screenshot

Not sure about Manet (I don't have music in Jellyfin) but in Apple Music the albums shown are specifically sorted by "Recently Added", unlike Stump where it is just alphabetical

This was actually a bug, fixed now. Also:

Maybe for me personally if I had that I might not even want to add the "Recently Added Series" scroller thingy to my home page because I'd already have it.

That's fair, it is a duplicate section. I added it mostly because I didn't know what else to put there but didn't just want the list above because it felt kinda empty.

Stump tracks the last time you visited a library

Huh I never noticed, what does it do with that info?

It just shows a link to the library if you use the topbar navigation. If you use sidebar navigation, it isn't used on the UI

I quite like the dark gradients with text on them because it uses 2/3rds of the space and looks cleaner (to me)

Yeah same, I got it a shot. See the screenshots below towards the end. It also has the relative time ask you mentioned.

I think favorites on the home screen could cover this?

if I favourited a lot of things, it may not be usable for my use case of: I just want to easily tap to "Manga", "Comics" and "Novels"

I agree it might be tricky. Another jellyfin music app I have (Discrete) does something like below:

Pic

That wider, stacked layout might work. As far as:

Also, if there is a favourites horizontal scroller, how will it handle libraries, series and books differently, because they might all have the same image and be confusing

They would have to present different information or have some kind of label for what it is (i.e., Library, Series, Book, etc)

As far as some of the other bits mentioned:

• I'll make a note to investigate some kind of On Deck/Your Next Read queries and corresponding display
• I can look into adding things like volume number. Generally I'm not sure how much info can be crammed into the image unless I bump the size of all the images I think

Misc Screenshots

[Arklaum]

I originally wrote this with e372bff (the first update):

So I've put it on my phone to test out, and it's so beautiful! I quite like the browse screen now, it was definitely Apple's UI conditioning me or some kind of familiarity feels friendly.

There is an issue when adding a server, trying to type your username and password or token, the keyboard will cover the boxes.

Also there's some really weird aliasing around the switches

Switches

I think the gradient might be overdone? (starts too high). I briefly looked at the code and I think this looks nice for ReadingNow.tsx

<LinearGradient
	colors={['transparent', 'rgba(0, 0, 0, 0.90)']}
	style={{ position: 'absolute', inset: 0, zIndex: 10, borderRadius: 8 }}
	locations={[0.7, 1]}
/>

maybe 0.7 or 0.6? Depends what will go onto the image (edit: 0.5 may be better now with the new stuff in the image). I was maybe thinking a Continue button with page number would be good that makes the carousel clear what it is and you don't need the "Jump Back In" text. Maybe I'm over-doing the saving space part. (Edit: and also differentiates page number where the new 1 of 200 for pages looks similar to 1 of 20 for volumes. I know they're on different rows but idk maybe it's just me but it's just a kind of an "ambiguity" at a glance. Or maybe I don't need to know how many volumes there are and it's just a number in a diamond in the top right)

And I think there needs to be a shadow behind a series and/or a border around the posters due to white colour around a poster looking weird e.g.

Album in Apple Music, Posters in Stump

Album in Apple Music	Real weird looking one	Very white
Apple Music border looks better on the phone than in the screenshot

Also 'Jump Back In' doesn't seem to refresh? If I open a new book on the web, then open the app I get the book I'm expecting in the 'Continue Reading' scroller. Only once I restart the app does it go into 'Jump Back In'.

I was also thinking paginated with 5 dots at the bottom to show you which you're looking at?

Also currently the swiping seems broken (doesn't focus directly on the correct poster: 5 images but there are only 4 fixed view points)

---

I've just updated to #758 and I'm not sure if I like the page number on the image. Maybe I will? I know its the page number but it looks very similar to the volume number for "Your Next Read"

There's also something wrong with the corners

Corners

And is there a reason the content isn't edge to edge (i.e. the padding on the very left and the very right)? i.e. the scrollbar should sit on top of the content (it does this in the Apple Books home store for example).

Padding Context

[aaronleopold]

I change the theme twice a day every day which is slightly tedious...

I am funny in that I don't change my theme often, but I can see how it could be tedious. I think maybe a good, smaller step to explore before refactoring themes to intake light/dark variants might be to just move the sheet trigger. What do you think? I think this thought relates to a few points you made wrt the header/footer and general layout. Originally, I had thought to port a similar layout to Apple Books with that bottom-right floating button that houses basically all the other triggers, but had decided against it because:

1. I didn't want to build a complex menu system before having a functional reader
2. It was just easier to take inspiration from Yomu, since it is more minimal

Definitely open to riff on this as you'd like

I'm in much despair over the recent loss of "Look Up", I hope you can grace me with this wonderful button soon, but I have seen the todo (I might try to add it myself anyways)

Haha ah I'm sorry! Here is a less-than-ideal implementation I pushed up a few moments ago 🫶

See the comments if you're curious about why I say it isn't ideal.

I would like different page margins for different numbers of columns...

I'm totally good with that change, keeping in mind we don't strictly know which can be disabled if set to auto. I'm not 100% sure what you meant by:

Alternatively, I should probably actually have Page Margin settings for landscape vs portrait (more flexible)?

---

I'm used to 5 highlighter colours, so that would be nice, but low priority for me

Someone else on Discord asked the same, I think they noted it here

Also if searching through all notes is added somewhere, hashtags as filters would be nice

I love this, it is not currently noted anywhere so feel free to add to that discussion or just create an issue

---

Wrt the things from Apple Books you miss:

Having the header and footer be minimal instead of gone (e.g. show only chapter name + current page with muted colours)

I have thought about this myself a bit, too. I'm not sure I would want to fully lose the ability to go full gone (like today), but I don't think we need more customization beyond "minimal" vs "none" or something. I think it would be a really nice addition, and honestly I could see myself switching between them depending on my mood

When the full control set is showing, it replaces chapter name with the number of pages left in the chapter, which helps me know when to stop reading (irrelevant but actually Apple Books uses book title not chapter name, but I prefer chapter name). I wouldn't want this to show when the controls are minimised because that's a bit distracting.

Yeah I think in a world where we have minimal vs none, this would make sense to add. Not 100% sure offhand how to pull that from the locators, though. There is a position for a given resource, but not a total count for the resource

I think a cap if you don't turn the page would be nice (like koreader has). Probably have a very generous default like 120 seconds, and have it adjustable. Maybe a good idea for image based reader too, but definitely split the option if it's added to image based too

I like the idea of a page turn cap, so long as it is adjustable (and I think your suggestion was a good default)

When controls are shown, it doesn't track read time? But you can still turn the pages. I've definitely read a lot with the controls shown, so either auto hide after a few seconds or after turning a page? (would pair well with a way to customise the "full" vs "minimal" header and footer state so that if people want certain like chapter name and page number still shown it won't disappear)

Yeah this is an interesting one. That paradigm of no time tracking while controls are shown comes from the image-based reader, where it is way more apparent because the read timer stops. In general I added it so that the clock isn't ticking while messing with controls/menus, but with the ebook reader it doesn't have that same blocking behavior that the image-based reader has so you can read which just makes it a bit weird. I agree that auto-hiding the controls after a page turn (with or without a delay tbh) is probably okay.

Also, if you've noticed, there isn't anywhere you can even disable/pause/resume the timer in the ebook reader. At some point I need to do the chore of diffing the experiences and trying to align where reasonable.

The difference in the header button design between the ebook reader and the image based reader is a bit weird, and the header and footer animations

100% agree

The only thing I am sad about by moving away from Apple Books is the page numbers not reflecting the visual pages, but it seems to not be possible with Readium.

Agree and agree, it is a nice feature to have. It would definitely be more noticeable with a minimal layout, too, which would stink. There might be some math to approximate it, but might take some trial and error.

Overall I'm super happy because it's the only other mobile book reader app I've been able to use for more than a few days without getting super annoyed! thank u for making it <3

Yay happy you like it and don't get (at least overly) annoyed! 🫶

[Arklaum]

I think maybe a good, smaller step to explore before refactoring themes to intake light/dark variants might be to just move the sheet trigger. What do you think?

I do like the way Apple Books does it, and its charming animations, though we don't need to do something that fancy since that seems hard. If we add the floating button, the animation can probably be opacity + small y translation where on tap the button disappears and the bottom button fades in, then the one above that, etc in succession. I think that might charming enough, easy and similar to the way the image based reader does its animation. This might be useful for any design updates too in case you wanna use liquid glass for some components.

I also had the idea of: if you look at Apple Maps, you can reduce the sheet to a very small pill. The idea is a tap on the screen will show the small pill that first only reveals the brightness slider, and then you can drag the sheet to be larger to see everything else. And you have some buttons above the sheet for extra stuff. A bit similar to the way Panels does their footer. Maybe not a great idea in practice but I just wanted to mention it.

Haha ah I'm sorry! Here is a less-than-ideal implementation I pushed up a few moments ago 🫶

It's definitely not the same as it was before where it also searched the web if it didn't find anything in the dictionary, and the sheet can't be swiped away but it's good enough for now.

Also there's no swift code formatting? I've found that this is super easy to set up if you did want something.

I'm not 100% sure what you meant by:

Alternatively, I should probably actually have Page Margin settings for landscape vs portrait (more flexible)?

I actually cut that paragraph down to not be too big, oops. I meant there are two ways to achieve what I want. My goal is to have different page margins for landscape tablet vs portrait tablet. Landscape tablet for me has two columns and portrait has one, so splitting the setting by columns also works for me. I think having "Landscape Page Margins" and "Portrait Page Margins" might be more useful since you could for example still split page margins if using landscape single column, but on iPad/tablet someone might resize the window instead which could change two columns to one, so split by columns might be more useful in that case. So not sure which route to go because I don't mind either.

Also if searching through all notes is added somewhere, hashtags as filters would be nice

I love this, it is not currently noted anywhere so feel free to add to that discussion or just create an issue

Side note, would you want to update the issue template, and also maybe into the issue form format as well? Might help with forcing separation of expo and web app and server issues etc.

I don't think we need more customization beyond "minimal" vs "none" or something.

That's probably quite an easy change in that case. I definitely think the single floating button would complement this, since this doesn't feel like a theme setting and would be better placed nearby (i.e. a setting you can access while inside the reader itself, not outside) and not in the theme sheet button.

Yeah I think in a world where we have minimal vs none, this would make sense to add. Not 100% sure offhand how to pull that from the locators, though.

Hmm, hopefully it's doable somehow, it feels more likely to be possible than total page count but I'll have a look into it.

I like the idea of a page turn cap, so long as it is adjustable (and I think your suggestion was a good default)

Again the nested floating buttons would complement this, and could be placed inside the same settings menu where minimal vs none is.

That paradigm of no time tracking while controls are shown comes from the image-based reader, where it is way more apparent because the read timer stops... Also, if you've noticed, there isn't anywhere you can even disable/pause/resume the timer in the ebook reader

I think a nice design could be to have play and pause buttons and the time under in the nested floating button, similar to where Apple Books has the share, rotation lock and line guide buttons. But then you wouldn't see visual confirmation that the timer has stopped unless you press the floating button. But you could have the time shown somewhere on controls shown instead like the image based reader

You could also have a smaller icon as a badge on that button if you explicitly pause the reading timer, similar to when you add a bookmark on apple books it adds a little bookmark badge to it.

w.r.t the image based reader, a few months ago I had the idea of: tap the screen to show the controls overlay, and the time ticks forward by a few seconds then stops, and you have a green dot or background turn into a red dot or background with play and pause symbols. That would add a stronger feeling like the timer has paused. It's not that important though.

The only thing I am sad about by moving away from Apple Books is the page numbers not reflecting the visual pages, but it seems to not be possible with Readium.

Agree and agree, it is a nice feature to have. It would definitely be more noticeable with a minimal layout, too, which would stink. There might be some math to approximate it, but might take some trial and error.

I was thinking that a if/when metadata fetching is added, you could pull the print edition page number and approximate where you are in the print edition. While it wouldn't be exact, it would still be very useful for pairing with a physical copy.

---

One thing I forgot to mention, I have a lot of books with images in the middle of chapters, so it's like chapter2.xhtml, insert1.xhtml, chapter2_1.xhtml, but the chapter title only shows if you're in chapter2.xhtml when it really should for all three.

[aaronleopold]

If we add the floating button, the animation can probably be opacity + small y translation

Yeah that sounds perfect

This might be useful for any design updates too in case you wanna use liquid glass for some components

Somewhat related(ish), I recently stumbled across this Kotlin library

A bit similar to the way Panels does their footer. Maybe not a great idea in practice but I just wanted to mention it

I remember when they first added that a bit ago, I'd be curious how difficult that would be to implement here without going native. I'm not opposed to that kind of idea if it works well.

Also there's no swift code formatting? I've found that this is super easy to set up if you did want something.

I mostly use xcode for the swift bits, and ran swiftformat manually a few times but always forget. An extension makes total sense, I'll add it next push

My goal is to have different page margins for landscape tablet vs portrait tablet. Landscape tablet for me has two columns and portrait has one, so splitting the setting by columns also works for me. I think having "Landscape Page Margins" and "Portrait Page Margins" might be more useful since you could for example still split page margins if using landscape single column, but on iPad/tablet someone might resize the window instead which could change two columns to one, so split by columns might be more useful in that case. So not sure which route to go because I don't mind either.

Got it, I understand. I think if the setting isn't set to auto we can just break it up into the categories and programmatically resolve the right one based on the device size and orientation and what not

Side note, would you want to update the issue template, and also maybe into the issue form format as well? Might help with forcing separation of expo and web app and server issues etc.

I would deeply appreciate that

...Not 100% sure offhand how to pull that from the locators, though.

Hmm, hopefully it's doable somehow, it feels more likely to be possible than total page count but I'll have a look into it.

An idea I had was to kinda estimate based on something like:

const pagesInChapter = positions.filter(p => p.href === currentLocator.href).length
const currentPageInChapter = (currentLocator.locations.progression ?? 0) * pagesInChapter
const pagesLeft = pagesInChapter - currentPageInChapter

I'd have to mess around with it and actually try it out to see though.

I think a nice design could be to have play and pause buttons and the time under in the nested floating button... But then you wouldn't see visual confirmation that the timer has stopped unless you press the floating button

I think that is acceptable, you could have it so that the timer only stops once you click into that button and any sequential overlay afterwards, maybe? Or like you suggested I can see a little badge working too.

w.r.t the image based reader, a few months ago I had the idea of: tap the screen to show the controls overlay, and the time ticks forward by a few seconds then stops, and you have a green dot or background turn into a red dot or background with play and pause symbols. That would add a stronger feeling like the timer has paused. It's not that important though.

I'd be curious to see how this feels in practice, for whatever reason I am having a hard time imagining it. While I wouldn't want to make the timer hidden (like the ebook is today) I'm not sure it needs to be super prominent either.

I was thinking that a if/when metadata fetching is added, you could pull the print edition page number and approximate where you are in the print edition. While it wouldn't be exact, it would still be very useful for pairing with a physical copy.

Yeah maybe, I assume different editions have different page counts but with more metadata it might be possible to get something close enough

[Arklaum]

Somewhat related(ish), I recently stumbled across this Kotlin library

Weird seeing that on android, seems quite fun but sounds like a lot of effort.

An idea I had was to kinda estimate based on something like:

const pagesInChapter = positions.filter(p => p.href === currentLocator.href).length
const currentPageInChapter = (currentLocator.locations.progression ?? 0) * pagesInChapter
const pagesLeft = pagesInChapter - currentPageInChapter

Oh right, I was thinking visual screen pages when I mentioned it, but that's fine too since it should match how the "pages" are currently calculated (i.e. "pages" = positions). That way definitely works but would need rounding up. However I'd like it to account for the next point which you missed (but probably because it was a late edit from me):

One thing I forgot to mention, I have a lot of books with images in the middle of chapters, so it's like chapter2.xhtml, insert1.xhtml, chapter2_1.xhtml, but the chapter title only shows if you're in chapter2.xhtml when it really should for all three.

Would there be any problems if we do: if there is no name for the current chapter, recursively check backwards for the most recent chapter that matches the table of contents and use that? Alternatively if you stored position with each of the toc chapters, you could just check which chapter you are in more easily since say position 55 is after Chapter 1 - 53 and Chapter 2 - 64?

And then the way to do the remaining pages in the chapter would probably have to be something like: take the next chapter's first position and count the number of positions between the current position and the next chapter's position.

Yeah maybe, I assume different editions have different page counts but with more metadata it might be possible to get something close enough

Ideally you'd choose the edition you have a print copy of if you own that version too, so you can roughly line up the page numbers. On a side note I actually have an ebook that internally has page markings matching the print edition, but for some reason Readium doubles the number of pages. And it's also annoying because it doesn't match the way basically all of my other books "pages" are calculated but oh well.

[aaronleopold]

Weird seeing that on android, seems quite fun but sounds like a lot of effort.

Oh yeah, definitely waiting around to see if someone else makes a native module for expo before really seriously looking at it for fun.

One thing I forgot to mention, I have a lot of books with images in the middle of chapters, so it's like chapter2.xhtml, insert1.xhtml, chapter2_1.xhtml, but the chapter title only shows if you're in chapter2.xhtml when it really should for all three.

Would there be any problems if we do: if there is no name for the current chapter, recursively check backwards for the most recent chapter that matches the table of contents and use that? Alternatively if you stored position with each of the toc chapters, you could just check which chapter you are in more easily since say position 55 is after Chapter 1 - 53 and Chapter 2 - 64?

Interesting, I can't think of any problems off the top of my head. I am curious how Apple Books handles that situation, though, if you don't mind sharing a screenshot (or the book in a DM) next time you have a moment. I would think it just reverts back to the book title? Also, my assumption is that the actual root of the issue is bad/lacking metadata in the ebook itself. If an image has a dedicated slot in the spine it should be named imo, but ebooks are pretty inconsistent.

On a side note I actually have an ebook that internally has page markings matching the print edition, but for some reason Readium doubles the number of pages. And it's also annoying because it doesn't match the way basically all of my other books "pages" are calculated but oh well.

That's a first for me, what an interesting choice the publisher made lol Readium shouldn't be doubling the pages so much as it is just chunking it up based on the screen size, spacing, font size, etc.

[wolsen9]

Really enjoying the unstable build with the mobile app! I have 2 things I’ve noticed:

1. When reading a book, how do I access the Content menu? I can’t seem to find it.

2. When backstroking (?) in a book to exit, it seem to jump to completed Read status.

[aaronleopold]

Unfortunately I still don't think the ebook reader is ready for prime time yet. It is missing core features that I would want, selfishly, for my own usage before I can recommend it:

• A menu for adjusting settings
• Basic paging animations
• Bookmarks, annotations, etc
• At least one good light/dark theme combo

I have been made aware of the second issue, and was considering just removing the progression tracking since it seems to just be a bug with the library (but haven't fully verified yet).

I'll be better positioned to start working on the ebook reader once I promote the current unstable to experimental and fully upgrade some of the dependencies in the rest of the project (primarily react and expo). The reading toolkit I have in my plan would be native modules, so a longer development time as well. Most of my efforts now around the mobile app are around general exploration and navigation of your content

[dj-bauer]

Page animations would be super sexy 💅🏼