# Layout

# Concept

The goal of the layout and design of MGT Connect can be summed up in three words: simple, intuitive, usable. For that purpose we have used established design patterns, familiar to a fair amount of users. The platform can be used from desktop and mobile devices. In the following sections, the main layout building blocks are described.

The main navigation bar is positioned on the left side of the screen. For desktop devices it is always visible. For smaller screens and mobile devices, the navigation bar is hidden by default and can be toggled using a familiar button in the top left corner of the screen.

The main navigation bar contains several navigation sections



Some sections are not available if the user has not selected a workspace

Section Description
Documents All pages with sent or received documents and the create document page
Sending All pages with information related to files sent to the platform or document candidates
Integration All pages with information related to files sent from the platform for integration
Workspaces All pages related to using workspaces and workspace specific information
Help and feedback User guide page

# Use profile navigation bar

The user profile navigation bar is hidden by default on all screen sizes and is toggled by the user profile button. It contains two items:

  • Link to user profile page
  • Sign out button

user sidebar

# Toolbars

The main toolbar is positioned at the top of the screen. It contains four items:

  • Logo
  • Test mode indicator ( only visible in test mode )
  • Language selection menu
  • User profile button

main toolbar

# Page headers

Page headers are positioned just below the main toolbar and contain general information for the page.

  • Page title
  • Other relevant information

For example the workspace dashboard header displays

  • Name of the selected workspace
  • Client name and acronym


# Content

There are two types of content:

Type Description
List views List views usually contain a table of items, for example documents
Detail views Detailed information for a single item

# List views

Used for listing data and contains:

Element Description
Filters To search for specific items or a group of items
Settings To enable / disable additional filters or columns
Refresh button Refreshes information without reloading the page
Data table Lists page items
Pagination controls Change number of listed items ( Defaults to 15 ) and change pages

The sent documents page is an example of list view

list view

# Filters

Filters are positioned in a side panel and are hidden by default. They can be toggled by clicking on the Filters button.


# Settings

Settings are positioned in a side panel and are hidden by default. They can be toggled by clicking on the Settings button.


# Refresh button

The refresh button is positioned just above the table, to the right. When clicked data in the table is refreshed.

# Data table

Each table contains columns relevant to the page. The first row is a header row and displays the column name.

On some pages the data can be sorted by clicking on the corresponding header cell.

The first column contains a link to the item details page.

documents table

# Pagination

The bottom of the table contains pagination controls:

  • Number of rows to display
  • Current page number
  • Total number of pages
  • Previous and next page buttons

pagination controls

# Detail views

Detail views display information for a single data item. Each detail view is customized based on it's context. The document details page is an example of detail view.

detail view

# Action Buttons

Action buttons trigger a single action relevant to the page. The buttons are visible only on relevant pages. The attachment button on document detail page is an example of action button.

action button