BỘ GIÁO DỤC VÀ ĐÀO TẠO
TRƯỜNG CAO ĐẲNG KINH TẾ - CƠNG NGHỆ TP. HỒ CHÍ MINH

BÁO CÁO ĐỒ ÁN
THỰC TẬP TỐT NGHIỆP
ĐỀ TÀI:

THIẾT KẾ GIAO DIỆN ỨNG DỤNG
GOGI HOUSE
Giảng viên hướng dẫn:
Sinh viên thực hiện:
Lớp:
Chuyên ngành: Công nghệ phần mềm

TP. Hồ Chí Minh, tháng 6 năm 2019


2

LỜI CẢM ƠN

Trước tiên em xin gửi lời cảm ơn chân thành sâu sắc tới các thầy cô giáo trong
trường Cao Đẳng Kinh Tế Cơng Nghệ Thành Phố Hồ Chí Minh nói chung va các thầy
cơ giáo trong khoa Kỹ Thuật – Cơng Nghệ nói riêng đã tận tình giảng dạy, truyền đạt
cho em những kiến thức, kinh nghiệm quý báu trong suốt thời gian qua.
Đặc biệt em xin gửi lời cảm ơn đến thầy, thầy đã tận tình giúp đỡ, trực tiếp chỉ
bảo, hướng dẫn em trong suốt quá trình học và làm đồ án. Trong thời gian học với
thầy, em không ngừng tiếp thu thêm nhiều kiến thức bổ ích mà cịn học tập được tinh
thần làm việc, thái độ nghiêm túc và tính tỉ mỉ của thầy. Đó lã những điều rất cần thiết
ở một người sinh viên như em cần phải học hỏi và noi theo.
Sau cùng nhóm em xin gửi lời cảm ơn chân thành tới gia đình, bạn bè đã động

viên, đóng góp ý kiến và giúp đỡ trong quá trình học tập, nghiên cứu và hồn thồn
thành đồ án mơn học này.

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


3

Mục Lục

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


4

LỜI MỞ ĐẦU

Lý do chọn đề tài:
Ngày nay việc tạo nên bất cứ sản phẩm ứng dụng số nào phục vụ cho người
dùng đều ko quá khó so với trước kia, vì vậy để cạnh tranh với các dịch vụ/ sản phẩm
khác nhau trên thị trường thì trải nghiệm người dùng là yếu tố quyết định sự thành
công và lôi kéo người dùng sử dụng dịch vụ/ sản phẩm.
Với sự tiến bộ công nghệ trong thế kỷ 21, mọi người đều muốn trải nghiệm
những công nghệ tốt nhất mà không tốn quá nhiều thời gian sức lực, mọi việc đều cần
được làm nhanh hơn, hiệu quả hơn và điều này cũng không phải là ngoại lệ khi sử
dụng một ứng dụng/sản phẩm CNTT. Và khi nói đến sự hài lịng của người dùng về
một ứng dụng, hầu hết các công ty công nghệ đều hướng tới Giao diện người dùng
(UI) của ứng dụng và Thiết kế trải nghiệm người dùng (UX).


GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


5
TRƯỜNG CAO ĐẲNG KT-CN TP.HCM

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

KHOA CÔNG NGHỆ THÔNG TIN
------------------------

ĐỘC LẬP – TỰ DO – HẠNH PHÚC
-----------------------------------------------

NHẬN XÉT ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN
ĐỀ TÀI: THIẾT KẾ GIAO DIỆN ỨNG DỤNG GOGI HOUSE
Sinh viên:

MSSV:

Lớp:

Chuyên ngành: Công Nghệ Phần Mềm
Nhận xét của giáo viên hướng dẫn:
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................

................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
Điểm: (Bằng chữ và bằng số):
TP.HCM, ngày tháng 6 năm 2019
Giáo viên
(Ký và ghi rõ họ tên)

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


6
TRƯỜNG CAO ĐẲNG KT-CN TP.HCM

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

KHOA CÔNG NGHỆ THÔNG TIN
------------------------

ĐỘC LẬP – TỰ DO – HẠNH PHÚC
-----------------------------------------------

