Thiết kế giao diện tương tác người - máy Nội dung — Thiết kế lấy người dùng làm trung tâm — Thiết kế giao diện 6.1 Thiết kế lấy người dùng làm trung tâm — Khái niệm — Các phương pháp thiết kế lấy người dùng làm trung tâm 6.1.1 Khái niệm — Đặt (yêu cầu của) người dùng vào trung tâm trình thiết kế phát triển — Tiến hành thử nghiệm đánh giá với người dùng — Thiết kế tương tác — Quy trình thiết kế quy trình lặp Quy trình thiết kế lấy người dùng làm trung tâm — Đặc tả yêu cầu — Người dùng — Mục đích họ — Nhiệm vụ họ muốn hồn thành — Phân tích nhiệm vụ — Đặc trưng hóa bước mà người dùng cần thực — Xây dựng kịch việc sử dụng — Đưa định hỗ trợ đối tượng người dùng loại nhiệm vụ — Thiết kế dựa phân tích — Đánh giá — Thử nghiệm giao diện — Đánh giá trước cài đặt 6.1.2 Các phương pháp thiết kế lấy người dùng làm trung tâm — — — — — — — Nhóm tập trung Kiểm thử tính dùng Sắp xếp phiếu đánh giá Thiết kế hợp tác Lập bảng câu hỏi Phỏng vấn Các phương pháp nên kết hợp lại để thực tương tác với người dùng suốt q trình tìm hiểu, phân tích, thiết kế, cài đặt thử nghiệm, vận hành khai thác a) Nhóm tập trung — Một nhóm người dùng mời đến để chia sẻ suy nghĩ, cảm nhận, thái độ, ý kiến chủ đề — Kết thảo luận sử dụng đầu vào thiết kế — Thông thường kết thường liệu phi thống kê, phương tiện để có thơng tin lĩnh vực, chủ đề — Cần thiết phải có nhóm trưởng có kinh nghiệm nhà phân tích để việc thảo luận có hiệu b) Kiểm thử tính dùng — Đánh giá vấn đề thơng qua việc thu thập — — — — — liệu từ người sử dụng Một người mời để tham gia phiên kiểm thử họ địi hỏi để thực số nhiệm vụ Một người điều khiển ghi chép lại tất khó khăn mà người dùng thử gặp phải Người dùng hỏi họ làm Đo thời gian người dùng hồn thành tác nhiệm Thơng thường có hai chun viên làm việc với người dùng thử: người điều khiển, người ghi chép b) Kiểm thử tính dùng — Khi sử dụng phương pháp này: — Được sử dụng làm đầu vào trình thiết kế lúc kiểm tra mẫu thử kết thúc dự án — Là cách thức tốt để tìm khó khăn việc sử dụng sản phẩm Có thể đưa thơng tin mang tính thơng kê thơng tin phi thống kê Ví dụ: Microsoft làm để tiếp cận người dùng ? (1995) — Nghiên cứu người dùng — Mỗi tính phát triển, thử nghiệm — — — — — tính dùng triển khai phịng thí nghiệm Nhóm 10 người đưa vào để thử nghiệm Các hành vi quan sát hiệu ghi lại Dữ liệu phân tích tìm phản hồi để phát triển tiếp Ví dụ Office 4.0 thử nghiệm sau 8000h thử nghiệm tính tiện dụng Mỗi sản phẩm hồn thiện, dùng thử thành viên Microsoft Ln có trung tâm chăm sóc khách hàng ghi lại phản hồi khách hàng 10 c) Sắp xếp phiếu đánh giá — Nhóm chuyên gia, người dùng thử khơng có kinh nghiệm — — — — thiết kế hướng dẫn để tạo phân loại Là hướng tiếp cận tốt để thiết kế kiến trúc thông tin, công việc, cấu trúc menu, hay đường dẫn định hướng đến websites Hoạt động tổ chức theo nhóm (focus groups) hay tiến hành với cá nhân Các khái niệm xác định viết thẻ có đánh số (post-it notes) Những người tham gia yêu cầu tổ chức thành cấu trúc 11 c) Sắp xếp phiếu đánh giá — Khi sử dụng phương pháp này: — Thường sử dụng đầu vào cho thiết kế — Là cách thức tốt để phân loại nội dung site đưa kiến trúc mặt thơng tin Có thể sử dụng để sinh liệu thống kê 12 d) Thiết kế hợp tác — Khơng địi hỏi ý kiến người dùng thiết kế mà yêu cầu họ tham gia vào việc thiết kế trình định — Khi sử dụng phương pháp này: Được sử dụng dự án nhỏ nhằm đưa mẫu thử để đưa vào trình thiết kế tổng thể — Các dự án cho phép người dùng tham gia vào trình thiết kế định — 13 e) Lập bảng câu hỏi — Là phương tiện để hỏi người dùng vấn đề đó, dựa tập câu hỏi định nghĩa sẵn — Là cách thức tốt để tạo thông tin thống kê — Khi sử dụng phương pháp này: Có thể cho phép người sử dụng từ xa tiến hành tham gia thông qua trang web Cho phép số lượng mẫu người dùng thử lớn — Thường quản lý thông qua phương tiện điện tử — 14 f) Phỏng vấn — Một người vấn người khác thời điểm — Ưu điểm: quan điểm cá nhân người dùng thử khai thác ghi nhận — Những hiểu lầm người vấn người vấn nhanh chóng sửa lỗi — Đầu ra: thơng tin phi thống kê, ý kiến nghiên cứu phân tích chun viên có kinh nghiệm 15 f) Phỏng vấn — Khi sử dụng phương pháp này: — Thường diễn trước trình thiết kế nhằm thu thập thông tin, tri thức lĩnh vực hoạt động hay yêu cầu cụ thể 16 6.2 Thiết kế giao diện — Tầm quan trọng giao diện người dung — Nhân tố người thiết kế giao diện người dùng — Quy trình thiết kế giao diện — Nguyên tắc thiết kế giao diện tốt — Nguyên tắc thiết kế biểu tượng 17 6.2.1 Tầm quan trọng giao diện người dùng — Giao diện người dùng (User Interface) khái niệm để nói tới nơi mà người máy móc làm việc với — Với đời máy tính, UI coi nhìn thấy hình tương tác với máy tính thơng qua câu lệnh mã hóa — Giao diện người dùng đóng vai trò quan trọng xây dựng hệ thống phần mềm — Người sử dụng không quan tâm đến cấu trúc bên hệ thống, đơn giản hay phức tạp; mà họ đánh giá cảm nhận giao diện tương tác hệ thống người sử dụng 18 6.2.1 Tầm quan trọng giao diện người dùng — Giao diện người dùng cần thiết kế cho phù hợp với kĩ năng, kinh nghiệm trông đợi người dùng — Người dùng hệ thống thường đánh giá hệ thống theo giao diện thay chức — Một giao diện thiết kế tồi Có thể dẫn đến việc người dùng phạm lỗi nghiêm trọng — Là lí nhiều hệ thống phần mềm không đem sử dụng — 19 6.2.2 Nhân tố người thiết kế giao diện người dùng — Bộ nhớ làm việc người có hạn — Chúng ta nhớ nhanh khoảng (+-2) thông tin — Nếu đưa nhiều vậy, người dung dễ nhầm lẫn — Nhầm lẫn chuyện thường — Khi người dùng nhầm lẫn hệ thống chạy sai, cảnh báo thơng báo khơng mức làm người dùng căng thẳng dễ nhầm lẫn — Mỗi người có lực cao thấp khác — Người thiết kế không nên thiết kế cho lực — Mỗi người hợp với kiểu tương tác khác — Người thích hình ảnh, người khác thích chữ 20 c Giảm tải nhận thức — Hiển thị thông tin rõ ràng: tổ chức thông tin tốt cải thiện khả sử dụng tính dễ đọc, cho phép người dùng nhanh chóng tìm thấy thơng tin tìm kiếm sử dụng giao diện hiệu Tránh hiển thị nhiều thông tin lúc hình — Áp dụng nguyên tắc chung tổ chức nội dung nhóm mục tương tự lại với nhau, đánh số mục sử dụng tiêu đề văn nhắc — Tôn trọng cách dịch chuyển tự nhiên mắt: dịch chuyển từ trái sang phải, từ xuống theo chiều kim đồng hồ — 43 d Giao diện quán — Một hệ thống phải nhìn thấy, phản ứng, thao tác theo cách ngữ cảnh — Cùng thành phần phải : Có diện mạo — Có tính sử dụng — Hoạt động tương tự — — Cùng hành động phải có kết — Đảm bảo quán vị trí thành phần 44 Màn hình phần tử thơng tin — Các phần tử thơng tin hình phải có ý nghĩa người dùng: trợ giúp thực nhiệm vụ — Điều khiển — Văn — Tổ chức hình — Nhấn mạnh — Màu sắc — Đồ họa — Hoạt họa — Thông điệp — Thông tin phản hồi 45 Nguyên tắc xếp thứ tự thơng tin hình — Phân chia thơng tin thành phần logic, có ý nghĩa dễ cảm nhận — Tổ chức thông tin theo cấp độ quan hệ chúng — Sắp xếp thông tin theo kỳ vọng nhu cầu người dùng — Tạo nhóm thơng tin thỏa mãn thứ tự xếp phổ biến: — — — — — — Quy ước Trình tự sử dụng Tần suất sử dụng Chức Mức độ quan trọng Mức độ tổng quát — Các thông tin cần so sánh phải xuất lúc — Chỉ thông tin liên quan đến nhiệm vụ hay nhu cầu người dùng xuât hình 46 Luồng duyệt tin hình — Mắt người thường dịch chuyển từ trái sang phải, từ xuống theo chiều kim đồng hồ 47 Luồng duyệt tin hình — Tổ chức hình cho : — Mắt người dùng duyệt qua thơng tin nhịp nhàng, có định hướng — Tôn trọng cách dịch chuyển tự nhiên mắt — Tối thiểu hóa khoảng cách dịch chuyển trỏ mắt — Đặt phần tử thông tin hay điều khiển quan trọng nhất, hay xuất vào góc bên trái hình — Duy trì luồng thơng tin từ trái sang phải, từ xuống 48 Luồng duyệt tin hình — Hỗ trợ duyệt tin : — Gióng hàng phần từ — Nhóm phần tử — Sử dụng khung viền — Tập trung nhấn mạnh vào phần tử: quan trọng, thứ cấp, ngoại vi — Dùng phím tab để dịch chuyển theo thứ tự logic thông tin thị — Đặt nút lệnh vào cuối dãy dịch chuyển phím Tab — Khi nhóm thơng tin bị thị vài hình khác nhau, cần cung cấp điểm ngắt thơng tin rõ ràng luồng thông tin 49 Nguyên tắc thiết kế luồng duyệt tin hình:Cân — Tạo cân hình cách xây dựng lưới cho thành phần thông tin thị hình: độ dài, độ rộng 50 Nguyên tắc thiết kế luồng duyệt tin hình: Đối xứng 51 Nguyên tắc thiết kế luồng duyệt tin hình: Đều đặn 52 Nguyên tắc thiết kế luồng duyệt tin hình: Dễ dự đốn — Tạo khả dự đoán theo thứ tự thỏa thuận trước 53 Nguyên tắc thiết kế luồng duyệt tin hình: Tuần tự — Sắp xếp yếu tố hướng dẫn mắt nhìn thơng tin hình cách hợp lý, rõ ràng, nhịp nhàng hiệu 54 Nguyên tắc thiết kế luồng duyệt tin hình: Kinh tế — Chỉ sử dụng kỹ thuật thị (như màu sắc, phông chữ ) đủ để làm bật thông điệp gửi đến người dùng, không 55 Nguyên tắc thiết kế luồng duyệt tin hình: Thống phân mảnh — Thống nhất: Tất phần tử thông tin thị hình mảnh ghép ăn khớp với tranh toàn cảnh — Phân mảnh: phần tử thông tin giữ lại đặc tính riêng — Sử dụng kích thước, hình dạng, màu sắc tương tự cho thông tin liên quan — Phân biệt không gian nhóm tin (khoảng cách, biên giới) 56 Nguyên tắc thiết kế luồng duyệt tin hình: Đơn giản — Tối ưu số phần tử thông tin hình, để đảm bảo nội dung phần tử thị rõ ràng — Giảm thiểu số điểm gióng hàng ngang – dọc 57 Nguyên tắc thiết kế luồng duyệt tin hình: Nhóm thơng tin — Các thơng tin liên quan nhóm với nhau, có tiêu đề rõ ràng, có khoảng cách đường viền màu hợp lý 58 Qui tắc Gestalt ứng dụng thiết kế đồ họa — Qui tắc Gestalt đề cập đến việc nhóm đối tượng — Gestalt (tiếng Đức, có nghĩa form, shape hay organized structure) đề cập đến tiến trình nhận thức cách mà vật (thing) xếp đặt — Sáu qui tắc: 59 Qui tắc Gestalt ứng dụng thiết kế đồ họa — Qui tắc liền kề (proximity) — Các phần tử gần có xu nhóm lại với — Ví dụ: ta nhìn thấy bốn cột hình trịn ví dụ bên — Qui tắc tương tự (similarity) — Các phần tử với thuộc tính tương tự có xu nhóm lại với — Ví dụ: ta nhìn thấy bốn hàng hình trịn — Qui tắc tiếp tục (Continuity) — Mắt người chờ đợi nhìn contour đối tượng liên tục — Ví dụ: ta cảm nhận trước hết hai đoạn thẳng vng góc với nhau, thay đoạn thẳng gặp điểmhay hai góc vng chung đỉnh 60 Qui tắc Gestalt ứng dụng thiết kế đồ họa — Qui tắc đóng (Closure) — Con người có xu cảm nhận hình đóng, đầy đủ chí thiết chi tiết đoạn thẳng — Ví dụ: ta nhìn thấy tam giác ba hình trịn, cạnh khơng vẽ đầy đủ — Qui tắc vùng (Area) — Khi hai phần tử đè lên nhau, phần tử nhỏ diễn giải nằm bên hình lớn — Ví dụ ta nhìn thấy hình vng năm hình vng lớn Khơng cảm nhận hình vng lớn có lỗ hổng — Qui tắc đối xứng (Symmetry) — Con người cảm nhận với xu đối xứng cao — Ví dụ ta cảm nhận hai hình vng chồng lên thay ba đa giác tách biệt 61 6.2.4.Thiết kế biểu tượng — Các icon (biểu tượng/ hình vẽ) sử dụng hình để thực tương tác ứng dụng người dùng — Các biểu tượng đồ hoạ cung cấp độc lập ngôn ngữ trao đổi thông tin với người dùng — Là phần giao diện đồ hoạ cung cấp khả học, hiểu ghi nhớ phần tử chức hệ thống trợ giúp người dùng thao tác với phần tử — Thường giao diện người dùng đồ hoạ – GUI cung cấp biểu diễn ẩn dụ cho nhiệm vụ người dùng Các biểu tượng biểu diễn ẩn dụ cách trực tiếp, hay đối tượng vật lí cách gián tiếp 62 6.2.4.Thiết kế biểu tượng — Các loại — Biểu diễn đối tượng vật lý ổ đĩa, máy in,… — Biểu diễn chức cuả HT (action Icons) — Biểu diễn đối tượng điều khiển (control datas) 63 6.2.4.Thiết kế biểu tượng — Trong máy tính, biểu tượng (Icon) có nghĩa tranh nhỏ có ý nghĩa — Biểu tượng thành phần quan trọng thiết kế GUI: “A picture is worth a thousand words.” — Các phần tử Icon Đường viền Nền Ảnh Nhãn 64 Yêu cầu thiết kế biểu tượng — Việc thiết kế Icon tốt khó khăn — Ý nghĩa Icon phụ thuộc vào ngữ cảnh sử dụng văn hóa — Yêu cầu tổng quát thiết kế Icon Tiết kiệm khơng gian hình — Được nhận biết nhanh môi trường hiển thị dày đặc — Dễ nhớ — Giúp “quốc tế hóa” UI — 65 Chuẩn ISO 11581 cho thiết kế ICON 66 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) MS Paint 67 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 Khoảng cách quan sát thông thường 68 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 — Nên sử dụng gam màu gray thêm 1, màu 69 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 70 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 Applications Generated Icons Word Word text document Excel Excel document Powerpoint Powerpoint document 71