HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG
KHOA ĐA PHƯƠNG TIỆN

BÁO CÁO THỰC TẬP
TỐT NGHIỆP

TÊN ĐỀ TÀI:

XÂY DỰNG WEBSITE GIỚI THIỆU CHƯƠNG
TRÌNH PTIT-SAKURA
Đơn vị thực tập
Giáo viên hướng dẫn
Người hướng dẫn
Sinh viên thực hiện
Mã sinh viên

:
:
:
:
:

Trung tâm Đào tạo Quốc tế
ThS. Nguyễn Thị Thanh Tâm
ThS. Phạm Vũ Minh Tu
Lưu Tiến Dũng
B17DCPT050

Hà Nội, 2021

TRUNG TÂM ĐÀO TẠO

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

QUỐC TẾ - CIE

Độc lập - Tự do - Hạnh phuc

PHIẾU NHẬN XÉT ĐÁNH GIÁ THỰC TẬP TỐT NGHIỆP
Họ và tên sinh viên thực tâp: Lưu Tiến Dũng
Đơn vị thực tập

: Trung tâm Đào tạo Quốc tế

Thời gian thực tập

: Từ ngày 19/07/2021 đến ngày 31/08/2021

NHẬN XÉT CỦA CƠ SỞ THỰC TẬP
1.

Chấp hành nội quy và quy định của cơ quan:
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………

2. Ý thức học tập:
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………


3. Quan hệ, giao tiếp tại đơn vị:
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
Xác nhận của cơ quan thực tập

Hà Nội, ngày 20 tháng 08 năm 2021

(Ký, ghi rõ họ tên và đóng dấu)

Người đánh giá
(Ký và ghi rõ họ tên)

1


HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH

CỘNG HOÀ XÃ HỘI CHỦ NGHĨA VIỆT NAM

VIỄN THÔNG

Độc lập - Tự do - Hanh phuc

KHOA ĐA PHƯƠNG TIỆN

ĐÁNH GIÁ KẾT QUẢ THỰC TẬP TỐT NGHIỆP
(Thời gian thực tập: Từ ngày 19/07/2021 đến ngày 31/08/2021)


Họ và tên sinh viên: Lưu Tiến Dũng
Lớp: D17PTDPT1
Nội dung đánh giá
1. Chấp hành kỷ luật: (Tốt, Trung bình, hoặc Yếu)

2. Ý thức học tập: (Tốt, Trung bình, hoặc Yếu)

3. Quan hệ, giao tiếp: (Tốt, Trung bình, hoặc Yếu)

4. Điểm: (Thang điểm 10)

Các ý kiến khác (nếu có):
Ngày

tháng

năm 20….

Giáo viên hướng dẫn thực tập
(Ký và ghi rõ họ tên)

2


LỜI CẢM ƠN
Để hoàn thành kỳ báo cáo thực tập này trước hết em xin gửi đến quý thầy
cô giáo trong Bộ môn Công nghệ Đa phương tiện, Khoa Đa phương tiện - Học
viện Công nghệ Bưu chính Viễn thông lời cảm ơn chân thành.
Đặc biệt, em xin gửi đến cơ Nguyễn Thị Thanh Tâm, người đã tận tình
hướng dẫn, giup đỡ em hoàn thành kỳ báo cáo thực tập này lời cảm ơn sâu sắc.

Em xin chân thành cảm ơn nhà trường đã tạo điều kiện cho chung em
được làm việc tại Trung tâm Đào tạo Quốc tế – một nơi lý tưởng để phát triển và
trau dồi bản thân.
Cuối cùng em xin cảm ơn anh Linh, anh Toàn, thầy Phạm Vũ Minh Tu và
các bạn đã giup đỡ, hỗ trợ em trong thời gian thực tập tại Trung tâm. Qua đợt
thực tập này em nhận ra nhiều điều mới mẻ để giup ích cho công việc sau này
của bản thân. Đây chắc chắn sẽ là khoảng thời gian khơng thể qn với em.
Vì kiến thức bản thân cịn hạn chế, trong q trình thực tập, em khơng
tránh khỏi những sai sót, kính mong nhận được những ý kiến đóng góp từ q
thầy cơ giáo cũng như Trung tâm.

3


MỤC LỤC
CHƯƠNG 1: GIỚI THIỆU ĐƠN VỊ THỰC TẬP............................................4
I.

Giới thiệu chung........................................................................................5

II. Cấu truc tổ chức.....................................................................................5
III.

Tầm nhìn và sứ mệnh của CIE..............................................................5

1. Tầm nhìn...................................................................................................5
2. Sứ mệnh....................................................................................................6
3. Những giá trị cốt lõi..................................................................................6
IV.


