UI/UX design discussion for new touch menu

[houqp]

ref: #2555 (comment)

New design from @baskerville:

Please note that the image is meant to be displayed on the KA1.

I've used Noto Sans at 29.6 px, so that the thickness of the font matches the thickness of the menu boundary (3 px), the separators are 2 px thick.

You'll notice how grouping menu items together brings spacial structure and improves recognition.

The sentence below the menus is just a font test of Noto Serif.

Have a look at those menu guidelines.

[houqp]

Also see @Frenzie 's comment: #2555 (comment)

[Hzj-jie]

Also, we may have bread crumbs in the menu. Currently the up arrow is not informative to me, especially it also appears in the top level menu.

[houqp]

Right, the current up arrow we have is literally one of the worst UX designs out there, LOL

[Frenzie]

The separators are implemented in #2601.

[houqp]

@baskerville this just came to my mind today. How would you handle sub menus in the new design? It's not obvious from the mock. Is the plan to discard sub menu completely?

[Frenzie]

Since @baskerville explicitly referred to the Mac OS menu guidelines I imagine he'd basically want the global standard we already implemented a couple of months ago except properly aligned on the right.

Edit: and even if @baskerville doesn't that's what I'd want. ;-) Of course submenus should be used with caution, but there are several situations in which they are an obvious necessity.

[houqp]

Oh, I wasn't referring to the visual indication for an available sub menu, but more of what happens when a user tap on that, how do we present the sub menu and how does a user go back to the upper menu from a sub menu. The current UX for going back to upper menu is very bad.

[baskerville]

@houqp It can be seen in #2555 (comment).

[Frenzie]

I think that some kind of return on top (akin to .. in the file manager) indeed makes the most sense.

[houqp]

Oh shit, totally missed your new comments on that thread, LOL 👍

Linking the go back one level up UI mock up here:

[z3t0]

One of the things that bothers me a lot as a new user is that there are three "settings" related icons. This might be something to talk about?

[z3t0]

@houqp what is the font being used to render the images?

[houqp]

@z3t0 we are using Sans https://github.com/koreader/koreader/blob/master/frontend/ui/font.lua#L14. If you have good ideas on how to simplify the menu, feel free to put your proposal here for discussion :)

[lightonflux]

The settings should be organised by context, not technical background.

how to simplify the menu, feel free to put your proposal here for discussion

I try to categorise them:

Gear in buttom right, in the reader

This is only a style setting for the progress bar and css style (embedded or not).

So one is about the book, the other about the UI.

IMHO the setting for the status bar does not belong to the bottom panel. As it changes only between full and mini. This setting does not change how the book content is displayed. And i only changed it once.

The other setting for embedded css styles can be included in one of the other buttons. The second one fits best as it changes the appearance of the pages.

Gear menu in the main menu (top)

Changes setting of the device / hardware (backlight, screen, screen saver, network, language) but also the status bar (same as above). I think the setting from above and this status bar setting pane should be in the same context (UI wise).

The remaining setting changes "save document", which is reader behaviour.

Big problem here: The content of the menu changes between reader and file manager

wrench and screwdriver

This settings pane can be described as "setup, services and statistics". The user needs to interact here to setup services (e.g. evernote) , manage and use (goodreads) them.

There is also keep alive and input (gestures), which i would consider a hardware setting. Same for synchronise time.

Contexts

I see several contexts here:

• UI, how is the UI displayed? Mostly the progress/status bar, maybe screensaver
• Hardware. Backlight, WIFI, NTP,
• Services/Sync-Provider
• Statistics
• Content-Sources, Goodreads, OPDS
• File manager view options
• Book display options

koreaders sorting of options is all over the place. Before rearranging menu items and making icons we should make a huge lists with every menu option and it's context. from there we can make new menus that are efficient to use and more logical.

[lightonflux]

Started an incomplete¹ list with all top level items as odt, attached as csv with txt ending, because of github restrictions. Maybe someone can upload it as google doc or similar. For collaborative editing.

koreader contexts.txt

1: ran out of time

[z3t0]

I would suggest all settings options to be under a universal settings menu item. Except for book specific settings such as font and what not.

[pazos]

Hi closing this ticket as this one is too old and outdated. Feel free to open a new one if you want to discuss against current UI