HCI lec8 final

BÀI THIẾT KẾ ĐỒ HỌA VÀ TƯƠNG TÁC PGS.TS Đặng Văn Đức dvduc@ioit.ac.vn HÀ NỘI – 2007/10 Chủ đề môn học           Giới thiệu HCI Tính sử dụng hệ thống Thiết kế hướng người sử dụng Khả người Mô hình vào – liệu Nguyên lý thiết kế giao diện Xây dựng prototype Thiết kế đồ họa tương tác Đánh giá kiểm thử giao diện Các chủ đề nghiên cứu dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 2/40 Nội dung       dvduc-2007/10 Lỗi thiết kế hệ thống tương tác Hướng dẫn thiết kế đồ họa Nguyên tắc Gestalt Thiết kế biểu tượng Kỹ thuật thiết kế tương tác Tổng kết Bài 8: Thiết kế đồ họa tương tác 3/40 Lỗi thiết kế?  Web site ‘Midwest Microwave’  Cái quan trọng không quan trọng?  Không chia đoạn, tiêu đề, khoảng trắng  Không tổ chức thành chunks  Thông tin không hữu ích dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 4/40 Lỗi thiết kế?    Sử dụng "may đo" không cần thiết Dòng văn bản, font chữ rối rắm Âm thanh, màu, annimation, hoa văn không phù hợp dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 5/40 Lỗi thiết kế?  Selling bonsai trees and equipment (Website)  Sử dụng hiệu ứng Flash: Menus chuyển động tùy ý theo chiều ngang/dọc  Flash công cụ mạnh, tạo UI tốt UI tồi http://www.bonsaietc.com/BEtcSiteSearchEngine_Frame.htm dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 6/40 Lỗi thiết kế?   Thiết kế Icons America On Line (circa 1995) Thiếu quán  Hai Icons khác biểu diễn đối tượng (ví dụ Software Library)  Cùng Icon biểu diễn hai đối tượng khác (ví dụ Software Library Geographic Store) … dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 7/40 Hướng dẫn thiết kế đồ họa  Trong sách "Designing Visual Interfaces" (1995), Kevin Mullet Darrell Sano trình bày hướng dẫn (guidelines) thiết kế đồ họa   Sự đơn giản (Simplicity)  Sự tương phản (Contrast)  Khoảng trống (White space)  Sự cân đối (Balance)  Căn chỉnh (Alignment) Edward Tufte trình bày chủ đề sách "The Visual Display of Quantitative Information" dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 8/40 Sự đơn giản  Sự hoàn thiện đạt không để bổ sung vào không đáng phải bỏ (Antoine de St-Exupery)  Sự đơn giản nghĩa thiếu trang trí Nó có nghĩa trang trí cần phải phù hợp với thiết kế, lạ lẫm với phải bỏ (Paul Jacques Grillo)    "When in doubt, leave it out" Nguyên lý "Keep it simple, stupid" (KISS) Các kỹ thuật để đạt đơn giản  Sự rút gọn (Reduction)  Tính (Regularity)  Nhiệm vụ kép (Double-Duty) dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 9/40 Sự đơn giản: Rút gọn   Loại bỏ thành phần không cần thiết  Ví dụ trang chủ Google thiết bị điều khiển từ xa Tivo  Ba bước  Quyết định cần thiết để lại thiết kế  Xem xét kỹ lưỡng phần tử (label, control, color, font, line weight) xem có ích cho việc đạt mục tiêu  Loại bỏ Các biểu tượng  Ảnh Icon phải chứa chi tiết tối thiểu, chủ yếu  Biểu tượng "cái kéo" bitmap 16x16, rút gọn  Biểu tượng người tàn tật (Chuẩn Bộ Giao thông Mỹ) dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 10/40 Các nguyên tắc thiết kế Icon  Tính cố kết (Coherency)  Thiết kế tập Icon tổng thể  Icon cần quán màu, kích thước, metaphor, mức trừu tượng (ảnh chụp, phác họa hay biểu tượng)  Icon tập cần phải hiển thị cân đối  Phân biệt trực quan Icon phải rõ ràng Paintbrush (Mất cân đối nửa nửa dưới) dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 27/40 MS Paint Các nguyên tắc thiết kế Icon  Tính rõ ràng (Legibility)  Kích thước đối tượng, nét vẽ phải rõ ràng  Tương phản nền/hình vẽ  Quan tâm đến độ phân giải khoảng cách quan sát  Ít sử dụng nét vẽ hình cung đường cong m 60 c 45 cm 30 cm Khoảng cách quan sát thông thường dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 28/40 Các nguyên tắc thiết kế Icon   Nhận dạng nhớ lại (Recognition Recall)  Chọn lựa metaphor tốt, quen thuộc với người quan sát  Có thể chọn đối tượng cụ thể cho nơi khái niệm hành động trừu tượng khó hiển thị Sử dụng tiết kiệm màu  dvduc-2007/10 Nên sử dụng gam màu gray thêm 1, màu Bài 8: Thiết kế đồ họa tương tác 29/40 Các nguyên tắc thiết kế Icon  Chú ý văn hóa dân tộc  Chú ý sử dụng text hay ký tự abc Icon, nên thiết kế phiên Icon khác  Ví dụ MS Word 97: Phiên tiếng Anh tiếng Đức  Hạn chế sử dụng hình dạng mặt người, biểu tượng bàn tay Icon  Metaphor phụ thuộc vào văn hóa cụ thể dvduc-2007/10  Hộp thư Mỹ xa lạ với nhiều người châu Âu  Nên sử dụng letter tray làm Icon cho thư đến Bài 8: Thiết kế đồ họa tương tác 30/40 Ngôn ngữ Icon  Đối với tập lớn Icon, cần phát triển Iconic language  Ngôn ngữ Icon cách thức tổ hợp biểu tượng thành phần vào Icon phức tạp  Ví dụ với Windows 95:  Document=Aplication + DocType [+ Template] [+Assistant] Elementary Symbols Document Types Document Text document Assistant Spreadsheet document Template Presentation document Database document dvduc-2007/10 Applications Generated Icons Word Word text document Excel Excel document Powerpoint Bài 8: Thiết kế đồ họa tương tác Powerpoint document 31/40 Thiết kế tương tác  Sau phân tích nhiệm vụ, người thiết kế phải chuyển đổi nhiệm vụ thành đặc trưng (features) chương trình   Trong thiết kế UI, khái niệm ‘dẫn đường’ việc thực chuyển đổi nhiệm vụ sang đặc trưng Để dẫn đường trực quan thì:  Cần dễ dàng nhận biết điểm khởi đầu  Hiểu rõ ràng điểm đích  Dấu hiệu rõ ràng đường từ khởi đầu đến đích  Tại thời điểm phải biết đâu, cách tiến lên cách trở lại cách thoát khỏi chương trình dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 32/40 Các yếu tố dẫn đường  Điểm khởi đầu  Cung cấp dấu hiệu điểm bắt đầu rõ ràng để người sử dụng biết khởi đầu nhiệm vụ  Đảm bảo điểm khởi đầu chương trình Nếu nhiệm vụ (task) chương trình khác thực sử dụng Menu command để kết nối  Điểm đích   Người sử dụng có khả dự báo điểm khởi đầu dẫn tới đích mong muốn Đường thoát  Lệnh thoát đánh dấu rõ ràng trường hợp người sử dụng thay đổi ý định hay khởi động lại (sử dụng phím Exit hay Home) dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 33/40 Các yếu tố dẫn đường  Bước hành  Cung cấp rõ ràng báo: người sử dụng nơi tiến trình thực công việc  Thông thường sử dụng mô tả tiêu đề cửa sổ trường hợp xuất nhiều cửa sổ Trong tiến trình đa bước thường bổ sung thêm thông báo, Ví dụ: Step of  Bước  Chỉ rõ ràng cách thực đến bước  Thường sử dụng lựa chọn hay lệnh phù hợp Các phím lệnh có nhãn mô tả để người sử dụng biết thực bị nhấn  Bước trước  Chỉ rõ ràng cách quay trở lại bước trước  Thường sử dụng phím Cancel trong hộp thoại Modal hay phím Back Wizards dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 34/40 Kỹ thuật thiết kế tương tác  Nhận biết bước cửa sổ  Phân nhóm logíc controls cửa sổ Hiển thị theo trật tự từ xuống   Đánh số bước nhiệm vụ Sử dụng cửa sổ đơn  Có thể tổ hợp cửa sổ liên quan vào Property Sheet hay hộp thoại động Ví dụ hộp thoại “Page Setup” Windows  Sử dụng Wizard  dvduc-2007/10 Lý tưởng để thực nhiệm vụ phức tạp Có bước rõ ràng Bài 8: Thiết kế đồ họa tương tác 35/40 Kỹ thuật thiết kế tương tác  Sử dụng hộp thoại Modal   Để người sử dụng thực nhiệm vào thời điểm Không sử dụng cửa sổ không liên quan cho nhiệm vụ dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 36/40 Kỹ thuật thiết kế tương tác  Không bỏ qua bước  Nếu nhiệm vụ có số bước ban đầu sau chúng có bước riêng biệt  Kỹ thuật dẫn đường rõ ràng hình thành hai đường dẫn độc lập từ ban đầu  Ví dụ Add/Remove Programs Properties Windows 95 thực với component program: Nên tách phím Add/Remove thành phím, “Add or Remove Program Components…” “Add or Remove Program…” dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 37/40 Tổng kết     Năm hướng dẫn thiết kế đồ họa cho UI xem xét Qui tắc Gestalt ứng dụng thiết kế đồ họa Các qui tắc thiết kế biểu tượng Kỹ thuật chuyển đổi nhiệm vụ thành đặc trưng chương trình dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 38/40 Vấn đề nghiên cứu   Anh/chị thiết kế trình diễn trang Web kết Search engine Trình bày thiết kế hình giao diện (desktop/Web) nội dung văn mà anh/chị thực  Theo anh/chị trang hình giao diện có thiết kế tốt từ góc độ sử dụng biến thị giác Tại sao?   Những nguyên tắc gestalt sử dụng hình sau đây? Diễn giải Chuẩn ISO thiết kế biểu tượng Trả lời gửi eMail: hci.dvduc@gmail.com dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 39/40 Vấn đề nghiên cứu dvduc-2007/10 Bài 8: Thiết kế đồ họa tương tác 40/40 Câu hỏi?