Các chương trình đào tạo, dự án và đối tác của CIE..............................6

1.

Đào tạo..................................................................................................6

2.

Dự án.....................................................................................................6

3.

Các đối tác của CIE...............................................................................7

CHƯƠNG 2: NỘI DUNG THỰC TẬP..............................................................7
I.

Giới thiệu chung........................................................................................8
1.

Nội dung công việc:..............................................................................8

2.

Kết quả cần đạt:.....................................................................................8

II.

Quá trình làm việc.....................................................................................9
1.


Tiếp nhận cơng việc và nghiên cứu về chủ đề chính của website..........9

2.

Tìm hiểu về website Landing Page......................................................10

2.1. Landing page là gì?..............................................................................10
2.2. Phân loại Landing page........................................................................10
2.3. Quy trình phát triển landing page:........................................................11
3.

Quy trình thiết kế giao diện người dùng..............................................11

4.

Công cụ được sử dụng trong công việc...............................................21

5.

Một số kết quả.....................................................................................22

CHƯƠNG 3: KẾT LUẬN.................................................................................27
1.

Những kết quả đạt được..........................................................................27

4



2.

Bài học kinh nghiệm...............................................................................27

3.

Hướng phát triển tiếp theo của đề tài.......................................................27

4.

Kết luận...................................................................................................28

CHƯƠNG 1: GIỚI THIỆU ĐƠN VỊ THỰC TẬP
I. Giới thiệu chung

Trung tâm Đào tạo Quốc tế (viết tắt là CIE) là đơn vị trực thuộc Học viện
Công nghệ Bưu chính Viễn thông (PTIT), trường đại học công lập hàng đầu
trong lĩnh vực CNTT&TT tại Việt Nam. Trung tâm mang đến những cơ hội tuyệt
vời cho tất cả sinh viên của trung tâm để học tập các chương trình đào tạo quốc tế
và gia tăng cơ hội làm việc tại nước ngồi, đờng thời mang đến cho bạn sinh viên
trong nước và quốc tế các chương trình trao đổi và dịch chuyển sinh viên. Như
một phần trong cam kết của trung tâm về việc mang lại sự tiếp cận tốt nhất tới
các chương trình đào tạo quốc tế cho sinh viên trong nước và sinh viên nước
ngoài tại PTIT, CIE cung cấp các chương trình ưu việt với sự kết nối chặt chẽ với
các đối tác quốc tế với phương pháp tiếp lấy người học làm trung tâm. Đồng thời
áp dụng các các chương trình tư vấn linh hoạt được thiết kế để gắn kết sinh viên
trong suốt quá trình nhằm đảm bảo sự thành công của các em trước, trong và sau
khi học tập tại CIE.
II. Cấu trúc tổ chức
Ban giám đốc trung tâm:


 Giám đốc: PGS.TS. Hoàng Hữu Hạnh
5


 Phó giám đốc: ThS. Nguyễn Minh Phượng
Các phịng ban:
 Tổ Quản lý Đào tạo: ThS. Phạm Trần Cẩm Vân, Quản lý Chương trình
 Tổ Phát triển Dự án: ThS. Phạm Vũ Minh Tu, Quản lý Dự án
III. Tầm nhìn và sứ mệnh của CIE
1. Tầm nhìn
Phát triển Trung tâm Đào tạo Quốc tế của PTIT trở thành một trung tâm về
quốc tế hoá trong giáo dục đại học, giáo dục định hướng nghề nghiệp và dịch vụ
đào tạo quốc tế cho xã hội.
2. Sứ mệnh
 Cung cấp các dịch vụ về quốc tế hóa giáo dục và đào tạo có chất lượng cho
sinh viên, đáp ứng yêu cầu phát triển nhanh của thế giới hiện đại ngày nay.
 Cung cấp các chương trình đào tạo định hướng nghề nghiệp tiêu chuẩn quốc
tế, nâng cao kỹ năng cho việc phát triển nguồn nhân lực cho các thị trường
nội địa và quốc tế.
 Cung cấp các chương trình đào tạo quốc tế chất lượng để đáp ứng xu hướng
phát triển và yêu cầu thực tiễn của các tổ chức, doanh nghiệp và xã hội.
3. Những giá trị cốt lõi
 Đề cao sự cởi mở để đón nhận tri thức bên ngồi.
 Tích cực chuyển đổi để làm chủ những giá trị mới.
 Kiến thiết sự đổi mới sáng tạo vì một thế giới tốt đẹp hơn.
IV. Các chương trình đào tạo, dự án và đối tác của CIE
1. Đào tạo

 Chương trình đại học chất lượng cao

 Chương trình Kỹ sư CNTT bằng Tiếng Anh
 Chương trình du học chuyển tiếp dánh cho sinh viên PTIT sang học tập và
