Bài 8 thiết kế giao diện người dùng trong pttkpm howkteam com

KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM | 21 Bài 8: THIẾT KẾ GIAO DIỆN NGƯỜI DÙNG TRONG PTTKPM Xem học website để ủng hộ Kteam: Thiết kế giao diện người dùng PTTKPM Mọi vấn đề lỗi website làm ảnh hưởng đến bạn thắc mắc, mong muốn khóa học mới, nhằm hỗ trợ cải thiện Website Các bạn vui lòng phản hồi đến Fanpage How Kteam nhé! Dẫn nhập Đa số người dùng đánh giá chất lượng hệ thống thông qua giao diện thông qua chức Giao diện không tốt nguyên nhân dẫn người dùng đến lỗi Thiết kế giao diện người dùng không tốt nguyên nhân dẫn đến nhiều phần mềm không sử dụng Cùng Kteam tìm hiểu chi tiết Thiết kế giao diện người dùng nào! Nội dung Để đọc hiểu tốt bạn nên có kiến thức phần:      Đã sử dụng qua vài phần mềm Đã suy nghĩ đến việc cấu thành phần mềm Biết sử dụng máy tính cơng cụ thành thạo Đã đọc hiểu rõ GIỚI THIỆU VỀ PHÂN TÍCH THIẾT KẾ PHẦN MỀM Đã học qua CHIẾN LƯỢC PHÂN TÍCH ER DIAGRAM Trong học này, tìm hiểu vấn đề: Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM       | 21 Giới thiệu thiết kế giao diện người dùng Các loại giao diện người dùng Nguyên lý thiết kế giao diện người dùng Phương pháp thiết kế giao diện Một số lưu ý thiết kế giao diện Các thành phần thiết kế giao diện Giới thiệu thiết kế giao diện người dùng Khả nhớ hữu hạn Con người có thể nhớ khoảng thuật ngữ thông tin lập tức, bạn đưa nhiều thì có thể dẫn đến sai phạm Con người tạo lỗi Khi người gây lỗi, hệ thống chạy sai, thông báo lỗi ko thích hợp > stress >gây nhiều lỗi Khả người khác Khả người khác người thiết kế nên thiết kế theo khả họ Sở thích khác Mỗi người thích tương tác với giao diện khác (một số thích hình ảnh, số thích text) Các loại giao diện người dùng Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM | 21 Theo hình thức tương tác      Tương tác trực tiếp tay  Chọn menu  Điền vào mẫu cho sẳn Dùng ngôn ngữ lệnh Dùng ngôn ngữ tự nhiên Theo chức     Giao diện nhập Giao diện cập nhật Giao diện xuất Tương tác trực tiếp tay Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM | 21 Chọn menu Điền vào mẫu cho sẵn Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM | 21 Dùng ngôn ngữ lệnh Dùng ngôn ngữ tự nhiên Ưu điểm   Dễ mở rộng Dễ sử dụng Khuyết điểm   Yêu cầu gõ nhiều Không đáng tin cậy Nguyên lý thiết kế giao diện người dùng Cần xem xét nhu cầu, kinh nghiệm khả sử dụng người dùng Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM | 21 Xem xét giới hạn người dùng có thể nhận dạng lỗi xảy  Quen thuộc với người dùng Các thuật ngữ khái niệm giao diện nên lấy từ kinh nghiệm từ người dùng hệ thống thường xuyên  Nhất quán Giao diện nên thiết kế quán thao tác hệ thống Tối thiểu hóa bất ngờ Người dùng khơng nên bị bất ngờ trước hành vi hệ thống Có khả khơi phục Giao diện nên có chế nhắc nhở - khôi phục người dùng làm sai Hướng dẫn người dùng Giao diện nên có phản hồi cho người dùng có lỗi hỗ trợ người dùng ngữ cảnh khác Tính đa dạng cho người dùng Giao diện nên cung cấp tương tác thích hợp cho người dùng khác Thiết kế trực quan Giao diện có thể sử dụng lần đầu tiên, không cần đào tạo clicks Hệ thống menu clicks để truy cập thông tin mong muốn Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM | 21 Sự sáng tạo & Hội chứng gà Người dùng thường có khuynh hướng từ chối hệ thống không tương tự  Sơ đồ tổng Thiết kế giao diện Duyệt qua UC, với UC phác thảo giao diện UC sử dụng công cụ thiết kế giao diện Ví dụ giao diện phần mềm quản lý qn café Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM | 21 Phương pháp thiết kế giao diện Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM | 21 Bước 1: Xác định thơng tin Nếu có mơ hình liệu thì dựa vào để xác định thơng tin (mơ hình ER, mô hình quan hệ) Bước 2: Thiết kế giao diện Chỉ quan tâm tới tính đắn Khơng quan tâm tới tính tiện dụng Bước 3: Tinh chỉnh giao diện Quan tâm tới tính tiện dụng dựa vào phân tích hoạt động người dùng Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM 10 | 21 Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM 11 | 21 Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM 12 | 21 Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM 13 | 21 Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM 14 | 21 Một số lưu ý thiết kế giao diện Phân tích người dùng Nếu không nắm gì người dùng muốn làm với hệ thống > không thiết kế giao diện hiệu Người dùng người thiết kế phải hiểu Ngữ cảnh > mô tả kịch sử dụng Đây cách để mô tả phân tích Phân tích kĩ thuật  Phân tích cơng việc Mơ tả bước bên công việc  Sử dụng vấn bảng câu hỏi Hỏi người dùng cơng việc mà họ làm Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM 15 | 21  Quan sát Quan sát người dùng nơi họ làm việc Nguyên tắc sử dụng màu sắc Hạn chế số lượng màu sử dụng thận trọng dùng chúng Dùng thay đổi màu sắc để trình bày thay đổi trạng thái hệ thống Dùng màu sắc để mã hóa cơng việc mà người dùng cần thực Cần thận trọng quán sử dụng màu sắc Cẩn thận kết hợp màu sắc Thông báo lỗi Thông báo lỗi quan trọng, thông báo lỗi tồi dễ làm người dùng ko muốn sử dụng hệ thống Thông báo lỗi nên: lịch , súc tích, thống có tính xây dựng Nền tảng kinh nghiệm người dùng nên nhân tố quan tâm thiết kế thơng báo lỗi Các thành phần thiết kế giao diện Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM 16 | 21  WIMPs (Windows, Icons, Menus, Pointers) Common Controls        Button Label TextBox ListBox / ComboBox / SelectBox* / CheckListBox RadioButton / CheckBox DatetimePicker, NumericUpDown Image, ProgressBar Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM 17 | 21  Containers  Groupbox / Panel / Tabs Data  GridView / Table Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM 18 | 21 Ví dụ: Bài tập Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM 19 | 21  YÊU CẦU: Với tập sau hãy: Xác định thông tin cần thiết để thiết kế giao diện Thiết kế giao diện đắn Phân tích hoạt động người dùng để tinh chỉnh giao diện cho tiện dụng với người dùng Thiết kế giao diện nhập điểm thi kết thúc học phần cho phòng đào tạo trường ĐH Khoa học Tự nhiên Người sử dụng: Nhân viên phòng đào tạo Một số lưu ý:   Thường nhập điểm theo túi thi Mỗi túi thi phịng thi Mỗi mơn thi thi nhiều phòng với danh sách sinh viên tương ứng Trường ĐHKHTN có khoảng 20000 sinh viên Mỗi sinh viên trung bình học mơn Thiết kế giao diện gọi quán Coffee    Người sử dụng: Nhân viên phục vụ sử dụng phần mềm thiết bị di động để thực ghi nhận thông tin gọi cho khách hàng Khi khách hàng gọi có thể gọi nhiều lúc, khách hàng có thể đưa thêm yêu cầu đặc biệt (ví dụ: cà phê đường, nhiều đường, )  Khách hàng khơng cần cung cấp thơng tin khách hàng Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM 20 | 21 Thiết kế giao diện lập hoá đơn bán hàng siêu thị Lưu ý:      Một hoá đơn mua nhiều sản phẩm  Nhân viên thường xuyên phải thối lại tiền thừa cho khách hàng Một ngày nhân viên có thể lập đến 200 hố đơn Nhân viên có thể thêm xố sản phẩm (khi nhập sai cần thay đổi) Hãy thiết kế giao diện phân công nhiệm vụ cho nhân viên dự án      Việc phân công thực theo dự án Mỗi nhân viên không thực dự án tổng thời gian tất dự án mà nhân viên tham gia không 50 Những dự án kết thúc khơng phân cơng Mỗi lần phân cơng có thể thực phân cơng nhiều nhân viên Ưu tiên phân công cho nhân viên phịng với phịng chủ trì đề án Copyright © Howkteam.com KHĨA PHÂN TÍCH THIẾT KẾ PHẦN MỀM HOWKTEAM.COM 21 | 21 Bonus Kết luận Bài viết có sử dụng nhiều hình ảnh tài liệu PTTKHT trường ĐH KHTN Qua bạn nắm cách thiết kế giao diện người dùng tốt Bài sau tìm hiểu KIẾN TRÚC VÀ PHÂN CHIA CHỨC NĂNG Cảm ơn bạn theo dõi viết Hãy để lại bình luận góp ý mình để phát triển viết tốt Đừng quên “Luyện tập – Thử thách – Không ngại khó” Copyright © Howkteam.com