appyoumake / Appyoumake

Nyeste MLAB
Other
1 stars 0 forks source link

New app navigation interface/components #505

Open leadermontanus opened 6 years ago

leadermontanus commented 6 years ago

Background

Currently Mlab uses two components to provide navigation in an app. The first is the Chapter heading, this is use to mark where a new chapter (from now on called section) starts in the app. The second is the Index component, this uses the page order information from the conf.json file, the page titles from each individual page and the chapter heading component information (text and the level it is set to) from the pages that have had this component added.

From this information the index component generates a clickable menu for navigation in the app as well as an ordered list of pages which defines what is the next & previous page when such buttons (or swiping) is used to go to next/previous page.

Issues with current approach

In short it is user-unfriendly. It is not clear to the user that adding the Chapter Heading does anything, even less so that they need to adjust the level settings. The index itself is only displayed in preview (unless one adds a index to a page, even then it is only visible when you are looking at that particular page). Furthermore, the use of text in the chapter heading in the index, combined with the use of page titles is confusin. When you add a new chapter about a generic topic, such as Cars, and if the page that the chapter is added to is also called Cars, then you will have duplicate headings on two different levels in the index. Very confusing as well.

In addition the current approach does not cater for all the use cases that have cropped up in real use by testers. This includes the need to exclude pages from the index (simple pages that are only displayed when someone clicks on a link on a page), a means of re-arranging pages in terms of section levels and a real time view of how ones app pages are organised.

On the plus side, the use of components to build an index means that it is reusable, can be used in templates as well as the app pages itself and gives flexibility re formatting etc. It is therefore not desirable to stop using the component approach.

Solutions

Design

The following therefore needs to be implemented:

Programming