Báo cáo chuyên đề tốt nghiệp đề tài thiết kế giao diện người dùng app mobile cho học sinh cho trường mầm non hoa ban

HỌC VIỆN NGÂN HÀNG KHOA HỆ THỐNG THÔNG TIN QUẢN LÝBÁO CÁO CHUYÊN ĐỀ TỐT NGHIỆP ĐỀ TÀI THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG APP MOBILE CHO HỌC SINH CHO TRƯỜNG MẦM NON HOA BAN Giảng viên hướng dẫ

HỌC VIỆN NGÂN HÀNG KHOA HỆ THỐNG THÔNG TIN QUẢN LÝ

BÁO CÁO CHUYÊN ĐỀ TỐT NGHIỆP

ĐỀ TÀI THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG APP MOBILE CHO HỌC SINH CHO TRƯỜNG MẦM NON HOA BAN

Giảng viên hướng dẫn : ThS Giang Thị Thu Huyền Sinh Viên Thực Tập : Phạm Trung Hiếu

HÀ NỘI, NĂM 2023

HỌC VIỆN NGÂN HÀNG KHOA HỆ THỐNG THÔNG TIN QUẢN LÝ

BÁO CÁO CHUYÊN ĐỀ TỐT NGHIỆP

ĐỀ TÀI THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG APP MOBILE CHO HỌC SINH CHO TRƯỜNG MẦM NON HOA BAN

Giảng viên hướng dẫn : ThS Giang Thị Thu

Huyền Sinh viên thực hiện : Phạm Trung Hiếu

HÀ NỘI, 2023

LỜI CAM ĐOAN

Em xin cam đoan các thông tin, kết quả thu được trong bài báo cáo trên là kết quả củaquá trình nghiên cứu và tìm hiểu của em Trong toàn bộ nội dung bài báo cáo được emphỏng vấn và tổng hợp từ nhiều nguồn tài liệu, tất cả các tài liệu đều có nguồn gốc rõ ràng

và được cho phép sử dụng hợp pháp

Em xin hoàn toàn chịu trách nhiệm với lời cam đoan của mình và xin chịu mọi hìnhthức kỷ luật theo quy định nếu có vấn đề gian lận

LỜI CẢM ƠN

Lời đầu tiên em xin gửi lời cảm ơn sâu sắc nhất tới cô Giang Thị Thu Huyền em cảm

ơn cô vì trong suốt quá trình chúng em thực hiện đề tài, cô đã luôn tận tình, định hướng vàhướng dẫn cho em để em có thể thực hiện đề tài này em cũng xin được gửi lời cảm ơn đếncác thầy cô khoa Hệ thống thông tin quản lý đã tạo điều kiện thuận lợi cho nhóm chúng emđược học hỏi thêm nhiều kinh nghiệm, kiến thức áp dụng vào bài báo cáo

Cảm ơn phòng điện toán Ngân hàng Agribank chi nhánh Hà Nội nói riêng và các côcác chú cán bộ trong ngân hàng nói chung đã giúp em hoàn thiện bài chuyên đề một cáchhoàn hảo nhất

Bên cạnh đó, em cũng xin được cảm ơn cô Dương Thị Hương – Hiệu trưởng trườngmầm non hoa ban cùng các cán bộ, giáo viên trong trường đã hỗ trợ tạo điều kiện cho chúng

em hoàn thành quá trình thực tập thuận lợi

Trong quá trình thực hiện đề tài em khó tránh khỏi những sai sót, cũng như còn nhiềuthiết sót em rất mong nhận được ý kiến đóng góp của cô để bài báo cáo của em có thể hoànthiện hơn

em xin trân thành cảm ơn!

NHẬN XÉT (Của cơ quan thực tập)

Về các mặt: Ý thức chấp hành nội quy, thái độ làm việc của sinh viên tại nơi thực tập; Tiến