nhận bằng tại đại học AIZU, Nhật Bản

 Chương trình liên kết đào tạo cử nhân quốc tế với đại học La Trobe, Australia
 Chương trình liên kết đào tạo thạc sĩ quốc tế với đại học AIZU, Nhât Bản
6


 Chương trình liên kết đào tạo cử nhân quốc tế với đại học Middlesex, Vương
Quốc Anh

 Chương trình liên kết đào tạo thạc sĩ quốc tế với đại học cơng nghệ (UTS)
 Các khóa học ngắn hạn
2. Dự án
 Dự án ProEUHE – ERAMUS + JEAN MONNET
 Dự án AVIS PLUS
 Dự án quảng bá về châu Âu qua công nghệ truyền thông đa phương tiện
3. Các đối tác của CIE
 Samsung
 Microsoft
 Vietlot
 Đại học La Trobe
 Tập đồn Bưu chính Viễn thơng Việt Nam VNPT

7


CHƯƠNG 2: NỘI DUNG THỰC TẬP
I. Giới thiệu chung

Đề tài: Phát triển website giới thiệu dự án PTIT-SAKURA
1. Nội dung công việc:
Công việc 1: Khảo sát sơ bộ về môi trường và cách làm việc nơi thực tập.
Công việc 2: Nhận công việc được giao và trao đổi yêu cầu với người hướng dẫn.
Cơng việc 3: Tìm hiểu về quy trình thiết kế và phát triển một website Landing
Page chuẩn.
Cơng việc 4: Tìm hiểu về quy trình thiết kế giao diện người dùng.
Công việc 5: Nguyên tắc thiết kế giao diện người dùng.
Cơng việc 6: Hồn thiện báo cáo thực tập.
STT Nội dung thực tập
Thời gian
Mục tiêu
1
Khảo sát sơ bộ về mơi Từ ngày 19/7 đến Tìm hiểu về quy trình làm
trường và cách làm việc ngày 21/7
2

việc, cách giao tiếp và văn

nơi thực tập
hóa làm việc của Trung tâm.
Nhận công việc được Từ ngày 22/7 đến Nhận đề tài được giao, làm
giao và trao đổi yêu cầu ngày 25/7

rõ các yêu cầu cũng như

với người hướng dẫn

được hướng dẫn sơ bộ tìm
hiểu


3

về

quy

trình

làm

website
Tìm hiểu về quy trình Từ ngày 26/7 đến Tìm hiểu về phong cách
thiết kế và phát triển một ngày 3/8

thiết kế giao diện, công cụ

website Landing Page

thiết kế

chuẩn
8


4

Tìm hiểu về quy trình Từ ngày 4/8 đến Phân tích người sử dụng, lập
thiết kế giao diện người ngày 10/8


mẫu thử hệ thống, đánh giá

5

dùng
giao diện người dùng
Nguyên tắc thiết kế giao Từ ngày 11/8 đến Bắt tay vào thực hiện thiết

6

diện người dùng
31/8
kế và phát triển website
Hoàn thiện báo cáo thực Từ ngày 3/9 đến

tập
2. Kết quả cần đạt:

9/9

 Được làm việc trong môi trường thực tế, chuyên nghiệp.
 Hoàn thành tốt các việc được giao.
 Tích cực trong việc trao đổi với các thành viên trong nhóm cũng như với
người hướng dẫn.
 Rut ra những kinh nghiệm sau thời gian thực tập.
 Thiết kế được một Website hồn chỉnh.
II. Q trình làm việc
1. Tiếp nhận cơng việc và nghiên cứu về chủ đề chính của website
Giới thiệu về chương trình cầu nối Việt Nhật PTIT-SAKURA
Trong bối cảnh quan hệ hợp tác giữa Việt Nam và Nhật Bản ngày càng phát

triển thì nhu cầu về lực lượng chuyên gia kỹ sư Công nghệ Thông tin thành thạo
tiếng Nhật đang trở nên thực sự cần thiết đối với cả thị trường Nhật Bản lẫn thị
trường Việt Nam. Do đó, số lượng người đăng ký học tiếng Nhật tại Việt Nam và
du học sinh Việt tại Nhật Bản cũng ngày càng tăng cao.
Chính vì lẽ đó, chương trình liên kết đào tạo giữa Học viện Công nghệ Bưu
chính Viễn thông PTIT và Học viện ngôn ngữ Meros, Tokyo, Nhật Bản đã được
hình thành, với mong muốn vừa rut ngắn thời gian đào tạo cho sinh viên PTIT để
các bạn sinh viên vừa có thể thành thạo ngoại ngữ này trong thời gian ngắn nhất,
vừa đáp ứng được chuẩn đầu ra cho các doanh nghiệp CNTT tại Nhật Bản cũng
như các doanh nghiệp CNTT có vốn đầu tư Nhật Bản tại Việt Nam yêu cầu.
Giới thiệu về Học viện ngôn ngữ Meros, Tokyo Nhật Bản
Tiền thân là trường đào tạo Giáo viên dạy tiếng Nhật cho người nước ngoài,
sau mở rộng thành trường đào tạo trực tiếp cho sinh viên nước ngoài sang Nhật
du học. Trường thành lập từ năm 1984 khi chính phủ Nhật bắt đầu triển khai
9


