Thiết kế giao diện website “Bảo mật mạng”

BÀI TẬP LỚN
BÀI TẬP LỚN
Nhập môn tương tác người máy
Nhập môn tương tác người máy
Nhóm sinh viên thực hiện – HCI16
Đinh Quang Huy - 20081124
Nguyễn Hữu Hạnh - 20080903
Đào Văn Long - 20081576
Hoàng Việt Hùng - 20081199
Nguyễn Hải Đăng - 20080649
Thiết kế giao diện website “Bảo mật mạng”
Nội dung
•
Phân tích yêu cầu
•
Phác thảo ý tưởng
•
Đánh giá mẫu phác thảo
•
Thiết kế giao diện
•
Đánh giá
Phân tích yêu cầu
Yêu cầu chức năng:
•
Header banner
•
Top Menu
•
Search bar
•

Main content
•
Footer
Phân tích yêu cầu
Yêu cầu phi chức năng:
•
Giao diện bố cục hợp lý
•
Dễ nhìn
•
Dễ sử dụng
•
Phù hợp với thói quen người dùng
Phác thảo ý tưởng
Đánh giá mẫu phác thảo
•
Bố cục tương đối hợp lý, nhìn vào là có thể
nắm bắt tổng thể trang web
•
Giao diện khá thân quen với người sử dụng
•
Các chức năng rõ ràng
Thiết kế giao diện
Thiết kế giao diện đồ họa bản đơn sắc:
•
Là giao diện được thiết kế với các mảng màu,
đường kẻ, chữ được để ở thang màu xám, chưa
được phối màu
•

Mục đích: Kiểm tra bố cục trang web hiển thị
trên trình duyệt đã hợp lý chưa, các Form, hình
ảnh, dữ liệu khi đổ ra từ CSDL có bị vỡ bố cục
hay không
Thiết kế giao diện
Hoàn thiện trang web:
•
Font_faminly: Helvetica Neue, Times New Roman,
Lucida Grande, Segoe UI, Arial, Helvetica, sans-serif
•
Tiêu đề : Font size = 18px in đậm
•
Overlook : Font size = 14px in đậm
•
Nội dung : Font size = 14px
•
Link : Font size = 14px màu xanh lam
Thiết kế giao diện
Thiết kế giao diện
Thiết kế giao diện
Đánh giá
Tính rõ ràng
•
Các thành phần: Header banner, Top menu,
Main content, banner quảng cáo… được bố cục
và hiển thị một cách rõ ràng
•
Tiêu đề, tổng quan, nội dung bài viết và các
đường link… được hiển thị với font, màu sắc
khác nhau giúp mọi người dễ dàng phân biệt

Đánh giá
Tính thẩm mỹ:
•
Độ tương phản giữa Header banner, Top
menu, Main content, Footer tốt
•
Nhóm các thành phần cùng chức năng được
hiển thị giống nhau
Đánh giá
Tính tương thích:
•
Các chuyên mục phù hợp với trang thông tin
liên quan đến bảo mật mạng
•
Các chức năng thực hiện đúng với yêu cầu đã
đề ra
–
VD: chức năng tìm kiếm
Đánh giá
Tính nhất quán:
•
Chức năng của các thành phần là cố định
•
Cùng một hành động của người dùng đối với
một chức năng đều cho ra một kết quả
•
Vị trí các thành phần chuẩn hóa: Header
banner, Top menu, search bar, các bài viết truy
cập nhiều nhất được giữ cố định
Đánh giá

Tính hiệu quả:
•
Đầu và cuối trang web đều có thanh menu
giúp người dùng truy cập đến các chuyên mục
cần chọn
•
Khi người dùng kéo trang web xuống quá màn
hình sẽ xuất hiện button Back to top giúp lên
ngay đầu trang khi click vào
•
Chuyển các chức năng, bài viết dễ dàng, mềm
mại
Đánh giá
Tính thân thiện:
•
Các khái niệm được trình bày tương đối dễ
hiểu hướng tới các đối tượng chính có chút
hiểu biết vê mạng, máy tính
•
Ngôn ngữ tiếng Việt thân quen với tất cả
người dân việt Nam
Đánh giá
Tính đơn giản:
•
Giao diện nhìn vào khá đơn giản và hiệu quả,
không rối mắt
Đánh giá
Tính dễ hiểu dễ học:
•
Người đọc truy cập trang web là có thể hình

dung ra ngay các chức năng như tìm kiếm, xem
bài mới nhất, bài đọc nhiều nhất, bài viết theo
từng chuyên mục,… để thực hiện mục đích của
mình
The end !
The end !