CTT 534 Thiết kế giao diện LN03 UI design process vi

Giới thiệun Thiết kế giao diện là một bộ phận của phát triển phần mềm n Quy trình thiết kế phụ thuộc vào quy trình phát triển n Quy trình thiết kế được tích hợp với quy trình phát triển

Các qui trình thiết kế giao diện

15/03/2016

Nội dung

n Các qui trình thiết kế giao diện

n Các nguyên tắc và qui luật trong thiết kế giao diện

n Giao diện – Tốt hay xấu?

Giới thiệu

n Thiết kế giao diện là một bộ phận của phát triển

phần mềm

n Quy trình thiết kế phụ thuộc vào quy trình phát triển

n Quy trình thiết kế được tích hợp với quy trình phát triển

n Thiết kế phần giao diện được thực hiện ở nhiều giai đoạn khác nhau của dự án

Mô hình thác nước (waterfall model)

Xác định yêu cầu

Mô hình thác nước cải tiến

Xác định yêu cầu

Vấn đề của mô hình thác nước

cuối cùng, kiểm thử chấp nhận (acceptance testing)

q Lãng phí công sức giai đoạn ban đầu

nhắc

q Khó đáp ứng tốt sự thay đổi yêu cầu từ phía khách hàng

q Ít hệ thống phần mềm có được yêu cầu ổn định, rõ ràng

Vòng đời của hệ thống tương tác (Shneiderman)

Vòng đời phát triển các hệ thống tương tác bao

gồm:

1) Thu thập thông tin

2) Xác định yêu cầu và ngữ nghĩa

3) Xác định cấu trúc và trang bị hỗ trợ

4) Đặc tả các thiết bị

5) Phát triển phần mềm

6) Tích hợp hệ thống và triển khai đến người dùng

7) Phát triển (nurture) cộng đồng người dùng

8) Chuẩn bị kế hoạch cải tiến trong tương lai

Vòng đời của hệ thống tương tác (Shneiderman)

1 Thu thập thông tin

q Tổ chức nhóm thiết kế

q Cần có sự tham gia của quản lí và khách hàng

q Tiến hành phỏng vấn người dùng

q Gửi bảng câu hỏi khảo sát đến người dùng

q Ước lượng chi phí phát triển, huấn luyện, sử dụng và bảo trì

q Lập kế hoạch với các mốc thời gian và các đợt review rõ ràng, tường minh

2 Xác định yêu cầu và ngữ nghĩa

q Xác định các yêu cầu phần mềm

q Xác định các luồng công việc

q Tạo các đối tượng và hành động của các tác vụ

Vòng đời của hệ thống tương tác (Shneiderman)

3 Xác định cấu trúc và trang bị hỗ trợ

q Xem xét các dạng hiển thị khác nhau

q Thiết kế kiểu phản hồi cho các hành động

q Duyệt, đánh giá và hiệu chỉnh đặc tả cho thiết kế

q Đánh giá bản prototype, pilot tests (thử nghiệm)

4 Đặc tả các thiết bị

q Chọn các thiết bị phần cứng, phần mềm

q Chọn các thiết bị âm thanh, hình ảnh và các thiết bị ngoại vi khác

q Xem xét môi trường làm việc: độ ồn, ánh sáng, không gian

q Tiếp tục thực hiện pilot tests và hiệu chỉnh thiết kế

Vòng đời của hệ thống tương tác (Shneiderman)

5 Phát triển phần mềm

q Sử dụng các công cụ phát triển phù hợp

q Cài đặt

q Kiểm thử đơn vị (unit testing)

6 Tích hợp hệ thống và triển khai đến người dùng

q Đảm bảo sự tham gia của khách hang ở mỗi giai đoạn

q Thực hiện kiểm thử chấp nhận và hiệu chỉnh hệ thống

q Viết tài liệu và hướng dẫn người dùng sử dụng hệ thống

7 Phát triển (nurture) cộng đồng người dùng

q Hỗ trợ người dùng

q Giám sát quá trình sử dụng và đưa ra đánh giá

Chuẩn bị kế hoạch cải tiến trong tương lai

Thiết kế lặp (iterative design)

Thiết kế

Cài đặt/

Phát triển Đánh giá

Mô hình xoắn ốc (spiral model)

(Boehm 1988)

Mô hình xoắn ốc (tt)

n Qui trình được thể hiện dưới dạng xoắn ốc thay vì một chuỗi các hoạt động liên tiếp

n Mỗi lần lặp trong mô hình xoắn ốc tương ứng với

một pha trong qui trình

n Không tồn tại các pha cố định như đặc tả hay thiết kế

