Công nghệ phần mềm - Thiết kế giao diện người dùng

hận thông qua tương tác giao diện Quyết định sự thành bại của một dự án → D ễ sử dụng, thân thiện 3 Nguyên Tắc Thiết Kế Người sử dụng hệ thống Dễ điều khiển Ít phải nhớ Giao diện toàn vẹn Các nguyên tắc thiết kế giao diện Sự quen thuộc của người sử dụng Nhất quán Tối thiểu hóa sự bất ngờ Khả năng phục hồi Hướng dẫn người dùng Đa dạng người dùng 4 Người sử dụng hệ thống Dễ điều khiển Không bắt người dùng làm những hoạt động không ưu thích Có được sự mềm dẻo trong tương tác: keyboard, mouse, bút... Người dùng có thể ngắt thao tác và undo Che dấu kỹ thuật bên trong Đối tượng sử dụng là khác nhau 5 Người sử dụng hệ thống Người dùng ít phải ghi nhớ Nên đưa ra những gợi ý trực quan cho người dùng Hiển thị icon bẳng những biểu tượng có ý nghĩa Tạo đường dẫn tắt (shortcut) trực quan ........ 6 Người sử dụng hệ thống Giao diện toàn vẹn cho phép người dùng sử dụng các tác vụ theo ngữ cảnh Các giao diện trong ứng dụng phải toàn vẹn: Đầy đủ:thêm, xóa, sửa Có cùng các thức Toàn vẹn về mô hình cũ đang được người dùng ưu chuộng ..... 7 Các nguyên tắc thiết kế giao diện Sự quen thuộc của người sử dụng Giao diện phải được xây dựng trên các thuật ngữ và các khái niệm mà người sử dụng cảm thấy dễ hiểu hơn là thuật ngữ liên quan đến máy tính. Nhất quán Hệ thống nên hiển thị ở mức thống nhất thích hợp. Tối thiểu hóa sự bất ngờ Nếu một yều được xử lý theo các thông thường thì người sử dụng có thể dự đoán thao tác yêu cầu tương tự khác 8 Các nguyên tắc thiết kế giao diện Khả năng phục hồi Hoàn tác vụ (undo). Hỏi lại những hành động: xóa, hủy.. Hướng dẫn người dùng hệ thống trợ giúp Hướng dẫn trực tiếp Đa dạng người dùng Hỗ trợ nhiều loại tương tác cho nhiều người khác nhau. Vd: cận thị, mù màu 9 Tiến trình thiết kế giao diện Là một quy trình lặp đi lặp lại với sự liên lạc chặt chẽ giữa người dùng và người thiết kế. Vd: ... Gồm 3 hoạt động chính: phân tích người sử dụng: tìm hiểu người dùng sẽ làm gì với hệ thống Lập mẫu thử hệ thống: phát triển một loạt các mẫu thử để thử nghiệm Đánh giá giao diện: thử nghiệm các mẫu thử cuối cùng với người dùng để đưa ra bản chính thức 10 Tiến trình thiết kế giao diện Quá trình thiết kế có thể chia ra làm hai bước chính: Thiết kế tổng thể: Giao diện có bao nhiêu màn hình Sự liên kết giữa các màn hì nh đó như thế nào Thiết kế chi tiết: mô tả chi tiết từng màn hình Sắp xếp các đối tượng trong một màn hình 11 Tiến trình thiết kế giao diện 12 Quá trình thiết kế sơ lược Tiến trình thiết kế giao diện (tổng thể) 13 Sơ đồ thiết kế giao diện người dùng Tiến trình thiết kế giao diện (tổng thể) Phân tích và tìm hiểu các hoạt động của người dùng Hiểu rõ người dùng muốn làm gì với hệ thống Mô tả theo cách cả người dùng lẫn người thiết kế đều hiểu → kỹ thuật viên cần Phân tích tác vụ: mô hình hóa các bước cần thực hiện để hoàn thành một nhiệm vụ Phỏng vấn và đặt các câu hỏi trắc nghiệm Mô tả: quan sát người sử dụng làm việc ... 14 Kỹ thuật phân tích Phân tích tác vụ: 15 Retrieve pictures from remote libraries Discover possible sources Establish search terms Search for pictures Request photocopies of found items 1 2 3 4. Select library Log in to catalogue Search for pictures Modify search terms Record relevant items 3.1 3.2 3.3 3.4 3.5 Enter search terms Initiate search Review results 3.3.1 3.3.2 3.3.3 do 1, 2, 3 until pictures found, 4 do 3.1, 3.2, 3.3 until pictures found, 3.4 if necessary , 3.5 do 3.3.1, 3.3.2, 3.3.3 Kỹ thuật phân tích Phỏng vấn: có thể là phỏng vấn tay đôi, hoặc nhóm Đặt câu hỏi theo hai dạng: câu hỏi mở, câu hỏi đóng (có thể trắc nghiệm) Câu hỏi có thể sắp xếp: thu hẹp dần, mở rộng dần Chú ý: không được thể hiện sự áp đặt, một định kiến chủ quan, biết lắng nghe, tôn trọng, cảm thông ... Phiếu điều tra: có thể coi là một hình thức phỏng vấn gián tiếp 16 Kỹ thuật phân tích Mô tả Quát sát người dùng khi họ đang làm việc, có thể hỏi công việc của học Có nhiều tác vụ mà tính trực quan, rất khó để diễn đạt nên quan sát họ làm việc để cảm nhận là tốt nhất Giúp hiểu về vai trò của các ảnh hưởng xã hôi, tổ chức đối với công việc 17 Tiến trình thiết kế giao diện (tổng thể) Tạo bản mẫu thiết kế: Cho phép người dùng trải nghiệm trực tiếp đối với giao diện. Đánh giá khả năng sử dụng giao diện một cách khách quan nhất Quy trình làm bản mẫu có thể theo 2 bước: Làm bản thiết kế trên giấy trước Từ bản mẫu trên giấy cộng với tìm hiểu ý kiến người dùng để tạo ra bản mẫu động phức tạp hơn Sau khi tạo bản mẫu thiết kế động đã được người dùng đánh giá sẽ tiến hành tạo bản mẫu chạy được Cài đặt giao diện người dùng cuối cùng 18 Tiến trình thiết kế giao diện Kỹ thuật thiết kế Tương tác người dùng: cách người dùng đưa thông tin vào hệ thống Biểu diễn thông tin: cách hệ trình diễn thông tin cho người dùng Giải pháp được xem xét theo góc độ: Thiết bị tương tác với người dùng Cách hệ thống trình diễn chủng loại giao diện Mô hình tương tác 19 Tiến trình thiết kế giao diện Thiết bị vào ra: Màn hình Bàn phím Mouse, bút từ Màn hình cảm biến Mic, loa Smart cards.... Cả thiết bị lẫn phương thức đều đang tiến hóa 20 Tiến trình thiết kế giao diện Các bộ phận thiết kế Kỹ sư phần mềm tạo ra mô hình thiết kế (design model) Người phụ trách về nhân sự, tạo ra mô hình người dùng ( user model) Người dùng cuối phát triển mô hình nhận biết hệ thống (system perception) Người thực thi tạo ra mô hình thực thi (implementation model) 21 Tiến trình thiết kế giao diện Thiết kế chi tiết trên màn hình dao diện Bố trí màn hình theo loại dữ liệu: hình ảnh, icon... Người dùng có thể tùy biến màn hình Phân chia những báo cáo lớn dễ hiểu nhất Dữ liệu xuất ra dạng hình ảnh phải vừa vặn Sử dụng màu sắc phù hợp Cảnh báo lỗi 22 Các vấn đề trong thiết kế giao diện Thời gian phản hồi: Thời gian phản hồi trung bình: không được lâu quá: cảm giác mệt mỏi Cần chứng tỏ hệ thống đang hoạt động Độ biến thiên thời gian Gây cảm giác hệ thống đang gặp lỗi 23 Các vấn đề trong thiết kế giao diện Thông báo: Là phản hồi của hệ thống đối với thao tác Cần có nghĩa, dễ hiểu, đưa ra các thông tin hưu ích với người dùng Tránh đưa ra sai số liệu Định dạng thông báo nhất quán Thông báo lỗi chính xác Có tính xây dựng, nguyên nhân, cách khắc phục Số lượng thông báo Thời điểm thứ tự đưa ra thông báo 24 Xử lý lỗi Giả sử một game thủ tìm kiếm thông tin của một hero trong game bằng cách nhật tên Mời nhận tên hero và ấn OK YASUOS Tên Hero OK Cancel Xử lý lỗi Thông báo lỗi kiểu hệ thống Thông báo lỗi kiểu người dùng Patients Help Retry Cancel Không có tướng nào tên YASUOS Nhấn Patients để xem danh sách Nhấn Retry để nhập lại Nhấn Help để tìm hiểu thêm Lỗi: dxt000# Dữ liệu bạn nhập lỗi ? OK Cancel Các vấn đề trong thiết kế giao diện Tiện ích (trợ giúp) Cần có các tiện ích giúp đỡ người sử dụng Tiện ích tích hợp: trợ giúp, trực tuyến, theo ngữ cảnh Chú giải thao tác, giao diện Các tài liệu trực tuyến Tra cứu chức năng hệ thống. Vd: chứ năng tra cứu trực tuyến của lumia Các macro: tự động hóa thao tác 27 Các vấn đề trong thiết kế giao diện Hệ thống HELP Help? Nghĩa là “help. I want information” Help ! Nghĩa là “help. I'm in trouble ” Help không đơn giản chỉ là 1 sổ tay hướng dẫn 1 hệ thống help thông tin là hiện thị thông tin động Thông tin help cung cấp cho người dụng phải giá trị, không tràn lan. Help nên được thiết kế ở nơi người dùng dễ tìm nhất 28 Các hình thức tương tác Tương tác trực tiếp với thông tin: Vd: soạn thảo văn bản, điền form Dễ học, dễ sử dụng Nhận được tức thời kết quả thao tác Cài đặt phức tạp, tốn tài nguyên phần cứng 29 Các hình thức tương tác Tương tác gián tiếp Vd: chọn từ lệnh menu giao diện dòng lệnh Thuận tiện khi lặp đi lặp lại thao tác Phức tạp Kém trực quan 30 Các hình thức tương tác Sử dụng thực đơn (menu ) Không cần nhớ lệnh Tối thiểu hóa dùng bàn phím Tránh các lỗi như sai lệnh, tham số Dễ dàng tạo các trợ giúp theo ngữ cảnh 31 Các hình thức tương tác Đối thoại (Dialog) Dùng khi cần người dùng đưa ra quyết định Vd: hệ thống đưa ra đối thoại để người dụng chọn giữa Abort, Retry, Ignore 32 Tính kỹ nghệ trong thế kế Giao diện là phần tử dễ thay đổi Thay đổi quy trình: phương thức thao tác Thay đổi môi trường: phần cứng, hệ điều hành Nâng cấp: đẹp hơn dễ sử dụng hơn Giao diện phải dễ sửa đổi: có tính khả chuyển Giao diện nên độc lập với xử lý 33 Giao diện người dùng Giao diện người dùng Giao diện người dùng Tham số Phương pháp và công cụ thiết kế Phương pháp: Hướng đối tượng Hướng chức năng Công cụ: Power Designer Rational Rose Visual basic, c# . 34 Các loại giao diện Giao diện dòng lệnh Là phương thức tương tác đầu tiên Nhập lệnh dữ liệu từ bàn phím Dễ cài đặt so với giao diện đồ họa Thực hiện thông qua hàm chuẩn của ngôn ngữ Không tốn tài nguyên hệ thống Có khả năng tạo ra lệnh phức tạp nhờ tổ hợp Thao tác thực hiện tuần tự, khó sửa lỗi Không phù hợp với người dùng ít kinh nghiệm 35 Giao diện dòng lệnh 36 Các loại giao diện Giao diện đồ họa Là giao diện thông dụng nhất hiện nay. Trên PC, smart phone..... Dễ học, dễ sử dụng thuận tiện với người ít kinh nghiệm Có nhiều cửa sổ. Không sợ mất thông tin khi tương tác song song giữa các cửa sổ Có thể hiển thị, tương tác dữ liệu trên nhiều vị trí trong cửa sổ 37 Giao diện đồ họa (GUI) 38 Giao diện đồ họa (GUI) 39 CÔNG NGHỆ PHẦN MỀM Thiết Kế Giao Diện Người Dùng Cảm ởn giáo viên và các bạn đã lắng nghe 40