Phân tích thiết kế phần mềm

Phân tích thiết kế phần mềm

Thiết kế giao diện người dùng trong PTTKPM Thiết kế giao diện người dùng trong PTTKPM Thiết kế giao diện người dùng trong PTTKPM Thiết kế giao diện người dùng trong PTTKPM Thiết kế giao diện người dùng trong PTTKPM 2/5 (28 reviews)

Thiết kế giao diện người dùng trong PTTKPM

Đã đăng 2017-04-24 01:21:11 bởi Kteam
0 bình luận 5891 lượt xem
Thiết kế giao diện người dùng trong PTTKPM 2 /5 stars (2 reviews)
 

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:

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

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

Chọn menu

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

Điền vào mẫu cho sẵn

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

Dùng ngôn ngữ lệnh

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

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

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

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 đó.

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

Ví dụ giao diện phần mềm quản lý quán café

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,


Phương pháp thiết kế giao diện

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

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

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,


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)

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,


Common Controls

  • Button 
  • Label
  • TextBox
  • ListBox / ComboBox / SelectBox* / CheckListBox
  • RadioButton / CheckBox
  • DatetimePicker, NumericUpDown
  • Image, ProgressBar

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

 Containers

  • Groupbox / Panel / Tabs

Data

  • GridView / Table

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,

Ví dụ:

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,


Bài tập

 YÊU CẦU: Với mỗi bài tập sau hãy:

  1. Xác định các thông tin cần thiết để thiết kế giao diện 
  2. Thiết kế giao diện đúng đắn 
  3. 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

kteam, howkteam, how kteam, howkteam.com, phân tích thiết kế phần mềm, cơ sở dữ liệu, mô hình thực thể, mô hình quan hệ, định danh, ER diagram, ERD,


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 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 hoặc +1 Google để ủ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ÌNH LUẬ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. 

 

Chia sẻ:
Thảo luận Hỏi và đáp Báo lỗi bài viết
Hủy bỏ   hoặc  
Hủy bỏ   hoặc  
Hủy bỏ   hoặc  

Chiến dịch

Kteam - Howkteam Free Education