GIỚI THIỆU CHUNG VỀ THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG VÀ CÁC HOẠT ĐỘNG PHÁT TRIỂN PHẦN MỀM. ThS. Phan Thanh Toàn

BÀI 2 GIỚI THIỆU CHUNG VỀ THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG VÀ CÁC HOẠT ĐỘNG PHÁT TRIỂN PHẦN MỀM ThS.. NỘI DUNGKhái niệm giao diện người dùng 1 Các quy tắc thiết kế giao diện người dùng 2 Kĩ

BÀI 2 GIỚI THIỆU CHUNG VỀ THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG VÀ CÁC HOẠT ĐỘNG PHÁT TRIỂN PHẦN MỀM

ThS Phan Thanh Toàn

Giả sử chúng ta dùng một chương trình đồ hoạ để vẽ một hình vuông Mô hình thông tin đầu vào và đầu ra được cho trong bảng sau:

TÌNH HUỐNG DẪN NHẬP



MỤC TIÊU

Trình bày được các quy tắc thiết kế giao diện

Trình bày được các vấn đề cơ bản về công nghệ phần mềm

NỘI DUNG

Khái niệm giao diện người dùng

1

Các quy tắc thiết kế giao diện người dùng

2

Kĩ nghệ phần mềm

3

Mô hình vòng đời cổ điển

4

Mô hình làm bản mẫu

5

1 KHÁI NIỆM GIAO DIỆN NGƯỜI DÙNG

• Tương tác người máy là tương tác xảy ra giữa con người và hệ thống máy tính

• Giao diện người dùng là bộ mặt, hay còn gọi là thành phần trung gian để thực hiện giao tiếp, giữa con người với máy tính

• Giao diện được sử dụng để nhập thông tin vào hệ thống máy tính (đầu vào) và nhận thông tin phản hồi từ máy tính (đầu ra)

CÂU HỎI THẢO LUẬN

Con người thường tương tác với hệ thống máy tính qua các thiết bị nào?

• Hướng dẫn tương tác chung;

• Hướng dẫn về việc hiển thị thông tin;

• Hướng dẫn về việc vào dữ liệu

2 CÁC QUY TẮC THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG

2.1 HƯỚNG DẪN TƯƠNG TÁC CHUNG

Hướng dẫn về tương tác chung bao hàm cả hiển thị thông tin, vào ra dữ liệu và điều khiển toàn bộ hệ thống:

 Tính nhất quán;

 Cho thông tin phảm hồi có nghĩa;

 Yêu cầu kiểm chứng mọi hành động phá huỷ không tầm thường;

 Cho phép dễ dàng lần ngược nhiều hành động;

 Giảm thiểu khối lượng thông tin phải ghi nhớ giữa các hành động;

 Tìm kiếm tính hiệu quả trong đối thoại, vận động và ý nghĩ;

 Dung thứ cho sai lầm;

 Phân loại các hoạt động theo chức năng và tổ chức màn hình hài hoà theo vùng;

 Cung cấp tiện nghi trợ giúp ngữ cảnh;

 Dùng các động từ đơn giản hay cụm động từ ngắn để đặt tên chỉ lệnh

2.2 HƯỚNG DẪN VỀ VIỆC HIỂN THỊ THÔNG TIN

• Thông tin được “hiển thị” theo nhiều cách khác nhau

• Các hướng dẫn sau đây tập trung vào hiển thị thông tin:

 Chỉ hiển thị thông tin có liên quan tới ngữ cảnh hiện tại;

 Hãy dùng định dạng trình bày cho phép hấp thụ nhanh chóng thông tin;

 Dùng nhãn nhất quán, cách viết tắt chuẩn và mầu sắc dự kiến trước;

 Cho phép người dùng duy trì ngữ cảnh trực quan;

 Đưa ra thông báo lỗi có nghĩa;

 Dùng chữ hoa, chữ thường, thụt lề và gộp nhóm văn bản để giúp cho việc hiểu

Những hướng dẫn sau đây tập trung vào việc đưa vào dữ liệu:

• Tối thiểu việc số hành động đưa vào mà người dùng cần thực hiện;

• Duy trì sự nhất quán giữa hiển thị thông tin và các dữ liệu đầu vào (cái vào);

• Cho phép người dùng làm phù hợp cái vào;

• Tương tác nên mềm dẻo nhưng cũng nên hòa hợp với mốt đưa vào ưa thích;

• Khử kích hoạt các chỉ lệnh không thích hợp trong hoàn cảnh của hành động hiện tại;

• Để cho người dùng kiểm soát luồng tương tác;

• Cung cấp trợ giúp cho mọi hành động đưa vào

2.3 HƯỚNG DẪN VỀ VIỆC VÀO DỮ LIỆU

CÂU HỎI THẢO LUẬN

Anh (Chị) hiểu thế nào về nguyên tắc “Tìm kiếm tính hiệu quả trong đối thoại,

vận động và ý nghĩ “?

3 KĨ NGHỆ PHẦN MỀM

• Công nghệ phần mềm là lĩnh vực để hiểu quá trình thiết kế hay vòng đời của phần mềm

• Thiết kế đạt được tính dùng được diễn ra trong suốt quá trình của hệ thống, không chỉ dành riêng cho một giai đoạn