độ, kết quả thực hiện công việc được giao; Tính thực tiễn và ứng dụng của đề tài…

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

Hà Nội, ngày tháng năm 2023 Người nhận xét

(Ký tên, đóng dấu)

NHẬN XÉT (Của giáo viên hướng dẫn)

Về các mặt: Mục đích của đề tài; Tính thời sự và ứng dụng của đề tài; Bố cục và hình thức trình bầy đề tài; Kết quả thực hiện đề tài; Ý thức, thái độ của sinh viên trong quá trình thực hiện đề tài

………

………

………

………

………

………

………

………

………

………

………

………

………

………

………

Kết luận : ………… ………

Hà Nội, ngày tháng năm 2023 Giáo viên hướng dẫn

(Ký tên)

MỤC LỤC

DANH MỤC CÁC CHỮ VIẾT TẮT 11

CHƯƠNG I: TỔNG QUAN CHUNG VỀ BÀI TOÁN 12

1 Giới thiệu chung về bài toán 12

1.1 Lý do chọn đề tài 12

1.2 Mục tiêu của đề tài 12

1.3 Phạm vi nghiên cứu đề tài 13

2 Giới thiệu chung về nhà trường 13

2.1 Sơ lược về trường mầm non Hoa Ban 13

2.2 Cơ cấu tổ chức 14

3 Giới thiệu dự án 15

3.1 Mục đích thiết kế 15

3.2 Tính năng nổi bật 16

3.3 Các phần mềm sử dụng 17

4 Tổng quan về giao diện người dùng (UI) 18

4.1 Khái niệm 18

4.2 Quy trình thiết kế 18

4.3 Các quy tắc quan trọng trong thiết kế (UI) 19

5 Tổng quan về úng dụng 21

5.1 Sitemap 21

5.2 Userflow 22

5.3 Biểu đồ hoạt động các quy trình nghiệp vụ 26

5.3.1 Biểu đồ hoạt động “Đăng nhập” 26

5.3.2 Biểu đồ hoạt động “Thanh toán học phí” 26

5.3.3 Biểu đồ hoạt động “Đặt câu hỏi và Đơn xin nghỉ học” 27

5.3.4 Biểu đồ hoạt động “Đổi mật khẩu” 27

5.4 Wireframes 28

CHƯƠNG 2: XÂY DỰNG GIAO DIỆN NGƯỜI ĐÙNG (UI) 32

1 Design 32

2 Protopyte 37

CHƯƠNG 3: KẾT LUẬN 44

DANH MỤC BẢNG BIỂU

Bảng 1: Cơ cấu tổ chức trường mầm non Hoa Ban 15Bảng 2: Tính năng nổi bật 17Bảng 3: Mô tả chi tiết 25

DANH MỤC HÌNH ẢNH

Hình 1: Sitemap 21

Hình 2: UserFlow 22

Hình 3: Biểu đồ hoạt động “Đăng Nhập” 26

Hình 4: Biểu đồ hoạt động “thanh toán học phí” 27

Hình 5: Biểu đồ hoạt động “Đặt câu hỏi và đơn xin nghỉ học” 27

Hình 6: Biểu đồ hoạt động “Đổi mật khẩu” 28

Hình 7: WireFrame 28

Hình 8: WireFrames LogIn & LogUp 29

Hình 9: WireFrames Giao diện trang home 30

Hình 10: WireFrames Profile và Lịch thời gian biểu 31

Hình 11: WireFrames Giao thanh toán 31

Hình 12: WireFrames Giao diện câu hỏi, thời gian biểu và Kết quả học tập 32

Hình 13: WireFrames Giao diện chức năng 32

Hình 14: Giao diện đăng nhập 33

Hình 15: Giao diện trang HOME 33

Hình 16: Giao diện thông tin cá nhân 34

Hình 17: Giao diện Attendance & holiday 34

Hình 18: Giao diện học phí và thanh toán online 35

