TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG

KHOA CÔNG NGHỆ THÔNG TIN

THIẾT KẾ GIAO DIỆN PHẦN MỀM

Đề tài: XÂY DỰNG GIAO DIỆN WEBSITE BÁN GIÀY ADIDAS

Giảng viên hướng dẫn : Nguyễn Thu Phương

Sinh viên thực hiện : Đặng Huy Bách

Nguyễn Thành Đạt

Trương Duy An

Ngô Nhật Trường

Lê Anh Quang

Lớp: KTPM - K18B

 MỤC LỤC
BẢNG PHÂN CÔNG CÔNG VIỆC...................................................................................................1
LỜI MỞ ĐẦU......................................................................................................................................2
CHƯƠNG 1: ĐỀ XUẤT ĐỀ TÀI...................................................................................................3
1.1 Giới thiệu vấn đề........................................................................................................................3
1.2 Giải pháp....................................................................................................................................3
CHƯƠNG 2: PHÂN TÍCH NGƯỜI DÙNG VÀ NHIỆM VỤ..........................................................4
2.1 Phân tích người sử dụng............................................................................................................4
2.2 Phân tích nhiệm vụ....................................................................................................................5
2.2.1 Giới thiệu.............................................................................................................................5
2.2.2 Users....................................................................................................................................5
2.2.3 Tasks....................................................................................................................................5
CHƯƠNG 3: PHÁC HỌA THIẾT KẾ..............................................................................................7
3.1 Overall design................................................................................................................................7
3.2 Scenarios storyboards...................................................................................................................7
CHƯƠNG 4: XÂY DỰNG PROTOTYPE GIẤY.............................................................................8
CHƯƠNG 5: XÂY DỰNG PROTOTYPE MÁY............................................................................13
5.1 Đăng nhập................................................................................................................................13
5.2 Đăng ký.....................................................................................................................................13
5.3 Trang chủ.................................................................................................................................13
5.4 Giỏ hàng...................................................................................................................................14
5.5 Mục giày dành cho nam/ nữ/ trẻ em/ thể thao.......................................................................14
CHƯƠNG 6: XÂY DỰNG VÀ CÀI ĐẶT........................................................................................15
6.1 Xây dựng..................................................................................................................................15
6.2 Trình bày demo........................................................................................................................17
6.2.1 Demo giao diện Đăng nhập..............................................................................................17
6.2.2 Demo giao diện Đăng ký...................................................................................................18
6.2.3 Demo giao diện thanh Menu............................................................................................19
6.2.4 Demo giao diện Trang chủ..............................................................................................19
6.2.5 Demo giao diện Chi tiết sản phẩm...................................................................................20
6.2.6 Demo giao diện Giỏ hàng.................................................................................................21
TỔNG KẾT........................................................................................................................................22
 BẢNG PHÂN CÔNG CÔNG VIỆC

STT Họ tên Công việc Mức độ hoàn thành

1 Trương Duy An Cài đặt, xây dựng Đạt

2 Lê Anh Quang Xây dựng protype giấy Đạt
Nguyễn Thành
3 Phân tích nhiệm vụ Đạt
Đạt
Ngô Nhật
4 Phân tích người dùng Đạt
Trường
5 Đặng Huy Bách Đánh giá giao diện Đạt

1
 LỜI MỞ ĐẦU
Với sự phát triển của công nghệ thông tin hiện nay, các cửa hàng giày thời
trang đang bắt đầu tiếp cận với xu hướng trao đổi hàng hóa cũng như kinh doanh 4.0
nhiều hơn. Nhu cầu mỗi cửa hàng sở hữu 1 website bán mặt hàng của mình cũng từ đó
tăng dần.

Tuy nhiên, việc xây dựng một website bán giày không đơn giản, nó đòi
hỏi kiến thức chuyên môn về lập trình, thiết kế giao diện, an ninh thông tin và
truyền thông. Bên cạnh đó, cần có khả năng phân tích thị trường, tìm kiếm các
đối tác và nguồn vốn để đưa sản phẩm của mình đến với người dùng. Nhưng
nếu thành công thì từ đó có thể mang lại thêm doanh thu cho các cửa hàng đó

Và với sự giúp đỡ của các công nghệ tiên tiến và kiến thức chuyên môn,
việc xây dựng một website bán giày thời trang đã trở nên dễ dàng hơn. Tuy
nhiên, điều quan trọng là phải có một ý tưởng độc đáo và hấp dẫn để thu hút
người dùng và tạo ra giá trị cho cộng đồng.

2
 CHƯƠNG 1: ĐỀ XUẤT ĐỀ TÀI
1.1 Giới thiệu vấn đề
Trong vòng đời phát triển phần mềm, giai đoạn thiết kế giao diện vô cùng quan
trọng. Giao diện phần mềm không chỉ để làm hệ thống đẹp mắt hơn, mà còn giúp cho
người dùng dễ dàng sử dụng hệ thống, làm cho hệ thống phù hợp với nhiều nhóm
người, độ tuổi khác nhau.

