CTT 534 Thiết kế giao diện LN08 graphics design 1 vi

CTT534 – Thiết Kế Giao Diện Thiết kế đồ họa – Phần Nội dung n n n n 5/24/16 Thiết kế đồ họa (graphic design) Dấu hiệu tương tác (affordance) Tính hợp lí thiết kế HCI Các ràng buộc hữu hình Thiết kế đồ họa (graphic design) n Thiết kế đồ họa: đề cập đến số nguyên tắc mỹ thuật chuyên nghiệp trọng vào giao tiếp thể trực quan (visual communication and presentation) Trong giao diện người dùng, thiết kế đồ họa liên quan đến look-and-feel n q Cảm nhận ban đầu người dùng n q q q 5/24/16 eye catching Truyền tải ấn tượng, tâm trạng, nét đẹp… facilitates finishing the task at hand suggests trust Đây gì? 5/24/16 Dấu hiệu tương tác(affordance) n n "Perceived and actual properties of a thing that determine how the thing could be used" – Don Norman Dấu hiệu tương tác thể tính chất đối tượng, môi trường, cho phép người dùng thực thao tác q 5/24/16 Liên quan đến look-and-feel đối tượng Dấu hiệu tương tác(tt) n Có loại dấu hiệu tương tác q Dấu hiệu tương tác cảm nhận (perceived affordance) n q Dấu hiệu tương tác thật (actual affordance) n 5/24/16 Cho người dùng cảm thấy thao tác thực Hành động thật thực đối tượng Dấu hiệu tương tác cảm nhận n Những thuộc tính đối tượng mà người dùng cảm nhận cách thao tác với đối tượng q q 5/24/16 Button để nhấn Switch để bật Dấu hiệu tương tác cảm nhận (tt) n Dấu hiệu tương tác q 5/24/16 Pull hay Push? Dấu hiệu tương tác cảm nhận (tt) n Dấu hiệu tương tác phụ thuộc vào q q q 5/24/16 Kinh nghiệm, hiểu biết, văn hóa người dùng Dấu hiệu tương tác cảm nhận (tt) n Tay nắm cửa q Ví dụ điển hình lỗi dấu hiệu tương tác • Thanh dọc pull • Thanh ngang, bề mặt phẳng push • Núm xoay, tay cầm nắm vặn • Vị trí tay cầm cửa mở bên trái hay phải 5/24/16 10 Vật biểu thị (signifier) n n n n Dấu hiệu tương tác thể tính chất đối tượng, môi trường, cho phép người dùng thực thao tác Signifier thứ tương tác với dấu hiệu tương tác đối tượng Signifier nhãn (label), dẫn, hình dáng, màu sắc, layout, âm thanh, video, animation, hình dáng chuột… Trên máy tính, sử dụng signifier thiết kế để tương tác với hành động thực giao diện người dùng 5/24/16 19 Signifiers (tt) n Các signifier gì? 5/24/16 20 Affordance HCI design 5/24/16 21 Affordance HCI design (tt) n n n n Trong HCI, giao tiếp ảo, cho có dấu hiệu tương tác đối tượng có thật It does not make sense to talk about interfaces in terms of ‘real’ affordances - Norman Interfaces are better conceptualized as ‘perceived’ affordances Trong đồ họa, giao tiếp hình, người thiết kế điều khiển dấu hiệu tương tác cảm nhận q q 5/24/16 Màn hình hiển thị, thiết bị trỏ, nút chọn, bàn phím Các thao tác bao gồm: chạm, trỏ, nhìn, nhấp chuột pixel hiển thị 22 Affordance HCI design (tt) n Thiết kế giao diện đồ họa q q Cảm nhận có thông qua hình ảnh trực quan Người thiết kế tạo dấu hiệu tương tác trực quan thông qua n n 5/24/16 Những thành ngữ (idiom) quen thuộc Những hình ảnh ẩn dụ 23 Affordance HCI design (tt) n Windows’ scrollbar affordance (MS Word) scroll up distance to top - current position in the document - how big the document is scroll down scroll whole page up scroll whole page down 5/24/16 24 Affordance HCI design (tt) n Lưu tâm đến vấn đề nhận thức q q q q q q Các dấu hiệu tương tác cảm nhận Các ràng buộc Phản hồi Ánh xạ Các mô hình thần kinh (mental model) Các mô hình ý tưởng (conceptual model) Nguồn: sách Don Norman, The Psychology of Everyday Things 5/24/16 25 Các ràng buộc hữu hình n Các giới hạn thao tác cảm nhận từ thể bên đối tượng q 5/24/16 Cho người dùng biết tập khả sử dụng 26 Các ràng buộc hữu hình (tt) n Càng nhiều ràng buộc, sai q 5/24/16 Đặc biệt quan trọng xử lí nhập liệu từ người dùng 27 Các ràng buộc hữu hình (tt) n Lợi ích q q q q n Giới hạn người dùng thực hành động hợp lệ Ngăn ngừa người dùng đưa lựa chọn sai Loại bỏ yêu cầu kiến thức hoàn hảo Nhận dạng hồi tưởng Càng nhiều ràng buộc, sai q q 5/24/16 Càng nhiều ràng buộc, linh động hiệu VD: người dùng expert thích gõ thông tin vào click chọn thông tin có sẵn 28 Các ràng buộc hữu hình (tt) n Ràng buộc vs Tính linh động hiệu Người dùng cần click để nhập IP vào phần địa IP 5/24/16 29 Các ràng buộc hữu hình (tt) n Có loại (Norman, 1999) q q q n Ràng buộc mặt vật lí Ràng buộc mặt văn hóa Ràng buộc mặt logic Ràng buộc vật lí Physical constraints q q 5/24/16 Cách mà đối tượng vật lí giới hạn việc di chuyển vật VD: có cách để insert đĩa CD/DVD vào máy tính 30 Các ràng buộc hữu hình (tt) n Ràng buộc logic q q 5/24/16 Khai thác cảm giác thông thường ngày người dùng để lí giải cách giới hoạt động VD: mối liên hệ logic layout vật lí thiết bị cách thiết bị hoạt động 31 Các ràng buộc hữu hình (tt) n Ràng buộc văn hóa q Một nhóm người biết dấu hiệu n q Đỏ: nguy hiểm; Xanh: tiếp Nhưng có khác biệt vùng khác nhau, chẳng hạn n Màu sắc q n Công tắc đèn q q n Mỹ: xuống tắt Anh: xuống mở Vòi nước q q 5/24/16 Ko phải nơi, màu đỏ tượng trưng cho nguy hiểm Mỹ: vặn ngược chiều kim đồng hồ mở VN: ??? 32 Tóm tắt nội dung n n n n 5/24/16 Thiết kế đồ họa (graphic design) Dấu hiệu tương tác (affordance) Tính hợp lí thiết kế HCI Các ràng buộc hữu hình 33 ... dung n n n n 5/24 /16 Thiết kế đồ họa (graphic design) Dấu hiệu tương tác (affordance) Tính hợp lí thiết kế HCI Các ràng buộc hữu hình Thiết kế đồ họa (graphic design) n Thiết kế đồ họa: đề cập... thanh, video, animation, hình dáng chuột… Trên máy tính, sử dụng signifier thiết kế để tương tác với hành động thực giao diện người dùng 5/24 /16 19 Signifiers (tt) n Các signifier gì? 5/24 /16 20... thị 22 Affordance HCI design (tt) n Thiết kế giao diện đồ họa q q Cảm nhận có thông qua hình ảnh trực quan Người thiết kế tạo dấu hiệu tương tác trực quan thông qua n n 5/24 /16 Những thành ngữ (idiom)