Hình 19: Giao diện câu hỏi, thời gian biểu, kết quả 35

Hình 20: Giao diện bảng biểu và ảnh trên lớp 36

Hình 21: Giao diện Đặt câu hỏi và đơn xin nghỉ học 36

Hình 22: Giao diện Sự kiện và chi tiết sự kiện 37

Hình 23: Giao diện hỗ trợ 37

Hình 24: Mối liên kết các protopyte trên figma 38

Hình 25: Protopye Login 38

Hình 26: Protopyte Profile 39

Hình 27: Protopye Thời gian biểu 39

Hình 28: Protopyte Học Phí 40

Hình 29: Protopyte Lịch Nghỉ Lễ 40

Hình 30: Protopyte Kết Quả Học Tập 41

Hình 31: Protopyte Bảng Biểu 41

Hình 32: Protopye Đặt Câu Hỏi 42

Hình 33: Protopye Đơn Xin Nghỉ 42

Hình 34: Protopye Ảnh Trên Lớp 43

Hình 35:Protopye Câu Hỏi Vui Nhộn 43

Hình 36:Protopyte Sự Kiện 44

Hình 37:Protopyte Đổi Mật Khẩu 44

DANH MỤC CÁC CHỮ VIẾT TẮT

CHƯƠNG I: TỔNG QUAN CHUNG VỀ BÀI TOÁN Tên đề tài: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG APP MOBILE

CHO HỌC SINH CHO TRƯỜNG MẦM NON HOA BAN

1 Giới thiệu chung về bài toán

1.1 Lý do chọn đề tài

Công cuộc đổi mới căn bản và toàn diện nền giáo dục Việt Nam hiện nay chỉ có thểthành công nếu huy động được sự tham gia của mọi cấp học, mọi đơn vị, cơ sở giáo dục vàtoàn xã hội Cấp học mầm non là cấp học đầu tiên và có vai trò đặc biệt trong quá trình hìnhthành nhân cách cho thế hệ tương lai Nếu ngay từ nơi đây, chất lượng chăm sóc nuôi dưỡng

và giáo dục trẻ mầm non được đảm bảo thì sẽ tạo nền tảng cho các quá quá trình phát triểntiếp theo của mỗi đứa trẻ cũng như của cả một thế hệ Đảng và nhà nước đã xác định lấy đổimới quản lý là khâu then chốt để đổi mới sự nghiệp giáo dục Bởi lẽ hệ thống quản lý ở tầm

vĩ mô hay vi mô đều tác động trực tiếp đến chất lượng giáo dục, chất lượng nhà trường, chấtlượng sản phẩm giáo dục Muốn đảm bảo chất lượng giáo dục, phải đảm bảo rằng hệ thốngquản lý thực sự có hiệu quả, có tầm nhìn, có chiến lược đúng đắn Cùng với sự phát triển của

kỹ thuật số, sự ra đời của máy tính cá nhân, các website ứng dụng cũng được ra đời để giúpcho hệ thống quản lý làm việc tốt hơn, cuộc sống của con người cũng dễ dàng và thú vị hơn

Vì vậy, em quyết định chọn đề tài “THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG APP MOBILECHO HỌC SINH CHO TRƯỜNG MẦM NON HOA BAN”, một phần em hy vọng sảnphẩm của em hoàn thành sẽ giúp ích cho việc thiết kế ra một APP(ứng dụng) quản lý họcsinh với giao diện dễ sử dụng thích hợp với người dùng, thuận tiện trong việc quản lý thôngtin của học sinh và theo dõi được quá trình của học sinh

1.2 Mục tiêu của đề tài

Để một app mobile để thuận tiện trong việc lưu trữ thông tin và theo dõi giám sát rõràng lịch trình của học sinh, cũng như theo dõi được học phí, lưu trữ được những kỉ niệmthời học sinh Em đã thiết kế một giao diện người dùng cho đội ngũ phát triển, lập trìnhthuận tiện trong việc xây dựng hoàn thiện ra một app mobile