Người tiêu dùng hiện nay cũng có xu hướng không còn mua hàng trực tiếp tại
các cửa hàng nữa, thay vào đó họ thường sử dụng các website của cửa hàng đó để xem
thông tin về mặt hàng đó. Do đó thiết kế giao diện sao cho người dùng cảm thấy thích
thú, dễ sử dụng là rất quan trọng.

Việc xây dựng 1 website bán giày gồm các tiêu chí thẩm mỹ, giao diện thân
thiện với mọi người dùng, dễ tương tác và đơn giản là cần thiết.

1.2 Giải pháp

Dựa theo khảo sát người dùng, phân tích các mong muốn yêu cầu của người
dùng đối với phần mềm. Việc tối ưu giao diện, chức năng đủ, không thừa thãi là rất
quan trọng.

3
 CHƯƠNG 2: PHÂN TÍCH NGƯỜI DÙNG VÀ NHIỆM VỤ
2.1 Phân tích người sử dụng
 Nhóm người dùng: người có nhu cầu tìm kiếm, mua giày thời trang, giày
thể thao của Adidas.
 Sử dụng phương pháp: khảo sát, đánh giá từ người sử dụng.
 Các đặc điểm người sử dụng:
o Tuổi tác:
 16 - 30: 42%
 31 - 45: 38%
 46 – 60: 17%
 > 60: 3%
o Nhóm độ tuổi từ 16 - 30 :
 Khả năng sử dụng điện thoại thông minh tốt.
 Tốc độ nắm bắt và xử lý thông tin nhanh.
 Dễ dàng làm quen và tiếp xúc cách thức tra cứu thông tin và
mua hàng trực tuyến.
o Nhóm độ tuổi từ 31 - 45 :
 Khả năng sử dụng điện thoại thông minh
 Tốc độ nắm bắt và xử lý thông tin ở mức trung bình
 Chưa quen với hình thức mua hàng trực tuyến
o Nhóm độ tuổi từ >45 :
 Khả năng tiếp thu thông tin chậm
 Khả năng sử dụng điện thoại thông minh khá hạn chế
 Thường không có nhu cầu với hình thức mua hàng trực tuyến
o Giới tính:
 Nam: 56%
 Nữ: 44%
o Kích cỡ chân:
 Size 35 – 39: 39%
 Size 40 – 44: 43%

4
  Size >44: 18%

2.2 Phân tích nhiệm vụ

2.2.1 Giới thiệu

Thiết kế giao diện người dùng là quy trình lặp đi lặp lại – chúng ta không thể
chỉ thiết kế một lần là đạt được tính sử dụng hay được giao điện tốt được.

Bước đầu tiên trong quy trình thiết kết hướng người dùng chính là quy trình thu
thập thông tin về người dùng và nhiệm vụ của họ. Ở đây có 4 bước chính:

 Phân tích người dùng: những người có nhu cầu tìm hiểu thông tin về giày,
thông tin về sự kiện cũng như có nhu cầu đặt hàng trực tuyến
 Phân tích miền nhiệm vụ: thông tin giày đang được bày bán, thông tin về các
sự kiện giảm giá, tin tức về các mẫu giày mới, tìm kiếm các mẫu giày theo ý
người dùng, thanh toán, đặt hàng,…
 Phân tích miền người sử sử dụng: smart phone, PC, Laptop có kết nối internet.
 Phân tích yêu cầu: giao diện phù hợp, dễ sử dụng, có khả năng tương tác tốt, tối
ưu hóa các bước chức năng.

2.2.2 Users
Nhóm người sử dụng: người có nhu cầu mua giày thời trang, giày thể thao của
Adidas, có thể sử dụng smart phone, máy tính có kết nối internet.

2.2.3 Tasks
 Đăng nhập: Đăng nhập cho người dùng đã sở hữu tài khoản vào website.
 Đăng ký: Cho phép người dùng chưa sở hữu tài khoản đăng ký thành viên.
 Trang chủ: Hiển thị thông tin về mục lục, mẫu giày, giá tiền ở mức cơ bản
và các mẫu giày đang bán chạy.
 Chi tiết: Cho phép hiển thị hình ảnh minh họa về mẫu giày, giá thành, mô tả
mẫu giày.
 Mục giày cho nam: Hiển thị các hình ảnh minh họa các mẫu giày của nam
kèm theo giá thành.
 Mục giày cho nữ: Hiển thị các hình ảnh minh họa các mẫu giày của nữ kèm
theo giá thành.

5
 Mục giày cho trẻ em: Hiển thị các hình ảnh minh họa các mẫu giày của trẻ
em kèm theo giá thành.
 Mục giày thể thao: Hiển thị các hình ảnh minh họa các mẫu giày thể
thaokèm theo giá thành.
 Giỏ hảng: Hiển thị tổng các sản phẩm, giá thành, hình minh họa của các sản
phẩm mà người dùng muốn thanh toán.

6
 CHƯƠNG 3: PHÁC HỌA THIẾT KẾ

3.1 Overall design

3.2 Scenarios storyboards

7
CHƯƠNG 4: XÂY DỰNG PROTOTYPE GIẤY

