Bài tập lớn môn thương mại Điện tử Đề tài hệ thống bán lẻ robot hút bụi lau nhà thông minh

Nhóm đã ầ ạ ạchọn mô hình kinh doanh bán Robot hút bụi trên website thương mại điệ ử.. Xác định đối tượng người dùng Vì vậy, nhóm đã xác định tập khách hàng mục tiêu cho sản phẩm của mì

T ng quan d ổ ự án

Thi t k 12 ế ế 1 Xây d ng b n mựả ẫu thi t k ế ế ế ti p cận người dùng cuối

Phân tích người dùng

Theo báo cáo của YouNet Media n n t ng phân tích d – ề ả ữliệu mạng xã h i, mộ ỗi tháng ở Việt Nam có hơn 30,000 lượt thảo luận xin lời khuyên, nhận xét, đánh giá, so sánh và xin review từ những người đã qua sử ụ d ng robot hút bụi trên Internet Số liệu này đã phản ánh đến nhu c u s n ph m Robot hút b i cầ ả ẩ ụ ủa người tiêu dùng Vi t Ngoài ra, nhóm còn ệ thực hiện khảo sát trên địa bàn thành phố Hồ Chí Minh dưới 2 hình thức online và offline Đố ới v i hình thức khảo sát online - điền form khảo sát vớ ối đi tượng tham gia là bạn bè, người thân của các thành viên trong nhóm Kết quả khảo sát online thu về được 88 lượt tham gia kh o sát ả Đố ới v i hình thức khảo sát offline - ph ng vấn thực tế tại các h ỏ ộgia đình trên địa bàn thành phố Kết quả kh o sát offline lả ấy được ý ki n t ế ừ 28 người.

Dưới đây là bản số liệu thu thập được từ hai hình thức khảo sát trên

Nguồn khảo sát S ố người tham gia S ố người bi t/ quan tâm robot ế hút bụi khi được hỏi

S ố người từng mua robot hút bụi

Dựa vào kết quả kh o sát, nhóm phân tích ra 3 chân dung c a khách hàng m c tiêu ả ủ ụ

Dựa vào các personas trên, nhóm phân tích ra nhóm khách hàng ch y u là khách hàng ủ ế gen Y Gen Y hay còn gọi là Millennials, bao g m nhồ ững người sinh t u th p niên 80 ừ đầ ậ đến giữa thành viên 90 (1981 1995) Thế hệ Y đư– ợc biết đến là thế hệ đi đầu công nghệ s , h lố ọ ớn lên cùng các phương tiện truy n thông xã hề ội như forum, blog, facebook… đồng th i h ờ ọđang là lực lượng lao động chủ đạ o v i khoảng 26% dân số Thế hệ này còn ớ là những khách hàng tiêu dùng quyết định t n vong và phát tri n c a n n kinh tồ ể ủ ề ế toàn cầu hi n tệ ại và tương lai. Đặc điểm mua hàng của nhóm khách hàng gen Y:

 Gen Y chiếm tới 85% người mua sắm trực tuy n, ch yế ủ ếu thông qua m ng xã h ạ ội.

 70% gen Y trung thành v i mớ ột thương hiệu

 thận tr ng trong viọ ệc đưa ra chọ ựn l a, thành th c tìm hi u các so sánh trên các ụ ể trang khác nhau cho cùng m t sộ ản ph m hoẩ ặc đọc review online trước khi quyết định mua một món hàng nào đó.

 89% gen Y tin tưởng vào các đề xuất từ bạn bè, gia đình khi mua hàng

Lên ý tưởng

Sau khi nắm được chân dung khách hàng và hành vi tiêu dùng Nhóm lên ý tưởng thiết kế trang web thương mại điện tử phân phối robot hút bụi với các tính năng chính:

 Giới thiệu v các hãng robot hút b i uy tín ề ụ

 Giới thiệu s n ph m tiêu bi u c a m i hãng ả ẩ ể ủ ỗ

 Mô tả thông tin chi ti t và thông s cế ố ủa từng s n ph m ả ẩ

 So sánh nhanh các thông s s n ph m ố ả ẩ

 Mua sắm s n phả ẩm bằng COD và Momo

 Yêu cầu tư vấn từ xa

 Xem được tin tức công nghệ, các đánh giá - trải nghiệm liên quan đến sản phẩm

 Tra cứu được thời hạn bảo hành s n ph m ả ẩ

 Yêu cầu b o hành, s a chả ử ữa sản ph m ẩ

Dựa vào các tính năng chính liệt kê trên, nhóm phác th o sitemap website ả

Phân tích và gi i thích nguyên t c thi t k áp d ng 15 ả ắ ế ế ụ III Hi n th c 28 ệự IV Đánh giá - thử nghi m 28 ệ 1 K t qu ế ả đánh giá

Đặc điểm yêu cầu đối với thiế ết k website:

