Bài giảng chương 10 thiết kế tầng giao diện người máy

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

Chương 10: Thiết kế tầng giao diện người-máy

1

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

- 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

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

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

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

- 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

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

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

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

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

Ví dụ cách sắp xếp thông tin của một website

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

đế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

Ví dụ về một giao diện biểu mẫu có mật độ thông tin cao

13

Phù hợp với kinh nghiệm người sử dụng

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

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

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

Quy trình thiết kế giao diện

18

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ế

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

Xây dựng các kịch bản sử dụng:

- 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

- 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

- 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

- 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

- 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

- 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