Guidance on usability of solutions on the Falcon Space platform

Introduction

In this guide, we will look at various ways to make the user's personal account interface as simple, clear and user-friendly as possible using the Falcon Space platform.
This manual will be gradually updated with new ways, so periodically return to it for new ways to improve the level of convenience of the portal.

95% of the functionality created based on the platform is pages, forms, and tables. These are what we will look at in more detail in this guide.

Why do I need usability?

user-friendliness has the following advantages:

• quickly delves into the essence of an open page, saving time and effort;
• makes fewer errors;
• fewer ambiguous situations that require additional study of the problem;
• fewer gestures to execute the operation.

For the owner of the portal usability gives you the following:

• it is easier for the user to adapt and more likely that they will return to the site.
• less training costs for operators;
• it is easier to encourage the transition to a new convenient system from the old familiar system;
• fewer user errors, less wasted time.

For the developer a convenient site provides the following:

• fewer requests from users for unclear functionality;
• fewer possible changes and reworkings of the functionality (and reworking is always more difficult to develop from scratch);
• good job for the portfolio.

The basic principles of usability

1. Simplicity is the most important thing
Make the interface as simple as possible. The simpler the interface , the easier it will be for the user to understand it.

2. Minimum required information
You don't need to dump all the information at once. Give the necessary minimum, and hide the rest in modal Windows, subtables. A large volume also slows down the overall page load.

3. Removing all slow
If a certain function causes loading to slow down, structure it (for example, load it on request in a modal window), or completely abandon it. Slow pages can't be convenient to work with - they will constantly disrupt the user's work rhythm.

4. Give flexible tools to search for information
Give convenient filters (or filter associations to search for certain entities, such as "Old leads").
Make it possible to immediately search for the necessary objects (Projects, Tasks, People, finances, etc.) from any page.

5. Following a single process
The user in the system works according to a certain template (process). Keep this template in mind and remove all obstacles in the way of these basic processes. Cut corners for the user (for example, by making it possible to perform group operations instead of multiple routine operations of the same type).

6. " Where am I?"
Transparent navigation. Give the user an accurate understanding of where they are with a clear title, title tag, and breadcrumbs. Give a clear map of actions for the user on the page.

7. Manage your focus
On the page there are important items and less important items. Important elements should be as high as possible and stand out through size and color. If the user didn't see an important element, it means it doesn't exist on the page!

8. Adaptability
The page should open without horizontal scrolling on all devices. At the same time, it makes sense to hide certain elements on small screens as insignificant.

Next, we will look at the main usability elements in Falcon Space for various subsystems/components.

Page usability

Bread crumbs

https://falcon.web-automation.ru

Be sure to specify hierarchical breadcrumbs on the pages. This will allow the user to understand where they are located.
Example: Home > control Panel > Clients > ABC Client

Page title

Specify the page title as succinctly as possible. The title should let the user know as quickly as possible where they are and what they should expect from the page.
Header - if you use table/form component, it makes sense to hide the page title and use the component title (a special check mark in the page settings).
If you need to put a short page name in the menu, also hide the title and manually display a longer title with h1 in the page body.

Use a minimum of pages

Any additional information can be shown in a modal window (small or full-screen). This can be either a modal table or a modal form.

Use a separate page if you need to link to it from outside in the future (for example, pass a link to the task page to another person - it is better to have a separate page for It).

Hide secondary elements on mobile devices

Use CSS media queries or classes Bootstrap d-none d-sm-block и др.

Example of a CSS media request (this rule will only apply to screens with a width less than 768px):
@media (max-width: 768px) {
.defMainVideo{max-width: 450px;}
}

Micro markup

Specify micro-markup, it allows you to improve the appearance of the page snippet in search engines, as well as when transmitting via messengers.

Use the full power of Bootstrap

Bootstrap has many ready-made styles that you can use for your markup.
Use a convenient bootstrap cheat sheet - https://bootstrap-4.ru/articles/cheatsheet/
Basic elements that simplify interface creation:

• buttons
• Font awesome icons
• badges
• panels (alert)
• margins (p-, m-)
• tabs
• cards

Be sure to create a page skeleton according to Bootstrap Grip rules (container, col-12, col-md -*, etc.) More details https://bootstrap-4.ru/articles/cheatsheet/#col-1

Use a separate Layout for pages with complex layout

If you need to implement a landing page with a completely separate layout, use the Landing template. You can create a landing page on Bootstrap separately, coordinate it, and then easily implement it into the system according to the instructions.

An important point is that the landing page must be on Bootstrap in order to make it easier to support changes in the system in the future.

Creating table of contents automatically