chính sách mời gọi Du học sinh nước ngoài tới Nhật, với 37 năm kinh nghiệm
đào tạo cho hơn 10,000 sinh viên nước ngoài đến từ 23 quốc gia trên Thế giới,
Meros sẽ là lựa chọn đáng tin cậy nhất cho sinh viên khi học tiếng Nhật.
Chương trình giảng dạy đặc biệt dành riêng cho Du học sinh ngành CNTT
duy nhất tại Nhật Bản với 7 năm kinh nghiệm đào tạo chuyên sâu cho sinh viên
khối CNTT có mong muốn đi làm tại các doanh nghiệp CNTT tại Nhật Bản.
Đảm bảo đầu ra tại các Doanh nghiệp IT tại Nhật Bản, với mức lương cam kết tối
thiểu từ 2200$/tháng đến 3500$/tháng.
2. Tìm hiểu về website Landing Page
2.1. Landing page là gì?
Landing Page là một trang web đơn mà cá nhân hoặc doanh nghiệp tạo ra
nhằm mục đích tối ưu hóa tỉ lệ chuyển đổi.
Chuyển đổi ở đây có thể là: Mua hàng, lấy thông tin khách hàng, tải tài liệu,

cài ứng dụng, tham gia sự kiện, đăng ký đặt trước, … Hoặc bất cứ mục tiêu tiếp
thị nào khác.
2.2. Phân loại Landing page
Có 3 loại landing page chính yếu: Landing page thu thập khách hàng tiềm
năng, landing page bán hàng, landing page trung gian chuyển đổi. Mỗi loại
landing page lại phục vụ cho những mục đích khác nhau và chung cũng có những
thành phần giao diện khác nhau:
 Landing page thu thập khách hàng tiềm năng: Có chức năng chính là thu thập
thông tin cơ bản của khách hàng tiềm năng như họ tên, email, số điện thoại để sử
dụng cho các hoạt động marketing sau đó. Chính vì lẽ đó nên loại landing page
này thường có một biểu mẫu đăng ký và luôn đi kèm với một lợi ích trao đổi với
khách hàng để thuyết phục họ điền thông tin vào như ebook, webinar, hội thảo
offline, …
 Landing page bán hàng: Có chức năng chính là thuyết phục khách hàng đưa ra
quyết định mua hàng ngay trên landing page. Đặc điểm của loại landing page này
là bao gồm những chi tiết như lợi ích khách hàng, đặc điểm nổi bật, phản hời
khách hàng, … giup khách hàng có đầy đủ thông tin để đưa ra quyết định mua
hàng.
10


 Landing page chuyển đổi trung gian: Với mục tiêu là dẫn dắt khách hàng
chuyển hướng tới trang chuyển đổi chính. Có đặc điểm là chỉ sử dụng nut kêu gọi
hành động để chuyển hướng tới trang khác, không sử dụng biểu mẫu đăng ký.
Ngoài ra, trong thương mại điện tử, trang Landing Page trung gian sẽ cung cấp
đầy đủ thông tin về sản phẩm và dẫn dắt khách hàng về trang giỏ hàng của
website chính.
Chương trình PTIT-SAKURA có một trang đích là trang web đăng ký dành
cho sinh viên. Kết hợp các đặc điểm đã phân tích bên trên, ta có thể nhận thấy
“Landing page chuyển đổi trung gian” là loại website phù hợp nhất với chương

trình vì tính đơn giản, dễ tiếp cận và tương đối thuận lợi để triển khai.
2.3. Quy trình phát triển landing page:
 Bước 1: Xác định mục tiêu chuyển đổi.
 Bước 2: Xây dựng nội dung trang web để thuyết phục khách hàng thực hiện
hành động.
 Bước 3: Thiết kế giao diện Landing page với nội dung đã thiết lập ở bước 2.
 Bước 4: Phát triển website với HTML& CSS.
