Bài giảng Nhập môn Công nghệ phần mềm - Tuần 11: Thiết kế giao diện người dùng cung cấp cho người đọc các kiến thức: Các vấn đề về thiết kế giao diện người dùng, quy trình thiết kế giao diện người dùng. Mời các bạn cùng tham khảo.
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 slide dịch hiệu chỉnh dựa vào slides Ian Sommerville CuuDuongThanCong.com https://fb.com/tailieudientucntt Brainstorming £ Thảo luận nhóm 5' £ Nội dung thảo luận: Khi thiết kế giao diện ta thường đề cập tới vấn đề gì? NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt Một số giao diện người dùng CuuDuongThanCong.com https://fb.com/tailieudientucntt Một số giao diện người dùng Nguồn: https://developer.apple.com/design/tips/ CuuDuongThanCong.com https://fb.com/tailieudientucntt NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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ù khơng phải tất ngun lý áp dụng cho tất thiết kế 10 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt Phân tích tác vụ theo phân cấp 39 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 40 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 41 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt 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, chúng tơi 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 42 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 43 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 45 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 46 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt 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ữ chun 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 47 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 48 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt Đá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 49 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt 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? 50 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 51 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt CuuDuongThanCong.com https://fb.com/tailieudientucntt Bài tập nhóm đồ án £ Vẽ wireframe cho UI cho đồ án em (ít 2) đưa thơng báo lỗi £ Không làm form đăng nhập, đăng xuất báo lỗi đăng nhập sai £ Kết thúc làm lúc 11:55 £ Hình thức làm bài: p Trên giấy CuuDuongThanCong.com https://fb.com/tailieudientucntt ... 23 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt Hiển thị giá trị tương đối 24 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt Hiển thị. .. nghĩa; p Lạm dụng màu sắc hiển thị 25 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt Ví dụ cách hiển thị màu sắc 26 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt... dụ: dạng đồ họa) 18 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com https://fb.com/tailieudientucntt Mô hình MVC Mơ hình MVC cách hỗ trợ nhiều biểu diễn khác liệu 19 NGUYỄN Thị Minh Tuyền CuuDuongThanCong.com