1.3 Phạm vi nghiên cứu đề tài

Giao diện được xây dựng nhằm hỗ trợ phụ huynh có con em học ở trường mần non cónhu cầu quản lý thông tin, theo dõi được quá trình học tập, lịch trình, thông báo từ nhàtrường cũng như tài chính của học sinh

Đối tượng phục vụ:

- Phụ huynh có con học tại trường mầm non

- sinh viên nghiên cứu và thiết kế giao diện dựa trên figma và photoshop

2 Giới thiệu chung về nhà trường

2.1 Sơ lược về trường mầm non Hoa Ban

Tên trường: Trường Mầm non Hoa Ban

Tên trước đây: Trường Mầm non Mường Báng; Trường Mầm non Mường Báng

số 1

Cơ quan chủ quản: Phòng Giáo dục và Đào tạo huyện Tủa Chùa

khó khăn

X

nước ngoài

Nhà trường có 1 điểm trường chính đóng trên địa bàn Bản Ten Thị trấn Tủa Chùa,huyện Tủa Chùa, tỉnh Điện Biên và 6 điểm trường lẻ: Háng Tơ Mang, Đông Phi, Đông Phi1; Huổi Lếch; Tân Phong, Tiên Phong.

2.2 Cơ cấu tổ chức

STT Họ và tên Chức danh, chức vụ Nhiệm vụ

2 Phan Thị Hiền Phó hiệu trưởng Phó chủ tịch HĐ

3 Nguyễn Thị Thu Hà Phó hiệu trưởng Phó chủ tịch HĐ

4 Nguyễn Thị Thu Hằng Phó hiệu trưởng Phó chủ tịch HĐ

5 Lê Thị Lệ Hương GV – TP tổ mẫu giáo Thư ký hội đồng

6 Lương T.Phương Hằng GV – TP tổ mẫu giáo Ủy viên hội đồng

7 Vũ Thị Huyền GV – TP tổ nhà trẻ Ủy viên hội đồng

8 Lò Thị Mai GV – Bí thư ĐTN Ủy viên hội đồng

9 Nguyễn Văn Cường NV – TT tổ văn phòng Ủy viên hội đồng

10 Mai Thị Là GV – Trưởng ban TTND Ủy viên hội đồng

11 Nguyễn Hồng Hưởng Kế toán Ủy viên hội đồng

13 Nguyễn Thị Dung Giáo viên Ủy viên hội đồng

Bảng 1: Cơ cấu tổ chức trường mầm non Hoa Ban

Hiện nay trường có 20 nhóm lớp với tổng số 527 học sinh Gồm 05 lớp nhà trẻ có 104học sinh và 15 lớp mẫu giáo có 423 học sinh Tổng số cán bộ quản lý, giáo viên, nhân viêncủa trường là 45 đồng chí Trong đó có 01 hiệu trưởng, 03 đồng chí phó hiệu trưởng, 36 giáoviên, 05 nhân viên Nhà trường có 03 tổ chuyên môn và 01 tổ văn phòng

Điểm trường trung tâm có đầy đủ các phòng ban như: Phòng hiệu trưởng, phòng cácphó hiệu trưởng, văn phòng, phòng hành chính quản trị, phòng bảo vệ, phòng y tế, các công

trình vệ sinh cho cán bộ nhân viên, khu để xe cho cán bộ giáo viên, nhân viên, phụ huynhhọc sinh Có các phòng chức năng cho trẻ hoạt động: Phòng âm nhạc, phòng kidsmart, cókhu vực giáo dục thể chất Các điểm trường có đủ phòng học đảm bảo diện tích cho trẻhoạt động, các điểm trường đều có sân chơi lát bê tông, có đồ chơi ngoài trời, có tường baohàng rào, có cổng và biển trường đầy đủ theo quy định

3 Giới thiệu dự án.

3.1 Mục đích thiết kế