Màu chủ o c a website là đạ ủ màu trắng và màu xanh lam Lý do:

 Màu trắng thể ệ hi n s ựsạch sẽ, s c kh e, tinh khiứ ỏ ết, đơn giản.

 Màu xanh lam đại diện cho s ự tin tưởng, trách nhi m, công nghệ ệ

S kự ết hợp c a 2 màu sủ ắc trên làm tăng độ tin c y cho trang web, t o cậ ạ ảm giác dễchịu Đặc biệt 2 màu trên làm màu nền dễ làm n i bậổ t lên các màu s c khác giúp tắ ạo điểm nhấn cho trang web

Kiến trúc thông tin: nguyên t c Objects, Choices, Disclosure, Exemplars, Front Doors ắGiải thích:

Nguyên tắc Objects: các ph n n i dung giầ ộ ống như các đối tượng, chúng là duy nhất và linh hoạt

Nguyên tắc Choices: giới hạn s ố lượng l a chự ọn cho người dùng đểchỉ nh ng lữ ựa chọn có ý nghĩa và phù hợp nh t Nhữấ ng l a ch n này phự ọ ải liên quan đến một nhiệm vụ ụ c th ể

Ví dụ như tác v gi hàng, khi bụ ỏ ấm vào người dùng s thao tác b gi i h n lố ị ớ ạ ại như tăng/ gi m s ả ố lượng s n phả ẩm, đặt hàng ho c xóa s n ph m khặ ả ẩ ỏi giỏ hàng

Nguyên tắc Disclosure:chỉtiết lộ nh ng gì c n thiữ ầ ế ểt đ người dùng hi u nh ng gì h s ể ữ ọ ẽ tìm thấy ti p theo vế à đưa ra quyết định S d ng cử ụ ửa sổ ậ b t lên của biểu m u ch n tham ẫ ọ gia nh n b n tin t phía trên Ví d trong m c s n ph m, mậ ả ừ ụ ụ ả ẩ ột sản ph m ch hình, mẩ ỉ để ột dòng tiêu đề và một câu mô tả để cố thuyết phục khách hàng bấm xem chi tiết Nếu khách chọn xem chi tiết m i chuyớ ển đến trang đích với nhiều thông tin hơn.

Nguyên tắc Exemplars:cung cấp các ví d cùng nụ ội dung cho các thông tin mà người dùng đọc Ví dụ trong tab tin tức có các mục “Tin công nghệ”, “Chia sẻ tư vấn”, “Đánh giá s n phả ẩm”, mặc dù tên danh mục rõ ràng, nhưng những hình nh kèm theo giúp ả ngườ ọi đc hiểu được thông tin truyền tải

Nguyên t c Front Doors:ắ trang web có nhiều điểm truy c p, xây d ng trang web cậ ự ủa mình cho phù h p và có s ợ ựliên k t vế ới nhau Bằng cách đặt các breadcrumbs ở mọi nơi trong trang web Người dùng có menu điều hướng chính với các liên kết “Sản phẩm” và

“Tin tức” và mỗi liên k t có menu riêng ế

Nguyên t c thi t kắ ế ế: nguyên t c Proximity, Common Region, Similarity, ắ

Closure, Symmetry, Continuity, Common Fate Giải thích:

Nguyên tắc Proximity: Các đ i tưố ợng được sắp xếp gần với nhau được cho là gắn kết hơn là những đối tượng đặt ở xa Theo nguyên tắc này, các yếu tố khác nhau được nhìn nh n ch y u theo mậ ủ ế ột nhóm hơn là những y u t riêng bi ế ố ệt.

Chúng ta có thể s d ng nguyên t c Proximity trong thi t k ử ụ ắ ế ếUI bằng vi c nhóm lệ ại các thông tin tương đồng, sắp xếp nội dung và bố cục Nếu biết áp dụng đúng cách, các nguyên t c này s có ắ ẽ ảnh hưởng tích c c lên truy n thông th giác và trự ề ị ải nghiệm người dùng

Nguyên t c Common Region:ắ Nguyên tắc Common Region đặc biệt hữu ích trong việc nhóm các lu ng thông tin và s p x p nồ ắ ế ội dung, đồng thời phân tách nội dung để người dùng tập trung vào các tiêu điểm (focal point) Nguyên tắc này tăng tính phân cấp, kh ả năng quét và hỗ trợ quảng bá thông tin

Nguyên tắc Similarity:Trong thiết kế, các s vự ật, hình khố đượi c nhóm l i theo màu ạ sắc, hình dạng hoặc kích thước Sự tương đồng được sử ụng để ắ d g n k t các y u t không ế ế ố nhất thiết phải được đặt cạnh nhau hoặc giống nhau S ự tương đồng s gi p cho thiẽ ú ết kế trở nên khác biệt hơn Đó là lý do tại sao các nút trên website được thiết kế có màu sắc khác v i các nút còn lớ ại — để chúng thu hút sự chú ý của khách truy c p vào ậ