NHẬN XÉT ĐÁNH GIÁ CỦA GIẢNG VIÊN HƯỚNG DẪN
ĐỀ TÀI: THIẾT KẾ GIAO DIỆN ỨNG DỤNG GOGI HOUSE
Sinh viên:

MSSV:


Lớp:

Chuyên ngành: Công Nghệ Phần Mềm
Nhận xét của giáo viên hướng dẫn:
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
................................................................................................................................
Điểm: (Bằng chữ và bằng số):
TP.HCM, ngày tháng 6 năm 2019
Giáo viên
(Ký và ghi rõ họ tên)

CHƯƠNG 1: ĐÔI NÉT VỀ THIẾT KẾ UX - UI
1. UX UI là gì?

UI/UX là khái niệm bạn sẽ gặp khá nhiều khi tìm hiểu về lĩnh vực thiết kế
website, viết web chuyên nghiệp. Trong đó, “UI” là cụm từ đại diện cho thiết kế
website “Giao diện người dùng” và “UX” có thể hiểu là “Trải nghiệm người
dùng”.
GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


7


Hai khái niệm này luôn đi đôi và song hành cùng nhau, trở thành tiêu
chuẩn quan trọng để đánh giá các website bất kì.
1.1. Tìm hiểu về UI:

UI Design là viết tắt của User Interface Design – Tức là thiết kế giao
diện người dùng.
Thiết kế giao diện người dùng

Khái niệm Giao diện người dùng liên quan đến tính tương tác nhiều hơn.
Thiết kế UI sẽ tập trung vào cách mà sản phẩm trình diễn cho người dùng như
nút Like, share nên nằm bên trái hay bên phải của bài viết, icon kêu gọi hành
động trên Landing Page nên chọn màu gì, nằm bên trên hay bên dưới, nút
Nagivation nên chọn hai gạch hai ba gạch, gạch ngang hay gạch đứng,… nên

dùng hình đại diện hay hiện đường link. Nhấp vào hình trịn thì đi đâu, nhấp vào
hình vng sẽ về đâu,… Nhưng dù thế nào, thiết kế vẫn phải đảm bảo tính đồng
nhất xuyên suốt ứng dụng hoặc website để người dùng khơng bị lấn cấn khi sử
dụng.
1.1.1. Quy trình thiết kế Giao diện người dùng:

Thiết kế giao diện người dùng là một quy trình lặp lại bao gồm sự cộng
tác giữa người sử dụng và người thiết kế. Trong quy trình này gồm 3 hoạt động
cơ bản:
GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


8
- Phân tích người sử dụng: tìm hiểu những gì người sử dụng sẽ làm với hệ


thống.
- Lập mẫu thử hệ thống: xây dựng một tập các mẫu thử để thử nghiệm
- Đánh giá giao diện: thử nghiệm các mẫu thử cùng với người sử dụng.

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

Mục tiêu:

•
-

Hiểu được quy trình thiết kế giao diện người dùng

-

Nắm được chi tiết từng hoạt động trong quy trình thiết kế giao diện
người dùng.

-

Với mỗi hoạt động, chúng ta có rất nhiều cách để thực hiện. Do đó,
phải có khả năng lựa chọn phương pháp nào là thích hợp nhất cho
từng hồn cảnh cụ thể.

•

Phân tích người sử dụng:
Nếu ta khơng hiểu rõ những gì người sử dụng muốn làm với hệ thống,

thì ta sẽ khơng thể thiết kế được một giao diện hiệu quả.


GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


9

Phân tích người sử dụng phải được mơ tả theo những thuật ngữ để người sử
dụng và những người thiết kế khác có thể hiểu được.
Các ngữ cảnh mà ta mơ tả thao tác ở trong đó là một trong những cách mơ
tả phân tích người dùng. Ta có thể lấy được rất nhiều yêu cầu của người sử dụng
từ đó.
Các kỹ thuật phân tích:
-

Phân tích nhiệm vụ: mơ hình hố các bước cần thực hiện để hồn thành
một nhiệm vụ.

-

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

-

