Bài giảng Phân tích thiết kế hệ thống thông tin - Chương 9: Thiết kế giao diện

25/02/2016 1 PHÂN TÍCH THIẾT KẾ HỆ THỐNG THÔNG TIN Chương 9. Thiết kế giao diện 25/02/2016 1 Bức tranh PTKTHT 25/02/2016 2 25/02/2016 2 Nội dung • Giới thiệu • Nguyên lý thiết kế giao diện người dùng • Quy trình thiết kế giao diện người dùng • Thiết kế chuyển hướng giao diện • Thiết kế giao diện đầu vào • Thiết kế giao diện đầu ra 25/02/2016 3 Giới thiệu • Giao diện người dùng: thể hiện hệ thống sẽ tương tác của hệ thống và các đối tượng bên ngoài như thế nào. • Các giao diện hệ thống: thể hiện hệ thống trao đổi thông tin với các hệ thống khác như thế nào • Kỹ thuật định hướng: hỗ trợ cách thức cho người dùng “yêu cầu” hệ thống làm những gì • Kỹ thuật nhập liệu: định nghĩa cách thức cho người dùng “yêu cầu” hệ thống làm những gì. • Kỹ thuật xuất thông tin: định nghĩa cách thức hệ thống cung cấp thông tin đến người dùng hoặc hệ thống khác • Giao diện người dùng đồ họa: là phương pháp được đa số mọi người lựa chọn để phát triển ứng dụng 25/02/2016 4 25/02/2016 3 Nguyên lý thiết kế giao diện người dùng • Bố cục (layout) • Nội dung trình bày • Tín thẩm mỹ • Kinh nghiệp người dùng • Tính nhất quán • Hỗ trợ tối đa người dùng 25/02/2016 5 Bố cục màn hình • Màn hình thường được chia làm 3 khu vực • Khu vực định hướng (Navigation): ở đầu • Khu vực trạng thái (Status area): ở dưới • Khu vực thao tác công việc (Work area): ở giữa • Thông tin có thể được thể hiện ở nhiều khu vực • Khu vực giống nhau thường được gom nhóm lại với nhau 25/02/2016 6 25/02/2016 4 Bố cục màn hình • Người dùng di chuyển tối thiểu từ khu vực này đến khu vực khác, hoặc từ thông tin này đến thông tin khác. • Các khu vực sẽ duy trì nhất quán trong: • Kích thước • Hình dạng • Sắp xếp dữ liệu • Thể hiện dữ liệu 25/02/2016 7 25/02/2016 8 25/02/2016 5 Nội dung trình bày • Tất cả các giao diện nên có các tiêu đề • Thực đơn (menu) nên thể hiện: • Bạn đang ở đâu? • Từ đâu bạn có thể đến đây? • Thông tin ở mỗi khu vực nên rõ ràng • Các thuộc tính và nhãn cho thuộc tính nên được lựa chọn một cách cẩn thận. • Đưa thông tin ngày và thông tin số phiên bản cho người dùng hệ thống 25/02/2016 9 25/02/2016 10 25/02/2016 6 Tính thẩm mỹ • Giao diện cần được chức năng hóa và lôi cuốn người dùng • Tránh sự ép buộc khá nhiều, đặc biệt cho người mới sử dụng • Thiết kế văn bản(text) một cách cẩn thận • Lưu ý font và kích thước • Tránh sử dụng tất cả các từ viết hoa 25/02/2016 11 Tính thẩm • Màu sắc và các kểu nên được sử dụng một cách cẩn thận • Kiểm thử chất lượng của màu sắc bằng cách thử giao diện với màn hình trắng đen • Sử dụng màu sắc để phân cách và phân loại các thành phần. 25/02/2016 12 25/02/2016 7 Kinh nghiệm của người dùng • Chương trình dễ dàng để học. • Chương trình dễ dàng để sử dụng cho các chuyên gia. • Xem xét để thêm vào các phím tắt cho các chuyên gia 25/02/2016 13 25/02/2016 14 25/02/2016 8 Sự nhất quán • Cho phép người dùng có thể tiên đoán chuyện gì có thể xảy ra. • Giảm tải việc học lòng vòng • Xem xét các thành trong phạm vi một ứng dụng và xuyên qua các ứng dụng. • Thích hợp với nhiều mức khác nhau. • Quản lý hướng di chuyển • Thuật ngữ • Thiết kế báo biểu và giao diện (form) 25/02/2016 15 Hỗ trợ tối đa người dùng • Luật 3 lần nhấn (chuột hoặc phím) • Người dùng đi từ điểm bắt đầu hoặc thực đơn chính của một hệ thống để nhìn thấy thông tin hoặc hoạt động mà họ muốn trong phạm vi không hơn 3 lần click chuột hoặc 3 lần nhấn phím. 25/02/2016 16 25/02/2016 9 Nội dung • Giới thiệu • Nguyên lý thiết kế giao diện người dùng • Quy trình thiết kế giao diện người dùng • Thiết kế chuyển hướng giao diện • Thiết kế giao diện đầu vào • Thiết kế giao diện đầu ra 25/02/2016 17 Quy trình thiết kế giao diện người dùng 25/02/2016 18 25/02/2016 10 Xây dựng kịch bản sử dụng • Phác thảo các bước của công việc thực hiện. • Trình bày đơn giản thông qua lược đồ use case hoặc cộng tác. • Cung cấp tài liệu các đường dẫn chung nhất thông qua mô hình use case để giao diện thiết kế dễ dàng sử dụng cho các tình huống. 25/02/2016 19 Ví dụ 25/02/2016 20 25/02/2016 11 Ví dụ 25/02/2016 21 Thiết kế cấu trúc giao diện • Xây dựng lược đồ minh họa sự liên quan giữa các màn hình, biểu mẫu và báo cáo. • Chỉ ra cách thức làm thế nào để người dùng di chuyển từ màn hình này đến màn hình khác. • Sử dụng lược đồ đơn giản với các hình vuông và mũi tên. Mỗi hình vuông minh họa cho một màn hình, mỗi mũi tên minh họa cho sự di chuyển từ màn hình này đến màn hình khác. 25/02/2016 22 25/02/2016 12 Thiết kế cấu trúc giao diện 25/02/2016 23 Thiết kế cấu trúc giao diện 25/02/2016 24 25/02/2016 13 Thiết kế các chuẩn giao diện • Các thành phần cơ bản thường chồng chéo ở các màn hình riêng rẽ trong phạm vi một ứng dụng. • Giao diện từ khái niệm thực tế • Desktop, checkbook, shopping cart • Giao diện danh mục • Giao diện hoạt độnt • Giao diện hình tượng • Giao diện mẫu 25/02/2016 25 Thiết kế mẫu giao diện • Là một màn hình giả lập • Các phương pháp phổ biến gồm: • Thiết kế trên giấy • Window layout Diagram • Bản mẫu HTML • Bản mẫu bằng ngôn ngữ lập trình 25/02/2016 26 25/02/2016 14 25/02/2016 27 25/02/2016 28 25/02/2016 15 Đánh giá giao diện • So sánh thiết kế với danh sách tiêu chí (checklist) • Đánh giá thông qua các bước mô phỏng. • Đánh giá tương tác • Kiểm tra tính tiện dụng 25/02/2016 29 Thiết kế chuyển hướng • Giả định cho người dùng • Tất cả các đối tượng (control) nên rõ ràng và dễ hiểu, và được đặt nơi trực quan của màn hình. 25/02/2016 30 25/02/2016 16 Thiết kế chuyển hướng • Ngăn ngừa lỗi • Giới hạn lựa chọn • Đừng bao giờ hiển thị các nút lệnh mà không thể sử dụng. • Nhắc nhở các hành động mà rất khó hoặc không thể quay ại. • Khôi phục các lỗi đơn giản • Dùng ngôn ngữ nhất quán 25/02/2016 31 Thiết kế thực đơn • Menu bar • Drop – Down menu • Hyberlink menu • Pop-up menu • Tan menu • Tool bar • Image map 25/02/2016 32 25/02/2016 17 Các thủ thuật về thông điệp • Nên rõ ràng chính xác và trọn vẹn • Nên sử dụng đúng ngữ pháp, không sử dụng các thuật ngữ khó hiểu và viết tắt (ngoại trừ các thuật ngữ đó là của người dùng) • Tránh dùng phủ định và hài hước. 25/02/2016 33 Các loại thông điệp • Thông điệp lỗi • Thông điệp xác nhận • Thông điệp thông báo • Thông điệp chờ • Thông điệp trợ giúp • Thông điệp chờ • Thông điệp hỗ trợ/giúp đỡ 25/02/2016 34 25/02/2016 18 Thiết kế giao diện đầu vào • Xử lý trực tuyến: ghi nhận tức thời giao dịch vào cơ sở dữ liệu tương ứng. • Xử lý theo lô: thu thập dữ liệu thông qua một khoảng thời gian và nhập chúng vào hệ thống tại một thời điểm theo lô. • Xử lý theo lô làm đơn giản sự liên lạc dữ liệu và các xử lý khác, tập tin chủ không được cập nhật theo thời gian thực. 25/02/2016 35 Ghi nhận dữ liệu nguồn • Giảm công việc chồng lắp • Giảm thời gian xử lý • Giảm chi phí • Giảm xác suất về lỗi. 25/02/2016 36 25/02/2016 19 Tự động hóa dữ liệu nguồn • Có thể đặt được từ các công nghệ sau: • Công cụ đọc mã vạch • Công cụ nhận dạng ký tự quang học • Công cụ đọc vạch từ • Công cụ đọc thẻ thông minh 25/02/2016 37 Thao tác phím tối thiểu • Các đơn vị dữ liệu liên kết với các thuộc tính • Văn bản (text) • Số (numbers) • Lựa chọn (selection boxes) • Check boxes • Radio buttons • On-screen list boxes • Drop-down list boxes • Combo box 25/02/2016 38 25/02/2016 20 25/02/2016 39 Các loại kiểm tra hợp lệ đầu vào • Kiểm tra tính trọn vẹn: kiểm tra một số thuộc tính phải được nhập trước khi màn hình xử lý. • Kiểm tra format: dữ liệu mã hóa hoặc ký số. • Kiểm tra vùng dữ liệu. • Kiểm tra nhất quán. • Kiểm tra cơ sở dữ liệu. 25/02/2016 40 25/02/2016 21 Thiết kế giao diện đầu ta • Mục tiêu là thể hiện thông tin cho người dùng để học có thể hiểu được chính xác nội dung đó. • Hiểu được tính hữu dụng của bảo biểu • Mức độ thường xuyên • Báo biểu theo lô hay thời gian thực • Quản lý việc xuất thông tin • Không quá nhiều và cũng không quá ít • Tất cả thông tin cần thiết – không là “tất cả” • Thể hiện độ lệch thông tin 25/02/2016 41 Một số loại báo biểu • Báo biểu chi tiết • Báo biểu tổng kết • Báo biểu xoay vòng: đầu ra được tìm kiếm và trở thành đầu vào • Biểu đồ và độ họa 25/02/2016 42