Systems Analysis and Design - Chương 10: Thiết kế tầng giao diện người-máy - Lê Thị Tú Kiên

Nội dung text: Systems Analysis and Design - Chương 10: Thiết kế tầng giao diện người-máy - Lê Thị Tú Kiên

1. Chương 10: Thiết kế tầng giao diện người-máy 1
2. Mục tiêu của chương: - Hiểu một số nguyên tắc chung trong thiết kế giao diện hệ thống - Hiểu được qui trình thiết giao diện - Hiểu được cách thiết kế cấu trúc giao diện - Hiểu được cách thiết kế các tiêu chí cho giao diện - Hiểu được các nguyên tắc và kỹ thuật phổ biến trong thiết kế điều hướng hệ thống 2
3. - Hiểu được các nguyên tắc và kỹ thuật phổ biến trong thiết kế đầu vào và đàu ra của hệ thống. - Có khả năng thiết kế được giao diện - Hiểu được sự tác động của các yêu cầu phi chức năng đối với tầng giao diện 3
4. Giới thiệu - Thiết kế giao diện chính thức hóa sự tương tác của hệ thống với các thực thể bên ngoài hệ thống. - Các giao diện hệ thống (system interfaces) là giao diện giao tiếp giữa hai hệ thống với nhau và được xem như là một phần của tích hợp hệ thống. - Giao diện người dùng (User interfaces) là giao diện giao tiếp giữa con người với máy tính và là nội dung chính của chương này. 4
5. Các nguyên tắc thiết kế giao diện Thiết kế giao diện là một nghệ thuật và cần thỏa mãn các điều kiện sau: - 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 được dễ dàng nhanh chóng - Tốc độ thao tác: thao tác không quá phức tạp hay dài - Dễ phát triển: giao diện dễ dàng, sẵn sàng đáp ứng các yêu cầu thay đổi của người dùng 5
6. Các nguyên tắc thiết kế giao diện bao gồm: - Có layout bố cục hợp lý, ổn định: Giao diện nên gồm một chuỗi các vùng có mục đích khác nhau trên màn hình được sử dụng một cách ổn định. VD bố cục header, footer, left, right của website. - Đoán nhận nội dung: Hệ thống luôn cung cấp các thông tin phản hồi về công việc đang tiến hành và cung cấp thông tin về phần hệ thống đang được sử dụng cho người sử dụng biết. - Thẩm mỹ: Tỷ lệ khoảng trắng, hình ảnh, màu sắc, font chữ. VD Tỷ lệ khoảng trắng vừa đủ để cho mắt được nghỉ ngơi nhưng cũng không làm cho giao diện quá tẻ nhạt và cảm giác thông tin sơ sài - Các giao diện có sự đồng nhất cao 6
7. - Phù hợp với kinh nghiệm người sử dụng: Giao diện nên thân thiện với người dùng và phù hợp với kinh nghiệm, trình độ của các lớp người dùng khác nhau. Hệ thống sẵn sàng cung cấp các trợ giúp khi người sử dụng cần. - Tối thiểu hóa sức lực của người dùng: Hạn chế tối đa tiêu phí sức lực không cần thiết của người sử dụng. Dễ cho phép người sử dụng thoát ra khỏi hộp thoại/ trạng thái hiện tại dễ dàng bằng các thao tác quen thuộc (vd: ESC, Alt-F9). Cho phép hủy bỏ các thao tác đã tiến hành, tăng tính khoan dung của chương trình. 6
8. Một cửa sổ giao trong ứng dụng windows thường được chia làm 3 vùng: - Vùng điều hướng - Vùng form hoặc report - Vùng trạng thái 7
9. Nguyên tắc thiết kế khuôn dạng giao diện: - Mỗi vùng trong giao diện có thể được chia nhỏ hơn - Mỗi vùng là độc lập - Thông tin trong các vùng nên được biểu diễn theo luồng trực quan tự nhiên để giảm thiểu chuyển động của người dùng từ vùng này sang vùng khác. 8
10. Giao diện hỗ trợ được NSD đoán trước được nội dung: - Khi nhìn vào giao diện, NSD có thể trả lời được các câu hỏi: Tôi đang ở đâu? và Tôi làm được gì ở đây? - Mỗi vùng con trong giao diện cũng cần giúp được NSD đoán được nội dung. Do đó. Các các trường thông tin có trong form nhập mà có liên quan với nhau thì nên được sắp xếp cùng nhau, các thông tin báo cáo cũng nên được sắp xếp cùng nhau. 9
11. Ví dụ, giao diện trên slide chia thông tin của bệnh nhân và của bác sĩ ra hai vùng khác nhau. Trong vùng thông tin của bệnh nhân, hai thông tin họ và tên của bệnh nhân được đặt liền nhau (tên trước, họ sau) theo thứ tự tên của các nước Châu Âu. Nhưng với người Việt Nam, thứ tự của tên phải là Họ trước và tên sau. Tương tự, các thông tin về địa chỉ của bệnh nhân cũng được xếp liền nhau. 10
12. Ví dụ cách sắp xếp thông tin của một website. 11
13. Giao diện cần có tính thẩm mĩ cao: - Các giao diện cần thể hiện được chức năng, thu hút NSD và ưa nhìn. - Một thiết kế đơn giản và tối giản là tốt nhất. - Mỗi biểu mẫu hay báo cáo cần có một khoảng trắng tối thiểu được chủ địnhđể trống. - Mật độ thông tin có thể chấp nhận tỷ lệ thuận với sự chuyên nghiệp của người dùng. - Nói chung, người dùng mới hoặc không thường xuyên sử dụng giao diện thường thích giao diện có mật độ thông tin thấp dưới 50 phần trăm (tức là, dưới 50 phần trăm giao diện bị chiếm dụng bởi thông tin). Người dùng có nhiều kinh nghiệm hơn thích mật độ cao hơn, có khi lên 12
14. đến 90% vì họ biết thông tin được đặt ở đâu và như thế sẽ giúp họ đỡ mất công chuyển qua lại giữa các giao diện. 12
15. Ví dụ về một giao diện biểu mẫu có mật độ thông tin cao. 13
16. Phù hợp với kinh nghiệm người sử dụng 14
17. Sự đồng nhất của giao diện: - Tính nhất quán trong thiết kế có lẽ là yếu tố quan trọng nhất giúp hệ thống dễ sử dụng vì nó cho phép người dùng dự đoán điều gì sẽ xảy ra. Khi các giao diện được thiết kế nhất quán, người dùng có thể tương tác với một phần của hệ thống và sau đó biết cách tương tác với phần còn lại. - Tính nhất quán trong các điều khiển điều hướng (Navigation controls) chuyển tải cách thực hiện các hành động trong hệ thống. - Sự nhất quán về cách dùng thuật ngữ cũng rất quan trọng. Có nghĩa là, nên sử dụng cùng một từ cho các thành phần trên biểu mẫu và báo cáo. 16
18. Ví dụ, không nên sự dụng từ “Customer” trên biểu này nhưng lại dùng từ “Client” trên biểu mẫu khác khi cả hai cùng có nghĩa là khách hàng. 16
19. Tối thiểu hóa sức lực người sử dụng: - Giao diện phải tối thiểu hóa được sự tiêu tốn sức lực của NSD cần dùng để hoàn thành các vông việc. - Giao diện thiết kế cần tuân theo quy tắc ba lần nhấp (three-clicks): người dùng có thể bắt đầu đi từ menu chính của hệ thống đến vị trí thông tin hoặc hành động họ muốn trong không quá ba lần nhấp chuột hoặc ba lần nhấn phím. 17
20. Quy trình thiết kế giao diện 18
21. Quy trình thiết kế giao diện bao gồm 5 bước lặp lại: 1. Xây dựng kịch bản sử dụng: các nhà phân tích dựa vào các các ca sử dụng, các sơ đồ tuần tự và các báo cáo phỏng vấn NSD để phát triên các kịch bản sử dụng 2. Thiết kế cấu trúc giao diện: các nhà phân tích xây dựng biểu đồ điều hướng cửa sổ (WND) để xác định cấu trúc cơ bản của giao diện. Biểu đồ này hiển thị tất cả các giao diện như màn hình, biểu mẫu và báo cáo trong hệ thống và cách chúng được kết nối. 3. Thiết kế các tiêu chuẩn cho giao diện hệ thống: các nhà phân tích thiết kế các tiêu chuẩn giao diện, đó là các qui tắc cơ bản mà các giao diện trong hệ thống phải tuân theo. 4. Làm mẫu giao diện thiết kế: các nhà phân tích tạo ra các mẫu thiết kế 19
22. giao diện cho từng giao diện riêng lẻ trong hệ thống. 5. Đánh giá giao diện: từng giao diện được đánh giá và xét duyệt để xác định xem chúng có cần chỉnh sửa thêm gì không. 19
23. Xây dựng các kịch bản sử dụng: 20
24. - Interface metaphor: - defines how the interface will work - An interface metaphor is a concept from the real world that is used as a model for the computer system - Often, the metaphor is explicit but sometime it is implicit or unstated. - xx 27
25. - Interface metaphor: - defines how the interface will work - An interface metaphor is a concept from the real world that is used as a model for the computer system - Often, the metaphor is explicit but sometime it is implicit or unstated. - xx 28
26. - Interface metaphor: - defines how the interface will work - An interface metaphor is a concept from the real world that is used as a model for the computer system - Often, the metaphor is explicit but sometime it is implicit or unstated. - xx 29
27. - Interface metaphor: - defines how the interface will work - An interface metaphor is a concept from the real world that is used as a model for the computer system - Often, the metaphor is explicit but sometime it is implicit or unstated. - xx 30
28. - Interface metaphor: - defines how the interface will work - An interface metaphor is a concept from the real world that is used as a model for the computer system - Often, the metaphor is explicit but sometime it is implicit or unstated. - xx 31
29. - Interface metaphor: - defines how the interface will work - An interface metaphor is a concept from the real world that is used as a model for the computer system - Often, the metaphor is explicit but sometime it is implicit or unstated. - xx 32