8
9
10
11
12
 CHƯƠNG 5: XÂY DỰNG PROTOTYPE MÁY
5.1 Đăng nhập

5.2 Đăng ký

5.3 Trang chủ

13
5.4 Giỏ hàng

5.5 Mục giày dành cho nam/ nữ/ trẻ em/ thể thao

14
 CHƯƠNG 6: XÂY DỰNG VÀ CÀI ĐẶT
6.1 Xây dựng
Chưa các thư mục con bên dưới và các file:

 chi_tiet.html: Chi tiết của sản phẩm

 index.html: Trang chủ của shop
 login.html: Đăng nhập
 nam.html: Sản phẩm dành cho nam
 nu.html: Sản phẩm dành cho nữ
 sign_up.html: Đăng ký
 the_thao.html: Sản phẩm giày thể thao
 tre_em.html: Sản phẩm dành cho trẻ em

15
16
6.2 Trình bày demo
6.2.1 Demo giao diện Đăng nhập
Giao diện bao gồm:

 Phần nhập địa chỉ email

 Phần nhập mật khẩu
 Nút “Đăng nhập”
 Gợi ý đăng ký tài khoản

17
6.2.2 Demo giao diện Đăng ký
Giao diện bao gồm:

 Phần nhập địa chỉ email

 Phần nhập mật khẩu
 Phần nhập lại mật khẩu
 Nút “Đăng ký”

18
6.2.3 Demo giao diện thanh Menu
Phần giao diện bao gồm:

 Lời chào đến shop của Adidas

 Logo của shop
 Nút “Đăng nhập” và “Đăng ký”
 Thanh menu bao gồm các mục:
o Trang chủ
o Nam
o Nữ
o Trẻ em
o Thể thao
o Thanh tìm kiếm
o Mục ưa thích (Icon trái tim)
o Giỏi hàng (Icon giỏ hàng)

6.2.4 Demo giao diện Trang chủ

Giao diện bao gồm:

 Lời chào của shop

 Logo của shop
 Nút “Đăng nhập” và “Đăng ký”
 Thanh menu
 Hình ảnh tiêu biểu của shop
 Mục mặt hàng bán chạy
 Hình ảnh sản phẩm và giá thành

19
6.2.5 Demo giao diện Chi tiết sản phẩm
Giao diện bao gồm:

 Tên sản phẩm

 Giá tiền
 Mô tả sản phẩm
 Hình ảnh minh họa
 Nút “Thêm vào giỏ hàng”

20
6.2.6 Demo giao diện Giỏ hàng
Giao diện diện bao gồm

 Hình ảnh sản phẩm

 Giá tiền
 Số lượng
 Tổng thanh toán
 Nút “Thanh toán”

6.3 : Đánh Giá Giao diện

-Mục Tiêu đánh giá giao diện : Website bán giày

-Các tiêu chí để đánh giá giao diện:

1.Độ dễ sử dụng (9/10) :Vì là website nên rất dễ để tương tác trực tiếp với người dùng thông qua việc
sử dụng các trình duyệt có sẵn mà không yêu cầu về kĩ thuật cũng như kinh nghiệm

2.Tính tiện ích (7/10) : Gàn như đầy đủ các chức năng cơ bản như đăng nhập và tra kiếm thông tin
đồng thời có các chức năng phụ như các hạng mục bán hàng

3.Tính tương tác (5/10) : Chỉ có ảnh mẫu các sản phẩm mà không có các thông tin trực quan hơn về
sản phẩm

4.Tính linh hoạt (4/10) : Không có các mục đa dạng hơn để khách hàng lựa chọn những yêu cầu riêng

21
5.Tính tương thích (10/10) : Tương thích được với hầu hết với các phầm mềm và sản phẩm công nghệ
khác

6.Tính thẩm mỹ (6/10) : Giao diện thân thiện dễ nhìn nhưng đồng thời cũng hơi bị sơ sài

7.Tính bảo mật (5/10): Vì là website đề làm theo mẫu cá nhân nên tính bảo mật chưa được cao

-Kết Luận và những đề xuẩt để cải tiến giao diện:

+Dựa trên kết quả đánh giá như trên ta có thể đưa ra kết luận rằng website này đáp ứng đầy đủ những
điều kiện cần thiết để làm nên một website bán giày cơ bản và thân thiện với người sử dụng mà không
yêu cầu kỹ năng cũng như kinh nghiệm

+Tuy nhiên nếu có thể đề xuất thêm vào những chức năng như chọn cỡ giày và chọn màu cho các
giày đồng thời chỉnh phông chữ và cỡ chữ đẹp hơn để dễ nhìn hơn

22
 TỔNG KẾT
Sau đề tài lần này, nhóm đã đạt được các mục tiêu sau:

 Học được cách thiết kế giao diện của website/ứng dụng theo các quy tắc thiết kế
 Có kỹ năng cơ bản trong việc thiết kế giao diện
 Trau dồi thêm kỹ năng mềm

Song tuy đó nhóm còn 1 số hạn chế nhất định, mong thầy cô và các bạn bỏ qua.

23