Phỏng vấn và trắc nghiệm: hỏi người sử dụng về những gì mà họ làm.
Khi phỏng vấn, chúng ta nên dựa trên những câu hỏi có kết thúc mở. Sau
đó, người sử dụng cung cấp những thơng tin mà họ nghĩ rằng nó là cần
thiết; nhưng khơng phải tất cả các thơng tin đó là có thể được sử dụng.
Ngồi ra, chúng ta có thể thực hiện phỏng vấn với cả nhóm người sử
dụng, điều đó cho phép người sử dụng thảo luận với nhau về những gì họ

làm.

-

Mơ tả: quan sát người sử dụng làm việc và hỏi họ về những cách mà
không được biết tới. Nên nhớ rằng có nhiều nhiệm vụ của người sử dụng
thuộc về trực giác và rất khó để mơ tả và giải thích chúng. Dựa trên kỹ
thuật này ta có thể hiểu thêm về các ảnh hưởng xã hội và tổ chức tác động
tới cơng việc đó.

•

Lập mẫu thử giao diện người dùng:
- Mẫu thử cho phép người sử dụng có được những kinh nghiệm trực tiếp

với giao diện. Nếu khơng có những kinh nghiệm trực tiếp như vậy thì
khơng thể đánh giá được khả năng có thể sử dụng được của giao diện.

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


10
- Lập mẫu thử là một quy trình gồm 2 trạng thái:
- Lập các mẫu thử trên giấy.
- Tinh chỉnh mẫu thử và xây dựng chúng

Các kỹ thuật lập mẫu thử:
-


Mẫu thử hướng nguyên mẫu: sử dụng công cụ như Macromedia
Director để xây dựng một tập hợp các nguyên mẫu và màn hình. Khi
người sử dụng tương tác với chúng thì màn hình sẽ thay đổi để hiển thị
trạng thái kế tiếp.

-

Lập trình trực quan: sử dụng các ngơn ngữ được thiết kế cho việc phát
triển nhanh như Visual Basic.

-

Mẫu thử dựa Internet: sử dụng web browser và script.
Đánh giá giao diện người dùng:

•

Ta nên đánh giá bản thiết kế giao diện người dùng để xác định khả năng
phù hợp của nó. Tuy nhiên, việc đánh giá trên phạm vi rộng tốn nhiều chi
phí và khơng thể thực hiện được đối với hầu hết các hệ thống.
Các kỹ thuật đánh giá đơn giản:
-

Trắc nghiệm lại các phản hồi của người sử dụng

-

Ghi lại quá trình sử dụng mẫu thử của hệ thống và đánh giá nó.

-


Lựa chọn những thơng tin về việc sử dụng dễ dàng và các lỗi của người
sử dụng.

-

Cung cấp mã lệnh trong phần mềm để thu thập những phản hồi của
người sử dụng một cách trực tuyến.

1.2. Tìm hiểu về UX:

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


11

UX Design là viết tắt của User Experience Design – Là thiết kế tối ưu
trải nghiệm người dùng hay ( tối ưu user experience )
Thiết kế trải nghiệm người dùng

Thiết kế UX gắn liền với cảm nhận người dùng đối với một sản phẩm nào
đó khơng nhất thiết là cơng nghệ. Thiết kế UX trong thiết kế website là sự tiếp
nối của thuật ngữ này vì sự xuất hiện lần đầu tiên của UX để phục vụ cuộc sống
của con người, làm thế nào để người dùng thao tác đơn giản nhất, trên
Smartphone thì phải lướt “sướng” nhất, làm thế nào để nhu cầu tra cứu, liên lạc,
chia sẻ thuận tiện nhất.
Các chuyên gia UX không phải là một chuyên gia đồ họa. Họ không làm
việc với các công cụ thiết kế mà làm việc nhiều hơn với con người, những
người dùng cuối sẽ thao tác trên website. Phải xem đối tượng như người yêu,

phải biết họ muốn gì, hành vi của họ như thế nào, thói quen ra sao,… tất tần tật
mới có thể phân tích, tìm ra vấn đề và đưa ra giải pháp tối ưu. Phỏng vấn, khảo
sát, theo dõi, đuổi theo, quan sát,… sẽ là “nghề tay trái” của một người làm UX
chuyên nghiệp.
1.2.1. Quy trình thiết kế UX:

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


