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!

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