Suggestions to mobile layout v2023.1

Version: 2023.1

Use Case

Our client needs to create a Protocol in certain workplace where is no computer. User is supposed to accomplish following scenario on tablet:

  1. User creates new Protocol
  2. User selects an Order from dropdown to which the protocol is assigned
  3. User fills in a protocol header information
  4. User fills in protocol rows for 3 or 4 device components
  5. User uses an action button Preview PDF which run Fast Reports and displays preview of the result protocol.
  6. User clics another action button Save PDF which creates report and saves it into the order documents for archiving

The idea is that the user will use Tablet to input data and we need a form with as bigger input boxes as possible. So Origam in classic HTML mode is not usable because on tablet the inputs are too small.

If I increase the fonts’ size of the page, the display mode is changed into mobile layout and the input are sufficiently big. But I see some troubles of using the mobile layout for the end user.

Suggestions

  1. User inputs the data but the save button is hidden under keyboard;
  2. When the field is type of number, system should automatically ask for number keyboard;

  1. User can too easily close the form by closing icon. I offently misinterpret it as an backwards icon and I want to get back to top of the form;

    • I suggest this navigation:
    1. Allow to go back to previous screen section. Breadcrumbs navigation is fine but not enough user friendly to go back just to previous section. And I would like to have it on the same place a I can see save button;
    2. Allow to navigate among rows 1/3 < >;
    3. Possibly also allow to go back to main screen section (top screen section?) ? => it could allow easilly return to reach action buttons on the main screen section.

  2. When there is a Rule dependant on the current field, moving next (step 1) runs rule evaluation and the focus returns back to previous (or even more previous - steps back by 2 or 3 fields) field;

  3. Question to save or close => make it smaller on tablet if possible. Or at least bigger text or buttons closer to text;

  4. Close button - suggestion to place it on the top.

    1. Change icon to not so robust?
    2. ?Possibly always ask whether the user wants to close window?

  5. Action buttons from the main screen section? Display them also on the child pages or allow user to navigate back to mail screen section;

  6. Main Menu organization: if I increase the fonts site, the menu gets bigger and more difficult to use. I suggest to allow display only one section listed and hide all others either into top hidden menu or into buttons on the bottom of menu section. Bottom icons would allow to display also red numbers of waiting tasks or chats;

  7. Display validation error inside workflow:

    1. Button Opakovat (Repeat) navigates back to form which is validated. I would expect it would have name Close or Back;
    2. Button Zavřít (Close) closes the whole form and gets the user back to menu. I would expect close just error box or at least rename it to Close form or place it on the different place?;
    3. Change layout into that text field with errors is on top, buttons are aligned below and centered;
    4. Close button (x) would be on the different place.

  8. Allow to configure Nápověda (Help) link to display as a tab inside origam (new form). If I have the HTML help page, I would like to see it directly inside the origam’s layout. As it would look like completely compact.

Task h
User inputs the data but the save button is hidden under keyboard; 2
When the field is type of number, system should automatically ask for number keyboard 0.5
Allow to go back to previous screen section. 2
Allow to navigate among rows 1/3 < >; 1
When there is a Rule dependant on the current field, moving next (step 1) runs rule evaluation and the focus returns back to previous (or even more previous - steps back by 2 or 3 fields) field; 4
Question to save or close => make it smaller on tablet if possible. Or at least bigger text or buttons closer to text; 4
Close button - suggestion to place it on the top. 1
Action buttons from the main screen section? Display them also on the child pages or allow user to navigate back to mail screen section;
Main Menu organization: if I increase the fonts site, the menu gets bigger and more difficult to use. I suggest to allow display only one section listed and hide all others either into top hidden menu or into buttons on the bottom of menu section. Bottom icons would allow to display also red numbers of waiting tasks or chats; 8
Display validation error inside workflow: 4
Allow to configure Nápověda (Help) link to display as a tab inside origam (new form). If I have the HTML help page, I would like to see it directly inside the origam’s layout. As it would look like completely compact. 8
34.5

Priorities:

Task h
Close button - suggestion to place it on the top. 1
Allow to go back to previous screen section. 2
When the field is type of number, system should automatically ask for number keyboard 0.5

Nice to among priorities:

Task h
When there is a Rule dependant on the current field, moving next (step 1) runs rule evaluation and the focus returns back to previous (or even more previous - steps back by 2 or 3 fields) field; 4

The above tasks have been done in the following topics:
https://support.advantages.cz/t/move-close-button-on-mobile/1768/2
https://support.advantages.cz/t/implement-back-button-on-mobile/1767
https://support.advantages.cz/t/show-number-keyboard-for-number-input/1766/2
https://support.advantages.cz/t/focus-after-pressing-next-key-on-mobile-keyboards/1777/2

More tasks have been created:
https://support.advantages.cz/t/make-popup-windows-on-tablet-smaller/1793 https://support.advantages.cz/t/make-action-buttons-visible-on-child-screens/1794
https://support.advantages.cz/t/reorganize-menu-in-mobile-layout/1795