3. Quy trình thiết kế giao diện người dùng
Quy trình thiết kế web bao gờm 3 hoạt động như sau:
Thứ nhất, phân tích người sử dụng:
Đây là một khâu rất quan trọng, giup người thiết kế hiểu rõ những gì người
sử dụng mong muốn để thiết kế một giao diện hiệu quả. Khi phân tích người
dùng, cần phải sử dụng những thuật ngữ để người sử dụng và những người làm
thiết kế khác đều có thể hiểu được.
Trong kỹ thuật phân tích, có 4 phương pháp chính, bao gồm:


Phân tích nhiệm vụ



Phỏng vấn và trắc nghiệm



Phân tích nhiệm vụ phân cấp



Mô tả

Thứ hai, lập mẫu thử hệ thống:

11


Những mẫu thử này sẽ cho phép người sử dụng có những kinh nghiệm trực
tiếp với giao diện, nhờ đó, có thể đánh giá được khả năng sử dụng của giao diện.
Khi lập mẫu thử, có thể lập mẫu thử trên giấy, sau đó tùy chỉnh và xây dựng mẫu
thử này. các kỹ thuật lập mẫu thử bao gồm:


Mẫu thử hướng nguyên mẫu



Lập trình trực quan



Mẫu thử dựa Internet
Thứ ba, đánh giá giao diện người dùng
Việc đánh giá bản thiết kế giao diện người dùng sẽ giup ta xác định khả

năng phù hợp của bản thiết. Tuy nhiên, khó có thể đánh giá trên phạm vi rộng và
rất tốn chi phí cho hoạt động này.
Để đánh giá giao diện một cách đơn giản, người ta có thể tiến hành trắc
nghiệm các phản hồi của người sử dụng, đánh giá chi tiết q trình sử dụng mẫu
của hệ thống, những thơng tin về việc sử dụng dễ dàng hay các lỗi của người sử
dụng hay cũng cấp các mã lệnh trong phần mềm để thu thập phản hồi người dùng
một cách hệ thống.

Với một trang web, giao diện người dùng được hiểu là tất cả những cửa sổ,
văn bản, hình ảnh, nut bấm,… hiển thị trên trang web. Để tạo ra một giao diện
chất lượng và nâng cao tính khả dụng của hệ thống, ta nên nắm được một số quy
tắc. Sau đây là 14 nguyên tắc thiết kế giao diện người dùng được nhóm tìm kiếm
từ nhiều ng̀n và tổng hợp lại. Tuy gọi là “nguyên tắc” nhưng tính chất của
chung không phải nguyên tắc chỉ dẫn cụ thể mà thay vào đó là những nguyên tắc
có thể áp dụng linh hoạt trong từng trường hợp khác nhau. Cụ thể:
Một là, theo đuổi sự đồng bộ trong thiết kế
Một thiết kế giao diện hiệu quả sẽ không khiến người dùng phải đặt ra các
câu hỏi rằng liệu những từ ngữ, hồn cảnh, hay hành động khác nhau có mang
cùng một ý nghĩa hay không? Do vậy, để tránh gây bối rối cho người dùng, hãy
sử dụng từ ngữ, ký hiệu hành động một cách thống nhất.

12


Nói cách khác, chung ta nên sử dụng đờng bộ tất cả các yếu tố hiển thị. Ví
dụ: - Ký hiệu cụ thể của nut bấm sẽ luôn thực hiện một hành động duy nhất hay
thanh điều hướng cũng nên hiển thị có logic, hệ thốn g.
- Thuật ngữ được sử dụng trong nhắc nhở, thông báo, các menu và các màn
hình trợ giup phải thống nhất trong tất cả các trang.
- Màu đỏ dùng để cảnh báo nguy hiểm và màu xanh để thông báo trạng thái
đang hoạt động tốt.
Khi áp dụng quy tắc này bạn nên cân nhắc đến những yếu tố sau:


Workflow/Quá trình




Chức năng



Hình dạng



Thuật ngữ
Hai là, thiết kế tối giản
Tối giản hóa khơng có nghĩa là hạn chế. Tất cả thông tin đều phải mang

những ý nghĩa nhất định.

13


Tối giản hóa giao diện bằng cách loại bỏ những yếu tố/nội dung khơng cần
thiết hoặc khơng có vai trị giup đỡ người dùng.
Ba là, ý nghĩa của thiết kế phải rõ ràng
Như đã nói, người dùng càng ít phải phán đốn càng tốt. Hệ thống nên hiển
thị ngơn ngữ của người dùng (cụm từ, concept quen thuộc với người dùng) để
giao tiếp với họ hơn là sử dụng những thuật ngữ đặc biệt của hệ thống. Người
dùng sẽ tránh các yếu tố giao diện khơng có ý nghĩa rõ ràng.

