Bài tập lớn môn học tương tác người máy

TRƯỜNG ĐẠI HỌC BÁCH KHOA HÀ NỘI
VIỆN CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG
──────── * ───────

BÀI TẬP LỚN
MÔN HỌC: TƯƠNG TÁC NGƯỜI MÁY

Sinh viên thực hiện :
Hồ Thúc Đồng
Đoàn Văn Đạt
Nguyễn Văn Nam
Nguyễn Thanh Cường
Phạm Anh Tuấn

20112574
20111370
20111892
20112551
20112712

Giáo viên hướng dẫn : TS. Vũ Thị Hương Giang

Hà Nội, tháng 10 năm 2014


Tham khảo trang web miniclip.com và trò chơi Canyon Defense ............................... 3

I.

1. Giao diện của trang web miniclip.com...................................................................... 4
2. Giao diện của trò chơi Canyon Defense .................................................................... 5

II. Đánh giá tính dùng được của trang web theo quan điểm của người dùng. .................. 5
1. Các tiêu chí đo tính dùng được theo quan điểm người dùng đối với một trang web
game online...................................................................................................................... 5
2. Áp dụng các tiêu chí trên đối với website miniclip.com ........................................... 6
III. Tổ chức lại trang giao diện của trang web để hiển thị tốt trên cả máy tính cá nhân
và thiết bị di động. ............................................................................................................... 7
1. Máy tính cá nhân (Kích thước 13 inch) : .................................................................. 7
2. Máy tính bảng ( Kích thước 7 inch): ....................................................................... 10
3. Thiết bị di đông (Smartphone): ............................................................................... 12
IV.

Thiết kế giao diện tĩnh của trò chơi ......................................................................... 15

1. Map .......................................................................................................................... 15
2. Vũ khí ...................................................................................................................... 16
3. Quái ......................................................................................................................... 17


Phân công công việc:
STT

Họ và tên

SHSV

1

Hồ Thúc Đồng

20112574

2

Phạm Anh Tuấn

20112712

3

Nguyễn Văn Nam

20111892

4

Nguyễn Thanh
Cường
Đoàn Văn Đạt

20112551

5

20111370

Nội dung công việc

Đánh giá tính dùng
được của trang web
Tham khảo trang web

và trò chơi
Thiết kế màn hình 13
inch
Thiết kế giao diện
tĩnh
Thiết kế màn hình 3
inch và 7inch

Đóng góp
Mức độ
(%)
hoàn thành
(%)
20

100

20

100

20

100

20

100

20

100


I. Tham khảo trang web miniclip.com và trò chơi Canyon Defense
1. Giao diện của trang web miniclip.com

Hình 1: Giao diện trang web miniclip.com

Trang web được tố chức theo từng nhóm trò chơi (Action, Sports, Mutiplayer,..)
và hiển thị các game đang nhiều người chơi nhất, trang web có thêm các chức
năng tìm kiếm trò chơi, đăng nhập để lưu điểm.


Đánh giá: trang web load chưa được nhanh (có thể do tốc độ mạng đang bị ảnh
hưởng), khi load một game cũng phải đợi khá lâu.
2. Giao diện của trò chơi Canyon Defense

Hình 2: Giao diện game Canyon Defense

Khi mới vào game Canyon Defense người dùng có để đọc hướng dẫn ở phần
Help, xem bảng xếp hạng ở phần Scores, Chơi game ở phần Play. Khi chơi game
người chơi sẽ được chọn bản đồ , sau đó chọn độ khó.
Đánh giá: giao diện chơi đơn giản, dễ chơi, tuy nhiên phần hướng dẫn vẫn chưa
rõ ràng. Game khi chơi đến những màn cuối quái tăng máu liên tục không thể bắn
chết được.
II. Đánh giá tính dùng được của trang web theo quan điểm của người dùng.

1. Các tiêu chí đo tính dùng được theo quan điểm người dùng đối với một trang
web game online.

 Mục tiêu: người dùng chơi được (tìm được) một game yêu thích.
 Effectiveness: bằng các thao tác cơ bản, người dùng có thể thực hiện
được mục tiêu của mình, ở đây là chơi được (tìm được) game mình
yêu thích,


 Efficiency:Nguồn lực sử dụng để người sử dụng đạt được mục tiêu
một cách chính xác và đầy đủ. Là thước đo mức độ cố gắng của người
sử dụng đạt được mục tiêu đề ra.
 Sự thỏa mãn:Không bực dọc, lo lắng và có quan điểm tích cực với
việc sử dụng sản phẩm
 Ngữ cảnh ứng dụng:người sử dụng, nhiệm vụ, thiết bị, môi trường sử
dụng (laptop, tablet, pc, smartphone …)
 Nhiệm vụ: Các thao tác, hoạt động cần thiết để đạt được mục tiêu
chơi game của mình.
2. Áp dụng các tiêu chí trên đối với website miniclip.com
 Mục tiêu: Người dùng sử dụng website để tìm kiếm và chơi game yêu
