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!

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

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

• 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

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:

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

• Thiết kế văn bản(text) một cách cẩn thận

• Lưu ý font và kích thước

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

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)

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

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

Quy trình thiết kế giao diện người dùng

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

Ví dụ

11

Ví dụ

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

12

Thiết kế cấu trúc giao diện

Thiết kế cấu trúc giao diện

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

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

14

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

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

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

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

Các loại thông điệp

• Thông điệp lỗi

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

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

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

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

• On-screen list boxes

• Drop-down list boxes

• Combo box

20

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

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

Một số loại báo biểu

• Báo biểu chi tiết