• Đầu ra là các đặc tả yêu cầu người dùng, phân tích nhiệm vụ bằng tài liệu, sơ đồ hay các dạng chuẩn khác

Các nguyên tắc cho tính dùng được

• Việc biểu diễn có tính cấu trúc áp dụng cho quá trình thiết kế một hệ thống giao tiếp:

 Tính dễ học (learnability): áp dụng cho người mới từ việc giao tiếp có hiệu quả

 hoàn thành với hiệu suất tối đa

 Mềm dẻo (flexibility): người dùng và hệ thống có thể giao tiếp với nhau theo

3 KĨ NGHỆ PHẦN MỀM (tiếp theo)

 Vững chắc (robustness): mức độ hỗ trợ cho người dùng để xác định việc thực

hiện thành công và đánh giá hành vi được điều khiển

 Tính dự đoán (predictability): xác định hiệu quả của các hành động tương lai dựa

vào lịch sử giao tiếp đã qua

 Tính thân thiện (familiarity): có cần các tri thức khi sử dụng hệ thống mới

 Tính tổng hợp: thay đổi màu sắc dẫn đến thay đổi trạng thái của một số thành

phần của hệ thống

 Tính khái quát (generalizability): mở rộng các tri thức riêng cho tình huống mới

 Tính nhất quán (consistency): sự tương tự của trạng thái vào ra cho các tình

huống giống nhau hay các nhiệm vụ đích

 Tính khái quát hoá và ổn định: tính ổn định thường tương đối đối với một số đặc

trưng khác của tương tác giữa người dùng và hệ thống

4 MÔ HÌNH VÒNG ĐỜI CỔ ĐIỂN

4 MÔ HÌNH VÒNG ĐỜI CỔ ĐIỂN (tiếp theo)

“Trong thực tế, các giai đoạn của quá trình phát triển phủ nhau và phản hồi cho nhau Trong thiết kế , các vấn đề về đặc tả yêu cầu người dùng đã được xác định; trong cài đặt, các vấn đề thiết kế đã được làm và cứ như vậy Quá trình phần mềm không đơn thuần là tuyến tính nhưng bao gồm một chuỗi lặp của các hoạt động phát triển”:

• Đặc tả yêu cầu người dùng;

• Thiết kế kiến trúc;

• Thiết kế chi tiết;

• Lập trình và kiểm thử;

• Tích hợp và kiểm thử;

• Khai thác và bảo trì

5 MÔ HÌNH LÀM BẢN MẪU

Thiết kế lặp nhằm khắc phục vấn đề cố hữu của đặc tả không đầy đủ

• Mẫu thử (Prototypes)

 Mẫu thử là sự bắt chước hay mô hình, thường dùng cho một hệ thống còn

chưa tồn tại;

 Mô phỏng hay minh hoạ một số đặc trưng của hệ thống;

 Nhiều kiểu mẫu thử:

 Tung gia (Throw - away);

 Gia tăng (incremental);

 Tiến hoá (evolutionary)

 Tại sao dùng?

 Làm mịn đặc tả;

 Làm mịn thiết kế;

5 MÔ HÌNH LÀM BẢN MẪU (tiếp theo)

 Ai dùng? khách hàng, người dùng, chúng ta

 Hạn chế:

 Dáng vẻ;

 Chức năng;

 Tính vững chắc

 Mẫu thử tốt:

 Không cần thời gian;

 Không cần tài nguyên

 Chuẩn bị kịch bản (Walkthrough) nhằm kiểm tra cái người dùng thấy, phải biết và

sẽ làm.

 Hình thức: Mỗi kịch bản sẽ gồm một số màn hình Mỗi màn hình gồm 2 phần: phần

mô tả bằng text và phần hình Minh họa qua một thí dụ nào đó kết hợp menu và phím lệnh

• Các vấn đề quản lý:

 Thời gian;

 Kế hoạch;

 Các đặc tính phi chức năng;

 Hợp đồng

• Các kỹ thuật:

 Storyboards:

 Là kỹ thuật minh hoạ các hình ảnh chụp nhanh của hệ thống có nguồn gốc từ hoạt hình và công nghiệp làm phim Thường được dùng để minh hoạ một kịch bản với các lựa chọn cố định hoặc khá hạn chế

 Ưu điểm:

o Không nhất thiết cần máy tính;

o Có thể kích hoạt;

5 MÔ HÌNH LÀM BẢN MẪU (tiếp theo)

5 MÔ HÌNH LÀM BẢN MẪU (tiếp theo)

 Nhược điểm: mô phỏng chức năng hạn chế Một vài chức năng của hệ thống do người thiết kế cung cấp

 Công cụ: HyperCard [Goodman87, MillerD88], các ngôn ngữ lập trình: VB, VC,

Hypercard hỗ trợ:

 Siêu văn bản;

 Cơ sở dữ liệu;

 Thiết kế giao tiếp

 Mô hình cơ sở của HyperCard là một chồng (stack) card điện tử Mỗi card gồm:

 Phần đồ hoạ: đường, mặt, ;

 Các trường chứa văn bản;

 Các phím lệnh để có thể liên kết với các card khác

TÓM LƯỢC CUỐI BÀI

• Các quy tắc thiết kế giao diện

• Các vấn đề cơ bản về công nghệ phần mềm