Phân tích và thiết kế GUI định hướng mẫu

ĐẠI HỌC THÁI NGUYÊN TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG NGÔ THỊ MAI PHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ GUI ĐỊNH HƯỚNG MẪU LUẬN VĂN THẠC SĨ KHOA HỌC MÁY TÍNH Thái Nguyên, 2012 Số hóa Trung tâm Học liệu – Đại học Thái Nguyên http://www.lrc-tnu.edu.vn ĐẠI HỌC THÁI NGUYÊN TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG NGÔ THỊ MAI PHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ GUI ĐỊNH HƯỚNG MẪU Chuyên ngành: Khoa học máy tính Mã số: 60 48 01 LUẬN VĂN THẠC SĨ KHOA HỌC MÁY TÍNH NGƯỜI HƯỚNG DẪN KHOA HỌC PGS TS ĐẶNG VĂN ĐỨC Thái Nguyên, 2012 Số hóa Trung tâm Học liệu – Đại học Thái Nguyên http://www.lrc-tnu.edu.vn Mở đầu Hiện đồ họa máy tính (Computer Graphics) chương trình thông dụng nhất, góp phần quan trọng làm cho giao tiếp người máy tính trở nên thân thiện Thật vậy, giao diện kiểu văn (text) thay hoàn toàn giao diện đồ họa, với công nghệ đa phương tiện (multimedia) đưa ngành Công nghệ thông tin sang phiên Giao diện người sử dụng (UI – User Interface) điểm nơi giao tiếp người sử dụng hệ thống máy tính Nó phần hệ thống, người sử dụng xâm nhập vào hệ thống máy tính UI Phụ thuộc vào UI mà hệ thống thắng lợi hay thất bại việc giúp người sử dụng thực nhiệm vụ Nhiều người sử dụng đánh giá hệ thống thông qua UI, họ cho hệ thống tồi UI tồi UI tồi làm hệ thống khó sử dụng, nguy hiểm sử dụng hệ thống Thông thường mã trình cho chiếm khoảng 50-70% hệ thống, nguồn lực dành cho phát triển UI lớn Theo thống kê UI chiếm khoảng 50% thời gian thiết kế, thời gian cài đặt, thời gian bảo trì kích thước mã trình Phần mềm giao diện ngày phức tạp, đặc biệt với GUI (Graphic User Interface) Công việc phát triển GUI khó khăn GUI tốt làm giảm chi phí cho công việc bảo trì hệ thống Thiết kế giao diện tốt cho hệ thống việc làm dễ dàng Người sử dụng đòi hỏi hệ thống phải làm mà họ mong đợi Người ta nghiên cứu nhiều qui trình, phương pháp làm tăng hiệu trình phân tích thiết kế GUI, có định hướng ứng dụng mẫu thiết kế Một mẫu mô tả vấn đề thường xuyên xuất thiết kế thực thi phần mềm mô tả giải pháp vấn đề theo cách mà sử dụng lại Một cặp vấn đề/giải pháp áp dụng ngữ cảnh Số hóa Trung tâm Học liệu – Đại học Thái Nguyên http://www.lrc-tnu.edu.vn Nhận thấy tính thiết thực vấn đề gợi ý giảng viên hướng dẫn, chọn đề tài: “ Phân tích thiết kế GUI định hướng mẫu” làm đề tài cho luận văn tốt nghiệp Mục tiêu luận văn nghiên cứu mẫu thiết kế khả ứng dụng chúng thiết kế GUI cho hệ thống phần mềm Luận văn sử dụng công cụ phần mềm để thiết kế giao diện đồ họa (GUI – Graphical User Interface) GUI Design Studio Khi dùng GUI Design Studio, mẫu xây dựng nhanh nhiều so với cài đặt cuối cùng, ta đánh giá sớm nhận phản hồi sớm điểm tốt điểm xấu thiết kế Nếu phát vấn đề thiết kế mẫu dễ dàng chỉnh sửa xây dựng nhanh Quan trọng thiết kế có nhiều thiếu sót nghiêm trọng mẫu bị loại bỏ Luận văn được bố cục thành chương Chương tổng quan về thiết kế GUI và mẫu thiết kê Chương thiết kế GUI sở mẫu Chương Xây dựng giao diện thử nghiệm Đối tƣợng phạm vi nghiên cứu Luận văn nghiên cứu phạm vi một số mẫu áp dụng thiết kế giao diện lập trình đồ họa (GUI) Hƣớng nghiên cứu đề tài Nghiên cứu tổng quan mẫu công nghệ phần mềm Tập trung khảo sát mẫu thiết kế ứng dụng chúng việc xây dựng giao diện người sử dụng Số hóa Trung tâm Học liệu – Đại học Thái Nguyên http://www.lrc-tnu.edu.vn CHƢƠNG I: TỔNG QUAN VỀ THIẾT KẾ GUI VÀ MẪU THIẾT KẾ 1.1 Giới thiệu UI 1.1.1 Định nghĩa UI( User interface) Trong nhiều tài liệu, khái niệm UI có ý nghĩa tương tự với HCI Nhưng thật UI tập lĩnh vực nghiên cứu HCI UI hiểu sau: UI bao gồm khái niệm hệ thống máy tính cách thức sử dụng chúng để hoàn thành công việc khác người sử dụng Do UI không mà người nhìn, sờ nghe thấy mà UI tập hợp phương tiện để người tương tác với máy móc, thiết bị, chương trình máy tính hay hệ thống phức tạp UI hiểu tiến trình thiết kế phần mềm ghép nối cho hệ thống máy tính trở nên hiệu quả, dễ sử dụng làm người muốn chúng làm UI mặt, thành phần trung gian để thực giao tiếp người với máy tính Do ta cần nghiên cứu thiết kế UI 1.1.2 Tại cần thiết kế UI Có nhiều lý để tập trung nghiên cứu thiết kế UI Sau vài lý chính: - UI điểm nơi giao tiếp người sử dụng hệ thống máy tính Nó phần hệ thống, nơi mà người sử dụng nhìn, sờ, nghe giao tiếp Người sử dụng xâm nhập vào hệ thống máy tính UI - Phụ thuộc vào giao diện mà hệ thống thắng lợi hay thất bại việc giúp người sử dụng thực nhiệm vụ Nhiều người sử dụng đánh giá hệ thống thông qua UI, họ cho hệ thống tồi UI tồi UI tồi làm hệ thống khó sử dụng nguy hiểm sử dụng hệ thống với UI tồi Số hóa Trung tâm Học liệu – Đại học Thái Nguyên http://www.lrc-tnu.edu.vn  Hệ thống liệu pháp xạ chữa bệnh ung thư Therac-25 gây chết người có UI tồi  Hệ thống rada Aegis tàu chiến USS Vincennes bắn nhầm máy bay dân Iran có UI thiết kế tồi - Với thiết kế giao diện tồi, vấn đề sau nảy sinh: suất lao động thấp, thời gian học sử dụng mức độ lỗi xảy không chấp nhận Do vậy, dẫn tới việc người sử dụng từ chối sử dụng hệ thống - Thông thường mã trình xử lý giao diện với người sử dụng phần mềm ứng dụng chiếm khoảng 50-70%, nguồn lực (thời gian, kinh phí) dành cho phát triển UI lớn Theo thống kê với 74 dự án phần mềm thực vào năm 1992 UI chiếm khoảng 50% thời gian thiết kế, thời gian cài đặt, thời gian bảo trì kích thước mã trình - Phần mềm giao diện ngày phức tạp, đặc biệt với GUI Công việc phát triển GUI khó khăn tương tác người sử dụng hệ thống phức tạp - GUI tốt làm giảm chi phí cho công việc bảo trì hệ thống Việc thiết kế UI tốt quan trọng nhiều lĩnh vực Nhưng giao diện phải đảm bảo có tính sử dụng 1.2 Tính sử dụng hệ thống phần mềm 1.2.1 Định nghĩa tính sử dụng đƣợc Tính sử dụng (Usability) số quan trọng hệ thống phần mềm tương tác Tính sử dụng Bennett đề xuất lần đầu vào năm 1979, sau có nhiều nghiên cứu khác Vào năm 1991, Shacked định nghĩa tính sử dụng “khả hệ thống sử dụng người cách dễ dàng hiệu quả” Tính sử dụng xác định “người sử dụng sử dụng tốt chức hệ thống nào” Số hóa Trung tâm Học liệu – Đại học Thái Nguyên http://www.lrc-tnu.edu.vn Hiện có nhiều chuẩn: ISO 9241-11 (1998), ISO/IEC 9126 (2001), IEEE Std.610.12 (1990) mô hình khái niệm Metrics for Usability Standards in Computing –MUSiC (1997) tính sử dụng Theo ISO 9241-11, tính sử dụng xem phạm vi sản phẩm sử dụng nhóm người xác định để đạt mục tiêu xác định với tính hiệu quả, suất thoả mãn ngữ cảnh sử dụng xác định  Mục tiêu: Kết dự kiến  Hiệu quả: Đem lại kết dự kiến Đạt mục tiêu cách xác đầy đủ (ví dụ tốc độ thực cao, không lỗi)  Năng suất: Tiêu hao lượng tài nguyên phù hợp để đạt mục tiêu cách xác đầy đủ Là thước đo mức độ cố gắng người sử dụng để đạt mục tiêu đề  Sự thỏa mãn: Không bực dọc, lo lắng có quan điểm tích cực với việc sử dụng sản phẩm  Ngữ cảnh ứng dụng: Người sử dụng, nhiệm vụ, thiết bị (phần cứng, phần mềm, …), môi trường vật lý, xã hội  Nhiệm vụ: Các hoạt động cần thiết để đạt mục tiêu Framework ISO 9241-11: Nhằm đặc tả thành phần tính sử dụng quan hệ chúng Khung làm việc hỗ trợ đánh giá sản phẩm: Hình 1-1 Framework ISO 9241-11 Số hóa Trung tâm Học liệu – Đại học Thái Nguyên http://www.lrc-tnu.edu.vn Với khung làm việc tính sử dụng thì: Hiệu (performance): hiệu suất Do hiệu thỏa mãn người sử dụng sử dụng vào việc đo tính sử dụng Độ đo hiệu thỏa mãn người sử dụng tảng so sánh tính sử dụng hệ thống khác Tính sử dụng cải thiện cách tích hợp đặc trưng, thuộc tính biết ngữ cảnh sử dụng cụ thể Tính sử dụng định nghĩa theo nhiều cách khác tài liệu khác Các chuẩn tác giả khác đề xuất tập khác thuộc tính tính sử dụng 1.2.2 Thuộc tính tính sử dụng Các thuộc tính tính sử dụng Nielsen đề xuất năm 1993 gồm sáu thuộc tính sau:  Hiệu quả: Tính xác tính đầy đủ mà với người sử dụng đạt mục tiêu xác định trước  Tính học được: Hệ thống học không?  Năng suất: Một dễ học, có sử dụng nhanh không?  Tính nhớ được: Có dễ nhớ học?  Các lỗi: Ít lỗi xảy dễ vượt qua lỗi?  Thoả mãn mục đích: Có thích thú sử dụng hệ thống? Năm 1994, Mandel liệt kê 10 vi phạm ảnh hưởng đến tính sử dụng theo báo cáo chuyên gia hãng IBM Bao gồm: Menu biểu tượng nhập nhằng Ngôn ngữ cho phép theo hướng hệ thống Hạn chế đầu vào thao tác trực tiếp Hạn chế lựa chọn điểm bật Trình tự bước không rõ ràng Nhiều bước quản lý giao diện thực nhiệm vụ Liên kết phức tạp với ứng dụng khác ứng dụng Phản hồi khẳng định không phù hợp Số hóa Trung tâm Học liệu – Đại học Thái Nguyên http://www.lrc-tnu.edu.vn Hệ thống đề phòng thông minh 10.Các thông điệp lỗi, trợ giúp, tài liệu không phù hợp Có nhiều tiêu chí để đạt tính sử dụng hệ thống Dựa vào tiêu chí người ta xây dựng nguyên lý thiết kế hệ thống có tính sử dụng Nguyên lý thiết kế GUI thoả mãn nguyên lý thiết kế hệ thống có tính sử dụng 1.3 Nguyên lý thiết kế GUI Don Norman đề xuất sáu nguyên lý thiết kế để hệ thống có tính sử dụng, bao gồm: Sự rõ ràng, phản hồi, ràng buộc, qui ước, ánh xạ, quán, gợi ý  Sự rõ ràng: xem phần hệ thống liên quan đến tương tác phải nhìn thấy Sự rõ ràng nguyên tắc mô hình giao tiếp với người sử dụng Giao diện người sử dụng cần có khả giúp người sử dụng nhận biết trạng thái hành hệ thống cần biết phải thực thao tác Ví dụ: Khi di chuột đến vị trí hình, người sử dụng cần biết xảy nhấn chuột  Sự phản hồi: hệ thống thể người sử dụng thực hành động Khi thay đổi, cần phải nhìn thấy Ví dụ: Khi xoá tệp hệ thống không đơn giản hiển thị “sẵn sàng” Khi thực hành động phím bị nhấn hay nhả, trượt dịch chuyển hay đối tượng dịch chuyển theo chạy chuột Các loại phản hồi bao gồm: thị giác, âm xúc giác  Sự ràng buộc: Mức độ khó sử dụng hệ thống liên quan trực tiếp đến tổng số khả Sự ràng buộc giới hạn vật lý, ngữ nghĩa, văn hóa logíc tổng số khả Ví dụ với đồ chơi xe gắn máy (12 chi tiết), thiết kế tận dụng lợi ràng buộc ta khả lắp ráp đơn giản Ta có ràng buộc sau:  Vật lý: Bánh trước lắp vừa vào vị trí Số hóa Trung tâm Học liệu – Đại học Thái Nguyên http://www.lrc-tnu.edu.vn  Ngữ nghĩa: Tài xế ngồi ghế mặt quay phía trước  Văn hóa: Đèn đỏ lắp phía sau, đèn vàng lắp phía trước  Logic: Hai đèn màu xanh đèn màu trắng với  Qui ước: ràng buộc văn hoá Các ràng buộc ban đầu tuỳ ý, chấp nhận dần theo thời gian Tuy nhiên quy ước khác phụ thuộc vào văn hóa khác nhau: Ví dụ:  Tắt công tắc đèn: Mỹ: Bật xuống; Anh: Bật lên  Mở van vòi nước: Mỹ: Vặn ngược chiều kim đồng hồ; Anh: Vặn theo chiều kim đồng hồ  Màu đỏ: Mỹ: Nguy hiểm; Ai cập: Chết chóc; Ấn độ: Sống; Trung quốc: Hạnh phúc  Bàn phím máy tính: Tiếng Anh: QWERTY; Pháp: AZERTY  Ánh xạ: quan hệ điều khiển ảnh hưởng hệ thống Điều khiển khái niệm liên quan đến đối tượng đồ họa giao diện phần mềm Ánh xạ tự nhiên đem lại lợi tương ứng vật lý chuẩn văn hóa Ánh xạ tự nhiên phải tương quan với tri thức giới thực Ví dụ:  Xoay tai lái ôtô phía phải để rẽ phải  Sử dụng âm lớn để nhập số lớn ngược lại giao diện người sử dụng sử dụng âm  Nhất quán: việc nhìn cảm giác yếu tố mấu chốt tương tác người máy tốt Ví dụ:  Bố trí thực đơn quán với chuẩn Windows  Bố trí quán phím OK Cancel ứng dụng Windows  Sự gợi ý: tập thao tác hay thủ tục thực đối tượng “Gợi ý quan sát” người sử dụng nghĩ thực đối tượng Khả tưởng tượng liên quan đến khả người sử dụng xác định cách sử dụng đối tượng quan sát chúng Số hóa Trung tâm Học liệu – Đại học Thái Nguyên http://www.lrc-tnu.edu.vn data error !!! can't not read data error !!! can't not read data error !!! can't not read data error !!! can't not read data error !!! can't not read data error !!! can't not read data error !!! can't not read data error !!! can't not read data error !!! can't not read data error !!! can't not read data error !!! can't not read data error !!! can't not read data error !!! can't not read data error !!! can't not read data error !!! can't not read data error !!! can't not read ... thấy tính thiết thực vấn đề gợi ý giảng viên hướng dẫn, chọn đề tài: “ Phân tích thiết kế GUI định hướng mẫu làm đề tài cho luận văn tốt nghiệp Mục tiêu luận văn nghiên cứu mẫu thiết kế khả ứng... NGHỆ THÔNG TIN VÀ TRUYỀN THÔNG NGÔ THỊ MAI PHƯƠNG PHÂN TÍCH VÀ THIẾT KẾ GUI ĐỊNH HƯỚNG MẪU Chuyên ngành: Khoa học máy tính Mã số: 60 48 01 LUẬN VĂN THẠC SĨ KHOA HỌC MÁY TÍNH NGƯỜI HƯỚNG DẪN KHOA... thống Dựa vào tiêu chí người ta xây dựng nguyên lý thiết kế hệ thống có tính sử dụng Nguyên lý thiết kế GUI thoả mãn nguyên lý thiết kế hệ thống có tính sử dụng 1.3 Nguyên lý thiết kế GUI Don Norman