UX/UI Demo Documentation – Content

Docs: Dashboard

Mon, 01 Jan 0001 00:00:00 +0000

On the dashboard, the user can access quick information of different topics through widgets.

The User is able to change the position of his widgets per drag n drop and increase or decrease the height and width according to a grid which has per default three columns and infinite rows. He can hide the widgets, if he does not need certain information or add new ones of a select-field.

The user has to enable to edit-mode first, then he can personalize his dashboard. The content of the widgets is strongly depending on role and purpose of an application.

Docs: Profile Page

Mon, 01 Jan 0001 00:00:00 +0000

On the profile Page, the user can make changes about his account. The content of the profile settings page should always be grouped into related data fields and options.
Therefore, in this demo the content is structured into three groups/sections:

Personal Details

In this section, the user is able to change his first- and last name and his date of birth.

Field name	Type	allowed characters	Limitation	additional info
First name	text box	alphabetic	-	-
Last name	text box	alphabetic	-	-
Date of birth	select box	numeric	-	by clicking on the calendar-icon a calendar pops up and the user is able to select a date

Profile Picture

The user is able to upload a photo and is able to delete it.

Contact Details

This section gives information about contact details like address and electronic ways of communication.

Field name	Type	allowed characters	Limitation	additional info
Address	text box	alphanumeric	-	-
Postal	text box	alphanumeric	-	-
City	text box	numeric	-	-
Country	select box	alphabetic	-	-
E-Mail	text box	alphanumeric	-	instant validation
Phone	text box	numeric	-	prefilled with correct format, related to country

Advanced Settings

In this section, the user is able to make changes which affect the application, for example its appearance.

Changable Theme

The user is able to switch the theme for example from light to dark.

The language-switch is shown as a Drop-Down-Field, all languages available are written in their language and use its own characters.

Docs: Tables

Mon, 01 Jan 0001 00:00:00 +0000

The Data grid is an opportunity for administrators to have an overview of all available learning media. Administrators want to be able to sort them in a table (by clicking on the column’s header) and additionally, they want to be able to search for specific names and values.

The table should be adjustable according to users needs. Information about the total amount must be available. Additionally, the user must be able to set the number of records on screen and users must be able to scroll the table page by page.

The course list here is just one example for tables with large amounts of data. It can be also users, groups etc.

Actions

A maximum of three actions are shown. If there are more than three, the actions are hidden inside a menu, it is accessible over three dots.

Multi-selection

The user/administrator is able to select multiple entries of a table.

By selecting one or more entries a small section fades in, which is fixed to the bottom of the display. It shows the amount of selected items and all operations that are possible with multiple records. The user is able to deselect his selection by clicking on the checked icon.

UX/UI Demo Documentation – Content

Docs: Dashboard

Docs: Profile Page

Personal Details

Profile Picture

Contact Details

Advanced Settings

Changable Theme

Language Switch

Docs: Tables

Actions

Multi-selection