How to have previous/next and "up" navigation for navigating pages on a book, while also having a configuration menu?

Question

I have this basic layout idea so far, for navigating things like book pages, where you can go:

• Left: back a page
• Right: forward a page
• Up: up from verse level to chapter level to book level to site level

And then I have a configuration menu (I just used a unicode symbol for demo purposes here), which you can do things like change fonts, languages, and a few other properties.

It looks like this so far, but I don't like it that much.

A few other notes:

• I am okay if space is used above the title perhaps (like moving some navigation above the title for example).
• There are too many configuration options to put them inline (it is like advanced search), so I opted for a menu icon, but I think it's not that clear you can change settings this way perhaps.
• On long pages, when you scroll down, you lose easy access to the next/previous/up buttons for navigating the book.
• I would like to avoid this feeling like a PDF viewer with tons of buttons all around the chrome and such, trying to keep it more minimal, yet really useable.
• The layout is designed for mobile and desktop alike (e.g. this would scale nicely to mobile), but perhaps we can optimize for 2 or 3 different screen size cases.
• It's not really clear from this design that you can navigate up and left/right in the current book, so not sure how to improve on that. Perhaps on mobile, you have the left/right/up buttons at the bottom fixed positioned, and also implement swipe navigation? But on desktop, I'm not sure.
• There is a bit of padding around the edges and between the sections.

How would you improve this sort of "book navigation" experience and UI, so it works nicely on both desktop and mobile? What would go into a good UX?

Possibly an addition to this design (could be left out of the answer if it's asking too many questions at once), would be to add a list of all the pages in the current chapter (maybe down below, or in a drawer/menu?), and a list of all the chapters surrounding the open chapter. But we can save figuring that out for later actually.

I searched around for some inspiration, but it was hard to search for this specific of a design and I didn't find much, so I opted to ask here on the UX Stack Exchange.

Answer 1

I searched around for some inspiration

Look at Calibre, Okular, Evince.

For computer users it is intuitive that keys "Left", "Right", "Up", "Down", "Home", "End", "Page Up", "Page Down" are used for navigation. Just bind the actions to some of these keys.

If some users prefer mouse, scrolling is intuitively connected with navigating to the previous/next page.

For settings you can use context menu.

For users of tablets and smartphones it is intuitive that swiping is used for navigation. Also it is intuitive that zooming in/out can change font size, e.g. like in Opera browser when it makes text reflow.

For settings you can use long press action.