Bài tập lớn: Tương tác người máy

Nội dung text: Bài tập lớn: Tương tác người máy

1. 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 20112574 Đoàn Văn Đạt 20111370 Nguyễn Văn Nam 20111892 Nguyễn Thanh Cường 20112551 Phạm Anh Tuấn 20112712 Giáo viên hướng dẫn : TS. Vũ Thị Hương Giang Hà Nội, tháng 10 năm 2014
2. I. Tham khảo trang web miniclip.com và trò chơi Canyon Defense 3 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
3. Phân công công việc: STT Họ và tên SHSV Nội dung công việc Đóng góp Mức độ (%) hoàn thành (%) 1 Hồ Thúc Đồng 20112574 Đánh giá tính dùng 20 100 được của trang web 2 Phạm Anh Tuấn 20112712 Tham khảo trang web 20 100 và trò chơi 3 Nguyễn Văn Nam 20111892 Thiết kế màn hình 13 20 100 inch 4 Nguyễn Thanh 20112551 Thiết kế giao diện 20 100 Cường tĩnh 5 Đoàn Văn Đạt 20111370 Thiết kế màn hình 3 20 100 inch và 7inch
4. 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.
5. Đá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,
6. 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.
7.  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
8. Hình 3: Giao diện cho màn hình 13'
9. Đố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'
10. 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
11. 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
12. 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:
13. Hình 8: Giao diện web trên smartphone
14. 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
15. IV. Thiết kế giao diện tĩnh của trò chơi 1. Map Hinh 10: Map 1 Hình 11: Map2
16. Hình 12: Map 3 2. Vũ khí Basic
17. Advanced Building 3. Quái