- Cách di chuy ển (di chuyển từ hệ thống v à di chuy ển b ên trong m ột m àn hình) - Các hành động ứng với các điều khiển. - Cách trình bày (th ống nhất cách tr ình bày cho t ất cả các g[r]
(1)Giảng: PGS TS Đồng Thị Bích Thủy 1/6 Chương4 :THIẾT KẾ GIAO DIỆN
1 Ba phần giao diện
Giao diện chia thành loại: - Kết xuất
- Nhập
- Giao diện tương tác
2 Một số nguyên tắc để thiết kế giao diện 2.1 Kết xuất
- Đáp ứng mục tiêu nghiệp vụ - Phù hợp với người sử dụng (NSD) - Số lượng vừa đủ
Ví dụ :
Thống kê doanh thu
Tháng 1/2006
STT Ngày Địa điểm Doanh thu
1 1/1/06 xxx …
2 1/1/06 yyy …
3 1/1/06 zzz …
…
Chỉ cần để lại dòng cho ngày cột “Ngày”, hình sau, tránh làm rối báo biểu
STT Ngày Địa điểm Doanh thu
1 1/1/06 xxx …
2 yyy …
3 zzz …
…
- Trình bày liệu vị trí - Số lượng vừa đủ
(2)- Cần lưu ýkích thước khác khơng gian hiển thị báo biểu in giấy báo biểu xuất hình
2.2 Mẫu nhập - Dễ hiểu
o Mục đích nhập tường minh o Thứ tự nhập trực quan
o “Look and feel” : NSD nhìn thấy giao diện khớp với với thực tế lưu trữ bên trong, để NSD yên tâm làm
- Dễ làm việc :
o Có lựa chọn cho NSD tùy trìnhđộ (gợi ývà hỗ trợ cho NSD mới, có cách làm tắt, nhanh cho NSD có kinh nghiệm)
o Dễ nhớ (Đặt tên cácđiều khiển hợp lý gợi nhớ) - Có tính thẩm mỹ
- Phương tiện : Môi trườngtriển khai ứng dụng (web, window form,…) địi hỏi nhữngngun tắc khác có khác tốc độ xử lý
3 Mục tiêu thiết kế giao diện 3.1 Mục tiêu
- Giao diện phù hợp với nhiệm vụ - Giao diện phải hiệu
- Cung cấp phản hồi hệ thống lúc cần (ví dụ tiến độ (progress bar), thông báo yêu cầu chờ hệ thống thực xử lý nhiều thời gian …) - Tăng suất làm việc NSD
- Phát sinh câu hỏikhi cần thiết, không lạm dụng 3.2 Loại giao diện : lựa chọn tùy loại HTTT
- Ngôn ngữ tự nhiên hay biểu tượng
- Câu hỏi trả lời (thường dùng cho hệ hỗ trợ định hoặchệ chuyên gia) - Thực đơn
- Mẫu biểu định sẵn để điền vào - Ngôn ngữ lệnh
- Dạng đồ họa
4 Thiết kế giao diện tương tác
(3)Giảng: PGS TS Đồng Thị Bích Thủy 3/6 - Thẩm mỹ
- Kinh nghiệm NSD - Tính quán
- Cố gắng NSD
4.1 Bản vẽ : màn hình thường chia thành không gian :
- Di chuyển
o Di chuyển hệ thống (menu,…) : phần hình
o Di chuyển mức trang web : phần không gian tr ên, bên phần di chuyển hệ thống
o Di chuyển mức phân hệ : cột bên tay trái - Tình trạng : phần hình - Khơng gian làm việc : phần cịn lại
Chú ý :
o Khi di chuyển xuống phần di chuyển mức trang web (ví dụ nút next, previous) trang web thường hiển thị phần phần phần cuối trang, để NSD không cần phải quay l ên đọc hết trang
o Thứ tự trình bày mục giao diện cịn phải phù hợp với văn hóa, thói quen, đặc điểm ngôn ngữ NSD t ương lai Ví dụ : trình bày theo thứ tự từ xuống, từ trái qua NSD Việt Nam nước phương Tây, Nhật hay Trung Quốc lại từ phải qua
Khơng gian làm việc Di chuyển hệ thống Di chuyển mức trang web
Tình trạng hoạt động mức hệ thống Di
(4)4.2 Nội dung :
- Màn hình phải có tên
- Thực đơn : tên thực đơn phải khớp với qui trình nghiệp vụ - NSD phải biết mìnhđang đâu
- NSD biết cách đến hình - Biết rõ ràng nội dungthông tin không gian
- Chú ý lựa chọn trường/ tên trường hợp lý: hiển thị tr ường thật cần thiết, lựa chọn tên trường cẩn thận (Ví dụ “Họ tên Khách hàng” hay “Tên Khách hàng)
- Thường có thơng tin ngày làm việc, phiên ứng dụng 4.3 Tính thẩm mỹ :
- NSD cảm thấy dễ chịu làm việc
- Không cầu kỳ để người sử dụng cảm thấy dễ làm việc
- Chọn font rõ ràng, cỡ chữ phù hợp, tránh dùng chữ hoa (trừ trường hợp cần thiết chữ đầu dòng đầu tên riêng)
- Màu sắc hài hòa, nên dùng nhiều màu lạnh, dùng màu nóng cho mục muốn gây ý Kết hợp màu màu chữ hợp lý Trên hình, số màu màu chữchỉ nên khoảng 3-5 màu
- Chớp, nháy : sử dụng để gây ý, nh ưng không lạm dụng 4.4 Kinh nghiệm NSD :
Giao diện phải dễ học, dễ nhớ, phù hợpvới người sử dụng, đồng thời hỗ trợ để tăng suất NSD có kinh nghiệm
4.5 Nhất quán :
- Thiết kế giao diện cho NSD d ự đoán hệ thống làm
- Nhất quán toàn hệ thống về: tên chức năng, tên trường, ý nghĩa biểu tượng , vị trí mục, nút điều khiển
4.6 Giảm thiểu cố gắng NSD:
Nguyên tắc:NSD nhấp chuột lần để đến với hình cần làm việc
(5)Giảng: PGS TS Đồng Thị Bích Thủy 5/6 5.1 Lập kịch thi hành một qui trình nghiệp vụ:
- Dịng (có thể nhiều dịng chính) - Dịng phụ
- Lập kịch khai thác toàn hệ thống để thấy kịch liên quan nhau, từ gom nhóm thiết kế hệ thống thực đơn
5.2 Thiết kế cấu trúc giao diện:
Thiết kế hệ thống thực đ ơn, sơ đồ quan hệ tương tác hình giao diện, lập vẽ cho hình
5.3 Thiết kế chuẩn giao diện:
Thiết kế chuẩn để đảm bảo tính quan tồn hệ thống: - Biểu tượng, tên gọi
- Cách di chuyển (di chuyển từ hệ thống di chuyển bên hình) - Các hành động ứng với điều khiển
- Cách trình bày (thống cách trình bày cho tất giao diện hệ thống) 5.4 Thực hiện giao diện mẫu
- Xây dựng hình mẫu
- Xâu chuỗi hìnhđể làm rõ kịch 5.5.Đánh giá giao diện
1) Phương pháp Heuristic: So sánh v ới tiêu chí, nguyên tắc đãđề
2) Phương pháp mô phỏng: Dựa kịch Những người kiểm nghiệm thuộc nhóm độc lập, có nắm vững yêu cầu nghiệp vụ hệ thống
(6)