14


(Giao diện người dùng mới của Gmail)
Một ví dụ cụ thể: Trước lần cập nhật mới nhất, Gmail đã có điều hướng văn

bản rất rõ ràng trên đầu trang – Lịch, Drive, Bảng tính và các dịch vụ khác của
Google có sẵn khi nhấn vào nut. Sau đó, Google quyết định “đơn giản hóa” và di
chuyển tất cả mọi thứ vào phía sau một biểu tượng trừu tượng. Kết quả là hầu hết
mọi người không bao giờ chu ý đến biểu tượng đó và Gmail bắt đầu nhận được
một loạt các yêu cầu hỗ trợ.
Mọi người thường tránh và bỏ qua những điều họ khơng thể hiểu được – đó
là bản chất tự nhiên của con người. Tránh thiết kế các yếu tố giao diện khiến cho
mọi người thắc mắc khơng biết để làm gì, bởi vì sẽ chẳng ai bận tâm tìm hiểu.
Bốn là, làm rõ hành động được ưu tiên
Người dùng sẽ cảm thấy thoải mái hơn khi họ hiểu những hành động ưu
tiên là gì.

15


(Giao diện người dùng của Twitter)
Nhìn vào màn hình Twitter ở trên. Bạn có nghĩ rằng người dùng mới sẽ hiểu
những gì họ phải làm? Rõ ràng là họ nên bắt đầu đăng tweet. Tuy nhiên, nut
“Compose new tweet” (soạn tweet mới) ở góc trên bên phải lại khơng mấy rõ
ràng (nguyên tắc rõ ràng) và khung nhập nội dung ở thanh bên trái bị pha trộn
khá nhiều với môi trường. Từ quan điểm thiết kế, có vẻ như Twitter muốn người
dùng tìm kiếm cái gì đó hoặc sử dụng một trong các tùy chọn ở menu điều hướng
bên tay trái, vì đó là những yếu tố giao diện nổi bật nhất. Không nên để người
dùng thắc mắc phải làm gì tiếp theo – những hành động ưu tiên cần phải rõ ràng.
Năm là, chia nhỏ các hành động phức tạp
Người dùng sẽ sẵn sàng để thực hiện một hành động phức tạp hơn nếu nó
được phân chia thành các bước nhỏ hơn.

16



(Giao diện người dùng của biểu mẫu)
Hãy so sánh biểu mẫu ở bên trái với biểu mẫu ở bên phải trong hình trên.
Cả hai đều có số lượng các mục phải điền vào tương tự nhau, nhưng biểu mẫu
bên phải dễ dàng để quản lý hơn nhiều.
Tất cả chung ta đều ghét điền vào các biểu mẫu dài dòng và phức tạp, bởi vì
chung có vẻ nhàm chán, gây bối rối và khó để kiểm tra lại. Nhưng nếu bạn phân
chia biểu mẫu đó thành một số bước và hiển thị thanh tiến trình, mọi thứ sẽ trở
nên dễ dàng quản lý hơn.
Sáu là, hiển thị trạng thái của hệ thống hoặc cung cấp thông tin phản
hồi
Hệ thống cần thông báo cho người dùng biết về những gì đang diễn ra theo
một cách thích hợp và đung thời điểm. Hãy nói cho họ biết chuyện gì đang xảy ra
trước khi họ bắt đầu đưa ra phán đốn của mình.

17


Người dùng ln muốn được kiểm sốt tình hình, họ tin rằng hệ thống sẽ
phản hồi như mong đợi. Điều đó cũng có nghĩa rằng họ khơng thích sự “bất
ngờ”. Đối với những hành động nhỏ và thường xuyên, phản hời của hệ thống có
thể linh hoạt được đơi chut nhưng đối với những hành động chính và quan trọng,
phản hồi nên truyền đạt một cách chính xác và hiệu quả những thông tin đến
người dùng.
Khi thiết kế nội dung phản hồi, bạn nên chú ý đến các vấn đề sau:


Phản hời cần có sự liên quan




Phù hợp với độ quan trọng và cấp bách của nó



Dễ dàng hiểu được và có ý nghĩa với người dùng



Đặt trong bối cảnh thích hợp (Yếu tố thời gian và địa điểm)
Bảy là, cho phép người dùng đảo ngược hành động
Việc trở về hành động trước đó sẽ giup người dùng dễ dàng sửa lỗi sai hay