The blog and documentation use automatic creation of a table of contents from h2-h6 tags. This allows the user to better navigate large text material. This article is an example (see the beginning of the article). 

However, such contents does not require any additional movements from the editor, table of contents is automatically generated when you view the article.

Form usability

The form allows you to display information for reading, as well as save user data input.

As part of working with forms, we will analyze the usability elements. Don't forget about them.

Form markup

The form must have adaptive markup and look good on mobile devices (only use Bootstrap for markup).
Make the width of the fields correspond to the intended input.
If the form is large, do not make 1 line in the field.
Compose a form with a compact layout of fields, and place the related fields next to each other.
Place the most important fields at the top.

Use suggestions and placeholder with an example of filling in the fields so that the user understands what to fill in and how to fill it in.

Field types

There are more than 30 types of fields in the system. Use the appropriate field types, rather than limiting them to 2-3 types.

Use example hints

These are small hints that insert a value into the field when clicked.is will allow you to fill in the fields with data much faster.

Checking input

You can check the input of both the entire form (via the CheckItem procedure) and a single field (CheckField procedure) to immediately notify the user of incorrect input.

Ctrl + Shift + S

The form allows you to quickly save data using the Ctrl + Shift + s keyboard shortcut. This makes it easier to save and reduces the risk of data loss when multiple data stores are constantly being saved.

Data loss protection

If you accidentally go to another page, the modified unsaved form will ask for confirmation of the transition.

Status of filling out the form

You can display a circular indicator or progress bar for the form, which is updated when the next field is filled in. The logic for calculating the field fill status must be specified in the progress procedure.

The wizard steps

The form has a special mode that allows you to fill in data by steps.
This is true for very large forms, where the fields must be filled in in a certain sequence.

The master mode is described In more detail in the forms documentation.

You can view an example of the form on the demo stand https://falcon.web-automation.ru/tst-master

Modal and popover forms

Modal forms are a powerful tool for displaying the necessary information contextually from a link.
The modal form is convenient because it can be used compactly anywhere on the page as a link, and it does not create a load when the page is initially loaded.

Modal forms allow you to hide all secondary information and show it only when the user requests it.
Modal Windows are also good for atomic user commands (for example, create a client).

Popover forms are small forms that open in a separate window. but they do not overlap the main content of the page.

Customizing data output logic in the form

You can use JS Render rules to control the output logic.
For example, if there is a certain role, output some fields (and if there is no role, do not output them).

In this way, you can create very flexible multi-functional forms that can be used in various situations.

Editing single fields

There are some pages for editing data, where in most cases only 1 field changes per session.
In this case, it makes sense to save single fields when the field loses focus (the SaveField procedure).

Displaying the operation result

You can display the result of an operation in a separate container on the page (via the {form-result} parameter), or in a small window on the top right (bootstrap toast).

In most cases, the window on the top right is the preferred option (setup EnableSaveAlert=1 in SaveItem SELECT 2).

Table usability

Tables allow you to output any list information in various output modes.

What can Falcon Space offer as a convenience?:

Filter combination

You can create different combinations of filters in the table. Moreover, these filters can affect not only the filtering, but also the way data is output (for example, compact appearance, or grouping by some parameters for cohort analysis).

Filters can be of various types. The most popular are the input string, and the Yes switch/No, just checkboxes and ticks. For list filters you can set any set using the dict stored procedure.

Table cell styling

Use special pseudo fields and markup for additional styling: description fields, growth indicators, badges, setting the text and background color of the cell, progress bars, etc.

Styling allows you to make a table more easy to analysis. Mark the problem points in red (badge badge-success), and the positive ones in red (badge badge-success).

Sorting and pagination

Set sorting to any column, and you can set the sorting logic yourself.

Pagination allows you to display only part of the data on the page. You do not need to make a very large pagination (more than 30). This slows down the download. The user should use filters to find the necessary information, and not endlessly turn the mouse wheel in search of the desired line with their eyes.

Quick creation of an entity by 1 field

We adhere to the concept of creating an entity by 1 field, and then further editing and configuring this entity. You enter the name of the entity (or select it from the list) and create the initial object.
If you want to have a more functional creation, then use the modal form with its own layout and fields.

Editing a field in a row

You can edit a single field without having to upload an entity editing form.
There can also be 2 modes-in the popover window that floats in and directly in the table on click.

Tools for displaying large tables

First, you can reduce the font in the table.
Second, use desc_ parameters to insert a description to columns (i.e. it is essentially a combination of columns 1 column).
Third, use the magnifying glass mode. A cell in the table increases when the cursor hovers over it.
Fourth, hide some of the information in substrings or modal form.
Fifth, use compact mode (Compact=1). This reduces margins in table cells.

