Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.43 MB, 27 trang )
<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">
Phu, Phan Thanh Nam, Nguyen Phuong
Approved by
INTERNATIONAL SCHOOL – DUY TAN UNIVERSITY Da Nang, 28/02/2022
</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">Acronym <sup>B-Medical</sup> Project
Title <sup>Block Chain for Traceability in Medical</sup>
Start Date 15 – Feb –2022 End Date 15 – May –2022 Lead
Institution <sup>International School, Duy Tan University</sup>
</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">Role Developer
Date 20/02/2022 Filename C2SE.02-UserInterfaceDegisn
Document Approvals: The following signatures are required for approval of this
1.0 20/02/2021 Create User Interface Design Document
</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">3.1. UI-01: Home Page (Website)...14
3.2. UI-02: Censor Products Page...16
3.3. UI-03: Product Field Page...18
3.4. UI-04: User Information Page...20
3.5. UI-05: Censor Users Page...22
3.6. UI-06: Error Page...24
3.7 UI-07: Product Page...22
3.8 UI-08: Owner Page...24
</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">Figure 1 : Home Page (Website)...14
Figure 2 : Censor Products Page...16
Figure 3 : Product Field Page...18
Figure 4 : User Information Page...20
Figure 5 : Censor Users Page...22
Figure 6: Error Page...24
Figure 7 : Product Page...22
Figure 8: Owner Page... 24
Table 2 : Home Page (Website)...8
Table 3 : Censor Products Page...10
Table 4 : Product Field Page...12
Table 5 : User Information Page...13
Table 6 : Censor Users Page...16
Table 7 : Error Page...17
Table 8 : Product Page...19
Table 9 : Owner Page...19
</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">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.
1.1.Purpose of Document
This document describes the design interface of the “B-Medical” application. The following purpose:
Document the design of user interface of functions of B-Medical
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.
1.2.Scope of Document
Overview of the stages and modules of the software. Create complete interfaces, and describe them clearly.
1.3.Document 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.
</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">Roles <sup>User Interface</sup>
use the main functions of the application, an overview of the equipment
This page where the admin accepts or rejects the product
This page where the user enters the details of the
Admin UI-05 User confirmation This page where the admin accepts or rejects the user
user UI-06 Error page This page but user entered wrong url
user UI-07 Product details This page for users to see
</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">product details
User UI-08 Purchase order This page for users to view the orders they have purchased
Table 1 : List of User Interface
</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">3.1 UI-01: Home Page
Figure 1 : Home Page (Website)
</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">ID Condition Control Type Target
3 Press Button Click to go to Metamask wallet link page.
4 Press Button Click to go to the register page.
5 Press Input This input is for user to enter the if they want to search
6 Press Button Click to show results. Results will be displayed in component
7 View View Bar Display the list of drugs in the system 8 Press Link Click to go to drugs Page.
9 View Images Show pictures of medicines
10 Press Text Display the name of the drug, when clicked, it will go to the detailed information page of that drug
11 View View Bar Display the list of medical equipment in the system
11 Press Link Click to go to medical equipment Page. 12 View Images Show pictures of medical equipment 13 Press Text Display the name of the medical equipment,
when clicked, it will go to the detailed information page of that medical equipment 13 View Table Display basic details of existing drugs and
medical devices. When clicked, it will go to the detailed information page of that drug.
</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">14 Press Button Filter results in the medical device category 15 Press Button Filter results under drug category 16 Press Dropdown list Filter results by ASC - DESC 17 View Images Show pictures of medicines
18 Press Text Display the name, when clicked, it will go to the detailed information page
19 View Text Basic detailed information of drugs, medical devices (Model, HSX, Company, ...) 20 View Text Display the price of each drug, medical
device, the price will change when the product owner updates
21 Press Button Go to the page that shows the details of the drug or medical device
Table 2 : Home Page (Website)
</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">3.2 UI-02: Censor Product
Figure 2 : Censor Products Page
</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">6 View Text Product registration company name 7 View Text Product price of the product
8 View Text The place where the product is registered 9 Press Button Click to go to product details page 10 View Images Go to product details page
11 Press Button Agree, the product will be posted on the website, the products before clicking agree are carefully checked by the relevant parties. 12 Press Button Reject, when the product does not meet the
standards specified by the relevant units on origin, safety, ....
Table 3 : Censor Products Page
</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">3.3 UI-03: Product field
Figure 3 : Product Field Page
</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">1 View Tab Link to go to the page
2 Press Link Click to go to the manual page. The orientation page is the page that guides the units to do the procedures correctly and accurately, it should be noted to avoid wasting time
4 Press Dropdown list Let the user choose 1 from the list of product types
6 Press Input Trade name of the product
8 Press Input Product's unit of measure
9 Press Input The price of the product, this price does not include VAT
10 Press Input Classification of TTB according to the level of risk of the product
11 Press Input Manufacturers and distributors need to indicate which company the product is manufactured under
12 Press Input Country of manufacture of the product 13 Press Input Country owning the product 14 Press Input The product's owner firm
15 Press Input The year of manufacture of the product
17 Press Input calendar Product's manufacturing date
</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">18 Press Input calendar Expiration date of the product
19 Press Input The name of the business announcing the price of the product
20 Press Input Contact phone number (usually this is the phone number of the distributor)
21 Press Input The address of the business that registers the product
22 Drop Input Drag the product photo to upload the image, this will be the product illustration, the uploaded photo must be the actual product photo 23 Press Button Click to select the product's photo, this will be
the product's illustration, the uploaded photo must be the actual product's photo.
24 Press Input General information about the device
Press Input Basic configuration of the device
26 Press Input Specifications and technical criteria of the device 27 Press Input Instructions for use of the product
Table 4 : Product Field Page
</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">3.4 UI-04: User Information
Figure 4 : User Information Page
orientation page is the page that guides the units to do the procedures correctly and accurately, it should be noted to avoid wasting
</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">time 3
4 Press Input Tax code of the account registrar
List of representatives, containing the necessary information of the person who
represents the company
11 Press Input calendar Date of issue of CCCD
Business Information Directory, containing the necessary information of the business that
owns or distributes the product
15 Press Button International transaction name (if any) 16 Press Dropdown list Province / city where the business is registered 17 Press Dropdown list District where the business is registered 18 Press Dropdown list Ward where the business is registered 19 Press Input <sup>Detailed address where the business is</sup>
registered (street name, ...) 20 Press Input Representative phone number of the business
</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">21 Press Input Fax number
The business registration certificate has been licensed by a competent authority and has not
been revoked 23 Press Input Issuance date of the certificate
25 Press Input <sup>The medical equipment group publicizes the</sup> price
26 Press Input Click to select relevant documents
When choosing, it means that you have to take full responsibility before the law for the
declared items
When your information does not match the existing data, a request will be sent to the
superior for approval 29 Press Button Press to cancel, exit the screen
Table 5 : User Information Page
</div><span class="text_page_counter">Trang 20</span><div class="page_container" data-page="20">3.5 UI-05: Censor Users
Figure 5 : Censor Users Page
</div><span class="text_page_counter">Trang 21</span><div class="page_container" data-page="21">ID Condition Control Type Target
3 View Text International transaction name (if any)
4 View Text Province / city where business registration 5 View Text District where the business is registered 6 View Text Ward where the business is registered
8 View Text Name of the representative of the business 9 View Text Representative phone number of the business
11 View Text CCCD number of the business representative
Press Button When the information of the enterprise is all related to the parties and in accordance with the requirements set forth, upon confirmation, the enterprise will be logged into the system.
Press Button When the information of the business does not meet the requirements, the business will be refused, can add additional documents and re-register.
Table 6: Censor Users Page
</div><span class="text_page_counter">Trang 22</span><div class="page_container" data-page="22">3.6 UI-6: Error
Figure 6: Error Page
2 Press Button Click to go to the homepage.
Table 7 : Error Page
</div><span class="text_page_counter">Trang 23</span><div class="page_container" data-page="23">3.7 UI-07: Product
Figure 7 : Product Page
</div><span class="text_page_counter">Trang 24</span><div class="page_container" data-page="24">ID Condition Control Type Target
3 Press Button <sub>Click to go to Metamask wallet link page.</sub>
7 Press Button <sup>The price of the product, this price includes</sup> VAT
The main information tab, contains all the information of the product that the seller
15 View Text The unit of measurement of the product
16 View Text <sup>The price of the product, this price includes</sup> VAT
17 View Text <sup>Classification of TTB according to the level of</sup> risk of the product
</div><span class="text_page_counter">Trang 25</span><div class="page_container" data-page="25">19 View Text Country of manufacture of the product
22 View Text The year of manufacture of the product
24 View Text Circulation number / product import license
27 View Text <sup>The name of the business announcing the price</sup> of the product
28 View Text <sup>Contact phone number (usually this is the</sup> phone number of the distributor)
29 View Text <sup>The address of the business that registers the</sup> product
32 View Text General information about the device
34 View Text Device specifications and specifications
36 Press Dropdown list Click to go to the other product listing
Table 8 : Product Page
</div><span class="text_page_counter">Trang 26</span><div class="page_container" data-page="26">3.8 UI-08: Owner
Figure 8 : Owner Page
</div><span class="text_page_counter">Trang 27</span><div class="page_container" data-page="27">ID Condition Control Type Target
3 Press Button <sub>Click to go to Metamask wallet link page.</sub>
6 View Text The name of the company that sold the product
13 Press Button Button to return to old product purchase page
14 Press Button Button to review product details purchased
15 View Text The unit of measurement of the product
Table 9 : Owner Page
</div>