Das Layout
The User Interface of the Bitergo WMS – Warehouse Star Web Apps consists out of the following areas
- The Header
The Header contains the name of the app of the current active functionality or category, as well a menu which gives access to basic functions
- The Footer
The Footer contains status information on the session, application, etc. and copyright information.
- Work
The Work area is the main working window, in which all data is displayed and the input forms and dialogs appear.
- Navigation (collapsible)
Through the Navigation menu, the user can access all different function areas within an app. Any selection in the navigation, changes the content of the main work window.
- Preview (collapsible)
The Preview area shows all the data in detail that is associated with the selection in the main work area.
It is generally possible to extend the areas beyond the limits of the preview. The separation between the Navigation-Work-Preview areas is not rigid. The user can adjust the width of the three areas according to his requirements.
This basic layout is primarily intended for desktop use. In theory, however, the layout can also be used on mobile devices. By using a horizontal swipe gesture the user can easily switch between the navigation area, the main work area and the preview area. The header and footer are simplified and kept very narrow.
Using the master data app as an example, the structure looks as follows:
Header
The header appears always at the top of the window.
Er besteht aus
- dem App Icon zur Wiedererkennung
- der Bezeichnung der App-Gruppe "logistics mall Basis Apps"
eine einheitliche Gruppierung aller Basis-Apps als Ergänzung des Icons und für alle Basis-Apps einheitlich
- der Bezeichnung der App
besteht aus dem Namen der App (hier: Lagerstammdaten) und der Zuordnung zum Funktionsbereich (hier: Artikelstamm).
- dem Menü-Icon. Nach dem Betätigen des Icons wird ein Dropdown Menü mit folgenden Optionen angezeigt.
- Navigation sichtbar schaltet den Navigationsbereich ein und aus
- Preview sichtbar schaltet den PreViewbereich ein und aus
- Excel Export: Durch Klick auf Excel Esport wird ein generischer Export der im Workbereich sichtbaren Tabelle erstellt
- Sprache ändern: Wählen Sie zwischen deutsch und englisch als Sprache für die web App
- Einstellungen: Hier finden Sie weitere Einstellungen für die Apps, wie z.B. das Auswähöen eines Etikettendruckers
- Abmelden meldet den Benutzer von Bitergo WMS – Warehouse Star ab und schließt die App
The header consists of
- the app icon
- the name of the app group “logistics mall basic apps"
- the name of the app, consists of the name of the app (here: warehouse master data) and the current active functionality category (here: article master).
- the menu icon: After clicking on the icon, a drop-down menu with the following options is displayed:
- Navigation visible switches the navigation area on and off
- Preview visible switches the preview area on and off
- Εxcel export: Clicking on Excel export creates a generic export of the table that is visible in the work area
- Change language: Choose between German and English
- Settings: Here you will find further settings for the apps, such as selecting a label printer
- Logout logs the user out of Bitergo WMS - Warehouse Star and closes the app
Navigation
You can use the navigation to switch between the different functionality categories for each web app.
In addition to the functionality categories (here for example: item master, Bill of material, Bin location, Bin location master, Warehouse field, etc.), functions variations can also be located here, such as predefined filter settings.
Work – the main working area
The work area contains the actual data tables and dialogs of the app. Typically, functions (buttons) change the displayed content and after the function has been executed, the area is displayed again in a changed representation (e.g. other content in the table).
The central component is a table that is placed horizontally in the layout and fills the whole work area.
- Table
Table with column headings and the row-oriented cells. One or more rows can be selected. In principle, whole rows are selected with one click. A double-click on a row opens the corresponding window with the standard editing function. The table uses the entire width of the work layout. The lazy-loading of table contents is triggered via the vertical scrollbar. Tables are always sorted by the first column.
- Filter
Filters or functions that affect the loading of the table can be defined above the table. A filter identifier (text field) and the filter button to the right of it are specified by default. The filter button opens a filter window in which the table entries can be filtered according to certain criteria. Filters can be saved under specific names. These names are then displayed in the text field next to the filter button.
- Table summation fields
A right-aligned display of summation fields from the table is provided directly below the table. By default, the selection is left-aligned (n of m rows selected).
- Functions Area (Buttons)
The buttons for triggering specific functions for the table contents are located below the table and are right aligned. Some of these require a selection or 1..n selections. Buttons that require a selection are set to inactive if no row has been selected. The buttons are ordererd from left to right according to frequency of use. As a standard example, the order for Edit: NEW..., EDIT..., COPYand DELETE.... As all buttons have a (subsequent) follow-up dialog, the labels are appended with three dots.
The work layout does not have a close button by default. The window cannot be closed. The user either calls up another function via the navigation or exits the entire app.
Subsequent windows are displayed above the work layout and replace the current work layout. Follow-up windows are not accessible via the navigation and contain a "Done" button in addition to the function areas.
Additional windows or dialogs are overlaid in the middle of the work layout with a shadow. If a dialog is displayed, the background windows cannot be accessed and operated. The dialogs must be closed before you can continue working on the background windows.
By default, either a CLOSE or an OK and CANCEL are available, which close the window. In general, the Escape key (ESC) can also be used to quickly close the window and canceling any change.
Preview
The preview area displays all detailed information for a selected element in the work area.
This is particularly useful if a row has been selected in the workspace, as you do not necessarily have to scroll horizontally in the table to see the details.
Footer
The footer area is constantly displayed at the bottom of the browser window.
It shows
- Login information for the current user
- Name of the connected server
- Version of Bitergo WMS – Warehouse Star
- Copyright information of the software
Special layouts
For specific workplaces the web app design can vary from the standard layout and a special user interface is provided, called operational interface.
Operational interfaces
Operational interfaces are used to support production or warehouse employees. The employee (worker) must be able to operate the interface quickly. The requirements here are fundamentally different from those that apply to office workstations:
-
If possible, only work with a central work window
-
Additional information does not appear as separate dialogs, but as windows (overlay) that can be closed again with Close (OK - Cancel)
-
Keyboard operation should be fast and complete, this applies in particular to the use of function keys
-
Mouse is only used in special cases
-
Differentiation between primary information with large font sizes and additional information with small font sizes
-
Connection of a scanner with control via prefix and postfix must generally be taken into account
The structure of the work window is strongly oriented towards the task to be performed or the execution of the planned processes at the workstation. An example of this is the Packing web app: