08 userinterface

Nhập môn Công nghệ phần mềm Tuần 11: Thiết kế giao diện người dùng Nội dung của slide này dịch hiệu chỉnh dựa vào slides của Ian Sommerville Nội dung Các vấn đề thiết kế giao diện người dùng Quy trình thiết kế giao diện người dùng Phân tích người dùng Tạo prototype giao diện người dùng Đánh giá giao diện người dùng NGUYỄN Thị Minh Tuyền Nội dung Các vấn đề thiết kế giao diện người dùng Quy trình thiết kế giao diện người dùng Phân tích người dùng Tạo prototype giao diện người dùng Đánh giá giao diện người dùng NGUYỄN Thị Minh Tuyền Giao diện người dùng (UI) £ Giao diện nên thiết kế phải đáp ứng kỹ năng, kinh nghiệm mong đợi người dùng £ Người dùng hệ thống thường đánh giá hệ thống dựa vào giao diện chức £ Một thiết kế giao diện nghèo nàn p Người dùng truy cập vào số chức hệ thống p Dễ gây lỗi người dùng NGUYỄN Thị Minh Tuyền Nhân tố người thiết kế UI £ Hạn chế việc ghi nhớ ngắn hạn p Con người nhớ lúc thông tin £ Tạo lỗi chuyện thường tình £ Mỗi người có lực cao thấp khác nhau: Người thiết kế không nên dựa vào khả để thiết kế £ Mỗi người mong muốn kiểu tương tác khác p 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 Nguyên tắc thiết kế UI £ Phải xem xét nhu cầu, kinh nghiệm khả người dùng hệ thống £ Nhận thức hạn chế vật lý tinh thần người dùng chấp nhận nhầm lẫn £ 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 Các nguyên lý thiết kế £ Thân thiện với người dùng p Sử dụng thuật ngữ khái niệm hướng người dùng £ Nhất quán p Hệ thống nên hiển thị cách quán £ Ít bất ngờ p Nếu lệnh thực theo cách thông thường, người dùng dự đốn thao tác lệnh tương tự £ Có thể khơi phục p Khi gặp lỗi: Hệ thống nên cung cấp số chế khơi phục tình trạng hoạt động bình thường trước gặp lỗi £ Hướng dẫn người dùng p Cung cấp số hướng dẫn người dùng £ Đa dạng người dùng p Cung cấp tiện ích tương tác cho loại người dùng khác NGUYỄN Thị Minh Tuyền Vấn đề thiết kế UI £ Hai vấn đề cần quan tâm thiết kế hệ thống tương tác p Người dùng cung cấp thông tin cho hệ thống cách nào? p Hệ thống biểu diễn thông tin đến người dùng nào? NGUYỄN Thị Minh Tuyền Các kiểu tương tác £ £ £ £ £ Thao tác trực tiếp (direct manipulation) Chọn menu (menu selection) Điền vào form (form fill-in) Ngôn ngữ lệnh (command language) Ngôn ngữ tự nhiên (natural language) NGUYỄN Thị Minh Tuyền Kiểu tương tác Ưu điểm Nhược điểm ・Tương tác nhanh Thao tác trực ・Có thể khó cài đặt trực quan tiếp ・Dễ học Ví dụ Video games Hệ thống CAD Chọn menu ・Tránh lỗi người dùng ・Yêu cầu gõ ký tự ・Thao tác chậm người sử Phần lớn hệ dụng có kinh nghiệm thống thơng ・Có thể trở nên phức tạp có dụng nhiều lựa chọn menu Điền vào form ・Nhập liệu đơn giản ・Dễ học ・Kiểm tra ・Tốn nhiều khơng gian hình ・Rắc rối xảy lựa chọn Khai thuế, xử lý người dùng không khớp với nợ cá nhân trường form Ngơn ngữ lệnh ・Mạnh linh động ・Khó học ・Quản lý lỗi Hệ điều hành, hệ thống điều khiển lệnh ・Người sử dụng bình ・Yêu cầu gõ nhiều Ngơn ngữ tự Hệ thống truy thường dùng ・Hệ thống hiểu ngôn ngữ tự nhiên nhiên vấn thông tin không tin cậy ・Dễ mở rộng 10 NGUYỄN Thị Minh Tuyền Các kỹ thuật phân tích £ Phân tích tác vụ p Mơ hình hóa bước để hoàn thành tác vụ £ Phỏng vấn p Hỏi người sử dụng công việc họ làm £ Ethnography p Quan sát người sử dụng nơi làm việc 34 NGUYỄN Thị Minh Tuyền Phân tích tác vụ theo phân cấp 35 NGUYỄN Thị Minh Tuyền Phỏng vấn £ Thiết kế vấn dạng cấu trúc linh động, dựa vào câu hỏi mở £ Người dùng cung cấp thơng tin mà họ nghĩ cần thiết, không thông tin bạn nghĩ cần phải thu thập £ Phỏng vấn theo nhóm cho phép người dùng thảo luận với họ làm 36 NGUYỄN Thị Minh Tuyền Ethnography £ 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) £ 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 £ 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 37 NGUYỄN Thị Minh Tuyền 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 cịn đủ 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 38 NGUYỄN Thị Minh Tuyền Hiểu biết từ ethnography £ Người điều khiển phải nhìn thấy tất máy bay vùng è tránh sử dụng cuộn chuyến bay đỉnh cuối hình bị biến £ 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 39 NGUYỄN Thị Minh Tuyền Nội dung Các vấn đề thiết kế giao diện người dùng Quy trình thiết kế giao diện người dùng Phân tích người dùng Tạo prototype giao diện người dùng Đánh giá giao diện người dùng 40 NGUYỄN Thị Minh Tuyền Prototype cho UI £ Mục tiêu: p cho phép người dùng có trải nghiệm trực tiếp với giao diện p Khơng có kinh nghiệm này, ta khơng thể đánh giá tính sử dụng giao diện £ Xây dựng prototype có hai giai đoạn: p Giai đoạn đầu, xây dựng prototype giấy; p 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 41 NGUYỄN Thị Minh Tuyền Xây dựng prototype giấy £ Xem lượt qua kịch phác thảo giao diện £ Sử dụng kỹ thuật storyboard để biểu diễn chuỗi tương tác với hệ thống £ Xây dựng prototype giấy cách hiệu để lấy phản hồi từ khách hàng 42 NGUYỄN Thị Minh Tuyền Các kỹ thuật xây dựng prototype £ Xây dựng dựa vào kịch p Phát triển tập kịch hình cơng cụ Macromedia Director p Khi người dùng tương tác với prototype này, hình chuyển qua hình khác £ Lập trình trực quan p Sử dụng ngôn ngữ chuyên dụng để phát triển giao diện nhanh £ Xây dựng dựa vào internet p Sử dụng web browser script liên quan 43 NGUYỄN Thị Minh Tuyền Nội dung Các vấn đề thiết kế giao diện người dùng Quy trình thiết kế giao diện người dùng Phân tích người dùng Tạo prototype giao diện người dùng Đánh giá giao diện người dùng 44 NGUYỄN Thị Minh Tuyền Đánh giá UI £ Mục tiêu: kiểm tra xem giao diện hợp lý hay chưa £ Đánh giá đầy đủ tốn thường không thực tế đa số hệ thống £ 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 45 NGUYỄN Thị Minh Tuyền Các thuộc tính tính sử dụng Thuộc tính Tính học Tốc độ thao tác Tính chịu lỗi Khả khơi phục Tính tương thích 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? Mức độ chịu lỗi hệ thống lỗi người dùng nào? Hệ thống khôi phục từ lỗi người dùng tốt đến mức nào? Hệ thống gắn bó với mơ hình làm việc đến đâu? 46 NGUYỄN Thị Minh Tuyền Các kỹ thuật đánh giá đơn giản £ Câu hỏi để lấy phản hồi từ người dùng £ Quay video việc sử dụng hệ thống đánh giá £ Cài mã thu thập thông tin tiện ích sử dụng lỗi người dùng £ 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 47 NGUYỄN Thị Minh Tuyền