Bài giảng Phân tích Thiết kế hệ thống - Bài 6: Thiết kế giao diện giữa người và máy - Đào Nam Anh

1 Phân tích và thiết kế hệ thống System Analysis & Design Bài giảng 6: THIẾT KẾ GIAO DIỆN GIỮA NGƯỜI VÀ MÁY TS Đào Nam Anh 2 Tham khảo • Systems Analysis and Design, Alan Dennis and Barbara Haley Wixom Fred Niederman John Wiley & Sons, Inc. • Dao Nam Anh, "Systems Analysis And Design", Course Book, University of Power, 201 3 Giới thiệu Chương 6. THIẾT KẾ GIAO DIỆN GIỮA NGƯỜI VÀ MÁY 6.1 Tổng quan 6.2 Thiết kế các mẫu thu thập thông tin 6.3 Thiết kế các tài liệu ra, các báo cáo 6.4 Các giao diện khác 4 1 Tổng quan • Mục đích • Thiết kế môi trường giao tiếp giữa người sử dụng và máy thoả mãn điều kiện: • 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 dễ dàng nhanh chóng. • Tốc độ thao tác: Giao diện không đòi hỏi các thao tác phức tạp hay dài dòng, hỗ trợ các phím tắt, phím nóng. • Dễ phát triển: Giao diện được xây dựng dễ dàng, sẵn sàng đáp ứng các yêu cầu thay đổi của người sử dụng. 5 1 Tổng quan • Các loại giao diện • Hộp thoại: Là các giao diện phục vụ cho việc kiểm soát hệ thống, trao đổi thông tin giữa người sử dụng và hệ thống, kiểm tra quyền truy nhập (Tên, mật khẩu), các hướng dẫn sử dụng hệ thống, các thông báo lỗi sử dụng hay lỗi hệ thống nếu có... • Màn hình nhập dữ liệu: Đó là các khung nhập liệu cho phép người sử dụng tiến hành nhập dữ liệu cho hệ thống hay cung cấp thông tin cho việc tìm kiếm dữ liệu, đưa ra các báo cáo theo yêu cầu. • Màn hình báo cáo: Đó là các biểu mẫu hiển thị các thông tin được thu thập và tổng hợp theo yêu cầu của người sử dụng. 6 1 Tổng quan • Các nguyên tắc chung khi thiết kế giao diện • Hạn chế thao tác: Hạn chế tối đa sự thao tác không cần thiết của người sử dụng. Ví dụ: Đặt các giá trị mặc định là giá trị hay sử dụng hay các giá trị tốt nhất. • Thông tin trạng thái: cung cấp cho người sử dụng thông tin về phần hệ thống đang được sử dụng. • Cung cấp thông tin phản hồi về công việc đang tiến hành cho người sử dụng. 7 1 Tổng quan • Các nguyên tắc chung khi thiết kế giao diện • Trợ giúp: Sẵn sàng cung cấp các trợ giúp khi người sử dụng cần. • Dễ dàng thoát ra: Cho phép người sử dụng thoát ra khỏi hộp thoại dễ dàng bằng các thao tác quen thuộc. Ví dụ: ấn phím ESC/Alt-F9... • Làm lại: Cho phép huỷ bỏ các thao tác đã tiến hành. 8 2 Thiết kế các mẫu thu thập thông tin • Màn hình nhập liệu loại chỉ có một chức năng là rất hiếm. Hầu hết các giao diện có nhiều chức năng. Màn hình nhập liệu phải có đủ thông tin để phép người dùng nhập dữ liệu dễ dàng. Các nhãn phải có đủ thông tin và được sắp đặt trong trình tự dễ đọc và dễ hiểu. • Cũng lưu ý màu nền các nhãn nên khác nhau, để phần biệt vùng nhập liệu, và vùng kết quả tính toán từ dữ liệu. Ví dụ sau khi nhập số tiền gửi ngân hàng, khi bấm phím tính lãi 12 tháng, ô kết quả hiện ra số tiền lãi trên màu nền khác. Trong trường hợp này, việc sử dụng một màu sắc khác biệt rất có hiệu quả, 9 2 Thiết kế các mẫu thu thập thông tin 10 3 Thiết kế các tài liệu ra, các báo cáo • Khi thiết kế báo cáo, trên màn hình hoặc gửi ra máy in, cần có đầy đủ thông tin để báo cáo dễ hiểu. • Cần kết hợp các tính năng khác nhau trong bài trình bày báo cáo. Một trong những tính năng thường bị bỏ qua bởi các nhà thiết kế và lập trình là cách nhóm các cụm thông tin có ý nghĩa với nhau. • Tiêu đề của một báo cáo cần được súc tích và chứa một lượng đáng kể các thông tin có ý nghĩa. Báo cáo cần có ngày tháng năm tạo ra. Báo cáo có sự khác biệt về trình bày khi xem trên màn hình và khi in. 11 3 Thiết kế các tài liệu ra, các báo cáo • Khả năng dễ đọc của báo cáo • Trong tất cả các báo cáo, cần vận dụng các quy tắc soạn thảo văn bản sau. Một trong những quy tắc thường bị bỏ qua trong các báo cáo máy tính tạo ra là việc sử dụng các chữ hoa, chữ thường (case). TOÀN HỘ CHỮ HOA (UPPER CASE) nên được dành riêng cho các tiêu đề, hoặc khi cần thiết cho các cú pháp ngôn ngữ lập trình. Trong tình huống mà các dòng văn bản và các tiêu đề nhỏ được trình bày cùng nhau, thì với các tiêu đề này nên Viết Hoa Chữ Cái Đầu Tiên Trong Mỗi Từ (Title Case). Nếu cùng là tiêu đề nhưng ở các cấp bậc khác nhau thì nên dùng cỡ chữ khác nhau. 12 3 Thiết kế các tài liệu ra, các báo cáo • Khả năng dễ đọc của báo cáo • Khi báo cáo dùng toàn bộ chữ hoa, khả năng dễ đọc của báo cáo giảm đi. Chỉ nên áp dụng toàn bộ chữ hoa cho tiêu đề lớn • Trong báo cáo nên dùng thống nhất một kiểu trình bày bao gồm phông chữ, dàn chữ màu nền cho từng loại thông tin của báo cáo. Các thông tin nên được sắp xếp theo một thứ tự phù hợp với nội dung và người đọc. • Trong một số trường hợp báo cáo cần tăng sự bắt mắt như các áp phích và lời mời tham gia sự kiện. Giải pháp là sử dụng các phông chữ đặc biệt để trang trí. 13 3 Thiết kế các tài liệu ra, các báo cáo 14 3 Thiết kế các tài liệu ra, các báo cáo • Khả năng dễ đọc của báo cáo trên màn hình • Loại báo cáo này được thiết kế đặc biệt dành riêng cho trình bày trên màn hình và tận dụng các chức năng tương tác của chương trình. Bên cạnh các lưu ý trong mục trên, cần chú ý đến cách dùng màu sắc của màn hình, phông chữ. Các màu phối hợp sao cho các chữ đọc được rõ ràng, không bị lẫn với các hình nền. Độ tương phản màu cần ở mức phù hợp, tạo cảm giác dễ đọc. Độ lớn các ô, bảng cần phù hợp với kích thước màn hình. Vị trí các thành phần của báo cáo nên đặt theo một trình tự logic. 15 4. Các giao diện khác • Trình bày Dữ liệu số • Các dữ liệu số cần dược dàn sang bên phải. Số các chữ số thập phân nên chọn phù hợp với dữ liệu. Không sử dụng dấu phảy thập phân nếu dữ liệu là số nguyên. Giá trị tiền tệ khi tương đối thấp, nên được trình bày với hai chữ số thập phân. Tuy nhiên, giá trị tiền tệ lớn - ví dụ sáu con số - có thể được trình bày bằng số nguyên. Nếu bảng dữ liệu có nhiều hàng, nên nhóm 5 hàng làm một, cách nhau bởi một hàng trống 16 4. Các giao diện khác • Trình bày Dữ liệu số 17 4. Các giao diện khác • Thông báo lỗi • Thông báo lỗi phải súc tích và đủ thông tin 18 4. Các giao diện khác • Thông báo đồ họa • Khi thực hiện một chức năng cụ thể sẽ mất nhiều hơn một vài giây, người sử dụng nên được biết ước lượng thời gian chờ bằng một thông báo hoặc một thanh bar thể hiện tiến độ tính toán. Tải một tệp về máy thường lâu, là một ví dụ. • Đôi khi khởi động một chương trình mất một thời gian tương đối lâu để thiết lập môi trường. Trong những trường hợp như vậy, sử dụng một thanh bar cập nhật tiến độ có thể rất hữu ích cho người sử dụng biết máy tính đang tiến hành việc gì. 19 4. Các giao diện khác • Thông báo đồ họa 20 4. Các giao diện khác • Giao diện cuối cùng • Khi hoàn tất phần việc chương trình, giao diện cần cho người sử dụng biết kết quả thực hiện. Có thể hiển thị một phần dữ liệu đầu vào với kết quả đầu ra. Các khả năng và hạn chế của chương trình có thể được nêu, nếu thấy cần thiết. 21 TÓM TẮT Chương 6. THIẾT KẾ GIAO DIỆN GIỮA NGƯỜI VÀ MÁY 6.1 Tổng quan 6.2 Thiết kế các mẫu thu thập thông tin 6.3 Thiết kế các tài liệu ra, các báo cáo 6.4 Các giao diện khác 22 Questions https://sites.google.com/site/daonamanhedu/teaching/softw areanalysisanddesign