Dự án thiết kế giao diện người dùng (UI) và trải nghiệm người dùng (UX) cho ứngdụng quản lý học sinh mầm non là một dự án mang tính đột phá và đầy tiềm năng Với sựphát triển của công nghệ, việc quản lý học sinh mầm non trở nên dễ dàng hơn và ứng dụngquản lý học sinh mầm non được thiết kế với mục đích giúp cho các bậc phụ huynh, giáo viên

và nhà trường có thể quản lý thông tin học sinh một cách nhanh chóng, tiện lợi và đơn giản

Dự án sẽ tập trung vào việc thiết kế một giao diện đẹp mắt và thân thiện với ngườidùng, giúp cho người dùng dễ dàng tương tác với ứng dụng và thực hiện các chức năng quản

lý học sinh như thêm mới học sinh, cập nhật thông tin, tạo danh sách lớp học, tạo báo cáotiến trình học tập và gửi thông báo cho phụ huynh Hơn nữa, dự án cũng sẽ tập trung vào trảinghiệm người dùng để đảm bảo rằng việc sử dụng ứng dụng là một trải nghiệm đơn giản, dễdàng và thuận tiện cho người dùng

Với sự phát triển không ngừng của công nghệ và sự cần thiết của việc quản lý họcsinh mầm non, dự án này đang trở thành một trong những dự án tiên tiến và đầy triển vọngtrong lĩnh vực UI/UX và quản lý học sinh

3.2 Tính năng nổi bật

Ứng dụng quản lý học sinh dành cho phụ huynh là một công cụ hữu ích để giúp phụhuynh quản lý thông tin học tập của con em mình một cách dễ dàng và tiện lợi Các chứcnăng chính của ứng dụng quản lý học sinh dành cho phụ huynh bao gồm:

Xem thông tin học sinh cho phép phụ huynh xem thông tin cá

nhân của con em mình, bao gồm họ tên,

ngày tháng năm sinh, địa chỉ, số điệnthoại và thông tin liên hệ khác.

Theo dõi tiến trình học tập cho phép phụ huynh xem báo cáo tiến

trình học tập của con em mình, bao gồmđiểm số, thành tích và phản hồi từ giáoviên

Xem lịch học cho phép phụ huynh xem lịch học của

con em mình, bao gồm các môn học,giáo viên phụ trách, thời gian và địađiểm học

Nhận thông báo từ giáo viên cho phép giáo viên và nhà trường gửi

thông báo đến phụ huynh về các hoạtđộng học tập, sự kiện và thông tin khác.Đăng ký hoạt động ngoại khóa cho phép phụ huynh đăng ký và theo dõi

các hoạt động ngoại khóa cho con emmình, bao gồm các buổi học, chươngtrình và sự kiện khác

Xem ảnh hoạt động trên trường Phụ huynh có thể xem được những

khoảng khắc của con mình tại trườngđược thầy cô ghi lại

Các câu hỏi vui nhộn Giúp phụ huynh cho con em mình tham

gia các câu đố vui, để nâng cao khả năng

tư duy cho béĐóng học phí, quỹ online Phụ huynh có thể đóng các quỹ, học phí,

phụ phí online mà không cần phải đếntrường nộp học phí

Bảng 2: Tính năng nổi bật

Những chức năng này giúp phụ huynh có thể theo dõi tiến trình học tập của con emmình một cách dễ dàng và nhanh chóng, cập nhật thông tin liên quan đến lịch học và cáchoạt động ngoại khóa, đồng thời giúp tạo ra một môi trường học tập chuyên nghiệp và hiệuquả cho học sinh, giáo viên và phụ huynh

3.3 Các phần mềm sử dụng

Figma là một công cụ thiết kế giao diện người dùng (UI) và trải nghiệm người dùngUX) dựa trên web, được phát triển và cung cấp bởi Figma, Inc Figma cho phép người

