UX/UI Demo Documentation – Welcome to UX/UI Demo

Docs: General

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

User profile - Icon

The user profile gives the user information about his logged in account und further functionalities. It shows the picture of the user. If the user did not upload a foto of himself, a place-holder is shown.

The user profile is placed on the top right corner. When the user klicks on the profile, a small menu pops up where he gets information about his account (name), his role, the functionality to log out and his settings. By clicking on his name, he gets to his profile settings page.

A main navigation must be given, to provide that every user can easily access the whole content of the navigation.

The Main Menu is placed vertically on the left side in the header and is symbolized as a Burger.

Normal State – Closed Menu: The Menu shows only icons, which are clickable. There-fore, the user don’t have to click on the burger every time he wants to navigate.

Open Menu: By clicking on the Burger, the menu expands to the right side, now Labels are visible. The user needs labelling, in case he does not know what the icons stand for.

Theming

For the menu we used an additional colour swatch to style the menu individually.

Copyright

The Copyright aligns on the left side in the footer of the application.

Help

The help is available in an external documentation. The user can access it over the info icon, which is placed inside the footer, if help is needed. By clicking the icon, the user gets directly to the page-description he wants help for.

Docs: Activity Arrangement

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

This function it is used, if a user finds that the sequence/order of the activities and courses is important therefore, she/he like to put them in the right sequence, in order to maximize the courses or activities output.

The user is able to create, edit and delete certain categories and activities and to drag n drop them wherever he likes. The new order/sequence is automatically saved.

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: Navigation

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

The Main Navigation is shown as bottom navigation with a maximum of 4-5 entries. If more than five entries are needed, the fifth entry-label changes to More, additional entries are displayed in this overlay/pop up. Active entries are coloured in the accent colour.

This concept of navigation is only suitable for a normal (end-)user. For administration purposes another navigation concept is needed.

If there is only the profile function and a logout, these functions are accessible over a profile icon in the header.

If there are more entries, that are either technical or off-topic (not relevant for the main content of the application, example: support-page) the profile picture is displayed in the open drawer menu, and the icon gets replaced with a burger.

Docs: Forms & Fields

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

As a user I am offered a complex form. In this form I have to fill in various input fields. My entries are constantly validated and the save button remains without function until all entries have been made correctly. All data is clearly arranged and provided with a label.

Certain rules a form has to follow:

Validation

Relevant fields have to be validated immediately.

Field-length

The length of a field depends on the input

Position

All fields are aligned underneath each other in one column

Labels

A label should be displayed above its field

Letters & Numbers

Certain fields should only allow letters and numbers if needed. (for ex-ample, phone number)

If a formular gets too long, it should be separated into more pages with steps.

Required Fields

Required Fields are marked with *
If all fields are required, the * should not be visible
If there are more required fields than optional fields, the optional fields should be required instead with the (optional) tag

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: User Information

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

In the mobile view, the user profile menu is placed on the upper right corner in the header. By tapping on his profile picture, the menu expands over the whole height of the application and shows the same entries as the web version.

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 – Welcome to UX/UI Demo

Docs: General

Header

User profile - Icon

Navigation

Main Navigation

Theming

Footer

Copyright

Help

Docs: Activity Arrangement

Docs: Dashboard

Docs: Navigation

Main Navigation

Drawer Menu: Burger Menu / Profile Icon

Docs: Forms & Fields

Validation

Field-length

Position

Labels

Letters & Numbers

Required Fields

Docs: Profile Page

Personal Details

Profile Picture

Contact Details

Advanced Settings

Changable Theme

Language Switch

Docs: User Information

Docs: Tables

Actions

Multi-selection

UX/UI Demo Documentation – Welcome to UX/UI Demo

Docs: General

Header

User profile - Icon

Navigation

Main Navigation

Theming

Footer

Copyright

Help

Docs: Activity Arrangement

Docs: Dashboard

Docs: Navigation

Main Navigation

Drawer Menu: Burger Menu / Profile Icon

Docs: Forms & Fields

Validation

Field-length

Position

Labels

Letters & Numbers

Related Information should be grouped together

Required Fields

Docs: Profile Page

Personal Details

Profile Picture

Contact Details

Advanced Settings

Changable Theme

Language Switch

Docs: User Information

Docs: Tables

Actions

Multi-selection