Lấy ví d ụ như logo của nhóm, màu ch ữ “BK ROBOTIC” tương đồng v i màu c a robot ớ ủ hút bụi Tổng th logo mang tể ới cảm giác đơn giản, t ựtin, l c quan cạ ủa doanh nghiệp

Nguyên t c closure:ắ Một tập h p các y u t ợ ế ố thường được nhìn nhận như một hình d ng ạ nhất định Nguyên tắc Closure cũng được áp d ng khi mụ ột đối tượng không hoàn thi n ệ

Theo nguyên tắc Closure, khi được cung cấp một lượng thông tin phù hợp, não bộ sẽ tự động đưa ra kết luận bằng cách lấp vào những khoảng trống và tạo nên một thể thống nhất Bằng cách này, chúng ta có th giể ảm số lượng các y u t c n thiế ố ầ ế ểt đ truyền đạt thông tin, gi m mả ức độ phức tạp và làm cho các thiết kế ở nên thu hút hơn Ngoài ra, áp tr d ng nguyên t c Closure có th giúp gi m thiụ ắ ể ả ểu độ nhi u khi truy n tễ ề ải thông điệp, nhất là trong những không gian h n ch ạ ế

Nguyên tắc Symmetry: Các y u t ế ố đối xứng thường được đánh giá liên quan tới nhau, m c cho kho ng cách cặ ả ủa chúng Điều này t o cho chúng ta mạ ột cảm giác liên k t và ế m ch lạ ạc

Các y u tế ố đối xứng rất đơn giản, hài hoà và tho mãn th giác Mả ị ắt của chúng ta luôn tìm ki m thu c tính mế ộ ạch l c và ạ ổn định, chính vì v y, áp d ng nguyên t c Symmetry s giúp ậ ụ ắ ẽ truy n tề ải thông tin nhanh hơn, hiệu quả hơn bởi người nhìn có th d dàng t p trung vào ể ễ ậ nh ng n i dung quan tr ng ữ ộ ọ

Đánh giá chuẩn SEO: 28 1.V hi u su t (Performance): 28 ề ệấ V ph n h ềầỗ trợ p c n (Accessibility): 29 tiếậ 3 V ph n SEO: 29 ềầ

Đánh giá được thực hiện bằng công c ụGoogle Lighthouse:

2.1.Về hiệu suất (Performance): Điểm hiệu suất chưa được quá cao do hình ảnh được sử d ng trong website có kích c ụ ỡ lớn, chưa được resize l ại.

Ngoài ra trang web có s d ng tài nguyên trên m ng nên viử ụ ạ ệ ảc ti web s t n thẽ ố ời gian hơn

2.2 Về phần hỗ trợ tiếp cận (Accessibility): Điểm chưa được quá cao do màu nền trước và sau chưa đủ độ tương phản

Các ph n t liên kầ ử ết chưa có tên rõ ràng

Danh sách không chỉ chứa các phần t

và ph n t h ử ầ ử ỗtrợ ậ ệ t p l nh ( và

Các m c trong danh sách (

) không có trong ph n t

ho c
m ụ ầ ử ặ ẹ

Về ph n Th c ti n (Best Practices): ầ ự ễ

Hiển th hình nh có t l khung hình không chính xác ị ả ỷ ệ

Tài liệu không có ph n mô t meta, có th thêm ph n mô t meta vào kầ ả ể ầ ả ết quả tìm kiếm để tóm tắt ngắn g n n i dung trang ọ ộ

1 Tài liệu/ số liệu/ đường dẫn tham khảo

2 Link giao diện demo: https://gentle-lolly-617c28.netlify.app/

3 Link source code: https://drive.google.com/drive/folders/1rdspQQKqF9NBxgGFG99zcYju56Ai14DN?usp=sharing

4 Link video demo: https://drive.google.com/file/d/1EkLG6xxPXzTR7fYIJRRNs7imHng3mzjY/view?usp=sharing

5 Bảng phân công nhiệm vụ và đánh giá

Tên MSSV Công việc Đóng góp

Nguyễn Minh Thiện 1915294* Thuyết trình, viết báo cáo (I 1.1-1.4) , code frontend 100%

Phạm Thế Khang 1812558 Thuyết trình, viết báo cáo (I 1.1 – 1.4), code backend, xây database 100%

Phạm Duy Hưng 1812501 Thuyết trình, viết báo cáo (IV, I 1.6), code backend, tích hợp SMS

Nguyễn Hữu Thắng 1814096 Thuyết trình, viết báo cáo (IV), code backend, tích hợp momo

Mai Đức Anh 1912579 Thuyết trình, viết báo cáo (II), design figma, làm slide thuyết trình, viết báo cáo, code frontend