12

Thơng thường, để có một bản thiết kế UX, một chuyên gia phải
tiến hành các bước sau:
•

Bước 1: Nhận dự án và tìm hiểu sơ bộ

•

Bước 2: Tiếp cận, tìm hiểu và phân tích đối tượng (đây là một bước dài
hơi, đòi hỏi người thực hiện phải tinh tế, linh hoạt)

•

Bước 3: Sau khi có kết quả sẽ tiến hành phân tích u cầu người dùng,
mơ phỏng thao tác bằng các sơ đồ, đưa ra giải pháp

•


Bước 4: Nhận định các Persona, các tình huống có thể xảy ra, rủi ro có
thể gặp phải

•

Bước 5: Xây dựng các bản mockup – bản vẽ sơ khai và kiểm chứng

•

Bước 6: Nếu kiểm chứng cho kết quả tốt, UX Designer sẽ tiếp tục hồn
thiện và cho ra đời bản Prototype

•

Bước 7: Tiếp tục kiểm tra và cho ra sản phẩm cuối cùng

•

Bước 8: Hoàn thiện sản phẩm và kiểm tra với người dùng

•

Bước 9: Đưa qua cho bộ phận lập trình và tạo ra thành phẩm

2.

Cơng nghệ UI/UX có gì khác nhau?

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học



13

Tuy thường hay được đề cập song song nhau, nhưng trên thực tế công
nghệ thiết kế UI và công nghệ thiết kế UX lại có sự khác biệt. Khi tìm hiểu về
hai khái niệm này, bạn cần tránh nhầm lẫn hai công nghệ thiết kế UI, UX là một
và hiểu rõ từng chức năng cũng như công dụng của mỗi cơng nghệ này.
•

Cơng nghệ thiết kế UI (Giao diện người dùng): UI trong lĩnh vực thiết kế được
gọi là sự truyền tải thông điệp từ nhà thiết kế – nhà cung cấp dịch vụ (sản phẩm)
tới người sử dụng. Trong thiết kế web, thiết kế UI là quá trình các nhà thiết kế
tạo ra các giao diện web, các thành tố trên trang web dựa trên các thói quen,
hành vi lướt web của đại đa số người dùng. Để cho ra đời bản thiết kế này, các
nhà thiết kế cần trải qua quá trình nghiên cứu, tổng hợp và thống kê các thông
tin, số liệu sao cho sản phẩm cuối cùng chính xác và có thể làm đúng nhiệm vụ
của nó – thu hút người dùng và mang lại cảm tình với họ.

•

Cơng nghệ thiết kế UX (Trải nghiệm người dùng): UX là cách mà người dùng
cảm nhận về một sản phẩm cụ thể, người làm về UX goi là UX Designer. Nếu
công nghệ thiết kế UI tập trung chú trọng vào phần nhìn, phần hiển thị bên
ngồi thì với UX, các lập trình viên sẽ tiến hành cấu hình các yếu tố về kĩ thuật
bên trong website sao cho khi vận hành, khởi chạy website chính thức, người

dùng có thể truy cập và sử dụng các chức năng (như thanh trượt, các nút button,
lướt trang…) một cách “mượt” và tiện lợi nhất.
GVHD: ThS. Nguyễn Anh Vũ

Báo cáo môn học


14

Công nghệ thiết kế UI, UX mặc dù khác biệt nhưng lại có mối liên quan chặt
chẽ với nhau. Dù bạn có thể tạo một giao diện chuẩn UI, đẹp mắt nhưng nếu
làm phần UX cũng như tính năng kỹ thuật bên trong khơng tốt, gây khó khăn
cho người dùng trong quá trình sử dụng thì sản phẩm của bạn cũng khơng được
đánh giá cao.
3. Quy trình thiết kế UI/UX cơ bản:
•

Lên ý tưởng: Giai đoạn này là giai đoạn cần thiết mà chúng ta phát thảo một dự
án. Những thách thức chính là xác định các vấn đề mà ứng dụng của mình cần
giải quyết và cách mà chúng ta giải quyết các vấn đề để đã đặt ra. Nhiệm vụ của
chúng ta là phát triển và phân tích ý tưởng và thu thập thông tin từ khách hàng
về tầm nhìn của dự án. Chúng ta cần phải động não liên tục luôn giao tiếp với
khách hàng và tim hiểu mơ hình kinh doanh của khách hàng