The menu on the left can also be collapsed for a wider main area with the table.

Multiple output modes

Data can be output not only as a table. There are other output modes:

• Kanban Board with the ability to drag and drop columns https://falcon.web-automation.ru/tst-kanban
• Full calendar (as Google Calendar) https://falcon.web-automation.ru/tst-calendar
• chartbar (strips) 
• Gantt  
• stripes of the progress bar

For more information about modes, see the table documentation and see examples on demo stand.

Operations

A separate section that manages various operations in tables. The operation can be of 3 types: per line, in General, an action, and a group operation.

In more complex cases (when additional operation settings are required, rather than just a click on a button), it is better to use modal forms.

Group operations

You can enable row selection mode with checkboxes, and you can select multiple rows using shift (as in Gmail).

When selected, a panel of group operations appears at the top, which are eventually performed on the selected rows.

Data in a substring or modal window

Using special pseudo-fields (sub_ and modal_), you can set a specific markup that will be output by clicking in the substring or modal window (an icon-link to the corresponding field will be visually added).

This markup can contain a snippet of a sub-table, form, or any other component. This way you can create very compact multi-functional pages.

Fixed table header

When scrolling down, the table header is fixed. This makes it easier to understand the column values, table names, and main table buttons. You can also find the column name from the cell hint.

You can disable a Fixed header for a header (disableFrozenHeader).

Separate view for mobile

In mobile form, the table is displayed differently - columns are transformed into rows. Each row of the table is essentially a minitable (2 columns - Field, Value) with data for this row.
This is more convenient in most cases than scrolling the source table, but there is also the possibility of standard table output on mobile (separate mode).

General recommendations for usability on Falcon Space

Finally, we will look at the main points related to General settings. Taking them into account, you will improve the user experience of interacting with the system.

Quick search

Give users access to the search bar at the top (processing in the falcon_search procedure). The user enters a string, and the search can be performed on several objects at once. The search algorithm (how and what objects to search for) will depend on the roles of the current user.

Quick actions

Put the Key actions that the user does regularly in the quick actions panel. Example: add a client, view errors, view site statistics, add expense, create a task, etc.).

The panel is configured in the GetLayout procedure. This panel is accessible from any page in the cabinets, and also contains by default keyboard shortcuts like Ctrl + Alt + [Num] (Num is the order of the command in the sitelink menu).

Unified interface

You do not need to follow the customer's lead and strongly customize the styles of individual pages. This will eventually break the uniformity of styles and look like a blanket of different patches, plus it will be very difficult to maintain in the future. Make the most of the standard features of the platform and Bootstrap for styling.

Pinning the menu and upper interface bar

Consider pinning the top bar and menu to the left when scrolling. In this case, they will always be visible to the user. This is configured in GetLayout.

If you pin the menu, make sure that all roles have a relatively small number of menu items and are not hidden due to browser screen height restrictions.

Pinning the footer menu on the mobile screen

For mobile, you can make a convenient pinned menu at the bottom (easy navigation under the thumb when working with the phone).

Basic menu

The menu can be up to 2 levels. We deliberately refused to use 3 or more levels, because it is inconvenient to open deeper levels of the menu (Yandex is an example of such a menu.Metrics)
The menu adapts to the user's roles (i.e. it depends on the set of roles of the current user).

The menu can take a full view, or it can be shortened (narrow) - this allows you to increase the working area of the screen, for example, it can contain a large table. The browser remembers the collapsed state of the menu.

On mobile, the main menu is called by moving your finger to the left and opens on the right side with the possibility of separate scrolling on it. This is a convenient solution for most people (right-handed).

PWA support

By default, the system has a fully adaptive interface for mobile devices and supports PWA technology. PWA technology allows you to create a hybrid of a mobile app and a web app (put the app icon on the phone screen and open it as an app instead of in the browser).

More information about comparison of PWA and native mobile app

Use icons

Actively use the appropriate Font Awesome icons. This makes the interface more pleasant and compact. Buttons can be made as an icon + text, or as an icon + hint when hovering.
You can find the appropriate icon through the page Editing mechanism.
Also a good tool for searching for icons - https://faicons.com/

Use animation

Animation brightens up the user's everyday life (but it can also be annoying). You can enable/disable animation as needed in GetLayout.
This is mostly animation for appearing or hiding elements (using the animate.css library).

The system also has additional icon animation (for example, the icon in the upper panel when hovering).

Conclusion 

We have reviewed the main elements of the Falcon Space platform that improve the user experience.

The article will be updated periodically with a description of new implementations to the platform related to usability. 

If you have any ideas on how to improve the usability of the platform's tools, please write in the chat at the bottom right.