GROUP PROJECT
CMU-CS 445 FIS
USER INTERFACE DESIG DOCUMENT
Version: 1.0
THE HPR DASHBOARD
Mentor: Nguyen Dang Quang Huy
Team Member:
Thinh, Tran Viet
Thien, Trinh Quy
Nho, Dang Van
Huyen, Ha Phuong
Da Nang, 1/04/2024
USER INTERFACE DESIGN DOCUMENT
PROJECT INFORMATION
Project
HPR
Acronym
Project Title THE HPR DASHBOARD
Start Date 29 – Feb –2024 End Date 23 – May –2024
Lead
International School, Duy Tan University
Institution
Role Name Email Phone
Project Nguyen Dang
huyndq@[Link] 0935525354
Mentor Quang Huy
Tran Viet Thinh tranvietthinh86@[Link] 0935945480
Trinh Quy Thien [Link]@[Link]
Dang Van Nho dangvannho7@[Link]
Ha Phuong Huyen haphuonghuyen@[Link] 0775489004
DOCUMENT NAME
Document User Interface Design Document
Title
Reporting 1 – April - 2024
Period
Author(s) Tran Viet Thinh, Dang Van Nho
Role Developer
Date 20/03/2024 Filename [Link]
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
SIGNATURE
Document Approvals: The following signatures are required for approval of this document.
Signature:
Mentor Huy, Nguyen Dang Quang
Date:
Signature:
Project
Thien, Trinh Quy
Manager
Date:
Signature:
Thinh, Tran Viet
Date:
Team Signature:
Nho, Dang Van
member(s)
Date:
Signature:
Huyen, Ha Phuong
Date:
REVISION HISTORY
Version Date Description
1.0 1/04/2024 Create User Interface Design Document
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
TABLE OF CONTENTS
1. Introduction 5
1.1. Purpose of Document......................................................................................5
1.2. Scope of Document..........................................................................................5
1.3. Document Overview........................................................................................5
2. List of User Interface for Sprint 6
3. Describe User Interface 7
3.1. UI-01: Home Page (Website)....................................................................14
3.2. UI-02: DropDown Page.............................................................................16
3.3. UI-03: Report Page....................................................................................18
3.4. UI-04: Alerts Page......................................................................................20
3.5. UI-05: Error Page......................................................................................24
FIGURES
Figure 1 : Home Page (Website) 14
Figure 2 : DropDown Page 16
Figure 3 :Report Page 18
Figure 4 : Alerts Page 20
Figure 5: Error Page 24
TABLES
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
Table 1 : List of User Interface 7
Table 2 : Home Page (Website) 8
Table 3 : DropDown Page 10
Table 4 : Report Page 12
Table 5 : Error Page 13
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
1. Introduction
User interface (UI) design is the process designers use to build interfaces in
software or computerized devices, focusing on looks or style. Designers aim to create
interfaces which users find easy to use and pleasurable. UI design refers to graphical
user interfaces and other forms
User Interface Design focuses on anticipating what users might need to do and
ensuring that the interface has elements that are easy to access, understand, and use to
facilitate those actions.
[Link] of Document
This document describes the design interface of the “HPR” application.
The following purpose:
● Document the design of user interface of functions of HPR Mashup
● Be the primary document driving the implementation of the user
interfaces.
● Introduce interface design for the reader. Including the background,
content information display, command buttons.
[Link] of Document
● Overview of the stages and modules of the software.
● Create complete interfaces and describe them clearly.
[Link] Overview
This document is organized into the following sections:
● This document helps to better understand the interface of the Smart
Dashboard Application System, detailed specification components and
function of the Application.
● With this document, the development team can understand the structure and
composition to create a consistent and complete system.
● Overview of the stages and modules of the software and create a complete
interface.
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
2. List of User Interface for Sprint
Roles User Interface ID UI Name Description
User UI-01 HomePage This page is used for users to
use the main functions of the
application, an overview of
the equipment
User UI-02 Sidebar This page is used for users to
select main functions from the
sidebar
User UI-3 Taken vacation This page is showing all value
days of Taken vacation days
User UI-4 Total Earnings This page is showing all value
of Total Earnings
User UI-05 Average Benefits This page is showing all value
of Average Benefits
User UI-06 Alert Hiring This page is showing all value
Anniversary of Alert Hiring Anniversary
User UI-07 Alert vacation days This page is showing all value
of Alert vacation days
User UI-08 Alert Birthday This page is showing all value
of Alert Birthday
User UI-09 Role page This page is show functions
Ex: add, edit,vv…
User UI-010 Personal This page is showing all
Information function this page includes:
add, show detail, delete
Table 1 : List of User Interface
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
3. Describe User Interface
3.1 UI-01: Home Page
Figure 1: Home Page (Website)
ID Condition Control Type Target
1 View Text Title of dashboard
2 View Text Introduction about company
3 View Text Introduction about company
4 View Calendar Show calendar
5 Press Sidebar Click to open the sidebar.
Table 2: Home Page (Website)
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
3.2 UI-02: Sidebar
Figure 2 : Sidebar
ID Condition Control Type Target
1 View Icon Icon of dashboard
2 Press Button Click to go to the home page.
(Dashboard)
3 Press Button Click to go to the taken vacation days
(Taken vacation days)
page.
4 Press Button Click to go to the Total Earnings page.
(Total Earnings)
5 Press Button Click to go to the Average Benefits
(Average Benefits ) page.
6 Press Button Click to go to the Alert Hiring
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
(Alert Hiring Anniversary page.
Anniversary)
7 Press Button Click to go to the Alert Vacation Days
(Alert Vacation Days) page.
8 Press Button Click to go to the Alert Benefits Plan
(Alert Benefits Plan) page.
9 Press Button Click to go to the Alert Birthday page.
(Alert Birthday)
10 Press Button Click to go to the Role page.
(Role)
Table 3: Sidebar
3.3 UI-03: Taken vacation days
Figure 3 : Taken vacation days Page
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
ID Condition Control Type Target
1 View Text Title of dashboard
2 Press DropDownlist Show value
3 View Text Title of fields
4 Press Input Enter data
5 View Table Show all valid data
6 Press Button Click here to find valid
(Submit)
Table 4: Take vacation days Page
3.4 UI-04: Total Earings
Figure 4 : Total Earings Page
ID Condition Control Type Target
1 View Text Title of dashboard
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
2 Press Dropdown list Show value
3 View Text Title of fields
4 Press Input Enter data
5 View Table Show all valid data
6 Press Button Click here to find valid
(Submit)
Table 5: Total Earing Page
3.5 UI-5: Average Benefits
Figure 6: Average Benefits
ID Condition Control Type Target
1 View Text Title of dashboard
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
2 Press Dropdown list Show value
3 View Text Title of fields
4 Press Input Enter data
5 View Table Show all valid data
6 Press Button Click here to find valid
(Submit)
1 View Text Title of dashboard
Table 6: Error Page
3.6 UI-6: Alert Hiring Anniversary
Figure 6: Alert Hiring Anniversary
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
ID Condition Control Type Target
1 View Text Title of dashboard
2 Press Dropdown list Show value
3 View Text Title of fields
4 Press Input Enter data
5 View Table Show all valid data
6 Press Button Click here to find valid
(Submit)
Table 7: Alert Hiring Anniversary
3.6 UI-7: Alert vacation days
Figure 6: Alert vacation days
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
ID Condition Control Type Target
1 View Text Title of dashboard
2 Press DropDownlist Show value
3 View Text Title of fields
4 Press Input Enter data
5 View Table Show all valid data
6 Press Button Click here to find valid
(Submit)
Table 8 Alert vacation days
3.6 UI-8: Alert Birthday
Figure 6: Alert Birthday
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
ID Condition Control Type Target
1 View Text Title of dashboard
2 Press DropDownlist Show value
3 View Text Title of fields
4 Press Input Enter data
5 View Table Show all valid data
6 Press Button Click here to find valid
(Submit)
Table 9: Alert Birthday
3.6 UI-9: Role
Figure 6: Role
ID Condition Control Type Target
1 View Text Title of dashboard
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
2 View Text Title of fields
3 Press Button Go to the add value page
(Them moi)
5 View Table Show all valid data
6 Press Button Click here to Edit information
(Sua)
Table 10: Role page
3.6 UI-10: Personal Information
Figure 6: Personal Information
ID Condition Control Type Target
1 View Text Title of dashboard
C1SE.16 - Team
USER INTERFACE DESIGN DOCUMENT
2 Press Input Enter data
3 View Table Show all valid data
4 Press Button Click here to add new information
(Add)
5 Press Icon Click here to display detail information
(Eye)
6 Press Icon Click here to delete information
(Trash can)
Table 11: Personal Information
C1SE.16 - Team