thích (đối vời người sử dụng website lần đầu tiên).
 Tìm kiếm game: tìm kiếm theo thể loại game (hành động, phiêu
lưu, nhập vai..) theo môi trường (game adroid, ios, window…).
 Chơi game: người dùng có thể download game, hoặc chơi
online.
 Effectiveness:
 Người dùng có thể share các hoạt động của mình lên mạng xã
hội.
 Có thể đăng nhập thông qua tài khoản facebook.
 Lưu lại các trạng thái của các lần chơi trước, có tính điểm tích
lũy, tiền thu được sau mỗi lần chơi, cập nhật level.
 Efficiency: Áp dụng với người dùng lần đầu sử dụng trang web, chưa
có kinh nghiệm chơi game. Việc tìm một game yêu thích có thể tìm

theo ô tìm kiếm, tìm theo thể loại game, môi trường chơi.Sau khi tìm
được game, người dùng có thể chơi, mỗi game đều có phần hướng dẫn
học game, do vậy ở tiêu chí này đáp ứng khá tốt yêu cầu của người
dùng. Tuy nhiên hạn chế ở tiêu chí này là đối với người dùng không
biết tiếng anh thì việc tìm được game, vì trang web không hỗ trợ đa
ngôn ngữ.
 Sự thỏa mãn:Tuy có thể đáp ứng được nhu cầu chơi game của người
dùng nhưng trang web vẫn còn nhiều hạn chế, đem lại sự khó chịu cho
người dùng như:
 Việc sắp xếp bố cục trên trang chính lộn xộn, rườm rà, các
mục liên quan không được sắp xếp logic.


 Thời gian chờ của người dùng để chơi một game là tương đối
lâu.
 Không hỗ trợ đa ngôn ngữ.
 Trang web không hiển thị được tốt trên smart phone có màn
hình bé.
 Nhiều game yêu cầu cấu hình máy cao mới có thể chơi tốt, với
máy thông thường dễ xảy ra giật lag.
 Nhiệm vụ: Các hoạt động cần thiết để đạt được mục tiêu
 Vào trang miniclip.com
 Tìm kiếm game người dùng muốn chơi. Tại bước này người
dùng có thể tìm kiếm theo ô tìm kiếm nếu nhớ tên, hoặc có thể
tìm kiếm theo thế loại game.
 Chọn game muốn chơi.
 Học game, nếu game phức tạp sẽ có hướng dẫn.
 Chơi game.
III. Tổ chức lại trang giao diện của trang web để hiển thị tốt trên cả máy tính cá
nhân và thiết bị di động.

Với đặc thù của thiết bị di động là màn hình tương đối nhỏ và tốc độ truy cập mạng
nếu sử dụng 3G là khá chậm nên việc hiển thị trang web được thiết kế cho máy tính
cá nhân là khá khó khăn và gây khá nhiều ức chế cho người dùng. Vì vậy để có thể
hiển thị tốt trang web trên thiết bị di động thì cần thiết kế một giao diện riêng cho
thiết bị di động.
Sau đây nhóm sẽ thiết kế lại các giao diện cho các loại thiết bị:
- Máy tính cá nhân (Kích thước 13 inch)
- Máy tính bảng (kích thước 7 inch)
- Thiết bị di động (Smartphone)
1. Máy tính cá nhân (Kích thước 13 inch) :
Đối với máy tính cá nhân với kích thước khoàng 13, 14 inch thì chỉ cần bỏ bớt một
số phần quảng cáo là có thể hiển thị trang web khá tốt


Hình 3: Giao diện cho màn hình 13'


Đối với phần giao diện game cũng cần loại bỏ phần quảng cáo banner phía trên để
có thể hiển thị trực tiếp giao diện trò chơi mà không cần mất thêm thao tác.

Hình 4: Giao diện trò chơi 13'


2. Máy tính bảng ( Kích thước 7 inch):
Giao diện web trên màn hình kích thước 7 inch cần tối giản thêm những phần
không cần thiết để có thể hiển thị tốt và load trang web một cách nhanh chóng.

Hình 5: Giao diện web trên màn hình 7 inch

Phần hiển thị các mục con trong trang web cũng cần phải giảm thiểu những phần
không cần thiết.

Hình 6: Hiển thị môt nhóm trò chơi trên màn hình 7 inch


Phần giao diện của game:

Hình 7: Giao diện game 7inch

3. Thiết bị di đông (Smartphone):
Phần Giao diện trang web:


Hình 8: Giao diện web trên smartphone


Giao diện của phần nhóm trò chơi:

Hình 9: Giao diện nhóm trò chơi đối với smartphone


IV. Thiết kế giao diện tĩnh của trò chơi
1. Map

Hinh 10: Map 1

Hình 11: Map2

Hình 12: Map 3

2. Vũ khí

Basic


Advanced

Building

3. Quái