•

Vấn đề: Là xác định vấn đề sản phẩm của bạn cần được giải quyết. Chọn một
vấn đề lớn cùng nhóm hoặc có thể cùng team để giải quyết vấn đề đó với sản

phẩm
• Nghiên cứu nhu cầu sử dụng của khách hàng: Cần phải nghiên cứu và tiềm
hiểu ai là người sủ dụng và sử dụng ứng dụng với mục đích kinh doanh như thế
nào
GVHD: ThS. Nguyễn Anh Vũ

Báo cáo môn học


15
•

Đề xuất giá trị duy nhất: Nghiên cứu tìm ra tính năng độc đáo nhất sẽ cho

phép ứng dụng nỗi bật nhất giữa thị trường hiện tại
• Cơ cấu chi phí: Cho phép chúng ta có thể ước tính được các tài nguyên cần
thiết dựa trên quy mô của dự án. Điều này cần thiết để đánh giá phát triển và chi
phí hợp lý
• Số liệu Chính: Đây là thướt đo thành công của sản phẩm, về thông tin số liệu
chi tiết sản phẩm cần.

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


16
•

Lập sơ đồ tư duy: Khi chúng ta đa hồn thành các bước cơ bản phía trên về
nghiên cứu và cập nhật thông tin nhu cầu thiết yếu của khách hàng tiếp theo
chúng ta cần lên kế hoạch cho dự án tạo sơ đồ tư duy bằng cách phân tích mơ
hình của bạn tính đến u cầu của dự án

•

Thiết kế giao diện người dùng:


GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


17

Giai đoạn cần thiết để làm cho sản phẩm của bạn có được ưa chuộng bát
mắt và thân thiện với người dung hay không với các chức năng và các yếu tố
thiết thực để hoàn thành một dự án. Phần quan trọng của giai đoạn này là tạo
logo cho sản phẩm. Thiết kế là kết hợp với các giải pháp UX/UI và xây dựng
giao diện cuối cùng của sản phẩm.

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


18

CHƯƠNG 2: CÀI ĐẶT ADOBE XD & ỨNG DỤNG GOGI
HOUSE
2.1

Hướng dẫn cài đặt phần mềm Adobe XD:

Đầu tiên truy cập trang website: />Tiếp theo chọn vào ứng dụng Adobe XD và dowload

Sau khi dowload thành công, mờ file cài đặt và nhấp vào autoplay.exe

3


GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


19

Bước tiếp theo sau khi bạn nhấp vào autoplay.exe hiện lên giao diện cài đặt bạn
nhấp vào Install Adobe XD CC

4

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


20

Giao diện cài đặt xuất hiện

Sau khi ứng dụng chạy tới 100%, để thuận tiện trong quá trình sử dụng bạn hãy
kéo icon phần mềm ở thanh Start ra màn hình chính.

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo mơn học


21

5


GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


22
2.2 Giới thiệu ứng dụng GoGi House (ứng dụng dùng trong chuỗi nhà

hàng) và hướng dẫn sử dụng:
2.2.1
Đăng nhập: Người dùng nhập tên và mật khẩu được cấp sẵn vào
hệ thống đăng nhập.

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


23
2.2.2

Sơ đồ bàn và cách thức mở bàn order:

Sau khi đăng nhập sẽ hiển thị giao diện sơ đồ các bàn có trong nhà hàng.

Tiếp theo là cách thức mở bàn order:

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học



24

Đầu tiên sẽ nhập số lượng khách vào “Số khách”.
“Thông tin nhân viên” sẽ tự hiển thị thông qua phương thức đăng nhập ban đầu
cùng với giờ và ngày làm việc cũng sẽ được cập nhật tự động.
Kiểm tra lại thông tin khách và nhấn check.

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học


25

Tiếp theo, giao diện order sẽ được hiển thị:

GVHD: ThS. Nguyễn Anh Vũ
Báo cáo môn học