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

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 cung cấp cho người học những kiến thức như: 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. Mời cá bạn cùng tham khảo!
Nội dung trích xuất từ tài liệu:
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 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 2 Bức tranh PTKTHT 1 25/02/2016 25/02/2016 3 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 4 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 2 25/02/2016 25/02/2016 5 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 6 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 3 25/02/2016 25/02/2016 7 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 8 4 25/02/2016 25/02/2016 9 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 10 5 25/02/2016 25/02/2016 11 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 12 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. 6 25/02/2016 25/02/2016 13 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 14 7 25/02/2016 25/02/2016 15 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 16 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. 8 25/02/2016 25/02/2016 17 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 18 Quy trình thiết kế giao diện người dùng 9 ...