cầu

n Rủi ro định đánh giá và giải quyết trong suốt qui

trình

Mô hình xoắn ốc cho thiết kế giao diện

n Là một bước cải tiến của mô hình thiết kế lặp

Thiết kế

Cài đặt/Phát triển Đánh giá

Mô hình xoắn ốc cho thiết kế giao diện (tt)

n Các vòng lặp đầu sử dụng các proptotye chi phí

thấp

n Cung cấp nhiều prototype thay thế khác nhau

n Các vòng lặp sau sẽ cải tiến tốt hơn

n Chỉ các bản release trưởng thành ở các vòng lặp

sau mới được gửi chuyển giao cho người dùng

Thiết kế hướng người dùng

(user-centered design)

n Còn được gọi là Participatory Design

n Một dạng mô hình thiết kế xoắn ốc

n Tập trung vào người dùng và tác vụ

n Đặt người dùng vào qui trình phát triển

và đôi khi cũng là người thiết kế

n Liên tục đánh giá

Thiết kế hướng người dùng (tt)

n Thuận lợi

q Có được thông tin chính xác và gợi ý hữu ích

q Cơ hội để tranh luận giữa các lựa chọn thiết kế

q Cho phép người dúng có cơ hội tác động đến thiết kế

n Bất lợi tiềm ẩn

vào qui trình phát triển

Qui trình cho đồ án môn học

1 Phân tích người dùng và nghiệp vụ

2 Tạo các bản phác họa ban đầu

3 Prototype ban đầu

Áp dụng UCD vào đồ án

n Các bạn chính là người dùng tiềm năng

n Người dùng giúp phát kiến ý tưởng và phản hồi

n Người dùng kiểm tra và phản hồi

khác kiểm và phản hồi về thiết kế

n Người dùng

Vào cuối đồ án, sinh viên sẽ đánh giá 1 đồ án của nhóm

Làm thế nào để thành công trong

làm việc nhóm?

n Xác định mục tiêu và mong đợi một cách rõ ràng

n Phân công trách nhiệm và công việc rõ ràng

Nội dung

n Các qui trình thiết kế giao diện

n Các nguyên tắc và qui luật trong thiết kế giao diện

n Giao diện – Tốt hay xấu?

Các nguyên tắc

n Xác định mức độ kĩ năng của người dùng

q Người dùng mới (novice/first-time users)

q Người dùng có hiểu biết nhất định (knowledgeable intermittent users)

q Người dùng là chuyên gia, sử dụng thường xuyên (experts and frequent users)

Các nguyên tắc

n Áp dụng 8 quy tắc vàng của Shneiderman khi thiết kế giao diện

q Slide sau

n Ngăn ngừa lỗi

q Thông báo lỗi cần đầy đủ thông tin và có tính xây dựng

q Tổ chức các màn hình và menu theo chức năng

q Cung cấp phản hồi về trạng thái hiện tại của giao diện (hình ảnh, âm

thanh, haptic)

q Chỉ cho phép chức năng phù hợp (correct actions)

n VD, tô xám menu đang được chọn

q Hoàn chỉnh chuỗi hành động (complete sequences)

n VD, cửa sổ dạng wizard lúc nào cũng phải có nút Next và Finish

n Tăng tính tự động nhưng vẫn đảm bảo sự điều khiển của người

8 quy tắc vàng của Shneiderman

n Cố gắng đảm bảo tính nhất quán

n Hỗ trợ tính khả dụng phổ quát (universal)

n Cung cấp phản hồi với đầy đủ thông tin

n Thiết kế hộp thoại đóng

n Ngăn ngừa lỗi, phục hồi nhanh

n Cho phép hủy bỏ thao tác dễ dàng

n Cho phép người dùng khả năng điều khiển giao

diện

n Giảm tải bộ nhớ

Tổng kết

n Thiết kế hướng người dùng là qui trình thường

được áp dụng (preferable) trong việc thiết kế giao

diện người dùng

n Trong môn học này, chúng ta sẽ áp dụng qui trình này

n Các nguyên tắc và qui luật trong thiết kế giao diện

học

Let Your Ideas Flow

n Chindogu, Japan

Tốt hay xấu?

Tốt hay xấu?

Vấn đề về thứ tự các mục chọn?

Vấn đề về icon?

Windows Explorer

n Lê Minh Quân

n Phan Minh Tài

Sometimes Usability is not important

n Credit: Trần Huỳnh Công Toại

n Lê Thành Quang

Galaxy Ace

n Lê Thành Quang

Sort dialog in Excel

n Nguyễn Bảo Long

n Nguyễn Hoàng Phương