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.