lấy lại những thông tin cần thiết. Đây là một chức năng rất hữu ích trong việc
thiết kế giao diện của web.
Chức năng này giup người dùng xóa bỏ lo ngại khi họ biết rằng những lỡi
đó có thể ‘ctrl-z’ ngay lập tức, nhờ vậy khuyến khích họ khám phá những tính
năng khác mà họ chưa từng sử dụng.
Trên nền tảng ứng dụng, điều này có thể được hiểu giống như chức năng ‘undo’
và ‘redo’. Việc thêm vào tính năng “emergency exit” cũng có thể giup người

18


dùng thốt ra khỏi tình trạng khơng may mà khơng phải nhận bất kỳ một thông
báo mở rộng nào.
Đảo ngược hành động:


Khơng can thiệp đến q trình làm việc




Nhiều khơng gian trống hơn cho người dùng



Sử dụng duy nhất một thao tác Undo và lịch sử hành động
Tám là, ngăn ngừa những lỗi có thể xảy ra
Trong q trình hoạt động của website, việc phát sinh lỗi là điều không thể

tránh khỏi. Do đó, việc tạo ra cách thức dễ dàng để khắc phục lỗi phát sinh trong
thiết kế luôn là yêu cầu bắt buộc, nhằm hạn chế tối đa thiệt hại về lỡi và khắc
phục hậu quả nhanh chóng.
Khơng một ai thích gặp phải lỡi trong q trình sử dụng, tệ hơn nữa là khi
chung ta có cảm giác rằng mình đã làm sai điều gì đó. Do vậy, hệ thống cần loại
bỏ những lỗi dễ xảy ra cho người dùng, hoặc kiểm tra và thông báo giup họ trước
khi họ xác nhận hành động tiếp theo.

Hãy thiết kế một hệ thống hiệu quả nhất có thể để khơng một người dùng
nào gặp phải những lỗi nghiêm trọng. Nếu một lỡi xuất hiện, hệ thống phải có
19


chức năng phát hiện và đưa ra giải pháp đơn giản, dễ hiểu giup người dùng xử lý
lỡi đó.
Một số điều cần nhớ:


Ngăn ngừa lỗi sẽ hiệu quả hơn việc xử lý lỡi sau khi nó đã xảy ra




Tính năng tự động phát hiện lỗi



Thông báo rõ ràng, chính xác về lỗi gặp phải



Gợi ý về giải pháp cho vấn đề
Chín là, giúp người dùng nhận biết, chẩn đốn và khôi phục các lỗi
Những thông báo lỗi nên được thể hiện bằng ngôn ngữ đơn giản, dễ hiểu

(không nên sử dụng các thuật ngữ của hệ thống để thông báo cho người dùng),
biểu thị chính xác lỗi mà người dùng gặp phải và đưa ra gợi ý từng bước một để
người dùng xử lý vấn đề. Nói cho người dùng biết chính xác điều gì sẽ xảy ra cả
trước và sau khi họ thực hiện một hành động.
Mười là, nguyên tắc bối cảnh
Người dùng mong đợi nhìn thấy các điều khiển giao diện ở gần với đối
tượng mà họ muốn kiểm soát. Giữ mọi thứ thuận tiện cho người sử dụng – nếu
cái gì đó có thể được chỉnh sửa, thay đổi hoặc kiểm soát, hãy đặt các điều khiển
ngay bên cạnh nó.
Mười một, nguyên tắc mặc định
Người dùng sẽ ít khi thay đổi các thiết lập mặc định.
Bạn có quen thuộc với nhạc chuông gốc của Nokia không? Hẳn là có – nó
đã từng là nhạc chng phổ biến nhất trên hành tinh này. Tại sao ư? Vì đó là nhạc
chuông mặc định và hầu hết mọi người không bao giờ thay đổi nó. Những thứ
mặc định rất mạnh mẽ:

- Hầu hết mọi người đều để nền và nhạc chuông mặc định trên điện thoại của họ.
- Hầu hết mọi người (kể cả bạn) không bao giờ thay đổi các thiết lập nhà sản xuất
trên TV của họ.
Chung ta không chu ý đến những thứ mặc định, nhưng chung thống trị thế
giới của chung ta. Vì vậy, hãy đảm bảo rằng tất cả các giá trị mặc định là hữu ích
và thiết thực nhất có thể – sẽ an tồn khi giả định rằng một số người sẽ khơng
bao giờ thay đổi chung.
20


Mười hai, giảm tải bộ nhớ ngắn hạn
Nhận biết một thứ gì đó sẽ dễ dàng hơn việc ghi nhớ nó. Hạn chế việc ghi
nhớ của người dùng bằng cách thiết kế vật thể, hành động, các sự lựa chọn dễ
nhớ/có thể nhớ được. Những chỉ dẫn cũng nên được hiển thị một cách rõ ràng.
Để giảm thiểu việc ghi nhớ cần lưu ý:


Ứng dụng nên có một cấu truc rõ ràng



