I. Hướng dẫn làm báo cáo bài tập lớn tương tác người máy
Báo cáo bài tập lớn môn học tương tác người-máy (Human-Computer Interaction - HCI) là một tài liệu học thuật quan trọng, tổng hợp toàn bộ quá trình nghiên cứu và phát triển một sản phẩm công nghệ. Đối với đề tài thiết kế giao diện website bán đồ uống, mục tiêu không chỉ dừng lại ở việc tạo ra một trang web có thể hoạt động, mà còn phải tối ưu hóa trải nghiệm người dùng (UX) và xây dựng một giao diện người dùng (UI) trực quan, hấp dẫn. Báo cáo này trình bày chi tiết các bước thực hiện, từ giai đoạn lên ý tưởng, phân tích yêu cầu, cho đến việc thiết kế và tạo mẫu sản phẩm. Trọng tâm của dự án là áp dụng các nguyên tắc thiết kế giao diện và phương pháp thiết kế lấy người dùng làm trung tâm để giải quyết các vấn đề thực tiễn trong lĩnh vực F&B. Thông qua việc phân tích và tổng hợp tài liệu, kết hợp với các phương pháp nghiên cứu định tính và định lượng, đồ án môn học HCI này cung cấp một cái nhìn toàn diện về quy trình xây dựng một website e-commerce chuyên biệt cho ngành hàng đồ uống. Các kết quả nghiên cứu và sản phẩm thiết kế được trình bày trong báo cáo là cơ sở để đánh giá hiệu quả của giải pháp, đồng thời mở ra những hướng phát triển tiềm năng trong tương lai. Việc hoàn thành một báo cáo cuối kỳ chất lượng không chỉ thể hiện kiến thức chuyên môn về HCI mà còn cho thấy kỹ năng làm việc nhóm, phân tích vấn đề và tư duy thiết kế của sinh viên.
1.1. Mục tiêu và phạm vi của đồ án môn học HCI
Mục tiêu chính của dự án là xây dựng thành công một hệ thống giao diện web bán trà sữa thân thiện và hiệu quả. Phạm vi nghiên cứu tập trung sâu vào trải nghiệm người dùng và cơ chế hoạt động của một website bán hàng, từ đó đề xuất các cải tiến nhằm mang lại sự hài lòng cao nhất cho khách hàng. Dự án không đi sâu vào việc phát triển backend hay cơ sở dữ liệu phức tạp, mà chú trọng vào quy trình thiết kế UX/UI, bao gồm việc nghiên cứu người dùng, xây dựng kiến trúc thông tin, và tạo ra các sản phẩm thiết kế cụ thể như wireframe và prototype.
1.2. Tầm quan trọng của tương tác người máy trong F B
Trong bối cảnh ngành dịch vụ ăn uống (F&B) ngày càng cạnh tranh, tương tác người-máy đóng vai trò then chốt trong việc thu hút và giữ chân khách hàng. Một giao diện đặt hàng online được thiết kế tốt không chỉ giúp người dùng tiết kiệm thời gian, chi phí mà còn tạo ra cảm giác hứng thú và thoải mái khi trải nghiệm dịch vụ. Việc ứng dụng các nguyên lý HCI giúp doanh nghiệp thấu hiểu hành vi khách hàng, từ đó tối ưu hóa quy trình đặt hàng, thanh toán và nhận phản hồi, góp phần nâng cao lợi thế cạnh tranh trên thị trường số.
1.3. Phương pháp nghiên cứu được áp dụng trong dự án
Để thực hiện dự án, các phương pháp nghiên cứu chính đã được sử dụng bao gồm: phương pháp phân tích và tổng hợp tài liệu để xây dựng cơ sở lý thuyết về thiết kế giao diện người dùng; phương pháp khảo sát trực tuyến (Google Form) để thu thập dữ liệu về nhu cầu và thói quen của người dùng mục tiêu; và phương pháp làm việc nhóm để thảo luận, trao đổi và thống nhất các giải pháp thiết kế. Cách tiếp cận này đảm bảo rằng sản phẩm cuối cùng dựa trên dữ liệu thực tế và đáp ứng đúng nhu cầu của người sử dụng.
II. Phân tích thách thức trong thiết kế trải nghiệm người dùng
Việc thiết kế trải nghiệm người dùng cho một website e-commerce trong lĩnh vực F&B đặt ra nhiều thách thức đặc thù. Thách thức lớn nhất đến từ việc phải đáp ứng kỳ vọng ngày càng cao của khách hàng về sự tiện lợi, nhanh chóng và cá nhân hóa. Người dùng không chỉ muốn đặt hàng dễ dàng mà còn mong đợi một trải nghiệm mua sắm thú vị. Một trong những khó khăn ban đầu là việc xác định chính xác chân dung khách hàng mục tiêu và các vấn đề họ gặp phải khi sử dụng các nền tảng hiện có. Báo cáo đã chỉ ra rằng các đối thủ cạnh tranh, dù có thương hiệu mạnh, vẫn tồn tại những điểm yếu như trang web quản lý chưa tốt, tương tác trực tuyến còn hạn chế. Đây vừa là thách thức, vừa là cơ hội để tạo ra một sản phẩm vượt trội. Bên cạnh đó, áp lực cạnh tranh từ các thương hiệu lâu đời như TocoToco, Phúc Long đòi hỏi giải pháp thiết kế UX/UI phải thực sự đột phá để thu hút người dùng. Việc cân bằng giữa tính thẩm mỹ của giao diện người dùng và tính khả dụng của hệ thống cũng là một bài toán khó. Một giao diện đẹp nhưng khó sử dụng sẽ nhanh chóng bị người dùng từ bỏ. Vì vậy, quy trình phân tích yêu cầu và đánh giá khả dụng (usability testing) cần được thực hiện một cách cẩn trọng để đảm bảo mọi quyết định thiết kế đều hướng đến mục tiêu cuối cùng: sự hài lòng của người dùng.
2.1. Xác định các đối tượng người dùng liên quan
Hệ thống có ba nhóm đối tượng liên quan chính. Nhóm thứ nhất và quan trọng nhất là người sử dụng cuối, chủ yếu là khách hàng trẻ tuổi (học sinh, sinh viên) có nhu cầu lựa chọn và đặt trà sữa online. Nhóm thứ hai là nhân viên bảo trì hệ thống, chịu trách nhiệm sửa lỗi và khắc phục các vấn đề kỹ thuật. Nhóm thứ ba là nhân viên hỗ trợ khách hàng, có vai trò tư vấn và giải quyết các vấn đề liên quan đến sản phẩm, đơn hàng. Việc hiểu rõ vai trò và nhu cầu của từng nhóm là nền tảng cho việc thiết kế lấy người dùng làm trung tâm.
2.2. Phân tích SWOT các đối thủ trong ngành trà sữa
Phân tích SWOT được thực hiện trên các website của TocoToco, Highland Coffee và Phúc Long. Điểm mạnh chung của họ là thương hiệu lớn và thực đơn đa dạng. Tuy nhiên, điểm yếu là trải nghiệm người dùng trên web đôi khi chưa tối ưu, tương tác còn hạn chế. Cơ hội cho dự án là nhu cầu đặt hàng online đang tăng mạnh sau đại dịch. Thách thức lớn nhất là áp lực cạnh tranh từ chính những đối thủ này và các nền tảng mới nổi khác. Phân tích này giúp xác định các yếu tố cần cải thiện và tạo ra lợi thế cạnh tranh cho giao diện web bán trà sữa được thiết kế.
2.3. Các tiêu chí đánh giá một giao diện người dùng hiệu quả
Một giao diện người dùng hiệu quả được đánh giá dựa trên nhiều tiêu chí. Theo tài liệu nghiên cứu, các tiêu chí chính bao gồm: tần suất truy cập của khách hàng cao, số lượng đơn đặt hàng lớn, thứ hạng SEO tốt. Về mặt kỹ thuật, trang web phải vận hành ổn định, bảo mật cao, tốc độ tải trang nhanh, và hiển thị tốt trên mọi thiết bị (responsive). Những tiêu chí này là kim chỉ nam cho toàn bộ quá trình thiết kế và là cơ sở để thực hiện đánh giá khả dụng sau này.
III. Bí quyết xây dựng persona và hành trình người dùng chi tiết
Để tạo ra một sản phẩm thực sự chạm đến người dùng, việc thấu hiểu họ là bước đi tiên quyết. Quá trình này bắt đầu bằng việc khảo sát và thu thập dữ liệu, sau đó được cụ thể hóa thông qua việc xây dựng persona và hành trình người dùng (user journey map). Đây là hai công cụ cốt lõi trong phương pháp thiết kế lấy người dùng làm trung tâm, giúp đội ngũ phát triển đặt mình vào vị trí của khách hàng, từ đó đưa ra các quyết định thiết kế chính xác. Persona là các chân dung người dùng hư cấu nhưng được xây dựng dựa trên dữ liệu khảo sát thực tế, đại diện cho các nhóm khách hàng mục tiêu khác nhau. Mỗi persona sẽ có thông tin về nhân khẩu học, mục tiêu, nhu cầu và những khó khăn họ gặp phải. Dựa trên persona, hành trình người dùng được vẽ ra để mô tả chi tiết các bước mà một người dùng thực hiện để đạt được mục tiêu của họ trên website, ví dụ như từ lúc tìm kiếm món đồ uống yêu thích cho đến khi hoàn tất thanh toán. Việc lập bản đồ hành trình này không chỉ giúp xác định các điểm chạm (touchpoints) quan trọng mà còn phát hiện ra các "điểm đau" (pain points) trong trải nghiệm người dùng hiện tại, tạo cơ sở vững chắc cho việc cải tiến và tối ưu hóa giao diện người dùng.
3.1. Quy trình khảo sát và thu thập yêu cầu từ người dùng
Quy trình khảo sát được thực hiện thông qua Google Form, nhắm đến đối tượng từ 14 tuổi trở lên, bao gồm học sinh, sinh viên và nhân viên văn phòng. Bảng câu hỏi được chia làm ba phần: thông tin cơ bản, thói quen lựa chọn sản phẩm, và thái độ đối với một thương hiệu cụ thể. Kết quả khảo sát là nguồn dữ liệu đầu vào quan trọng cho việc phân tích yêu cầu, giúp hiểu rõ nhu cầu, sở thích và mong đợi của người dùng đối với một ứng dụng thiết kế app đặt đồ uống hoặc website.
3.2. Kỹ thuật xây dựng persona đại diện cho khách hàng mục tiêu
Từ dữ liệu khảo sát, các persona được xây dựng để đại diện cho nhóm người dùng chính: học sinh/sinh viên. Một persona điển hình có thể là "An, 20 tuổi, sinh viên", người thường xuyên đặt trà sữa online, ưu tiên sự tiện lợi, giao diện bắt mắt và có nhiều mã giảm giá. Việc xây dựng persona giúp toàn bộ đội ngũ có một hình dung chung và nhất quán về người dùng cuối, đảm bảo mọi tính năng và yếu tố thiết kế đều phục vụ cho nhu cầu của họ.
3.3. Lập bản đồ hành trình người dùng user journey map
Bản đồ hành trình người dùng (user journey map) mô tả các giai đoạn tương tác của persona "An" với website: từ nhận biết (thấy quảng cáo), cân nhắc (vào xem menu, so sánh giá), mua hàng (chọn món, nhập địa chỉ, thanh toán), đến sau mua hàng (đánh giá, tích điểm). Tại mỗi giai đoạn, bản đồ chỉ ra hành động, suy nghĩ, cảm xúc và các "điểm đau" của An. Ví dụ, một "điểm đau" có thể là quá trình thanh toán phức tạp. Việc này giúp xác định các cơ hội cải thiện trải nghiệm người dùng một cách cụ thể.
IV. Cách thiết kế kiến trúc thông tin wireframe và prototype
Sau khi đã thấu hiểu người dùng, giai đoạn tiếp theo là biến những yêu cầu và ý tưởng thành một cấu trúc cụ thể thông qua việc xây dựng kiến trúc thông tin (information architecture), wireframe, và prototype. Đây là xương sống của toàn bộ quá trình thiết kế UX/UI. Kiến trúc thông tin (IA) là việc tổ chức, cấu trúc và dán nhãn nội dung một cách hiệu quả để người dùng có thể dễ dàng tìm thấy thông tin và hoàn thành tác vụ. Kết quả của IA thường được thể hiện qua sitemap (sơ đồ trang web). Tiếp theo, wireframe được tạo ra. Đây là bản phác thảo cấu trúc ở mức độ chi tiết thấp (low-fidelity), tập trung vào việc bố trí các thành phần chức năng trên giao diện, luồng tương tác và phân cấp thông tin mà không quan tâm đến màu sắc hay hình ảnh. Wireframe giúp nhanh chóng kiểm tra các ý tưởng về bố cục và chức năng. Cuối cùng, từ wireframe và các thiết kế chi tiết hơn (mockup), một prototype tương tác được xây dựng. Prototype là một mô hình mô phỏng sản phẩm cuối cùng, cho phép người dùng nhấp và tương tác như đang sử dụng một trang web thật. Việc tạo prototype bằng các công cụ như Figma giúp đội ngũ và các bên liên quan có cái nhìn trực quan nhất về sản phẩm, đồng thời là công cụ hữu hiệu cho việc đánh giá khả dụng trước khi đi vào lập trình.
4.1. Xây dựng kiến trúc thông tin IA và sitemap hệ thống
Kiến trúc thông tin được thiết kế để đảm bảo người dùng có thể điều hướng trang web một cách logic. Dựa trên các chức năng hệ thống đã xác định, một sitemap được xây dựng, bao gồm các trang chính như Trang chủ, Menu, Giỏ hàng, Tài khoản cá nhân (Quản lý đơn hàng, Điểm thưởng), Đăng nhập/Đăng ký. Cấu trúc này giúp phân cấp thông tin rõ ràng, tạo nền tảng cho một trải nghiệm người dùng mượt mà và không gây nhầm lẫn.
4.2. Thiết kế wireframe cho các chức năng website quan trọng
Các wireframe được vẽ cho tất cả các màn hình chính của hệ thống, từ luồng đăng ký/đăng nhập, xem menu, đặt hàng, thanh toán, cho đến quản lý tài khoản và quản lý đơn hàng cho admin. Các bản vẽ này tập trung vào cấu trúc và vị trí của các yếu-tố-tương-tác (call-to-action buttons, form fields, navigation bars) thay vì thẩm mỹ. Điều này giúp cả nhóm tập trung thảo luận về chức năng và luồng công việc (workflow) trước khi đầu tư thời gian vào thiết kế trực quan.
4.3. Chuyển đổi từ mockup sang prototype tương tác trên Figma
Từ các wireframe, các thiết kế có độ trung thực cao hơn (mockup) được tạo ra với màu sắc, typography, và hình ảnh cụ thể. Sau đó, chúng được liên kết lại với nhau trong Figma để tạo thành một prototype tương tác. Người dùng có thể nhấp vào nút "Đăng nhập", đi đến trang chủ, chọn một sản phẩm từ menu và thêm vào giỏ hàng. Mẫu thử này là công cụ vô giá để trình bày ý tưởng thiết kế và thực hiện các buổi đánh giá khả dụng (usability testing) ban đầu.
V. Kết quả triển khai và áp dụng nguyên tắc thiết kế giao diện
Kết quả cuối cùng của đồ án môn học HCI là một bộ prototype hoàn chỉnh, mô phỏng chi tiết giao diện web bán trà sữa với tên thương hiệu giả định là Bumba. Sản phẩm này là sự kết tinh của toàn bộ quá trình nghiên cứu và thiết kế, áp dụng một cách nhất quán các nguyên tắc thiết kế giao diện cơ bản như tính nhất quán, phản hồi hệ thống, khả năng kiểm soát của người dùng và giảm tải nhận thức. Giao diện được thiết kế theo phong cách đơn giản, sang trọng, sử dụng màu sắc tươi sáng để thu hút đối tượng khách hàng trẻ. Các luồng chức năng chính như đặt hàng, thanh toán, quản lý tài khoản được tối ưu hóa để giảm thiểu số bước cần thực hiện, giúp người dùng hoàn thành mục tiêu một cách nhanh chóng. Ví dụ, luồng đăng nhập hỗ trợ cả tài khoản mạng xã hội (Google, Facebook) để tối đa hóa sự tiện lợi. Các prototype được xây dựng trên Figma không chỉ thể hiện giao diện tĩnh mà còn mô phỏng các tương tác, hiệu ứng chuyển động, mang lại cảm giác chân thực như đang sử dụng một sản phẩm thực tế. Việc sử dụng storyboard cũng đóng vai trò quan trọng trong việc minh họa các bối cảnh sử dụng cụ thể, giúp người xem hiểu rõ hơn về giá trị mà trải nghiệm người dùng được thiết kế mang lại trong các tình huống thực tế.
5.1. Demo giao diện web bán trà sữa với thiết kế hoàn chỉnh
Bản demo prototype trên Figma trình bày đầy đủ các màn hình, từ trang chủ hấp dẫn với các banner quảng cáo, trang menu được phân loại rõ ràng, cho đến trang chi tiết sản phẩm cho phép tùy chỉnh (size, topping, lượng đường). Giao diện quản lý cho phép chủ cửa hàng thực hiện các tác vụ như quản lý sản phẩm và đơn hàng. Thiết kế đảm bảo tính nhất quán về màu sắc, font chữ và phong cách icon trên toàn bộ hệ thống, tuân thủ theo các nguyên tắc thiết kế giao diện hiện đại.
5.2. Phân tích các luồng chức năng chính trên prototype
Các luồng chức năng quan trọng được mô phỏng chi tiết. Luồng đặt hàng được đơn giản hóa qua các bước: chọn món -> giỏ hàng -> xác nhận thông tin -> thanh toán. Luồng quản lý tài khoản cho phép người dùng xem lại lịch sử đơn hàng, kiểm tra điểm thưởng và đổi quà. Luồng quản lý đơn hàng cho admin cung cấp giao diện trực quan để cập nhật trạng thái đơn. Việc mô phỏng các luồng này trong prototype giúp kiểm tra tính logic và hiệu quả của thiết kế UX/UI.
5.3. Vai trò của storyboard trong việc minh họa bối cảnh sử dụng
Báo cáo sử dụng storyboard để kể những câu chuyện ngắn về cách người dùng tương tác với website trong các ngữ cảnh khác nhau. Ví dụ: một storyboard mô tả một nhân viên văn phòng sử dụng điểm thưởng để đổi quà, một storyboard khác cho thấy một nhóm bạn bè giới thiệu website cho nhau. Những câu chuyện trực quan này giúp làm nổi bật giá trị của các tính năng và củng cố tầm quan trọng của việc thiết kế lấy người dùng làm trung tâm.
