Bài thuyết trình nhóm: Công nghệ phần mềm thiết kế giao diện người dùng trình bày tổng quan về thiết kế giao diện người dùng, nguyên tắc thiết kế giao diện người dùng, tiến trình thiết kế giao diện, các công cụ thiết kế, các mẫu thiết kế giao diện. Mời các bạn cùng tham khảo nội dung chi tiết tài liệu.
CÔNG NGHỆ PHẦN MỀM Thiết Kế Giao Diện Người Dùng Hồ hải nghĩa – lớp 13T3 Phạm Ngọc Hạnh – 12T3 Tổng quan thiết kế giao diện người dùng • Giới thiệu • Nguyên tắc thiết kế giao diện người dùng • Tiến trình thiết kế giao diện • Các cơng cụ thiết kế • Các mẫu thiết kế giao diện Giới thiệu tổng quát Ø Ø Là khâu thiết kế phần mềm • Hướng người dùng • Làm mẫu, người dùng đánh giá Vai trò, tầm ảnh hưởng • Cho phép người dùng sử dụng hệ thống • Người dùng đánh giá, cảm nhận thơng qua tương tác giao diện • Quyết định thành bại dự án 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 người sử dụng • Nhất qn • Tối thiểu hóa bất ngờ Người sử dụng hệ thống Ø Dễ điều khiển • Không bắt người dùng làm hoạt động không ưu thích • Có mềm dẻo tương tác: keyboard, mouse, bút • Người dùng ngắt thao tác undo • Che dấu kỹ thuật bên • Đối tượng sử dụng khác Người sử dụng hệ thống • Người dùng phải ghi nhớ • Nên đưa gợi ý trực quan cho người dùng • Hiển thị icon bẳng biểu tượng có ý nghĩa • Tạo đường dẫn tắt (shortcut) trực quan • Người sử dụng hệ thống Ø Giao diện tồn vẹn • cho phép người dùng sử dụng tác vụ theo ngữ cảnh • Các giao diện ứng dụng phải tồn vẹn: • • Đầy đủ:thêm, xóa, sửa • Có thức Tồn vẹn mơ hình cũ người dùng ưu chuộng Các nguyên tắc thiết kế giao diện Ø Sự quen thuộc người sử dụng Giao diện phải xây dựng thuật ngữ khái niệm mà người sử dụng cảm thấy dễ hiểu 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 thích hợp Ø Tối thiểu hóa bất ngờ Nếu yều xử lý theo thông thường người sử dụng dự đốn thao tác yêu cầu tương tự khác Các nguyên tắc thiết kế giao diện Ø Ø Ø Khả phục hồi • Hoàn tác vụ (undo) • Hỏi lại 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 Vd: cận thị, mù màu Tiến trình thiết kế giao diện Ø Là quy trình lặp lặp lại với liên lạc chặt chẽ người dùng người thiết kế Vd: Ø Gồm hoạt động chính: • phân tích người sử dụng: tìm hiểu người dùng làm với hệ thống • Lập mẫu thử hệ thống: phát triển loạt mẫu thử để thử nghiệm • 10 Xử lý lỗi ? Lỗi: dxt000# Dữ liệu bạn nhập lỗi OK Cancel Thơng báo lỗi kiểu hệ thống Khơng có tướng 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 Patients Help Retry Cancel Thông báo lỗi kiểu người dùng Các vấn đề thiết kế giao diện Ø Tiện ích (trợ giúp) • Ø 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 • Ø Cần có tiện ích giúp đỡ người sử dụng Tra cứu chức hệ thống Vd: tra cứu trực tuyến lumia Các macro: tự động hóa thao tác 27 Các vấn đề thiết kế giao diện Ø Hệ thống HELP • Help? Nghĩa “help I want information” • Help! Nghĩa “help I'm in trouble” • Help khơng đơn giản sổ tay hướng dẫn • hệ thống help thơng tin 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 thiết kế nơi người dùng dễ tìm 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 tức thời kết 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 lặp 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 lỗi sai lệnh, tham số • Dễ dàng tạo trợ giúp theo ngữ cảnh 31 Các hình thức tương tác Ø Đối thoại (Dialog) • Dùng cần người dùng đưa định Vd: hệ thống đưa đối thoại để người dụng chọn Abort, Retry, Ignore 32 Tính kỹ nghệ trong thế kế Ø Giao diện 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 dễ sử dụng Giao diện phải dễ sửa đổi: có tính khả chuyển m a Th Giao diện người dùng số Giao diện người dùng Giao diện người dùng 33 Phương pháp và công cụ thiết kế Ø Ø Phương pháp: • Hướng đối tượng • Hướng chức 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 • Nhập lệnh liệu từ bàn phím • Dễ cài đặt so với giao diện đồ họa • Thực thơng qua hàm chuẩn ngơn ngữ • Khơng tốn tài ngun hệ thống • Có khả tạo lệnh phức tạp nhờ tổ hợp • Thao tác thực tuần tự, khó sửa lỗi • 35 Khơng phù hợp với người dùng kinh nghiệm 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 Trên PC, smart phone • Dễ học, dễ sử dụng thuận tiện với người kinh nghiệm • Có nhiều cửa sổ Khơng sợ thơng tin tương tác song song cửa sổ • Có thể hiển thị, tương tác liệu nhiều vị trí 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 bạn lắng nghe 40 ...Tổng quan thiết kế giao diện người dùng • Giới thiệu • Nguyên tắc thiết kế giao diện người dùng • Tiến trình thiết kế giao diện • Các cơng cụ thiết kế • Các mẫu thiết kế giao diện Giới thiệu... kế giao diện người dùng Cùng người dùng đánh giá thiết kế Cài đặt giao diện người dùng cuối 13 Tiến trình thiết kế giao diện (tổng thể) Ø Phân tích tìm hiểu hoạt động người dùng • Hiểu rõ người. .. thiết kế giao diện (tổng thể) Phân tích tìm hiểu hoạt động người dùng Tạo mẫu thiết kế giấy Cùng người dùng đánh giá thiết kế Bản mẫu thiết kế Tạo mẫu thiết kế động Bản mẫu chạy Sơ đồ thiết kế