dùng tạo, thiết kế và chia sẻ các thiết kế giao diện người dùng cho các ứng dụng web và

di động

Figma có nhiều tính năng hữu ích cho việc thiết kế giao diện, bao gồm khả năng tạo

ra các bản phác thảo (sketches), mô hình hóa (wireframes), bố cục (layouts) và các thiết

kế tùy chỉnh khác Các tính năng này được tích hợp trực tiếp vào trình duyệt web, giúpngười dùng tiết kiệm thời gian và tiện lợi hơn khi làm việc

Figma cũng cho phép người dùng làm việc cùng nhau trên cùng một thiết kế, chophép các nhà thiết kế và nhà phát triển cùng tương tác, thảo luận và đưa ra ý kiến Cácthiết kế được lưu trữ trên đám mây, cho phép người dùng truy cập từ bất cứ đâu và bất cứthiết bị nào

Figma còn tích hợp nhiều công cụ khác như các plugin và thư viện để giúp ngườidùng làm việc hiệu quả hơn Với những tính năng ưu việt như vậy, Figma trở thành mộtcông cụ thiết kế giao diện rất được ưa chuộng trong cộng đồng thiết kế và phát triển ứngdụng

4 Tổng quan về giao diện người dùng (UI)

4.1 Khái niệm

Thiết kế giao diện người dung (UI) là việc thiết kế những trải nghiệm về mặt thẩm mỹ của

những giao diện kỹ thuật số, cụ thể là những chi tiết hình ảnh trực quan như nút bấm, menuđiều hướng và kiểu chữ Điểm mấu chốt là ở vẻ ngoài và cảm giác mà giao diện mang lại vàliệu người dùng có một trải nghiệm mượt mà và dễ chịu cả về vẻ đẹp cũng như sử dụng củawebsite, app Nói ngắn gọn, thiết kế UI là quá trình trong đó các nhà thiết kế và nhà pháttriển tạo ra những giao diện thân thiện với người dùng liên kết khách hàng với sản phẩmhoặc dịch vụ của bạn

4.2 Quy trình thiết kế

Tìm hiểu nhu cầu khách hàng

Với việc thiết kế lấy người dùng làm trung tâm (UX) UI chính là công cụ truyền tảithông tin hiệu quả đến khách hàng Do vậy, trước khi bắt tay thiết kế, hãy xem xét nhu cầu

về khách hàng Từ yêu cầu, mục đích, ngân sách thực hiện và loại app phù hợp Đảm bảokhách hàng thực sự hài lòng với ý tưởng thiết kế của bạn.

Phác họa chi tiết hướng thiết kế app mobile

Khi đã thiết lập ý tưởng, bước tiếp theo là phác họa Bạn cần lập một mô tả thật cụthể các chi tiết Bao gồm màu sắc sử dụng, sắp xếp thông tin như thế nào, giao diện ra sao,font chữ… Bạn có thể tham khảo các ý tưởng thiết kế app và giao diện app đang thịnh hànhnhất hiện nay và được nhiều người yêu thích

Tiến hành thiết kế app mobile

Khi đã chuẩn bị xong Giờ đây bạn chỉ việc bắt tay vào thiết kế ứng dụng Quá trìnhthiết kế mobile app trên iOS và Android cũng không khác nhau là mấy Quan trọng là việcbạn nắm được quy tắc thiết kế ra sao Định hướng ứng dụng như thế nào để việc lập trình dễdàng hơn là được

Hoàn thiện sản phẩm thiết kế app mobile

Bước cuối cùng trong quy trình thiết kế app mobile là hoàn thiện sản phẩm Trước khiđưa sản phẩm ra mắt người dùng Bạn cần phải kiểm tra, test lại một cách kỹ lưỡng Nếuphát hiện lỗi phải xử lý kịp thời Người sở hữu cũng cần có chiến lược phát triển cụ thể sảnphẩm Biết khai thác và phát huy tối đa những ưu điểm của ứng dụng