Nhận biết điều gì đó sẽ dễ dàng hơn việc nhớ ra nó



Sự trợ giup tiềm ẩn



Những hỡ trợ thị giác

Mười ba, cho phép người dùng sử dụng phím tắt để thực hiện các thao

tác thường xuyên
Việc cho phép sử dụng phum tắt sẽ giup người dùng thao tác nhanh hơn,
nâng cao hiệu quả sử dụng của hệ thống. Ta nên cho phép người dùng chi phối và
cá nhân hóa những thao tác thường xuyên trên ứng dụng/sản phẩm. Những từ
viết tắt, phím chức năng, lệnh ẩn hay những tài nguyên mở rộng sẽ đặc biệt hữu
ích cho nhóm người dùng chuyên gia.

Từ khóa liên quan:


Bộ phím tắt



Những tính năng ‘Power User’



Cơ chế tự động thao tác
Mười bốn, tài liệu trợ giúp
Mặc dù sẽ tốt hơn nếu giao diện được người dùng sử dụng một cách dễ

dàng mà không cần đến tài liệu hướng dẫn, đây vẫn là một điều cần thiết để cung
cấp cho người dùng sự giup đỡ bất cứ khi nào họ cảm thấy bối rối. Các tài liệu
21


hướng dẫn nên được thiết kế tối ưu cho việc tiếp cận, tra cứu, tập trung vào

những thao tác của người dùng với danh sách các bước cụ thể và đương nhiên,
chung không nên quá dài.
4. Công cụ được sử dụng trong công việc
Công cụ thiết kế website: Figma

Figma là công cụ được ra mắt vào năm 2016, với giao diện thân thiện và
tính dễ sử dụng, Figma đã nhanh chóng nổi lên và trở thành một cơng cụ thiết kế
giao diện người dùng phổ biến trong cộng đồng công nghệ toàn cầu. Một số
thương hiệu lớn sử dụng Figma cho tới thời điểm hiện tại có thể kể đến như
Microsoft, Twitter, GitHub, Dropbox …
Khác với những công cụ thiết kế trước đây, Figma được thiết kế trên nền
tảng đám mây. Đây là cơng cụ có tính năng tương tự như Sketch, tuy nhiên nó hỡ
trợ làm việc nhóm tốt hơn.
Một số tính năng của nổi bật của Figma:
 Figma có thể hoạt động tương thích trên tất cả các hệ điều hành có trình duyệt
web, từ Windows, Linux, Macs cho đến Chromebooks đều có thể dùng cơng cụ
này. Tính tới thời điểm này, đây là công cụ thiết kế duy nhất có thể làm được
điều này. Tất cả người dùng có thể chia sẻ, mở hay chỉnh sửa một file Figma dễ
dàng dù đang dùng bất kỳ hệ điều hành nào.
 Là một công cụ browser-based, vậy nên mọi người trong team có thể dễ dàng
làm việc với nhau tương tự như làm việc trên Google Docs. Mỗi thành viên trong
nhóm đang xem hoặc chỉnh sửa file, Figma sẽ hiển thị đại diện bằng một avatar
trịn trên thanh cơng cụ với tên riêng. Đây là một chức năng rất tiện khi bạn
muốn biết ai đang làm việc trên file.
22


 Người dùng có thể chia sẻ file Figma bằng việc gửi link, người nhận link sẽ có
khả năng truy cập vào file đó. Nếu bạn lựa chọn Link to selected frame người
nhận sẽ nhìn thấy ngay frame bạn đang chọn luc chia sẻ. Đây là tính năng được

rất nhiều designer sử dụng.
 Tất cả mọi thứ đều được lưu trữ online một cách tự động trong khi người dùng
đang làm việc trên Figma.
 Hiện nay, Figma có một kho plugin có sẵn phong phu và miễn phí.
 Tích hợp sẵn khả năng Prototype nhanh chóng và dễ dàng.
5. Một số kết quả
Thiết kế

(Hình ảnh bên trong file thiết kế)
 Về màu sắc: Em nhận thấy màu xanh và màu vàng của logo rất lý tưởng để
tiếp tục làm màu chủ đạo, đồng thời đảm bảo tính nhất quán cho các hệ thống
website của Trung tâm.

23


 Về giao diện: Em áp dụng phong cách thiết kế tối giản, nhằm đem đến một
trải nghiệm cô đọng và tập trung vào content. Giup người dùng hiểu được
thông điệp của website trong thời gian ngắn nhất và tốn ít cơng sức nhất.

(Section màn hình cơ sở của website giới thiệu chương trình PTIT-SAKURA)

(Section thơng tin đăng ký có nhúng bản đồ từ Google Map)

24