Thiết kế giao diện tương tác người - máy

5/6/2016 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 5/6/2016 6.1 Thiết kế lấy người dùng làm trung tâm  Khái niệm  Nguyên tắc  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 5/6/2016 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 hoà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 Nguyên tắc thiết kế  Tương thích  Thẩm mỹ rõ ràng  Dễ cấu hình quán  Trực tiếp hiệu  Thân thiện mềm dẻo  Bỏ qua lỗi khôi phục trạng thái  Trách nhiệm đơn giản  Trong suốt, dễ hiểu, dễ học 5/6/2016 a) Tương thích  Người dùng: Thiết kế phải thích hợp với nhu cầu người dùng  Nhiệm vụ: Thiết kế phải đảm bảo luồng liệu chức thực nhiệm vụ đề ra, người dùng cố gắng để thực nhiệm vụ đề  Sản phẩm: Người dùng hệ thống thường người dùng hệ thống phiên trước Vì sản phẩm phải thiết kế cho thói quen, mong đợi hiểu biết người dùng cũ áp dụng b) Thẩm mỹ rõ ràng  Thẩm mỹ  Một thiết kế có tính thẩm mỹ phải hút người dùng  Tuân theo số nguyên lý thiết kế chung:    Độ tương phản cao thành phần hình Nhóm thành phần có chức năng, nhiệm vụ Cho phép biểu diễn 3D  Sử dụng màu sắc đồ họa phải đơn giả  Rõ ràng  Giao diện phải rõ ràng mặt hiển thị, thiết kế ngữ nghĩa    Các thành phần hiển thị Các chức Các từ văn 5/6/2016 c) Dễ cấu hình quán  Cấu hình  Cho phép dễ dàng cá nhân hóa cung cấp khả cấu hình  Nâng cao độ nhạy mặt điều khiển  Khuyến khích người dùng chủ động tìm hiểu  Nhất 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  Chức thành phần phải cố định  Vị trí thành phần d) Trực tiếp hiệu  Trực tiếp  Cung cấp cách thức hoàn thành nhiệm vụ cách trực tiếp:   Các phương án hoàn thành tác nhiệm phải cung cấp Phản ứng việc tác động lên thành phần giao diện phải hiển thị  Hiệu  Tối thiểu hóa chuyển động tay, mắt hoạt động điều khiển khác    Chuyển đổi điều khiển hệ thống phải mềm mại dễ dàng Các định hướng dẫn phải ngắn gọn Chuyển động mắt phải trực diện liên tục (tránh di chuyển đột ngột)  Dự báo mong muốn người dùng nhu cầu 5/6/2016 e)Thân thiện mềm dẻo  Thân thiện  Sử dụng khái niệm ngôn ngữ gần gũi với người dùng  Giao diện nên tự nhiên, bắt chước mẫu hành vi người dùng  Mềm dẻo  Hệ thống phải nhạy với nhu cầu khác người dùng, cho phép thực yêu cầu mức độ với hiệu dựa      Hiểu biết kỹ người dùng Kinh nghiệm người dùng Sở thích cá nhân Thói quen Điều kiện f) Bỏ qua lỗi khôi phục trạng thái  Bỏ qua  Dung thứ bỏ qua số lỗi chung không tránh khỏi người dùng  Dự báo lỗi  Đề phịng lỗi trầm trọng  Mỗi có lỗi xuất hiện, đưa thơng báo cách giải  Khôi phục  Một hệ thống phải cho phép   Hủy bỏ quay lại số lệnh, thao tác thời điểm trước Quay lại số bước trước có khó khăn xảy  Đảm bảo người dùng không bị kết trạng thái 5/6/2016 g) Trách nhiệm đơn giản  Trách nhiệm  Hệ thống phải trả lời nhanh yêu cầu người dùng  Cung cấp phản hồi tức hành động người dùng thơng qua: Hình ảnh – Văn – Âm  Đơn giản  Cung cấp giao diện đơn giản  Một số cách thức để tạo đơn giản:     Sử dụng menu dạng ẩn, xuất cần thiết Hiển thị chức chung cần thiết trước tiên Cung cấp mặc định Tạo hành động chung, đơn giản h) Trong suốt, dễ hiểu, dễ học  Trong suốt  Cho phép người dùng tập trung vào nhiệm vụ, tránh tập trung vào chế, cách thức hoạt động giao diện  Các công việc việc nhắc nhở công việc máy tính phải suốt người dùng  Không bắt người dùng nghĩ chi tiết kỹ thuật hệ thống Các suy nghĩ phải hướng đến nhiệm vụ  Một hệ thống phải dễ học dễ hiểu Người dùng phải biết:  What to look at – What to – When to it – Where to it – Why to it – How to it  Chuỗi hành động, đáp ứng, trình diễn thơng tin phải theo trật tự có khả dự đốn 5/6/2016 6.1.3 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 5/6/2016 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 hoà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ê 5/6/2016 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 c) Sắp xếp phiếu đánh giá  Nhóm chun 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 10 5/6/2016 6.2.1 Quy trình thiết kế giao diện  Galitz đề xuất 14 bước qui trình phát triển GUI  Bước 1: Nhận biết người sử dụng  Bước 2: Hiểu rõ chức nghiệp vụ  Bước 3: Hiểu rõ nguyên lý thiết kế hình tốt  Bước 4: Phát triển thực đơn hệ thống lược đồ dẫn đường  Bước 5: Lựa chọn loại cửa sổ phù hợp  Bước 6: Lựa chọn điều khiển phần cứng phù hợp  Bước 7: Lựa chọn Controls hình phù hợp 6.2.1 Quy trình thiết kế giao diện  Bước 8: Viết text thông điệp rõ ràng  Bước 9: Cung cấp phản hồi, hướng dẫn hỗ trợ hiệu      Bước 10: Cung cấp khả quốc tế hóa khả sử dụng rộng rãi Bước 11: Tạo lập đồ họa, biểu tượng ảnh có ý nghĩa Bước 12: Chọn màu phù hợp Bước 13: Tổ chức bố trí cửa sổ trang hình Bước 14: Kiểm thử hệ thống 14 5/6/2016 6.2.2 Nguyên tắc thiết kế giao diện tốt  Giao diện thiết kế tốt nếu:  Phản ánh lực, nhu cầu nhiệm vụ người dùng  Phù hợp với ràng buộc vật lý thiết bị thị  Sử dụng hiệu khả phần mềm điều khiển  Đạt mục tiêu nghiệp vụ hệ thống  Nguyên tắc thiết kế giao diện tốt ???  Số lượng tin cần giới thiệu giao diện  Cách tổ chức giao diện phân tách phần thông tin  Ngôn ngữ  Sự quán giao diện 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 15 5/6/2016 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 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ồ 16 5/6/2016 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 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 17 5/6/2016 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 Nguyên tắc thiết kế luồng duyệt tin hình: Đối xứng 18 5/6/2016 Nguyên tắc thiết kế luồng duyệt tin hình: Đều đặn 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 19 5/6/2016 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 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 20 5/6/2016 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) 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 21 5/6/2016 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ý 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: 22 5/6/2016 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 vuông góc với nhau, thay đoạn thẳng gặp điểmhay hai góc vng chung đỉnh 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 23 5/6/2016 6.2.3.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 6.2.3.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) 24 5/6/2016 6.2.3.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 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 25 5/6/2016 Chuẩn ISO 11581 cho thiết kế ICON 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 26 5/6/2016 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 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 27 5/6/2016 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 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 28