Bài giảng môn Tương Tác Người Máy và giao diện đồ họa

ội dung môn học  Chương 1:Tổng quan về tương tác người máy  Cung cấp kiến thức về khái niệm, vai trò, các thành phần chính của hệ tương tác, phương tiện và công cụ tương tác, các lĩnh vực liên quan đến việc xây dựng các hệ tương tác  Chương 2: Tâm lý nhận thức của con người trong giao tiếp và xử lý  Trình bày cách nhận thức và cách thức xử lý thông tin của con người. Phân tích các khả năng của con người trong lập luận và giải quyết vấn đề  Chương 3: Nhân tố máy tính trong tương tác người máy  Trình bày khả năng tương tác của máy tính, các thành phần cơ bản của máy tính, khả năng xử lý thông tin của máy tính

3/2/2016 TƯƠNG TÁC NGƯỜI – MÁY VÀ GIAO DIỆN ĐỒ HỌA  GV: Đỗ Thị Nhâm  Bộ môn: Công nghệ phần mềm  Email: dtnham@gmail.com 3/2/2016 Tài liệu tham khảo  Lương Mạnh Bá (2005) Tương tác người máy Nhà xuất Đại học Quốc gia Hà Nội  Jenny Preece et al (1994) Human-Computer Interaction, Addison-Wesley  Dix, Finlay, Abowd and Beale (1993) Human Computer Interaction (course and book), PrenticeHall, second edition Mục tiêu môn học  Sinh viên có kiến thức tương tác người máy, quy trình nguyên tắc thiết kế giao tiếp người dùng  Thực xây dựng số giao diện người dùng cụ thể  Có khả phân tích, đưa giao diện đồ họa phù hợp tình thực tế  Có khả sử dụng số công cụ hỗ trợ thiết kế giao diện đồ họa 3/2/2016 Kế hoạch học tập  Khối lượng: 30 tiết lý thuyết lớp  Đánh giá kết học tập  Điểm chuyên cần: tính điểm danh (5 buổi bất kỳ)  Điểm kỳ: Thi tự luận trắc nghiệm (không thông báo trước) + tập nhà  Cuối kỳ: Thi tự luận trắc nghiệm Nội dung môn học  Chương 1:Tổng quan tương tác người máy  Cung cấp kiến thức khái niệm, vai trò, thành phần hệ tương tác, phương tiện công cụ tương tác, lĩnh vực liên quan đến việc xây dựng hệ tương tác  Chương 2: Tâm lý nhận thức người giao tiếp xử lý  Trình bày cách nhận thức cách thức xử lý thông tin người Phân tích khả người lập luận giải vấn đề  Chương 3: Nhân tố máy tính tương tác người máy  Trình bày khả tương tác máy tính, thành phần máy tính, khả xử lý thông tin máy tính 3/2/2016 Nội dung môn học  Chương 4: Các nguyên tắc giao tiếp người dùng - máy tính  Trình bày dạng tương tác sử dụng thiết kế giao diện Các nguyên tắc thiết kế giao tiếp người - máy  Chương 5: Quy trình xây dựng hệ tương tác người – máy  Trình bày quy trình cách tiếp cận để kế hệ tương tác  Chương 6: Thiết kế giao diện tương tác người máy  Trình bày quy trình thiết kế giao diện nguyên tắc thiết kế giao diện tốt 3/2/2016 Tổng quan tương tác người máy (Human-computer interaction (HCI)) Nội dung  Khái niệm tương tác người – máy  Vai trò tương tác người – máy  Cách tổ chức hệ tương tác  Các lĩnh vực liên quan 3/2/2016 Khái niệm  Có nhiều định nghĩa khác tương tác người – máy  Định nghĩa  Tương tác người - máy tập trình, đối thoại hành động qua người sử dụng tương tác với máy tính (Backer Buxton (1987))  Định nghĩa  Tương tác người - máy lĩnh vực liên quan đến thiết kế, đánh giá cài đặt hệ thống máy tính tương tác cho người sử dụng nghiên cứu tượng xảy (Hiệp hội CNPM SIGCHI) Ví dụ Thế hệ máy tính Hệ điều hành MS-DOS Máy tính cá nhân Ngày 3/2/2016 Vai trò tương tác người - máy  Tạo Hệ thống an toàn sử dụng (Usability) Hệ thống chức  Usability: Là khái niệm HCI hiểu làm cho hệ thống dễ học dễ dùng  Nghiên cứu tương tác người máy không đơn nghiên cứu cách xây dựng giao diện thân thiện với người dùng mà khoa học để xây dựng, bố trí chương trình tốt giúp người dùng hoàn thành công việc cách nhanh chóng dễ dàng Vai trò tương tác người - máy  Ví dụ điều khiển ti vi 3/2/2016 Lịch sử phát triển  Giai đoạn đầu máy tính, UI không xem trọng  Đầu năm 70: Hình thành khái niệm giao diện người máy (MMI - Man Machine Interface) sau thay đổi thành khái niệm UI  Cuối năm 70, đầu năm 80: Xuất khái niệm “thân thiện người sử dụng” dành cho sản phẩm có UI tốt Lịch sử phát triển (tiếp)  Những năm 80: Xuất khái niệm tương tác người máy (HCI - Human Computer Interaction) Xuất MS Windows với GUI  Những năm 90 năm 2000: Có nghiên cứu thực ảo, nhận dạng tiếng nói, nhận dạng chữ viết tay ứng dụng chúng vào việc thiết kế vào/ra HCI 3/2/2016 Tại phải nghiên cứu HCI  UI nơi giao tiếp người dùng máy tính Không thể xâm nhập vào máy tính UI  Trong lập trình:  Một phần lớn mã liên quan đến giao diện  Nếu thiết kế giao diện sai=> phải làm lại  Nếu không sửa được=> người dùng phải sử dụng giao diện không tốt  Thiết kế giao diện tốt => giảm thời gian lập trình Tại phải nghiên cứu HCI  Về mặt kinh tế:  Tăng suất lao động  20 người dùng  x 230 ngày  x 100 hình giao tiếp ngày  x 10 giây hình giao tiếp _  = 1278 giờ(32 tuần) 3/2/2016 Tại phải nghiên cứu HCI  Tăng suất lao động  người điều hành  x 500 lần chọn bảng ngày  x giây lần chọn  x 230 ngày năm _  = 480 (12 tuần) Tại phải nghiên cứu HCI  Giảm chi phí đào tạo  20 nhân viên  x ứng dụng năm  x 2.5 ngày ứng dụng _  = 100 ngày (20 tuần) 3/2/2016 Tính dự đoán  Người dùng dựa vào tri thức biết để xác định tương tác dự báo kết  Ví dụ thiết kế Tính dự đoán  Ví dụ  Mở tệp: cửa sổ hội thoại xuất để chọn tên tệp => Ghi tệp: cửa sổ hội thoại xuất để chọn tên tệp 34 3/2/2016 Tính tổng hợp  Tính dự đoán tập trung vào khả xác định động tác dựa vào qua  Tính tổng hợp cho phép hình thành mô hình hành vi hệ thống từ chuỗi tương tác trước  Khi trạng thái hệ thống thay đổi, người dùng phải dễ dàng nhận biết thay đổi  Vd: hệ thống điều khiển trực tiếp có tính tổng hợp tốt Khi người dùng chuyển tệp từ thư mục sang thư mục khác thao tác gắp thả, nhận thay đổi, khác hẳn với hệ thống điều khiển dòng lệnh Tính thân thiện  Được đo tương hỗ tri thức tồn tri thức cần có để thực tương tác có hiệu  Ví dụ: công nghệ soạn thảo văn bản, có tương tự bàn phím máy chữ máy tính 35 3/2/2016 Tính khái quát  Tính khái quát tính chất cho phép người dùng mở rộng tri thức từ ứng dụng cụ thể sang tình tương tự để dự báo mô hình tương tác hoàn thiện  Ví dụ: Trong gói đồ họa: hình vuông hình chữ nhật có ràng buộc; hệ thống window, thao tác cắt dán áp dụng cho đối tượng Tính quán  Hệ thống nên hỗ trợ việc tạo nên kỹ cho người dùng hành vi tương tự tình tương tự  Ví dụ: Tính quán phải áp dụng nhiều tình huống: cách đặt tên, cách cung cấp tham số cho lệnh, … 36 3/2/2016 b) Tính mềm dẻo  Liên quan đến nhiều cách mà người dùng máy trao đổi thông tin  Thể qua khả đáp ứng hệ thống với người dùng khác tình khác  nguyên tắc thể tính mềm dẻo:  Đối thoại chủ động  Đa luồng  Di trú nhiệm vụ  Thay  Cá nhân hóa Đối thoại chủ động  Kiểu đối thoại ưu tiên hệ thống  Hệ thống chủ động đối thoại  Người dùng đơn đáp ứng yêu cầu  Ví dụ: hộp thoại ngăn cấm người dùng đưa thông tin trực tiếp vào  Kiểu đối thoại ưu tiên người dùng  Người dùng hoàn toàn chủ động đối thoại  Tuy nhiên việc chủ động làm vết nhiệm vụ mà người dùng chủ động đề nghị mà chưa hoàn thành 37 3/2/2016 Đa luồng  Một luồng phần đối thoại có liên quan đến nhiệm vụ  Đa luồng cho phép hỗ trợ nhiều nhiệm vụ thời điểm  Có hai đặc trưng đa luồng  Nhiều kênh cho phép thực nhiệm vụ  Mở cửa sổ = nhấn kép chuột biểu tượng; dùng phím nóng; nói « mở cửa sổ »  Một biểu diễn đơn tạo cách trộn kênh  Hệ thống cảnh báo = cửa sổ cảnh báo + sound (bipbip) Di trú nhiệm vụ  Chuyển điều khiển thực nhiệm vụ người dùng hệ thống  Ví dụ:  Kiểm tra lỗi tả văn  Điều khiển bay buồng lái 38 3/2/2016 Thay  Tập giá trị tương đương thay cho tùy theo ứng dụng  Ví dụ: lựa chọn kích thước: cm, inch, point Cá nhân hóa  Tính thay đổi tự động mà hệ thống muốn thực dựa vào tri thức người dùng  Ví dụ: người dùng thay đổi ảnh nền, tên, phím nóng mà thích / hay sử dụng 39 3/2/2016 c) Tính vững  Tính vững hệ thống khả hỗ trợ việc thực thành công khẳng định đích nhiệm vụ  Một số tiêu chí thể tính vững chắc:  Tính quan sát (Observability)  Tính khôi phục (Recoverability)  Tính đáp ứng (Responsiveness)  Tính tương hợp nhiệm vụ (Task conformance) Tính quan sát  Cho phép người dùng đánh giá trạng thái bên hệ thống nhờ biểu diễn cảm nhận giao tiếp  Thiết kế hệ thống phải đảm bảo cho không hành động mà trạng thái nhìn thấy  Ví dụ: Thao tác gắp thả tệp từ thư mục chuyển vào thư mục khác 40 3/2/2016 Tính khôi phục  Người dùng gây lỗi muốn sửa lỗi  Tính khôi phục khả đạt tới đích mong muốn sau nhận số lỗi tương tác trước  Khôi phục kiểu tiến: Chấp nhận trạng thái tại, đàm phán từ trạng thái tiến trạng thái đích  Khôi phục kiểu lùi: thử bỏ ảnh hưởng tương tác trước quay lại trạng thái trước xử lý  Ví dụ: khôi phục văn sau thao tác lỗi nhờ thao tác “undo” hệ soạn thảo văn Tính đáp ứng  Đo vận tốc giao tiếp người dùng máy tính  Thời gian đáp ứng thời gian cần thiết để thay đổi trạng thái  Mong muốn: đáp ứng tức thì, nhiên hệ thống phải có thông báo nhận yêu cầu xử lý 41 3/2/2016 Tính tương hợp nhiệm vụ  Hệ thống thiết kế đảm bảo đáp ứng đầy đủ yêu cầu đặc tả  Tuy nhiên hệ thống nên có khả cho phép người dùng định nghĩa nhiệm vụ 4.2.3 Các mô thức tính dùng  Tại cần nghiên cứu mô thức ?  Liên quan đến việc thiết kế hệ thống tương tác   Các hệ thống phải thiết kế để đảm bảo tính dùng Tính dùng được đánh ? Có đo hay không ?  Các hệ tương tác thiết kế thành công cho phép cung cấp mô thức cho việc phát triển hệ tương tác tương lai  Xây dựng hệ tương tác “tiện dụng hơn” hệ tương tác tồn 42 3/2/2016 4.2.3 Các mô thức tính dùng             Mô thức phân chia thời gian (Time Sharing) Các thiết bị hiển thị quan sát Các công cụ lập trình Máy tính cá nhân Hệ thống Windows giao diện WIMP Cảnh trí Điều khiển trực tiếp Ngôn ngữ ngược với hành động Siêu văn Đa thể thức WEB Giao tiếp dựa vào tác tử a) Phân chia thời gian  Xuất vào thập kỷ 1960  Cho phép chia sẻ tài nguyên tính toán cho nhiều người sử dụng (Multi-users)  Cơ chế lập lịch cho phép nhiệm vụ thi hành  Lưu chuyển đổi trạng thái người sử dụng trạng thái chương trình họ  Gán time slots cho công việc: Job1: 0-5; Job 2: 510; Job 3: 10-15  Ưu điểm: so với xử lý theo lô (batch processing)  Gia tăng lượng thông tin người dùng máy tính  Cho phép người dùng tích cực có tương tác kịp thời 43 3/2/2016 b) Các thiết bị hiển thị quan sát  Trước đó, máy tính nhập hay hiển thị thông tin thông qua bìa đục lỗ(các bit 0/1)  Giữa năm 1950s, thiết bị hiển thị quan sát đời  Được ứng dụng quân  Chương trình Sketchpad (Ivan Sutherland, 1962)  Lần cho phép biểu diễn thông tin dạng ảnh lên thiết bị  Cho phép người dùng sử dụng máy tính để tạo cách nhanh chóng mô hình trực quan, tinh vi hình hiển thị  Giúp nâng cao khả tương tác người máy tính c) Các công cụ lập trình  Ý tưởng dùng máy tính làm phương tiện giúp đỡ người giải vấn đề Douglas Engelbart đưa vào năm 1950  Engelbart đồng đề xuất cần phát triển công cụ lập trình làm sở cho việc phát triển hệ thống phức tạp  Ưu điểm:  Các thành phần nhỏ thiết kế tốt hiểu cách thấu đáo cho phép tạo công cụ lớn  Một công cụ lớn hiểu rõ, cho phép tạo công cụ lớn tiếp tục 44 3/2/2016 d) Máy tính cá nhân  Trước năm 1970, máy tính có kích thước lớn, đặt phòng thí nghiệm, nhiều người sử dụng chung máy tính  Đến năm 1970, bắt đầu xuất máy tính cá nhân với kích thước nhỏ hơn, giúp cho việc sử dụng công cụ lập trình trở nên thuận tiện  Ngày máy tính cá nhân ngày nhỏ gọn, Rất khó để phân biệt máy cá nhân, máy chủ hay máy trạm e) Hệ thống Windows giao diện WIMP  Con người có khả suy nghĩ nhiều vấn đề     thời điểm Con người thường dừng công việc làm để chuyển sang công việc liên quan khác Nếu hệ thống máy tính cho phép người sử dụng chạy chương trình từ đầu đến cuối không phù hợp với dòng suy nghĩ người dùng Máy tính cá nhân phải mềm dẻo khả thay đổi chủ đề người Hệ thống cửa sổ giao diện WIMP chế tương tác quen thuộc 45 3/2/2016 f) Cảnh trí  Đưa khái niệm, hình ảnh sống vào máy tính, giúp người dùng nhanh chóng quen với khái niệm  Vídụ: khái niệm thùng rác, bảng tính,… g) Điều khiển trực tiếp  Nguyên lý:  Tính nhìn thấy đối tượng quan tâm:  Gia tăng hoạt động với phản hồi nhanh chóng hành động  Khuyến khích người dùng khám phá mà không gặp phải hậu nặng nề  Mọi hành động có cú pháp xác  Thay ngôn ngữ dòng lệnh việc điều khiển trực tiếp đối tượng nhìn thấy  Ví dụ:  Giao diện: kéo thả file vào thùng rác thay sử dụng lệnh rm  Trò chơi điện tử  Hiện thực ảo 46 3/2/2016 h) Siêu văn  Siêu văn khái niệm quen thuộc, đặc biệt môi trường WEB  Là kỹ thuật cho phép truy nhập cách ngẫu nhiên vào văn  Văn hiểu khái niệm mởrộng, không phụ thuộc vào không gian lưu trữ vật lý, phần văn nằm tệp khác máy, máy khác mạng website  Thông tin siêu văn truy cập phi tuyến tính (truy cập tuyến tính: truy cập từ đầu đến cuối) i) Đa thể thức  Hệ thống tương tác thông thường: gồm đầu vào (bàn phím, chuột) đầu ra(màn hình hiển thị) Các thiết bị vào gọi kênh liên lạc hệ thống  Hệ thống đa phương thức: sử dụng nhiều kênh liên lạc khác với người  Mỗi kênh liên lạc gọi phương thức tương tác  Mọi hệ thống tương tác coi đa phương thức với người dùng sử dụng kênh thị giác xúc giác để điều khiển máy tính 47 3/2/2016 k) WEB  WEB phát triển quan trọng ngành CNTT  Nội dung WEB: văn bản, hình ảnh, phim, âm thanh, siêu liên kết  Giao tiếp đồ họa trình duyệt WEB trực quan dễ dùng, cho phép người dùng truy nhập thông tin đa phương tiện cách dễ dàng thao tác di chuột nhấn phím Giao tiếp dựa vào tác tử  Ví dụ  Tác tử thư tín làm nhiệm vụ lọc thư  Tác tử web dò tìm trang web  Excel: tác tử tính tổng số  Word: kiểm tra lỗi tả tự động  Ưu điểm: Có thể thay hoạt động người dùng để thực số nhiệm vụ 48 [...]... các hệ tương tác  Các thành phần chính của hệ tương tác  Phương tiện và công cụ tương tác  Chất lượng tương tác  Các lĩnh vực liên quan đến việc xây dựng các hệ tương tác 9 3/2/2016 3.1 Các thành phần chính của hệ tương tác a Môi trường và ngữ cảnh  Tổ chức xã hội loài người (Human Social Organization): Liên quan đến việc xem loài người như thực thể xã hội tương tác:  Mô hình hoạt động con người. .. 3/2/2016 c Máy tính và kiến trúc tương tác  Các thiết bị hỗ trợ vào ra (I/O Devices): Kỹ thuật xây dựng các kỹ thuật hỗ trợ giao tiếp giữa người – máy  Các loại thiết bị vào/ra máy tính  Tính chất của thiết bị vào/ra: trọng lượng, băng thông,  Thiết bị ảo c Máy tính và kiến trúc tương tác  Kỹ thuât đối thoại (Dialogue Techniques): Kiến trúc phần mềm cơ sở và kỹ thuật để tương tác với người sử dụng... Windows và Explorer đem lại cho Microsoft lợi nhuận cực lớn  Windows được sao chép lại từ giao diện của Macintosh !!!  Giao diện đẹp dễ nhận được hợp đồng  Giao diện tồi có thể bị loại ngay từ đầu cho dù chương trình tốt đến mấy 8 3/2/2016 Tại sao phải nghiên cứu HCI  Máy tính đã xuất hiện khắp mọi nơi: điều khiển máy bay, ô tô, dàn nghe nhạc  Giao diện người – máy tính tốt => giao diện người –... khiển máy sao chụp, thang máy, a Môi trường và ngữ cảnh  Sự phù hợp người – máy (Human Machine Fit): Thiết kế để đạt tới sự phù hợp giữa các đối tượng thiết kế và việc sử dụng chúng  Các kỹ thuật để đạt tới sự phù hợp  Lựa chọn và thích nghi hệ thống  Lựa chọn và thích nghi người sử dụng: Sự tương thích giữa đặc điểm người sử dụng và hệ thống, tính dễ sử dụng, dễ huấn luyện  Hướng dẫn người sử... tượng và bản chất nhớ, cảm nhận, vận động, học, giải quyết vấn đề, thu thập kỹ năng, b Con người  Ngôn ngữ giao tiếp và tương tác (Language, Communication)  Các khía cạnh của ngôn ngữ: Cú pháp, ngữ nghĩa,  Mô hình ngôn ngữ  Các ngôn ngữ chuyên dụng: Truy vấn, giao tiếp đồ họa, lệnh,  Nghiên cứu về lao động (ergonomics): Đặc điểm nhân trắc học, sinh lý học của con người và quan hệ giữa con người. .. tính và kiến trúc tương tác  Ẩn dụ giao tiếp (Interface Metaphor)  Ẩn dụ tương tác  Ẩn dụ nội dung  Thiết kế đồ họa (Graphic Design):  Hình học 2D, 3D, biến đổi hình học  Biểu diễn thuộc tính của đối tượng đồ họa  Mô hình hóa vật thể, d Quy trình phát triển  Bao gồm thiết kế và kỹ thuật  Các tiếp cận thiết kế  Kỹ thuật và công cụ cài đặt  Kỹ thuật đánh giá  Hệ thống mẫu và Case studies 14... nhận được màu sắc: đỏ, xanh lá cây và xanh lam 6 3/2/2016 2.1.2 Tương tác qua thị giác  Xem xét sự phụ thuộc của cảm nhận thị giác vào  Kích thước hay khoảng cách tương đối giữa đối tượng quan sát và mắt  Độ sáng và độ tương phản của đối tượng  Khả năng và hạn chế của hệ thống thị giác Cảm nhận về kích thước  Sự cảm nhận chính xác phụ thuộc vào kích thước đối tượng và khoảng cách từ đối tượng đến... sao của HCI (Hix and Hartson, 1993) 3.2 Phương tiện và công cụ tương tác  Hai thành phần cơ bản: Con người và máy tính  Giao tiếp:  Phương tiện: đối thoại thông qua môi trường (phần mềm)  Công cụ đối thoại: ngôn ngữ lập trình, thiết bị 15 3/2/2016 3.3 Chất lượng tương tác  Trước đây chất lượng được hiểu là trạng thái ứng xử đúng của phần mềm khi người dùng cung cấp dữ liệu đúng  Tiếp theo, yêu... NGƯỜI TRONG GIAO TiẾP VÀ XỬ LÝ Nội dung  1 Tổng quan  2 Kênh vào ra thông tin  3 Trí nhớ của con người  4 Lập luận và giải quyết vấn đề 1 3/2/2016 1 Tổng quan  1.1 Mục đích nghiên cứu  Tìm hiểu nhận thức và cách thức xử lý thông tin của con người  Phân tích các khả năng của con người  Trên cơ sở đó, đưa ra hướng xây dựng các phần mềm tiện dụng 1.2 Đặc điểm tâm sinh lý của con người  Con người có... hình nhóm và tổ chức  Mô hình công việc và luồng công việc  Hệ thống kỹ thuật – xã hội 10 3/2/2016 a Môi trường và ngữ cảnh  Các lĩnh vực ứng dụng (Application Areas): Tập trung nghiên cứu vào các lớp của lĩnh vực ứng dụng từ góc độ mà giao diện cần phải đáp ứng  Đặc trưng của các miền ứng dụng: ứng dụng riêng hay nhóm  Giao diện hướng tài liệu: soạn thảo văn bản, bảng tính,  Giao diện hướng ... tương tác người – máy  Vai trò tương tác người – máy  Cách tổ chức hệ tương tác  Các lĩnh vực liên quan 3/2/2016 Khái niệm  Có nhiều định nghĩa khác tương tác người – máy  Định nghĩa  Tương. .. nghe nhạc  Giao diện người – máy tính tốt => giao diện người – thiết bị tốt Cách tổ chức hệ tương tác  Các thành phần hệ tương tác  Phương tiện công cụ tương tác  Chất lượng tương tác  Các... tiêu môn học  Sinh viên có kiến thức tương tác người máy, quy trình nguyên tắc thiết kế giao tiếp người dùng  Thực xây dựng số giao diện người dùng cụ thể  Có khả phân tích, đưa giao diện đồ họa