CHƯƠNG 1: GIỚI THIỆU ĐỀ TÀI 1.1 Giới thiệu đề tài: 1. Mô tả đề tài - Đề tài: Nghiên cứu trải nghiệm người dùng và thiết kế giao diện cho website bán quần áo Insidemen - Lĩnh vực: Thương mại điện tử - Chủ đề website: Kinh doanh quần áo - Phương châm hoạt động: Đem đến cho khách hàng các sản phẩm chất lượng 1. Lý do đề tài - Công nghệ thông tin l à một trong những động l ự c quan trọng bậc nhất của sự phát triển, cùng với một số ngành công nghệ cao khác đang làm biến đổi sâu sắc đời sống kinh tế, văn hóa, xã hội của thế giới hiện đại. Việc ứng dụng công nghệ thông tin đã góp phần giải phóng sức lao động, thúc đẩy công cuộc đổi mới, phát triển nhanh và hiện đại hóa các ngành kinh tế.
- Do vậy, Website thương mại điện tử trở thành một phần không thể thiếu trong một chiến lược bán hàng hi ệu quả, nó có thể phục vụ một phần hoặc toàn bộ quy trình của hoạt động mua bán hàng hóa từ khâu tiếp cận khách hàng, trưng bày và cập nhật mẫu mã liên tục, giúp người tiêu dùng có được thông tin đầy đủ về sản phẩm , thanh t oán và nhận hàng cũng trở nên dễ dàng hơn rất nhiều. - Thị trường thời trang đang ngày càng có quy mô tương đối rộng lớn. Và nhu cầu thì ngày càng tăng l ên bởi quan niệm về cái đẹp và phong cách. - Website Insidemen được nghiên cứu giúp người mua có trải nghiệm mua sắm tuyệt vời, có thể dễ dàng tìm kiếm những món đồ phù hợp với phong cách cá nhân.
Đồng thời, giúp chủ doanh nghiệp tiếp cận với nhiều khách hàng 2 hơn thông qua hình thức trực tuyến để cửa hàng tăng doanh số và phát triển hơn. Mục đích của đề tài - Đáp ứng nhu cầu tìm kiếm và mua hàng của khách hàng một cách nhanh chóng mà lại tiết kiệm được nhiều thời gian và chi phí. - Thông tin sản phẩm hiển thị rõ ràng và chi tiết để khách hàng có thể có nhiều lựa chọn sao cho phù hợp với nhu cầu của mình. Đề tài liên quan: Đề tài 1: Thiết kế giao diện và trải nghiệm người dùng cho website của cửa hàng mỹ phẩm Sophia ( ĐATN đại học, Khoa CNTT, Trường ĐH Mở HN, Hà Nội, 2021) Sinh viên thực hiện: Hoàng Phư ơng Hạnh – 1810A04 Nguyễn Hoàng Việt - 1810A05 a.
Đề tài đạt được: - Giao diện thân thiện, dễ sử dụng. - Có tính năng đánh giá sản phẩm, thuận tiện cho người dùng tham khảo ý kiến và đánh giá sản phẩm. - Hoàn thành việc khảo sát và phân tích, phù hợp với các yêu cầu thực tế. Các lý thuyết về thiết kế, màu sắc, bố cục được thự c hi ện đầy đủ.
Đề tài chưa đạt được - Button điều hướng chưa đẹp và nổi bật. - Màu sắc chưa được nổi bật - Cần có thêm khoảng trắng phần danh mục sản phẩm giúp người dùng dễ dàng chọn lựa sản phẩm. Đề tài 2: Nghiên Cứu Trải Nghiệm Người Dùng Và Thiết Kế Giao Diện 3 Website Cho Cửa Hàng Nước Hoa Charme Perfume ( ĐATN đại học, Khoa CNTT, Trường ĐH Mở HN, Hà Nội, 2020) Người thực hiện: Phạm Thị Thúy Vui a. Đề tài đã đạt được: - Đưa ra màu sắc chủ đạo của website (phù hợp với logo và ngành nghề của doanh nghiệp, tương đồng với bộ nhận di ện thương hiệu).
Xác đị nh được đối tượng truy cập là ai và họ cần gì từ website của bạn: thông tin, hình ảnh, thông số sản phẩm, cách trình bày… - Cung cấp cơ bản được các chức năng mà một website bán hàng cần có. Đề tài chưa đạt được: - Về mặt giao di ện : + Phần header và footer chưa đảm bảo được cân bằng trên – dưới, trái – phải. + Màu sắc chữ chưa thống nhất, chữ phần trên cùng header và phần chữ của toàn bộ website. + Phần giá sản phẩm tại trang chủ, trang sản phẩm căn l ề chưa hợp lý.
+ Tại một số trang không đảm bảo tính cân bằng : thông tin liên hệ, chi tiết sản phẩm, thanh toán. - Về mặt trải nghiệm: + Chưa có các chức năng bắt l ỗi khi người dùng đăng nhập sai. + Không có chức năng thông báo khi người dùng liên hệ, đăng ký, thêm sản phẩm vào giỏ hàng, đặt hàng thành công hay chưa. + Chưa đưa ra được gợi ý cho khách hàng tại trang đăng ký, tại trang thanh toán về cách thanh toán.
Nội dung đề tài này dự định đạt được: Các nội dung có thể cải thi ện so với bài t ham khảo: ● Responsive với các loại màn (PC, mobile theo sự phổ biến màn hình hiệntại). ● lựa chọn, Sử dụng màu sắc phù hợp với Môi trường học tập. 4 ● Áp dụng với thương hiệu phù hợp tăng tính ứng dụng, khả thi. ● Thiết kế tăng sự tương tác của người dùng với website.
Về trải nghiệm người dùng : · Nghiên cứu trải nghiệm người dùng bằng các phương pháp như nghiên cứu thứ cấp , nghiên cứ u đị nh lượng và định tính. Sau đó phân tích dữ liệu thu thập được. · Xác định được chân dung người dùng và mental model của người dùng. · Đưa ra chức năng chính giải pháp, xác định phân khúc người dùng và xây dựng user personas.
· Nắm được nhu cầu, mong muốn của người sử dụng sản phẩm với vai trò là người thiết kế, xây dựng giao diện, sao cho đem lại trải nghiệm người dùng tốt nhất, phù hợp với xu hướng hiện tại. Về giao diện: - Gồm các trang web: · Trang chủ · Trang đăng nhập, đăng ký · Trang sản phẩm · Các trang con chi tiết sản phẩm · Trang Giỏ hàng · Trang Giới thiệu, Liên hệ - Giao diện đơn giản, dễ sử dụng, thân thiện với người dùng. - Giao diện Responsive Web Design tương t hí ch với nhiều loại màn hình do đó, người dùng có thể tìm kiếm các sản phẩm dịch vụ một cách dễ dàng - Sử dụng các phương pháp thiết kế và phối màu hợp lí - Nội dung rõ ràng, thông tin chính xác, bố cục hợp lý. 5 - Thống nhất về màu sắc, font chữ, layout ,…trong thiết kế.
- Thiết kế điều hướng dễ dàng. Về chức năng: - Tìm kiếm sản phẩm, lọc sản phẩm - Chức năng mua hàng, đặt hàng, thanh toán - Chức năng cho phép người dùng lưu, xóa sản phẩm vào giỏ hàng - Chức năng đăng ký, đăng nhập, chỉnh sửa thông tin tài khoản - Chức năng đặt hàng và t hanh toán - Quen thuộc với người dùng. - Đảm bảo tính nhất quán. - Cung cấp thông tin phản hồi phù hợp để người dùng có thể đi ều chỉnh hành động.
- Giảm tải thông tin mà người dùng cần nhớ. - Có khả năng phục hồi lỗi. Đối với Users: - Hiển thị thông tin tài khoản, sản phẩm chính xác - Tìm kiếm sản phẩm t heo tên; sắp xếp sản phẩm theo loại, giá cả để tiết kiệm thời gian tìm kiếm của khách hàng. - Cung cấp cho khách hàng các tùy chọn: đặt hàng, thay đổi số lượng, gỡ sản phẩm khỏi giỏ hàng, tự động tính giá, tổng giá, hướng dẫn đặt hàng, thanh toán.
- Hiển thị thông tin giới thiệu, tin tức, liên hệ để khách hàng hiểu thêm về doanh nghiệp và liên hệ hỗ trợ dễ dàng. Đối với Admin: - Đăng nhập tài khoản Admin - Quản lý thông tin người dùng - Quản trị thông tin trang chủ, giới thiệu, tin tứ c, liên hệ, sản phẩm - Quản lý đơn hàng - Quản lý quảng cáo 6 Ngôn ngữ sử dụng: HTML CSS Phần mềm dự định sử dụng: · Adobe Illustrator · Adobe Photoshop · Figma · Visual Studio Code 1. Kế hoạch thực hiện: Tuần Nội dung 1 - Nghiên cứu, tìm hiểu và tóm tắt đề tài - Tìm hiểu về doanh nghiệp và đối t ư ợng sử dụng 2 - Tìm hiểu về UI, UX và các yếu tố tạo nên một UI/UX tốt - Tìm hi ểu về các quy trình thiết kế giao diện và trải nghiệm người dùng trên nền tảng website - Xác đị nh phư ơng pháp phối màu, nguyên lý thiết kế 3+4 - Phân tích thiết kế hệ thống - Phân tích trải nghiệm người dùng (UX) 5 - Xây dựng ý tưởng thiết kế - Phân tích nội dung, tạo sơ đồ trang web 6+7 - Thiết kế Wireframe - Thiết kế gi ao di ện trang chủ - Thiết kế hì nh ảnh sử dụng cho trang web 7 8+9 - Thiết kế gi ao di ện, các trang sản phẩm, màn hình đăng ký, đăng nhập - Thiết kế gi ao di ện nhữ ng trang chi tiết như: quên mật khẩu, thay đổi mật khẩu… - Thiết kế gi ao di ện trang giỏ hàng, thanh toán 10+11 - Thiết kế giao diện trang t i n tức - Thiết kế gi ao di ện quản lý cho admin - Hoàn thiện toàn bộ trang web 12+13 - Khảo sát và chỉnh sửa thiết kế - Tạo prototype hoàn chỉnh 14 Hoàn thiện báo cáo 15 Bảo vệ đồ án Bảng 1.1: Kế hoạch công việc 1. Phân công công việc: Công việc Người thực hiện Nghiên cứu trải nghiệm người dùng và thiết kế Nguyễn Mạnh Hùng giao diện cho website bán quần áo Insidemen Bảng 1.
Phân công công việc 8 CHƯƠNG 2. UI là gì? ● Giao diện đồ họa người dùng (tiếng anh: Graphic user interface, viết tắt: GUI) là giao diện mà qua đó người dùng tương tác với các thiết bị điện tử như máy tính, thiết bị cầm tay và các thiết bị khác. ● Giao diện này sử dụng các biểu tượng, menu và các biểu diễn hình ảnh (đồ họa) khác để hiển thị thông tin và các điều khiển người dùng liên quan, không giống như giao diện dựa trên văn bản, nơi dữ liệu và lệnh được hiển thị trong văn bản. ● Các biểu diễn GUI được thao tác bằng một thiết bị trỏ như chuột, bi xoay, bút stylus (bút cảm ứng) hoặc ngón tay trên màn hình cảm ứng.
● Bên cạnh đó, sự phụ thuộc ngày càng nhiều của doanh nghiệp vào các ứng dụng web, ứng dụng di động, mạng xã hội đã khiến nhiều công ty đặt ưu tiên cao hơn cho UI trong nỗ lực cải thiện trải nghiệm chung của người dùng. ● Các yếu tố tạo nên giao diện người dùng tốt: o Mục tiêu cơ bản trong thiết kế giao diện người dùng: ● Dựa trên tính quen thuộc của người dùng. ● Tính nhất quán – thực hiện các hoạt động tương tự theo cách giống nhau. ● Giảm việc tải dữ liệu vào bộ nhớ.
● Lựa chọn giá trị mặc định một cách cẩn thận – tối giản sự lựa chọn chức năng cho người dùng. ● Cung cấp thông ti n phản hồi phù hợp để người sử dụng có thể điều chỉnh hành động.