4.3 Các quy tắc quan trọng trong thiết kế (UI)

Có rất nhiều quy tắc và nguyên tắc quan trọng trong thiết kế giao diện người dùng (UI),tuy nhiên dưới đây là một số quy tắc được coi là rất quan trọng để tạo ra giao diện dễ sửdụng và hiệu quả:

- Sự đơn giản: Thiết kế giao diện phải đơn giản, trực quan và dễ hiểu Người dùng

nên có thể sử dụng ứng dụng một cách tự nhiên và không gặp khó khăn trong việctìm kiếm chức năng cần sử dụng

- Tập trung vào người dùng: Thiết kế giao diện phải được tập trung vào người dùng

và nhu cầu của họ Người dùng nên được đặt vào trung tâm của quá trình thiết kế vàphát triển để đảm bảo rằng sản phẩm cuối cùng đáp ứng được nhu cầu của họ

- Các đường viền: Thiết kế giao diện cần phải sử dụng đường viền, các phần tử và

màu sắc sao cho đẹp mắt, dễ nhìn và thu hút Sự đồng nhất trong phong cách thiết

kế và sử dụng các phần tử đồ họa cũng là rất quan trọng

- Sự tương phản: Thiết kế giao diện cần sử dụng sự tương phản giữa các phần tử để

đảm bảo tính trực quan và dễ hiểu Sự tương phản có thể được tạo ra bằng cách sửdụng màu sắc, kích thước hoặc các phần tử đồ họa khác

- Khả năng phản hồi: Thiết kế giao diện cần phải cho phép người dùng biết được họ

đang làm gì và điều gì đang xảy ra trong quá trình sử dụng ứng dụng Sự phản hồi

có thể được hiển thị bằng các thông báo, hiệu ứng hoặc các tiêu đề tương ứng

- Dễ tiếp cận: Thiết kế giao diện cần phải được thiết kế sao cho dễ tiếp cận và sử

dụng Người dùng cần có thể tìm thấy và truy cập các chức năng một cách dễ dàng,

và không cần phải đầu tư nhiều thời gian hoặc công sức trong việc tìm kiếm

5 Tổng quan về úng dụng

5.1 Sitemap

Sitemap trong UI/UX là một phần mềm hoặc công cụ được sử dụng để thiết kế và quản lý các trang web hoặc ứng dụng Nó giúp cho người thiết kế định hình được cấu trúc và lưu đồ của trang web hoặc ứng dụng, từ đó giúp cho người dùng dễ dàng tìm thấy các nội dung hoặc chức năng mà họ cần

Sitemap có thể được sử dụng để thiết kế và quản lý các trang web hoặc ứng dụngbằng cách tạo ra một bản đồ trang web, cho phép người dùng xem các liên kết giữacác trang và thứ tự của chúng Nó giúp cho người thiết kế hoặc quản lý hiểu được cấutrúc của trang web hoặc ứng dụng và xác định được trang chủ, các trang con và liênkết giữa các trang

Hình 1: Sitemap

5.2 Userflow

UserFlow trong thiết kế website là quá trình mô tả cách mà người dùng tương tác với trang web, từ lúc họ truy cập trang web cho đến khi hoàn tất mục đích của mình trên trang đó UserFlow là một phần quan trọng của thiết kế trải nghiệm người dùng (User Experience Design - UX Design) và được sử dụng để hiểu rõ hơn về hành vi của người dùng trên trang web

Quá trình tạo UserFlow thường bắt đầu bằng việc định nghĩa mục đích của trang web và những nhiệm vụ mà người dùng có thể thực hiện trên trang đó Sau đó, các nhà thiết kế

sẽ tạo ra một loạt các bản vẽ hoặc sơ đồ biểu diễn quá trình tương tác giữa người dùng vàtrang web, từ trang chủ đến các trang con và các tính năng khác trên trang

Hình 2: UserFlow