Thiết kế giao diện người dùng trong PTTKPM
Phân tích thiết kế phần mềm
Kteam
Danh sách bài học
Thiết kế giao diện người dùng trong PTTKPM
Nội dung bài viết Học nhanh
Dẫn nhập
Đa số người dùng đánh giá chất lượng của 1 hệ thống thông qua giao diện hơn là thông qua chức năng. Giao diện không tốt là 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 là nguyên nhân dẫn đến nhiều phần mềm không được sử dụng. Cùng Kteam tìm hiểu chi tiết về Thiết kế giao diện người dùng nào!
Nội dung
Để đọc hiểu bài này tốt nhất các bạn nên có kiến thức cơ bản về các phần:
- Đã từng sử dụng qua vài phần mềm.
- Đã từng suy nghĩ đến việc cấu thành của một phần mềm ra sao.
- Biết sử dụng máy tính cũng như các công cụ thành thạo.
- Đã đọc hiểu rõ bài GIỚI THIỆU VỀ PHÂN TÍCH THIẾT KẾ PHẦN MỀM
- Đã học qua bài CHIẾN LƯỢC PHÂN TÍCH ER DIAGRAM
Trong bài học này, chúng ta sẽ cùng tìm hiểu các vấn đề:
- Giới thiệu về 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 ý khi thiết kế giao diện.
- Các thành phần thiết kế giao diện.
Giới thiệu về thiết kế giao diện người dùng
Khả năng nhớ hữu hạn
Con người có thể nhớ được khoảng 7 thuật ngữ về thông tin ngay lập tức, nhưng nếu bạn đưa ra nhiều hơn thì có thể dẫn đến sai phạm.
Con người tạo ra lỗi
Khi con người gây ra lỗi, hệ thống chạy sai, nếu các thông báo lỗi ko thích hợp > stress >gây nhiều lỗi hơn.
Khả năng của từng người khác nhau
Khả năng của mỗi người khác nhau người thiết kế nên thiết kế theo khả năng của họ.
Sở thích khác nhau
Mỗi người thích tương tác với giao diện khác nhau (một số thích hình ảnh, một số thích text).
Các loại giao diện người dùng
Theo hình thức tương tác
- Tương tác trực tiếp bằng 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 năng
- 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 bằng 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
Ư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 và khả năng sử dụng của người dùng.
Xem xét giới hạn của người dùng có thể nhận dạng lỗi xảy ra.
Quen thuộc với người dùng
Các thuật ngữ và khái niệm trên giao diện nên lấy từ kinh nghiệm từ những người dùng hệ thống thường xuyên
Nhất quán
Giao diện nên được thiết kế nhất quán về thao tác trên cả hệ thống
Tối thiểu hóa sự bất ngờ
Người dùng không nên bị bất ngờ trước hành vi của hệ thống
Có khả năng khôi phục
Giao diện nên có các cơ chế nhắc nhở - khôi phục khi 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 khi có lỗi và hỗ trợ người dùng trong các ngữ cảnh khác nhau
Tính đa dạng cho người dùng
Giao diện nên cung cấp các tương tác thích hợp cho các người dùng khác nhau
Thiết kế trực quan
Giao diện có thể sử dụng ngay lần đầu tiên, không cần đào tạo
3 clicks
Hệ thống menu 3 clicks để truy cập thông tin mong muốn
Sự sáng tạo & Hội chứng gà con
Người dùng thường có khuynh hướng từ chối những hệ thống không tương tự
- Sơ đồ tổng
Thiết kế giao diện
Duyệt qua các UC, với mỗi UC phác thảo các giao diện của UC sử dụng một công cụ thiết kế giao diện nào đó.
Ví dụ giao diện phần mềm quản lý quán café
Phương pháp thiết kế giao diện
Bước 1: Xác định thông tin
Nếu đã có các mô hình dữ 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 đúng
Chỉ quan tâm tới tính đúng đắ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 của người dùng
Một số lưu ý khi thiết kế giao diện
Phân tích người dùng
Nếu không nắm được những gì người dùng muốn làm với hệ thống > không thiết kế được giao diện hiệu quả.
Người dùng và người thiết kế phải hiểu nhau.
Ngữ cảnh > mô tả kịch bản sử dụng. Đây là một cách để mô tả các phân tích.
Phân tích kĩ thuật
Phân tích công việc
Mô tả các bước bên trong một công việc.
Sử dụng phỏng vấn và bảng câu hỏi
Hỏi người dùng về công việc mà họ làm
Quan sát
Quan sát người dùng tại 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 và thận trọng khi dùng chúng.
Dùng sự thay đổi của màu sắc để trình bày một thay đổi trạng thái của hệ thống.
Dùng màu sắc để mã hóa các công việc mà người dùng cần thực hiện.
Cần thận trọng và nhất quán khi sử dụng màu sắc
Cẩn thận khi kết hợp màu sắc
Thông báo lỗi
Thông báo lỗi rất quan trọng, thông báo lỗi tồi sẽ 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ự , súc tích, thống nhất và có tính xây dựng.
Nền tảng và kinh nghiệm của người dùng nên là nhân tố chính được quan tâm khi thiết kế thông báo lỗi.
Các thành phần thiết kế giao diện
WIMPs (Windows, Icons, Menus, Pointers)
Common Controls
- Button
- Label
- TextBox
- ListBox / ComboBox / SelectBox* / CheckListBox
- RadioButton / CheckBox
- DatetimePicker, NumericUpDown
- Image, ProgressBar
Containers
- Groupbox / Panel / Tabs
Data
- GridView / Table
Ví dụ:
Bài tập
YÊU CẦU: Với mỗi bài tập sau hãy:
- Xác định các thông tin cần thiết để thiết kế giao diện
- Thiết kế giao diện đúng đắn
- Phân tích hoạt động của người dùng và để tinh chỉnh giao diện sao cho tiện dụng với người dùng nhất
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ừng túi bài thi. Mỗi túi bài thi của một phòng thi. Mỗi môn thi sẽ được thi tại 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 6 môn.
Thiết kế giao diện gọi món tại một quán Coffee
- Người sử dụng: Nhân viên phục vụ sử dụng phần mềm trên thiết bị di động để thực hiện ghi nhận thông tin gọi món cho khách hàng.
- Khi khách hàng gọi món có thể gọi nhiều món cùng lúc, khách hàng có thể đưa thêm những yêu cầu đặc biệt (ví dụ: cà phê ít đường, nhiều đường, ...)
- Khách hàng không cần cung cấp thông tin khách hàng
Thiết kế giao diện lập hoá đơn bán hàng tại một 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 mỗi nhân viên có thể lập đến 200 hoá đơn.
- Nhân viên có thể thêm và xoá các sản phẩm (khi nhập sai hoặc cần thay đổi)
Hãy thiết kế giao diện phân công nhiệm vụ cho nhân viên trong một dự án
- Việc phân công được thực hiện theo từng dự án
- Mỗi nhân viên không thực hiện quá 5 dự án và tổng thời gian của tất cả dự án mà nhân viên tham gia không quá 50 giờ 3
- Những dự án đã kết thúc rồi thì không phân công nữa
- Mỗi lần phân công có thể thực hiện phân công nhiều nhân viên
- Ưu tiên phân công cho các nhân viên cùng phòng với phòng chủ trì của đề án
Bonus
Kết luận
Bài viết có sử dụng nhiều hình ảnh của tài liệu PTTKHT của trường ĐH KHTN
Qua bài này các bạn đã nắm được cách thiết kế giao diện người dùng tốt.
Bài sau chúng ta sẽ cùng tìm hiểu về KIẾN TRÚC VÀ PHÂN CHIA CHỨC NĂNG
Cảm ơn các bạn đã theo dõi bài viết. Hãy để lại bình luận hoặc góp ý của mình để phát triển bài viết tốt hơn. Đừng quên “Luyện tập – Thử thách – Không ngại khó”.
Tải xuống
Tài liệu
Nhằm phục vụ mục đích học tập Offline của cộng đồng, Kteam hỗ trợ tính năng lưu trữ nội dung bài học Thiết kế giao diện người dùng trong PTTKPM dưới dạng file PDF trong link bên dưới.
Ngoài ra, bạn cũng có thể tìm thấy các tài liệu được đóng góp từ cộng đồng ở mục TÀI LIỆU trên thư viện Howkteam.com
Đừng quên like và share để ủng hộ Kteam và tác giả nhé!
Thảo luận
Nếu bạn có bất kỳ khó khăn hay thắc mắc gì về khóa học, đừng ngần ngại đặt câu hỏi trong phần bên dưới hoặc trong mục HỎI & ĐÁP trên thư viện Howkteam.com để nhận được sự hỗ trợ từ cộng đồng.
Tác giả/Dịch giả
Khóa học
Phân tích thiết kế phần mềm
Rất trực quan