Thiết kế giao diện người dùng

Thiết kế giao diện người dùng Nguyễn Thị Minh Tuyền Nội dung slide dựa vào slide Ian Sommerville Nội dung 1.  Các vấn đề thiết kế 2.  Quy trình thiết kế giao diện người dùng 3.  Phân tích người dùng 4.  Tạo prototype giao diện người dùng 5.  Đánh giá giao diện Nguyễn Thị Minh Tuyền Nhập môn CNPM Nội dung 1.  Các vấn đề thiết kế 2.  Quy trình thiết kế giao diện người dùng 3.  Phân tích người dùng 4.  Tạo prototype giao diện người dùng 5.  Đánh giá giao diện Nguyễn Thị Minh Tuyền Nhập môn CNPM Giao diện người dùng (UI) v Nên thiết kế cho đáp ứng kỹ năng, kinh nghiệm mong đợi người dùng v Người dùng hệ thống thường đánh giá hệ thống dựa vào giao diện chức v Một thiết kế giao diện nghèo nàn §  Có thể gây nên lỗi trầm trọng §  Là lý nhiều hệ thống phần mềm không sử dụng Nguyễn Thị Minh Tuyền Nhập môn CNPM Nhân tố người thiết kế giao diện v Hạn chế việc ghi nhớ ngắn hạn §  Con người nhớ lúc thông tin Nếu nhiều hơn, họ dễ nhầm lẫn gây lỗi v Tạo lỗi chuyện thường tình §  Khi người dùng nhầm lẫn hệ thống thực sai, cảnh báo đưa không hợp lý thông báo không mức làm gia tăng căng thẳng gây nhiều lỗi v Mỗi người có lực cao thấp khác §  Người thiết kế không nên thiết kế dựa vào khả v Mỗi người muốn kiểu tương tác khác §  Người thích hình ảnh, người khác lại thích kiểu văn Nguyễn Thị Minh Tuyền Nhập môn CNPM Các nguyên tắc thiết kế UI v Thiết kế UI phải tính đến nhu cầu, kinh nghiệm khả người dùng hệ thống v Người thiết kế nên §  nhận thức hạn chế vật lý tinh thần người dùng •  ví dụ: khả nhớ ngắn hạn bị hạn chế §  nên thừa nhận nhầm lẫn v Các nguyên tắc thiết kế UI đóng vai trò tảng cho thiết kế giao diện dù tất nguyên lý áp dụng cho tất thiết kế Nguyễn Thị Minh Tuyền Nhập môn CNPM Các nguyên lý thiết kế v Thân thiện với người dùng §  Giao diện nên dựa vào thuật ngữ khái niệm hướng người dùng khái niệm máy tính §  Ví dụ, hệ thống văn phòng nên dùng khái niệm thư từ, tài liệu, thư mục, đường dẫn, tên file, v Nhất quán §  Hệ thống nên hiển thị cách quán Các lệnh menu nên có định dạng, dấu chấm lệnh nên tương tự v Ít bất ngờ §  Nếu lệnh thực theo cách thông thường, người dùng dự đoán thao tác lệnh tương tự Nguyễn Thị Minh Tuyền Nhập môn CNPM Các nguyên lý thiết kế v Có thể khôi phục §  Hệ thống nên cung cấp số chế phục hồi lại tình trạng hoạt động bình thường sau gặp lỗi Cơ chế này bao gồm chức undo, xác nhận hành động hủy, v Hướng dẫn người dùng §  Một số hướng dẫn người dùng hệ thống giúp đỡ, tài liệu trực tuyến nên cung cấp v Đa dạng người dùng §  Nên cung cấp tiện ích tương tác cho loại người dùng khác §  Ví dụ, số người dùng có khả nhìn hạn chế nên để cỡ chữ to Nguyễn Thị Minh Tuyền Nhập môn CNPM Vấn đề thiết kế UI v Hai vấn đề cần quan tâm thiết kế hệ thống tương tác §  Người dùng cung cấp thông tin cho hệ thống cách nào? §  Hệ thống biểu diễn thông tin đến người dùng nào? Nguyễn Thị Minh Tuyền Nhập môn CNPM Các kiểu tương tác v Thao tác trực tiếp (direct manipulation) v Chọn menu (menu selection) v Điền vào form (form fill-in) v Ngôn ngữ lệnh (command language) v Ngôn ngữ tự nhiên (natural language) Nguyễn Thị Minh Tuyền 10 Nhập môn CNPM Phỏng vấn v Thiết kế vấn dạng cấu trúc linh động, dựa vào câu hỏi mở v Người dùng cung cấp thông tin mà họ nghĩ cần thiết, không thông tin mà bạn nghĩ cần phải thu thập v Phỏng vấn theo nhóm cho phép người dùng thảo luận với họ làm Nguyễn Thị Minh Tuyền 41 Nhập môn CNPM Ethnography v Quan sát người dùng nơi làm việc đặt câu hỏi công việc họ (không có kịch sẵn ) v Có giá trị nhiều tác vụ người dùng trực quan họ thấy khó khăn diễn đạt giải thích v Hỗ trợ cho việc hiểu vai trò xã hội ảnh hưởng mặt tổ chức lên công việc Nguyễn Thị Minh Tuyền 42 Nhập môn CNPM Hồ sơ ethnography Một trạm điều khiển không lưu có số 'bàn' điều khiển, bàn điều khiển vùng không gian cạnh đặt cạnh Các chuyến bay vùng biểu diễn băng giấy lồng vào giá gỗ theo thứ tự phản ánh vị trí chúng vùng Nếu không đủ chỗ giá (nghĩa vùng không gian đông máy bay), người điều khiển trải băng giấy lên bàn viết đặt trước giá gỗ Khi quan sát người điều khiển, nhận thấy lúc họ lại nhìn sang giá treo băng giấy vùng bên cạnh Chúng hỏi Họ trả lời rằng, bàn điều khiển bên cạnh phải trải giấy lên bàn, điều có nghĩa có nhiều chuyến bay bay vào vùng họ Vì vậy, họ cố gắng tăng tốc chuyến bay vùng để 'lấy chỗ' cho chuyến bay đến Nguyễn Thị Minh Tuyền 43 Nhập môn CNPM Hiểu biết từ ethnography v Người điều khiển phải nhìn thấy tất máy bay vùng §  Do đó, phải tránh thị thay cuộn mà chuyến bay đỉnh cuối hình bị biến v Giao diện phải có cách báo cho người điều khiển số chuyến bay vùng giáp ranh họ để lên kế hoạch cho công việc Nguyễn Thị Minh Tuyền 44 Nhập môn CNPM Nội dung 1.  Các vấn đề thiết kế 2.  Quy trình thiết kế giao diện người dùng 3.  Phân tích người dùng 4.  Tạo prototype giao diện người dùng 5.  Đánh giá giao diện Nguyễn Thị Minh Tuyền 45 Nhập môn CNPM Prototype cho UI v Mục tiêu cho phép người dùng có trải nghiệm trực tiếp với giao diện v Không có kinh nghiệm này, đánh giá tính sử dụng giao diện v Xây dựng prototype có hai giai đoạn: §  Giai đoạn đầu, xây dựng prototype giấy; §  Sau đó, thiết kế tinh chỉnh, phát triển mẫu tự động hóa với độ phức tạp ngày tăng Nguyễn Thị Minh Tuyền 46 Nhập môn CNPM Xây dựng prototype giấy v Đi lượt qua kịch phác thảo giao diện v Sử dụng kỹ thuật storyboard để biểu diễn chuỗi tương tác với hệ thống v Xây dựng prototype giấy cách hiệu để lấy phản hồi từ khách hàng Nguyễn Thị Minh Tuyền 47 Nhập môn CNPM Các kỹ thuật xây dựng prototype v Xây dựng dựa vào kịch §  Phát triển tập kịch hình công cụ Macromedia Director §  Khi người dùng tương tác với prototype này,màn hình chuyển qua hình khác v Lập trình trực quan §  Sử dụng ngôn ngữ chuyên dụng để phát triển giao diện nhanh Visual Basic v Xây dựng dựa vào internet §  Sử dụng web browser script liên quan Nguyễn Thị Minh Tuyền 48 Nhập môn CNPM Nội dung 1.  Các vấn đề thiết kế 2.  Quy trình thiết kế giao diện người dùng 3.  Phân tích người dùng 4.  Tạo prototype giao diện người dùng 5.  Đánh giá giao diện Nguyễn Thị Minh Tuyền 49 Nhập môn CNPM Đánh giá UI v Nên tiến hành đánh giá UI để xem giao diện hợp lý hay chưa v Đánh giá đầy đủ tốn thường không thực tế đa số hệ thống v Về lý tưởng, giao diện nên đánh giá dựa vào đặc tả tính sử dụng Tuy nhiên, đặc tả tạo Nguyễn Thị Minh Tuyền 50 Nhập môn CNPM Các thuộc tính tính sử dụng Thuộc tính Tính học Tốc độ thao tác Mô tả Một người dùng để sử dụng hệ thống có hiệu quả? Tốc độ trả lời hệ thống có đáp ứng tốt công việc người dùng hay không? Tính chịu lỗi Mức độ chịu lỗi hệ thống lỗi người dùng nào? Khả khôi phục Hệ thống khôi phục từ lỗi người dùng tốt đến mức nào? Tính tương thích Hệ thống gắn bó với mô hình làm việc đến đâu? Nguyễn Thị Minh Tuyền 51 Nhập môn CNPM Các kỹ thuật đánh giá đơn giản v Câu hỏi để lấy phản hồi từ người dùng v Quay video việc sử dụng hệ thống đánh giá v Cài mã thu thập thông tin tiện ích sử dụng lỗi người dùng v Cung cấp chức chương trình để thu thập phản hồi trực tuyến từ người dùng Nguyễn Thị Minh Tuyền 52 Nhập môn CNPM Tổng kết v Các nguyên lý thiết kế UI hỗ trợ việc thiết kế UI tốt v Các kiểu tương tác gồm thao tác trực tiếp, chọn menu, điền vào form, ngôn ngữ lệnh ngôn ngữ tự nhiên v Hiển thị đồ họa nên sử dụng để thể xu hướng giá trị xấp xỉ Hiển thị số sử dụng cần đến độ xác v Nên cân nhắc kỹ sử dụng màu sắc phải sử dụng quán Nguyễn Thị Minh Tuyền 53 Nhập môn CNPM Tổng kết v Quy trình thiết kế UI gồm phân tích người dùng, xây dựng prototype đánh giá prototype v Mục tiêu phân tích người dùng để người thiết kế hiểu rõ cách làm việc người sử dụng v Xây dựng prototype UI quy trình thực giấy, sau sử dụng giấy làm sở để phát triển prototype tự động v Mục tiêu đánh giá UI thu thập phản hồi người dùng cách cải thiện thiết kế giao diện đánh giá xem liệu giao diện có đáp ứng yêu cầu tính sử dụng hay không Nguyễn Thị Minh Tuyền 54 Nhập môn CNPM ... đề thiết kế 2.  Quy trình thiết kế giao diện người dùng 3.  Phân tích người dùng 4.  Tạo prototype giao diện người dùng 5.  Đánh giá giao diện Nguyễn Thị Minh Tuyền Nhập môn CNPM Giao diện người. ..Nội dung 1.  Các vấn đề thiết kế 2.  Quy trình thiết kế giao diện người dùng 3.  Phân tích người dùng 4.  Tạo prototype giao diện người dùng 5.  Đánh giá giao diện Nguyễn Thị Minh Tuyền Nhập... diện người dùng (UI) v Nên thiết kế cho đáp ứng kỹ năng, kinh nghiệm mong đợi người dùng v Người dùng hệ thống thường đánh giá hệ thống dựa vào giao diện chức v Một thiết kế giao diện nghèo