MÔN HỌC TƯƠNG TÁC NGƯỜI MÁY ĐỀ TÀI: ĐẶT XE CÔNG NGHỆ. DÀNH CHO HỌC VÊN SINH VIÊN CÓ NHU CẦU TÌM HIÊU VỀ TƯƠNG TÁC NGƯỜI MÁY . 1. Giới thiệu chung về tương tác người máy (HCI) Con người tương tác với máy tính bằng nhiều cách khác nhau; giao diện giữa con người và máy tính đóng vai trò quan trọng để tạo điều kiện cho sự tương tác. Các phần mềm máy tính, trình duyệt internet, máy tính cầm tay, và các kiốt máy tính sử dụng những giao diện đồ họa người dùng (GUI) thịnh hành ngày nay. Lĩnh vực Tương tác người–máy tính phát triển cả trong chất lượng tương tác, và cả trong những nhánh khác nhau trong lịch sử cho nó. Thay vì thiết kế giao diện thông thường, những nhánh nghiên cứu khác nhau tập trung vào các khái niệm của đa phương thức. Những bước tiến lớn trong các nghiên cứu thuộc lĩnh vực Tương tác người–máy tính ở các mảng: Giao diện thông minh và thích ứng, Điện toán phổ biến và Điện toán di động. Tương tác người máy là nghiên cứu và phát triển giao diện máy tính với mục đích là làm cho con người dễ sử dụng hơn. HCI không chỉ là thiết kế giao diện nó còn nghiên cứu về: cách thức con người sử dụng các giao diện, phát triển các ứng dụng mới, phát triển các công cụ, thiết bị mới. HCI nghiên cứu 3 phần: Về hình thức: các hình thức giao tiếp giữa người và máy, về chức năng: các chức năng mới trong giao tiếp người máy, về cài đặt: cài đặt các giao diện Các chuyên nghành liên quan: Tâm lý học, xã hội học, triết học, Sinh lý học, Công thái học, Thiết kế đồ họa, âm thanh, hình ảnh, Kỹ nghệ phần mềm, … 2. Mục đích Tất cả các hệ thống sinh ra để phục vụ con người, hệ thống nào phục vụ tốt sẽ tồn tại và phát triên. Do vậy, việc tạo ra một thiết kế giao diện tốt là rất quan trọng, giúp giảm chi phí cho những trục trặc do giao diện (ví dụ: đặt nhầm vị trí các nút khiến người dùng bấm nhầm, …), tăng khả năng bán được của sản phẩm (giao diện đẹp sẽ được chú ý hơn), giảm bệnh nghề nghiệp (ví dụ: mắt bị cận do…), giảm lỗi nguy hiểm đến tính mạng (ví dụ: giao diện ko tốt có thể nhầm những nút phá hủy, shut down khiến người dùng không biết mà bấm vào). Về mặt kinh tế: Tăng năng suất lao động, giảm chi phí đào tạo, giảm lỗi do người dùng, tạo ra sản phẩm chất lượng cao
Nội dung cụ thể
Chương 2: Phân tích yêu cầu hệ thống
2.1 Mô hình hóa chức năng và người dùng hệ thống.
2.2 Phân tích yêu cầu chi tiết của từng chức năng. 2.2.1 Chức năng đặt xe- Đinh Công Hiển. a Mô hình hóa nghiệp vụ. b Mô tả chi tiết nghiệp vụ
Người đặt xe Hệ thống
Luồng 1 : Chọn chứu năng đặt xe công nghệ
Chuyển sang giao diện hiển thị bản đồ, giao diện tìm vị trí , nhập điểm đi và điểm đến
Thực thi 1.1 : Xác định được vị trí trên bản đồ Thực thi 1.2 : Chưa xác định được vị trí tiến hành yêu cầu bật định vị.
Thực thi 1.3 : Không bật định vị trở về giao diện chính
Thực thi 1.4 : Cập nhật vị trí điểm đón theo cách thay đổi trên bản đồ hoặc nhập vào địa điểm đón hiện tại.
- Di chuyển vị trí trên bản đồ
Chọn vị trí bằng cách nhập địa chỉ để hiển thị giao diện tìm kiếm Sau khi tìm kiếm, nếu không tìm thấy địa chỉ, hệ thống sẽ thông báo cho người dùng biết.
Thực thi 2.2 : Trở về bản đồ và trả về địa chỉ trên bản đồ
Thực thi 2.2.1 : Chưa có điểm đến- Chờ nhập điểm đến
- Hiển thị giao diện thể hiện khoảng cách , lộ trình, lựa chọn loại xe di chuyển (nếu đã có điểm đến), lựa chọn khuyến mại phù hợp(nếu có).
-Chọn bằng xác định vị trí trên giao diện bản đồ.
-Tìm kiếm nhanh trên thanh nhập
Thực thi 3.1 : Nếu chưa có điểm đón thì yêu cầu nhập điểm đón hoặc để mặc định.
Thực thi 3.2 : Hiển thị màn hình nhập điểm đến.
Giao diện hiển thị thông tin về khoảng cách và lộ trình di chuyển, cho phép người dùng lựa chọn loại xe phù hợp dựa trên điểm đón và điểm đến đã cung cấp Ngoài ra, người dùng cũng có thể chọn các khuyến mại thích hợp nếu có.
Luồng 4 Chọn loại xe di chuyển
Hiển thị giao diện loại xe và giá cả mỗi loại.
Thực thi 4.1 Chưa tìm thấy xe : Màn hình chế độ chờ tìm xe
Thực thi 4.2 Có xe xác nhận tiến hành hiển thị thông tin xe, giá cả
Luồng 5 Chọn ưu đãi Hiển thị các lựa chọn ưu đãi dành cho khách hàng trong quá trình sử dụng
Thực thi 5.1: Áp dụng ưu đãi vào quá trình đặt xe Trơ lại về trang trước(lộ trình xe).
Thực thi 5.2: Cập nhật chi phí sau khi áp dụng ưu đãi nếu có.
Luồng 6: Xác nhận đặt xe Hiển thị thông tin lái xe đã xác nhận chuyến đi
Thực thi 6.1: Xác nhận đặt xe.
Thực thi 6.2 Trở về màn hình theo dõi lộ trình trong quá trình di chuyển khi người lái xe đã xác nhận đón khách.
Luồng 7 Hủy quá trình đặt xe
Hiển thị thông báo hủy quá trình đặt xe Thực thi 7.1: Quay trở lại trang phía trước(chọn lại loại xe).
Thực thi 7.2: Trở về giao diện chính nếu lựa chọn trở về c Nhận xét tương tác nghiệp vụ
+, Hiển thị bản đồ, hiên thị vị trí đến, đón Kiểm tra vị trí và tìm đường đi phù hợp với điểm đón và điêm đến.
+, Cho phép lựa chọn vị trí đón và đến theo hai cách +, Xem thông tin chuyến và giá cả.
+, Có các nút nhấn : xác nhận, kiểm tra, thanh toán, lựa chọn
+, Hiển thị các label chứa thông tin hướng dẫn, gợi ý chìm trong các textbox giúp người sử dụng một cách dễ dàng.
Cập nhật vị trí hiện tại để xác định điểm đón mặc định, hiển thị thông tin tài xế trước khi xác nhận chuyến đi, và cung cấp nhiều hình thức thanh toán khác nhau để người dùng dễ dàng lựa chọn.
+, Lựa chọn ưu đãi phù hợp nếu có.
+, Có sự điều hướng App, luôn có đường để quay lại các chức năng trước đó.
+, Theo dõi lộ trình trong quá trình đi.
2.2.2 Chức năng thanh toán- Nguyễn Thành Trung. a Mô hình hóa nghiệp vụ
Người dùng Hệ thống Đúng
Gửi xác nhận đến người dùng
Người dùng đã đến địa điểm
Người dùng chọn hình thức thanh toán do hệ thống yêu cầu
Hiển thị danh sách mã KM
Hiển thị chi tiết mã KM
Hiển thị số tiền được giảm giá
Người dùng gửi yêu cầu xác nhận đến hệ thống
Người dùng gửi yêu cầu thanh toán đến hệ thống Tiến hành đặt xe
Yêu cầu xác nhận b Mô hình hóa tương tác
Luồng 1: Chọn khuyến mại trong danh sách khuyến mại phù hợp với từng dịch vụ phương tiện mà khách hàng chọn.
Hệ thống hiển thị danh sách các mã khuyến mại khách hàng đang được hưởng phù hợp với phương tiện đi lại mà khách hàng đã chọn.
Luồng 1.1: Nếu đồng ý sử dụng thì cập nhật số tiền sau khi đã trừ đi tiền khuyến mại rồi tiến hành đặt xe.
Luồng 1.2: Nếu không đồng ý sử dụng thì quay lại giao diện danh sách khuyến mãi.
Luồng 2: Chọn khuyến mại trong mục
Hệ thống hiện thị tất cả các mã khuyến mãi của tất cả các phương tiện di chuyển mà khách hàng có quyền được hưởng.
Luồng 3: Chọn khuyến mại trong phần nhập mã khuyến mại Hệ thống hiển thị toàn bộ thông tin về mã khuyến mại cũng như phần nhập mã khuyến mại.
Luồng 3.1: Nếu đồng ý sử dụng Luồng 3.1.1: Hệ thống sẽ kiểm tra xem mã khuyến mại có phù hợp với dịch vụ phương tiện mà khách hàng đã chọn trước đó hay không, hoặc hệ thống sẽ kiểm tra xem mã khuyến mại đó còn lượt sử dụng hay còn thời hạn sử dụng hay không Nếu không phù hợp với dịch vụ đã chọn hoặc hết lượt sử dụng mã hoặc mã đã hết hạn sử dụng thì thông báo cho khách hàng.
Luồng 3.1.2: Nếu mã khuyến mại phù hợp thì cập nhật số tiền sau khi đã trừ đi tiền khuyến mãi.
Luồng 3.2: Nếu không đồng ý sử dụng thì quay lại giao diện danh sách khuyến mãi. c Nhận xét tương tác nghiệp vụ về cơ bản và chức năng:
- Giúp người dùng thanh toán chi phí cho chuyến đi của mình một cách đơn giản
- Giúp người dùng nhập và sử dụng mã khuyến mại để giảm chi phí chuyến đi tương ứng với mỗi loại dịch vụ mà khách hàng chọn.
- Kiểm tra xem mã khuyến mại có tồn tại hay không.
- Kiểm tra xem mã khuyến mại có phù hợp với loại dịch vụ phương tiện mà khách hàng đã chọn hay không.
- Kiểm tra xem mã khuyến mại có còn lượt sử dụng hay không.
- Kiểm tra xem mã khuyến mại có còn hạn sử dụng hay không.
2.2.3 Chức năng hủy chuyến- Bùi Tuấn Hưng.
Mô hình hóa chức năng nghiệp vụ
Bảng phân luồng nghiệp vụ
Người sử dụng Hệ thống
Người dùng muốn kiểm tra thông tin vé sau khi đặt
Hệ thống cung cấp giao diện kiểm tra thông tin chuyến đi, giúp người dùng dễ dàng nắm bắt các thông tin cơ bản như thông tin cá nhân, số vé, thời gian xuất phát, tên tài xế, số điện thoại tài xế, điểm đi, điểm đến và giá cước phí.
Luồng 1: Người dùng muốn hủy vé
Người dùng ấn “Hủy chuyến”
Hệ thống tiếp nhận yêu cầu của người dùng và xử lý chuyến đi có trạng thái chưa hoàn thành Khi người dùng muốn hủy chuyến, hệ thống sẽ đưa ra thông báo xác nhận: “Bạn có muốn hủy chuyến?”
+ Nếu người dùng xác nhận, chuyển đến luồng tiếp theo
+ Nếu không quay trở lại giao diện kiểm tra thông tin chuyến xe
Luồng 2: Người dùng ấn “Xác nhận” Hệ thống tiếp nhận thông tin hủy chyến xe của người dùng Kiểm tra trạng thái xé của người dùng.
+ Nếu chưa thanh toán thì chuyển đến luồng 3.1
+ Nếu đã thanh toán thì chuyển đến luồng 3.2
Luồng 3: Người dùng chờ thông tin hủy chuyến
Hệ thống thực hiện hủy chuyến đi cho người dùng
Luồng 3.1: Người dùng hủy chuyến đi khi chưa thanh toán
Hệ thống thực hiện hủy chuyến cho người dùng Đưa ra thông báo “Hủy chuyến thành công!”
Luồng 3.2: Người dùng hủy chuyến đi khi đã thanh toán.
Người dùng ấn “Xác nhận” hủy chuyến đi
Hệ thống kiểm tra giá vé người dùng, đưa ra thông báo: “Đã thanh toán cước phí Bạn có muốn hủy chuyến?”
+ Nếu người dùng chọn không đồng ý, trở lại giao diện hiển thị lịch sử chuyến đi.
Khi người dùng nhấn “Xác nhận”, hệ thống sẽ hoàn tiền theo quy định và hiển thị thông báo “Hủy chuyến thành công!” Đồng thời, người dùng cũng sẽ nhận được thông tin về việc hủy chuyến xe.
Hệ thống cập nhật lại thông tin, trở về giao diện hiển thị lịch sử chuyến đi
+ Hiển thị thông tin lịch sử các chuyến xe người dùng đặt
+ Xác định chính xác các nghiệp vụ để điều hướng cho phù hợp
+ Thao tác chuyển, chọn giữa các giao diện nhanh chóng, đơn giản
+ Liên tục cập nhật lại thông tin hệ thống
+ Hiển thị chi tiết thông tin chuyến đi
+ Bảng thông báo truy vấn nếu người dùng lựa chọn sai hoặc ấn nhầm khi đang kiểm tra thông tin
+ Cập nhật thông tin cho các đối tượng có liên quan đến chuyến xe khi người dùng hủy chuyến
+ Hiển thị màu khác nhau cho lựa chọn hủy và xác nhận của bảng thông báo
Ô thông báo hoàn thành dễ dàng nhận biết, cung cấp đầy đủ nội dung và chỉ xuất hiện trong một khoảng thời gian nhất định, giúp người dùng không bị mất thời gian.
2.2.4 Chức năng hỗ trợ- Lưu Phan Anh Dũng. a Mô hình hóa nghiệp vụ b Mô hình hóa tương tác
Người đặt xe Phần mềm Bộ phận CSKH
Sử dụng chức năng trợ giúp Đưa ra giao diện cho hỗ trợ nhanh hoặc hỗ trợ chi tiết
Luồng 1: Hỗ trợ nhanh Hiển thị các thông tin có sẵn cho người dùng tự tìm hiểu
Luồng 2:Hỗ trợ chi tiết Hiển thị giao diện hỗ trợ chi tiết và nút chọn gửi thư trợ giúp hoặc nút gọi cho Tổng đài CSKH
Luồng 2.1: Gửi nội dung cần trợ giúp cho bộ phần
- Kiểm tra thông tin nhập + Nếu thông tin nhập đúng thì tiến hành gửi thông tin cho bộ phận CSKH
+ Nếu thông tin nhập chưa đúng yêu cầu người dùng nhập lại
Giải quyết thắc mắc của khách hàng và phản hồi lại thông qua phần mềm hệ thống
Luồng 2.2 : Liên hệ hotline của hệ thống , số điện thoại
Chuyển tiếp cuộc gọi của Người sử dụng đến vơi nhân viên CSKH
Nhận cuộc gọi của Khách hàng và tư vấn cho khách hàng
Hết luồng 2 c Nhận xét tương tác nghiệp vụ
Phần mềm và ứng dụng cung cấp cho người dùng thông tin chi tiết, giúp họ tự tìm kiếm câu trả lời một cách nhanh chóng mà không cần chờ đợi phản hồi từ hệ thống hoặc bộ phận chăm sóc khách hàng.
+ Khả năng gửi thư, nhận thông báo yêu cầu trợ giúp từ bộ phận CSKH của hệ thống
+ Cho phép người dùng gọi trực tiếp cho bộ phận CSKH
+ Cho phép ấn vào link website sẽ chuyển sang trình duyệt với địa chỉ website của hệ thống.
Cho phép người dùng dễ dàng truy cập vào các trang mạng xã hội và nhóm liên quan đến phần mềm trên các nền tảng xã hội, giúp họ thuận tiện hơn trong việc tìm hiểu thông tin.
2.2.5 Chức năng lịch sử- Tương Hải Đăng. a Mô hình hóa nghiệp vụ b Mô hình hóa tương tác
Người đặt xe Phần mềm
Yêu cầu lịch sử Chuyển sang giao diện lịch sử
- Hiển thị tất cả các thông tin về các chuyến xe trong tháng này
Luồng 1: Yêu cầu chi tiết của chuyến đi Chuyển sang giao diện hiển thị chi tiết chuyến xe
- Hiển thị thông tin chi tiết về chuyến xe đã chọn
Luồng 1.1: Thông tin sai so với thông tin của khách hàng Chuyển sang giao diện chức năng báo cáo.
Sau khi báo cáo, quay về giao diện chi tiết
Yêu cầu đánh giá Luồng 1.2.1 Thời gian chuyến xe 72h Thông báo không thể đánh giá chuyến xe
Luồng 2: Yêu cầu đặt xe lại lộ trình có trong lịch sử Hiển thị tất cả địa điểm đã đi trong thời gian trước
Luồng 2.1: Yêu cầu chọn loại xe
Thực hiện lệnh đặt xe
Luồng 2.1.1: Người dùng chọn loại xe Hiển thị các phương tiện
Luồng 2.1.2: Người dùng thực hiện đặt xe xong sẽ được lưu vào lịch sử
Hết luồng 2 c Nhận xét tương tác nghiệp vụ
- Nghiệp vụ cơ bản: Hiển thị lịch sử, hiển thị chi tiết từng chuyến xe, báo cáo, đánh giá
- Nghiệp vụ nâng cao: Có thể thực hiện đặt xe dựa trên địa điểm mà mình từng đi
Chương 3: Thiết kế giao diện tương tác
3.1 Yêu cầu chung và giao diện
A Đối với app điện thoại thông thường
Giao diện của chúng tôi được thiết kế dễ sử dụng và thân thiện với tất cả người dùng Màu sắc hài hòa, tránh việc kết hợp các màu đối lập và các màu nóng sáng, nhằm bảo vệ mắt và giảm cảm giác mệt mỏi khi sử dụng trong thời gian dài.
Các thanh công cụ được bố trí ở vị trí dễ nhìn, không chiếm quá nhiều không gian, nhằm hạn chế ảnh hưởng đến nội dung chính của ứng dụng Chúng bao gồm các phím tắt cho những chức năng chính, giúp người dùng dễ dàng truy cập và sử dụng phần mềm.
Phông chữ trong ứng dụng được thiết kế nổi bật, dễ đọc và dễ nhận diện, với kích thước chữ vừa đủ, đảm bảo không quá nhỏ cho người dùng trên điện thoại.
- Các lựa chọn trên trang chính giao diện được đặt vào các vùng cụ thể để tránh gây nhầm lẫn.
Thanh lựa chọn bổ sung, thường được biểu thị bằng biểu tượng ba gạch ngang, thường được đặt ở các vị trí ít được người dùng chạm tới, chẳng hạn như góc màn hình hoặc bên phải của thanh công cụ.
- Các nút lựa chọn trên giao diện được đóng khung trong một ô riêng hoặc được gạch chân và đổi màu nếu đang ở trong một đoạn văn bản
- Các lựa chọn gợi ý trong giao diện phù hợp với từng đối tượng người sử dụng
- Các bảng thông báo lỗi được đưa ra kịp thời
B Đối với 1 app đặt xe
Giao diện dễ sử dụng với màu sắc và hình ảnh hấp dẫn, nội dung hiển thị đầy đủ và nổi bật Các chức năng được tổ chức theo thanh menu, đồng thời hiển thị các khuyến mại hiện có, giờ cao điểm và các tuyến đi kèm với chương trình khuyến mại.
Trong quá trình sử dụng hệ thống, người dùng có thể gặp phải một số lỗi cơ bản như nhập thiếu thông tin đăng ký, nhập sai kiểu dữ liệu mặc định hoặc có các lựa chọn trùng lặp Để cải thiện trải nghiệm người dùng, hệ thống cần cung cấp các bảng thông báo lỗi rõ ràng và dễ hiểu, giúp người dùng nhận diện và khắc phục các vấn đề một cách nhanh chóng và hiệu quả.
- Đảm bảo tính thống nhất trong các ràng buộc
+ Chọn điểm đến, điểm đi => Đặt xe => Thanh toán => Xem lịch sử đặt xe => Hủy chuyến xe => Đánh giá
+ Tài xế nhận chuyến => Nhận thông tin chuyến hoặc thông tin hủy chuyến => Đón khách, hoàn thành chuyến đi => Đánh giá
- Thiết kế dựa theo nhu cầu khách hàng và kinh nghiệm của người thiết kế
- Tối thiểu hóa tác vụ người dùng
- Các thuật ngữ sử dụng tự nhiên, dễ hiểu, tránh các từ ngữ chuyên môn
- Dễ dàng thoát hoặc quay trở lại trang trước hoặc trang chính
- Hai màu chủ đạo là xanh dương và màu trắng
Màu xanh dương, gam màu lạnh tượng trưng cho biển cả và bầu trời, mang lại ý nghĩa của sự bình yên, thư giãn và hòa hợp Sử dụng sắc xanh nhẹ nhàng tạo cảm giác thư giãn, trong khi màu xanh đậm lại mang đến năng lượng và sự sôi động.
Các công ty trong lĩnh vực sức khỏe và vệ sinh thường chọn màu xanh để thể hiện sự tươi mát và sạch sẽ Màu xanh dương không chỉ mang lại cảm giác an toàn mà còn tạo sự tin tưởng cho khách hàng.
Trắng không chỉ đơn thuần là một màu sắc mà còn là ánh sáng thuần khiết Chính vì vậy, màu trắng được xem là một màu sắc khiêm tốn, không quá rực rỡ hay nổi bật như những màu sắc khác, nên nó không “tranh giành” sự chú ý.
Trên giao diện, các vật hoặc khu vực được tô màu thường không hiển thị riêng biệt mà nằm cạnh hoặc chồng lên nhau, tạo hiệu ứng tương phản Nếu thiếu sự tương phản, việc phân biệt các phần trên màn hình sẽ trở nên khó khăn Các ứng dụng như MS Word, PowerPoint, Excel, và Outlook sử dụng nền trắng với chữ đen vì đây là sự kết hợp có độ tương phản mạnh nhất, giúp dễ đọc hơn.
Tương phản màu sắc được sử dụng một cách có tính toán nhằm thu hút sự chú ý của người dùng đến các phần tử giao diện quan trọng hoặc những khu vực cần nhập dữ liệu Màu đen trên nền trắng và màu xanh dương kết hợp với màu trắng là những lựa chọn hiệu quả để làm nổi bật các chi tiết trong thiết kế.
Với nền màu xanh nước biển, việc sử dụng màu chữ trắng sẽ giúp nội dung nổi bật và thu hút sự chú ý của người đọc, khuyến khích họ tìm hiểu và khám phá thêm thông tin.
- Kiểu chữ chung của chương trình là Verdana
Font San-Serif, như Calibri và Verdana, là những font chữ không chân thường được sử dụng trong thiết kế giao diện Chúng rất dễ đọc ngay cả khi ở kích thước nhỏ, nên thường được áp dụng cho tiêu đề, nút bấm và các phần hiển thị khác.
- Cỡ chữ: Tùy thuộc vào từng chức năng của chương trình và bố cục của chức năng.
Logo của chương trình không chỉ thể hiện chức năng chính của phần mềm mà còn mang hình ảnh một chiếc xe được cách điệu, kèm theo chữ MTA Đây là ứng dụng đặt xe được phát triển bởi nhóm học viên trường MTA.
- Màu chủ đạo của logo là đen và xanh thẫm (giống với màu chủ đạo của chương trình) màu đen nổi bật tên nền xanh.
- Các biểu tượng khác chọn phù hợp với từng chức năng riêng của hệ thống gọi xe công nghệ
- Logo có thê được thay đổi màu sắc bên trong sao cho phù hợp với mày nền tong từng trang hay quảng cáo. a Giao diện chính: 2 phần.
Chức năng chính của phần mềm đặt xe là hiển thị bản đồ nơi đặt xe, giúp người dùng dễ dàng truy cập khi có nhu cầu Do đó, màn hình đặt xe nên được hiển thị ngay trên giao diện trang chủ sau khi người dùng đăng nhập.
