Bài giảng Thiết kế và phát triển giao diện - Trịnh Thị Kim Chi

Bài giảng Thiết kế và phát triển giao diện cung cấp cho người học các kiến thức về: Các lỗi thiết kế hệ thống tương tác, tính sử dụng là gì, các thuộc tính của tính sử dụng, mô hình sự chấp nhận của hệ thống, nguyên lý thiết kế hệ thống có tính sử dụng, kỹ nghệ của hệ thống có tính sử dụng. Mời các bạn cùng tham khảo.

Giảng viên: Trần Thị Kim Chi Các lỗi thiết kế hệ thống tương tác Tính sử dụng gì? Các thuộc tính tính sử dụng Mơ hình chấp nhận hệ thống Ngun lý thiết kế hệ thống có tính sử dụng Kỹ nghệ hệ thống có tính sử dụng Các lỗi thiết kế hệ thống tương tác Các thí dụ lỗi thiết kế hệ thống tương tác • Thí dụ 1: phiếu bầu cử tổng thống Mỹ năm 2000 • Thí dụ 2:Thiết kế cửa vào • Thí dụ 3:Thiết kế hộp thoại in mẫu chứng chỉ(p 21) Các lỗi thiết kế hệ thống tương tác Các thí dụ lỗi thiết kế hệ thống tương tác How you open the toothpaste? • Design suggestion • A more obvious design might be to provide the type of sealed cap used on many soft-drink bottles, where unscrewing the cap breaks the seal • At the very least it would be helpful to include directions on the tube for piercing the seal The directions should be illustrated graphically so they could be understood by speakers of any language Các lỗi thiết kế hệ thống tương tác Các thí dụ lỗi thiết kế hệ thống tương tác Các lỗi thiết kế hệ thống tương tác Các thí dụ lỗi thiết kế hệ thống tương tác • Where you plug the mouse? • Where you plug the keyboard? • top or bottom connector? • Do the color coded icons help? Các lỗi thiết kế hệ thống tương tác Các thí dụ lỗi thiết kế hệ thống tương tác (i) A provides direct adjacent mapping between icon and connector (ii) B provides color coding to associate the connectors with the labels Các lỗi thiết kế hệ thống tương tác Các thí dụ lỗi thiết kế hệ thống tương tác So sánh Coffee machine Các lỗi thiết kế hệ thống tương tác Plugging in a USB connector Plugging in a USB connector So sánh Các lỗi thiết kế hệ thống tương tác Các thí dụ lỗi thiết kế hệ thống tương tác Nguyên lý thiết kế hệ thống có tính sử dụng • Sự phản hồi (Feedback) – Những hệ thống đáp ứng người dùng thực hành động – Khi thay đổi, phải nhìn thấy vd: change the font face (ms word), remove file (explorer) – Các loại phản hồi bao gồm : thị giác, âm thanh, xúc giác Nguyên lý thiết kế hệ thống có tính sử dụng • Sự gợi ý (Suggest, Affordance) – 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 • Các đối tượng vật lý : hình dáng bề ngồi gợi ý cách sử dụng đối tượng Vd: ghế, phím nhấn, nút trượt, cánh cửa vào,… Nguyên lý thiết kế hệ thống có tính sử dụng • Sự gợi ý (Suggest, Affordance) – Sự gợi ý GUI: • Con chạy gợi ý trỏ, hình dáng chạy gợi ý thao tác, … • Các button gợi ý nhấn để thực nhiệm vụ • Bàn phím gợi ý nhấn để thao tác • Làm lõm phần tử gợi ý disable • Màn hình trắng có chạy nhấp nháy gợi ý người dùng nhập thơng tin • Các phần tử có xám gợi ý khơng thể thao tác • Những đường nối gợi ý dịch chuyển Nguyên lý thiết kế hệ thống có tính sử dụng • Sự gợi ý (Suggest, Affordance) Nguyên lý thiết kế hệ thống có tính sử dụng • Ánh xạ: – Là 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 – Vd: Xoay tay lái ô tô theo chiều kim đồng hồ để điều khiển xe rẽ phải, xoay nút sử dụng âm theo chiều kim đồng hồ tăng âm lượng ngược lại, chọn số lớn cho âm lớn, … Ngun lý thiết kế hệ thống có tính sử dụng • Ánh xạ: Nguyên lý thiết kế hệ thống có tính sử dụng • Tính qn (Constraints) • Nhất quán việc nhìn cảm giác yếu tố mấu chốt HCI tốt Nguyên lý thiết kế hệ thống có tính sử dụng • Sự ràng buộc (Constraints) – 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, logic tổng số khả Ngun lý thiết kế hệ thống có tính sử dụng • Quy ước: ràng buộc văn hóa Nó tùy thuộc vào văn hóa khác Vd: – Cơng tắc đèn: • Mỹ : bật xuống tắt, Anh: bật lên tắt – Van nước : • Mỹ : ngược chiều kim đồng hồ mở, • Anh: ngược chiều kim đồng hồ đóng – Màu đỏ : • • • • Mỹ: nguy hiểm Ai cập : chết choc Ấn độ : sống Trung Quốc : hạnh phúc – Bàn phím máy tính : • QWERTY (tiếng Anh) • AZERTY (tiếng Pháp) Ngun lý thiết kế hệ thống có tính sử dụng • Sự ràng buộc (Constraints) Nguyên lý thiết kế hệ thống có tính sử dụng • Sự ràng buộc (Constraints) – 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, logic tổng số khả Kỹ nghệ hệ thống có tính sử dụng  Giai đoạn thiết kế  Người sử dụng ai?  Họ biết liên quan đến UI?  Môi trường làm việc họ sao?  Mục tiêu họ gì?  Họ cần thơng tin nào?  Họ thực bước để đạt mục tiêu đề ra? 46 Kỹ nghệ hệ thống có tính sử dụng  Giai đoạn cài đặt: Do khơng dự đốn tính sử dụng hệ thống nên phải xây dựng mẫu (prototype) Kỹ nghệ hệ thống có tính sử dụng  Giai đoạn đánh giá : thực thử nghiệm mẫu, sử dụng phương pháp khác phương pháp Heuristic, phương pháp quan sát người dùng thao tác với UI  Điều quan trọng kỹ nghệ hệ thống có tính tiện dụng thiết kế lặp Nghĩa thực vài lần để tái thiết kế giao diện, xây dựng mẫu tiếp tục đánh giá, có giao diện tiện dụng mong đợi dddddddddddddddddddddddd Create by: quyetnv87@gmail.com Phân tích thiết kế phần mềm ... thiết kế lặp Nghĩa thực vài lần để tái thiết kế giao diện, xây dựng mẫu tiếp tục đánh giá, có giao diện tiện dụng mong đợi dddddddddddddddddddddddd Create by: quyetnv87@gmail.com Phân tích thiết. .. speakers of any language 1 Các lỗi thiết kế hệ thống tương tác Các thí dụ lỗi thiết kế hệ thống tương tác Các lỗi thiết kế hệ thống tương tác Các thí dụ lỗi thiết kế hệ thống tương tác • Where you... a USB connector So sánh Các lỗi thiết kế hệ thống tương tác Các thí dụ lỗi thiết kế hệ thống tương tác Các lỗi thiết kế hệ thống tương tác Các thí dụ lỗi thiết kế hệ thống tương tác Tính sử dụng