Bài giảng Chương 10: Thiết kế tầng giao diện người-máy

"Bài giảng Chương 10: Thiết kế tầng giao diện người-máy" trình bày nguyên tắc chung trong thiết kế giao diện hệ thống; quy trình thiết giao diện; cách thiết kế cấu trúc giao diện; thiết kế các tiêu chí cho giao diện; các nguyên tắc và kỹ thuật phổ biến trong thiết kế điều hướng hệ thống.
Nội dung trích xuất từ tài liệu:
Bài giảng Chương 10: Thiết kế tầng giao diện người-máy Chương 10: Thiết kế tầng giao diện người-máy 1 Mục tiêu của chương: - Hiểu một số nguyên tắc chung trong thiết kế giao diện hệ thống - Hiểu được qui trình thiết giao diện - Hiểu được cách thiết kế cấu trúc giao diện - Hiểu được cách thiết kế các tiêu chí cho giao diện - Hiểu được các nguyên tắc và kỹ thuật phổ biến trong thiết kế điều hướng hệ thống 2 - Hiểu được các nguyên tắc và kỹ thuật phổ biến trong thiết kế đầu vào và đàu ra của hệ thống. - Có khả năng thiết kế được giao diện - Hiểu được sự tác động của các yêu cầu phi chức năng đối với tầng giao diện 3 Giới thiệu - Thiết kế giao diện chính thức hóa sự tương tác của hệ thống với các thực thể bên ngoài hệ thống. - Các giao diện hệ thống (system interfaces) là giao diện giao tiếp giữa hai hệ thống với nhau và được xem như là một phần của tích hợp hệ thống. - Giao diện người dùng (User interfaces) là giao diện giao tiếp giữa con người với máy tính và là nội dung chính của chương này. 4 Các nguyên tắc thiết kế giao diện Thiết kế giao diện là một nghệ thuật và cần thỏa mãn các điều kiện sau: - Dễ sử dụng: giao diện dễ sử dụng ngay cả với những người không có kinh nghiệm - Dễ học: các chức năng gần gũi với tư duy của người sử dụng để họ có thể nắm bắt được dễ dàng nhanh chóng - Tốc độ thao tác: thao tác không quá phức tạp hay dài - Dễ phát triển: giao diện dễ dàng, sẵn sàng đáp ứng các yêu cầu thay đổi của người dùng 5 Các nguyên tắc thiết kế giao diện bao gồm: - Có layout bố cục hợp lý, ổn định: Giao diện nên gồm một chuỗi các vùng có mục đích khác nhau trên màn hình được sử dụng một cách ổn định. VD bố cục header, footer, left, right của website. - Đoán nhận nội dung: Hệ thống luôn cung cấp các thông tin phản hồi về công việc đang tiến hành và cung cấp thông tin về phần hệ thống đang được sử dụng cho người sử dụng biết. - Thẩm mỹ: Tỷ lệ khoảng trắng, hình ảnh, màu sắc, font chữ. VD Tỷ lệ khoảng trắng vừa đủ để cho mắt được nghỉ ngơi nhưng cũng không làm cho giao diện quá tẻ nhạt và cảm giác thông tin sơ sài - Các giao diện có sự đồng nhất cao 6 - Phù hợp với kinh nghiệm người sử dụng: Giao diện nên thân thiện với người dùng và phù hợp với kinh nghiệm, trình độ của các lớp người dùng khác nhau. Hệ thống sẵn sàng cung cấp các trợ giúp khi người sử dụng cần. - Tối thiểu hóa sức lực của người dùng: Hạn chế tối đa tiêu phí sức lực không cần thiết của người sử dụng. Dễ cho phép người sử dụng thoát ra khỏi hộp thoại/ trạng thái hiện tại dễ dàng bằng các thao tác quen thuộc (vd: ESC, Alt-F9). Cho phép hủy bỏ các thao tác đã tiến hành, tăng tính khoan dung của chương trình. 6 Một cửa sổ giao trong ứng dụng windows thường được chia làm 3 vùng: - Vùng điều hướng - Vùng form hoặc report - Vùng trạng thái 7 Nguyên tắc thiết kế khuôn dạng giao diện: - Mỗi vùng trong giao diện có thể được chia nhỏ hơn - Mỗi vùng là độc lập - Thông tin trong các vùng nên được biểu diễn theo luồng trực quan tự nhiên để giảm thiểu chuyển động của người dùng từ vùng này sang vùng khác. 8 Giao diện hỗ trợ được NSD đoán trước được nội dung: - Khi nhìn vào giao diện, NSD có thể trả lời được các câu hỏi: Tôi đang ở đâu? và Tôi làm được gì ở đây? - Mỗi vùng con trong giao diện cũng cần giúp được NSD đoán được nội dung. Do đó. Các các trường thông tin có trong form nhập mà có liên quan với nhau thì nên được sắp xếp cùng nhau, các thông tin báo cáo cũng nên được sắp xếp cùng nhau. 9 Ví dụ, giao diện trên slide chia thông tin của bệnh nhân và của bác sĩ ra hai vùng khác nhau. Trong vùng thông tin của bệnh nhân, hai thông tin họ và tên của bệnh nhân được đặt liền nhau (tên trước, họ sau) theo thứ tự tên của các nước Châu Âu. Nhưng với người Việt Nam, thứ tự của tên phải là Họ trước và tên sau. Tương tự, các thông tin về địa chỉ của bệnh nhân cũng được xếp liền nhau. 10 Ví dụ cách sắp xếp thông tin của một website. 11 Giao diện cần có tính thẩm mĩ cao: - Các giao diện cần thể hiện được chức năng, thu hút NSD và ưa nhìn. - Một thiết kế đơn giản và tối giản là tốt nhất. - Mỗi biểu mẫu hay báo cáo cần có một khoảng trắng tối thiểu được chủ địnhđể trống. - Mật độ thông tin có thể chấp nhận tỷ lệ thuận với sự chuyên nghiệp của người dùng. - Nói chung, người dùng mới hoặc không thường xuyên sử dụng giao diện thường thích giao diện có mật độ thông tin thấp dưới 50 phần trăm (tức là, dưới 50 phần trăm giao diện bị chiếm dụng bởi thông tin). Người dùng có nhiều kinh nghiệm hơn thích mật độ cao hơn, có khi lên 12 đến 90% vì họ biết thông tin được đặt ở đâu và như thế sẽ giúp họ đỡ mất công chuyển qua lại giữa các giao diện. 12 Ví dụ về một giao diện biểu mẫu có mật độ thông tin cao. 13 Phù hợp với kinh nghiệm người sử dụng 1 ...