In order for the user to move quickly and intuitively in an application, suitable navigation elements and a consistent design are important. Technically, we can use all the possibilities offered by HTML, JavaScript and CSS in S10 applications.

1. Navigation within a page

(a) Tabs

Tabs represent a familiar and quick-to-use paradigm; the technique is described in the preceding tutorial.

However, more than about 7 tabs are difficult to keep track of. You might then summarise information or add another level (hierarchical navigation).

Above the tab bar, information is often displayed that relates to all tabs. On small devices (smartphones), however, this should only be one line; it is better to display the rest of the information in the first tab.

If the information as a whole contains only one long table and individual blocks of fixed length, the presentation without tabs, with the table at the end, is usually better. It depends on how often the individual pieces of information are needed and how much effort it takes to get them. The example from the previous tutorial makes sense in this way if the customer address (first tab) is looked up frequently and the sales figures rather rarely:

Another aspect is that the display of "simple" information such as the address should be very quick from the user's point of view, while a click on "Sales" with a response time of a few seconds is not objected to. Since the information for the individual tabs is only retrieved when the tab is selected, this argues for a separate "Sales" tab.

(b) Showing detailed information in tables (row selection)

A click in the first table row shows details:

Details on the implementation can be found in Tables.

(c) Fade in sections of an HTML page in the browser

A description of the HTML elements <details> and <summary> can be found, for example, in  The Details disclosure element (Mozilla Developer Network).

In the <detals> area you can use the elements of the S10 framework without restriction.

2. Navigating between screens

Navigation between different HTML pages is controlled in the ABAP application. The following S10 methods are available for this purpose:

s10nextscreen() Sets the next screen to be displayed

s10dialog() Starts a modal dialog

s10exitdialog() Ends a modal dialog

In the user interface, you can visualize the actions as you wish, for example, as a pushbutton, a link, a link in an image, or a dropdown menu action.

Here are some examples. The "Create order" pushbutton calls up the screen for creating a new order:

The pushbutton is implemented in HTML as follows:

<button type="button" class="toolbarbutton" 
      onclick="S10Apply('on_create')">
   Create order
</button>

The ABAP method called by this creates a new object of the class "order" and calls the screen "create" as a modal dialog:

method on_create.

  data: neworder type ref to order.
  create object neworder.

  neworder->s10dialog( 'create' ).

endmethod.

From the called screen for order entry, the user can return to the initial screen using the pushbutton in the upper left corner:

HTML coding for the return button:

<button type="button" class="button back" 
    onclick="S10Apply('exit_orderdetail_back', '', null, true);">

◀  

</button>

The last parameter "true" in the call to S10Apply() ensures that this pushbutton does not trigger an input check, so that the user can leave the screen even if the input is invalid. The ABAP method for this:

  method exit_orderdetail_back.

* return to previous screen
    s10exitdialog( ).

  endmethod.

There are many suggestions for the design of navigation menus in HTML on the web. The combination with the S10 framework is unproblematic: For navigation, you call an ABAP method from the HTML page via S10Apply() and set the subsequent screen there with s10nextscreen(). In the CIS demo application, the general navigation is realized by a dropdown menu:

3. Design tips

Here are some general design tips for using navigation techniques:

• Intuitive and simple is above all what the user already knows from other applications ("Principle of Least Surprise"). Be careful with "original" solutions.
• Eye movements require less effort  than mouse/finger movements. This is why e.g. multi-level menus are unpopular with users, while a two-dimensional well-designed "sitemap" is perceived as helpful.
• What you grasp at a glance is better than information all over the place that requires longer eye movements. This is why newspapers usually work with relatively narrow paragraphs that you can read "from top to bottom".
• Vertical scrolling is very well supported on mobile devices.
• Rather avoid horizontal scrolling, especially in combination with vertical scrolling.
• Aim for 3-step navigation: all application parts accessible with a maximum of 3 navigation steps.
• Location consistency: bring the same or similar function in the same place in different screens.
• Know what the user usually does in the application so that the most common actions are particularly accessible.
• Provide for user customization only where really necessary. Most users simply work with the default.
• Take into account the end devices of the users. Through "Responsive Web Design" we try to ensure that the same application works well on all devices, but the optimal solution can be different for smartphones, tablets and desktops. Through S10 Framework technology, it is possible to serve different interfaces with the same ABAP backend, so if necessary we can implement separate HTML pages for different device sizes.