BÀI TẬP THẢO LUẬN NHÓM WEB CĂN BẢN Thiết kế website bán hàng thời trang IVYmoda

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG BÀI TẬP THẢO LUẬN NHÓM WEB CĂN BẢN Thiết kế website bán hàng thời trang IVYmoda GIẢNG VIÊN: Trần Thị Tuyết Mai Nhóm Dương Thị Loan Phùng Thị Minh Anh Ngô Thị Vân Anh Nguyễn Thị Luyến Nguyễn Thị Thắm Phạm Thị Hồng Dịu Nguyễn Thị Phượng HÀ NỘI – 2021 MỤC LỤC I Planning Phân tích yêu cầu website: a, Nghiên cứu khách hàng mục tiêu b, Xác định mục tiêu người dùng c, Phân tích đề xuất tính cho website 2 Kiến trúc thông tin II Design Wirefram a) Desktop b) Tablet c) Smartphone Visual design III Đánh giá website Thông tin sơ Các chức cung cấp website IVY moda 10 IV Bảng phân chia công việc 12 I Planning Phân tích yêu cầu website a, Nghiên cứu khách hàng mục tiêu Độ tuổi: 20-30 tuổi  Giới tính: thường nữ  Cơng việc: nhân viên văn phịng, kinh doanh, nội trợ,…  Thu nhập: khoảng 5tr trở lên  Phong cách thời trang: đại, lịch sự, trẻ trung, cá tính  Tần suất mua hàng online: với độ tuổi từ 20-30 thuộc tầng lớp trẻ, yêu thích lạ đồng thời độ tuổi độ tuổi vừa học, vừa làm nên bận rộn nên muốn nhanh chóng -> tần suất mua hàng online cao b, Xác định mục tiêu người dùng  Mục đích vào website thời trang khách hàng tìm kiếm thơng tin sản phẩm mua hàng  Ngoài ra, họ cịn tìm hiểu thơng tin cơng ty, thương hiệu, xem tin tức thời trang, c, Phân tích đề xuất tính cho website Về sản phẩm  Khi vào website để mua hàng, khách hàng quan tâm đến vấn đề sản phẩm giá cả, mẫu mã, chất lượng, số lượng hàng, :  Giá phải phù hợp với túi tiền khách hàng Đặc biệt, họ quan tâm đến sản phẩm có chương trình ưu đãi, khuyến mại  Mẫu mã mẻ, đẹp so với đối thủ cạnh tranh  Chất lượng sản phẩm: điều khách hàng cảm thấy lo lắng mua sắm online Vì vậy, việc đưa thơng tin chi tiết sản phẩm đánh giá sản phẩm khách hàng mua trước lòng tin cho khách hàng chất lượng sản phẩm Giao diện website  Khách hàng thích giao diện website có bố cục dễ nhìn, cân đối; cách trình bày đẹp mắt, phù hợp với mục đích, thói quen sử dụng trang web họ Ngoài ra, nhắc đến thương hiệu thời trang “IVY moda” xa lạ với nhiều người nên cần tạo giao diện bắt mắt, ưa nhìn, độc vào trang web thu hút ý họ khiến họ lại trang web lâu  Họ thường vào trang web với mục đích để mua hàng nên khơng thích phần quảng cáo gây khó chịu gây thời gian Trang web hạn chế hiển thị quảng cáo không đưa quảng cáo không liên quan đến thời trang để tránh làm phiền người dùng  Tốc độ truy cập  Khi vào trang web, tất khách hàng ln muốn có tốc độ truy cập nhanh Việc chờ lâu để tải trang làm khách hàng cảm thấy khó chịu muốn rời trang Nên để tăng tốc độ cho web làm làm tối ưu trang web sử dụng tên miền ngắn, khơng sử dụng plugin phải trả phí liên quan đến mã HTML, CSS ,JS phải tối ưu Cơng cụ tìm kiếm, giỏ hàng tốn  Trên trang web thường có nhiều danh mục sản phẩm khác nhau, chia làm nhiều phân loại nên người dùng thích có tìm kiếm trang để thuận tiện việc tìm kiếm sản phẩm Ngồi ra, cần có lọc sản phẩm giúp họ tìm kiếm nhanh chóng  Sự xuất giỏ hàng sản phẩm giúp người dùng thêm hàng vào giỏ họ xem sản phẩm mà không cần phải trang để tìm đến giỏ hàng;  Việc mua sản phẩm thời trang trang web tiện lợi việc chọn size, màu sắc, kiểu dáng cho phù hợp với khó mua trực tiếp cửa hàng Do khách hàng mong muốn tư vấn sản phẩm trước mua để có lựa chọn đắn Vì trang web có tính trị chuyện để khách hàng liên hệ trực tiếp với nhân viên bán hàng dễ dàng  Khách hàng thích trang web bán hàng có nhiều phương thức tốn để dễ dàng lựa chọn tốn Vì web cần liên kết với nhiều cách thức toán khác Liên kết với mạng xã hội  Khách hàng thích trang web có liên kết với trang mạng xã hội Facebook, Instagram, để thuận tiện việc tìm hiểu sản phẩm, thơng tin thơng qua mạng xã hội Vậy nên trang web IVY moda thiết kế liên kết với trang mạng xã hội hãng Kiến trúc thông tin Xây dựng tổ chức thông tin cho web: Trang Web bao gồm: Header:  Logo: phía bên trái trang web  Trong menu có trang chủ, thời trang nữ, phụ kiện, chăm sóc, ưu đãi xếp theo hàng ngang phía trang web  Thanh search, tài khoản, giỏ hàng: đặt bên phải trang Body:  Hình ảnh: liên quan đến sản phẩm, rõ nét, đẹp mắt, thể chất sản phẩm chia thành hàng, giao diện desktop tablet để ảnh hàng cịn với giao diện phone có kích thước nhỏ để ảnh hàng  Nội dung trang chia làm mục như: sản phẩm bật, sản phẩm theo xu hướng, phụ kiện, tin tức, Footer bao gồm: sách, địa chỉ, liên lạc, hỗ trợ khách hàng xếp dàn trải cuối trang web Ngồi trang web cịn có nút “back-to-top”, nút tin nhắn đặt góc bên phải cuối trang hiển thị Bên cạnh trang web điều hướng sang trang mạng xã hội để làm tăng độ thị trang web tăng lượng khách hàng vào trang web II Design Wirefram Header Body Footer  Logo: vị trí phía bên trái, tuỳ thuộc vào giao diện  Menu:theo nguyên tắc 7+-2, bao gồm Trang chủ, Thời trang nữ, Phụ kiện , Chăm sóc, Ưu đãi  Thanh search: giúp người dùng tìm kiếm sản phẩm theo nhu cầu nhanh  Biểu tượng tài khoản: đăng nhập / đăng kí  Giỏ hàng:khách hàng thêm vào giỏ hàng để hàng chờ mà không cần phải mua  Banner: vị trí header có nhiều chấm trịn thể dạng slide  Nội dung, hình ảnh mục sản phẩm  Chính sách: bán hàng, bảo mật thơng tin, giao hàng tốn  Địa  Hỗ trợ khách hàng: tìm kiếm, giói thiệu, đổi trả, dịch vụ  Liên lạc: qua hotline, nút biểu tượng link quan trang mạng xã hội khác Facebook, Twitter, Youtobe, Instagram a) Desktop Tỷ lệ khung:1440W-4653H Phần Header Footer giống mô tả bên trang nhóm nói body trang Trang chủ:  Banner chia theo chủ đề sản phẩm  Nội dung sản phẩm chia thành : Sản phẩm bật; Sản phẩm theo xu hướng; Phụ kiện; Tin tức  Mỗi hàng phần nội dung xuất sản phẩm gồm hình ảnh, tên giá sản phẩm tượng trưng cho shop Bên cạnh nhóm thiết kế người dùng hover vào sản phẩm ô mua giỏ hàng dễ dàng vào mua thay phải vào sản phẩm chi tiết đến bước  Có ô “ Chat” thiết kế bên phải: Khi người dùng cần tư vấn  Nút “Quay đầu trang” đặt bên phải để ng dùng quay đầu trang (Wirefram trang chủ- Desktop) Trang đăng nhập,Trang đăng ký ,Trang đăng ký thành cơng, Trang thốt:  Nhóm phủ lớp opacity lên trang chủ, nội dung đè lên lớp đăng ký, đăng nhập Mục đích để làm giảm nội dung trang bật lên đăng ký đăng nhập để người khơng bị lỗng thơng tin  Đặc biệt trang nhóm dựa theo trải nghiệm người dùng thường họ không may click vào nút x tab bị trang ln nên nhóm làm trang exit để thơng báo cho người dùng có chắn muốn rời khỏi hay không Trang thời trang nữ:  Phần Header: giữ lại phần header trang chủ sau đăng nhập nên nhóm thay icon tài khoản thành avatar người dùng cung cấp  Dịng “Trang chủ/Thời trang nữ”: thể vị trí người dùng từ trang đến trang  Phần nội dung: Nhóm chia Grid thành phần nhau:  Phần 1:Bộ lọc tìm kiếm: tất sản phẩm shop có bán, size, Đánh giá sản phẩm Điều để người dùng lựa chọn sản phẩm theo ý nhanh  Các phần cịn lại nội dung: hình ảnh , giá, tên sản phẩm chia cho cột Ở phía nhóm có điều hướng cho khách hàng sang trang tiếp nút điều hướng để người dùng có nhiều lựa chọn sản phẩm trang < 4….> b) Tablet Tỷ lệ khung: 768W-2982H Giữ nguyên toàn bố cục trang Desktop thay đổi chiều rộng trang c) Smartphone (wrieframe trang chủ- smartphone) Header:  Logo: đặt hình Smartphone: kích thước điện thoại nhỏ, nên đặt mắt người dùng ý đến  Biểu tượng “3 dấu gạch ngang” đặt phía bên trái: Khi ấn vào có mục phần Menu  Biểu tượng “Kính lúp” đặt bên phải hình: thể nút tìm kiếm nhanh  Biểu tượng “hình người” Tài khoản: để đăng ký đăng nhập  Biểu tượng “giỏ hàng”: đặt đầu ng dùng cho sản phẩm vào giỏ chưa đưa định mua Footer: Chia thành dịng hàng ngang: Chính sách, Địa chỉ, Liên lạc, Về hỗ trợ khách hàng Bên cạnh dịng trên: có mũi “tên bên cạnh trỏ xuống”: thể khách hàng cần biết thêm thông tin cần ấn xuống đọc Phần trang chủ(body): Phần nội dung Smartphone tương tự phần Desk Table: Nhưng thiết kế ta thiết kế hàng hiển thị sản phẩm phù hợp với giao diện điện thoại Phần trang chủ 3: thể menu click vào icon danh mục Trang thời trang nữ(body):  Để tối ưu trang nhóm em thay đổi lọc cụ thể lọc ẩn người dùng click vào hiển thị thông tin size, sản phẩm hay đánh giá  Sản phẩm chia bố cục trang chủ Visual design Hệ thống lưới (Grid) chia thành 12 cột sử dung xuyên suốt giao diện để đảm bảo độ xác thiết kế Dựa vào wireframe, nhóm thay sản phẩm vào khung dựng trước thêm vào hình ảnh màu sắc cho trang web Đối tượng khách hàng chủ yếu từ độ tuổi 20-30 đặc biệt khách hàng làm văn phòng màu sắc lựa chọn chủ yếu trang web màu nhã nhặn: hồng phấn, xám, trắng … với màu làm highlight cho lần hover click chuột (màu sử dung xuyên suốt trang web) (font chữ sử dụng giao diện Desktop) (hình ảnh visual design trang chủ ) III Đánh giá website Thông tin sơ Tên website: IVY Moda URL: https://ivymoda1.com/ Mục đích đánh giá website: Xem xét đánh giá nội dung hình thức bố cục giao diện tính website Các chức cung cấp website IVY moda      Cách bố trí hình ảnh, sản phẩm chương trình khuyến mãi, ưu đãi đầy đủ thông tin dễ dàng nhìn thấy Các hình ảnh phù hợp với nội dung Phong cách nội dung phù hợp với việc kinh doanh Độ tương phản màu sắc chữ, hình ảnh hài hịa Kích thước văn Website vừa phải, có thay đổi theo kích thước hình  Giao diện, văn bản, hình ảnh website dễ dàng thay đổi kích thước trình duyệt  Những loại hình ảnh sử dụng website: JPEG, PNG  Phần lọc chi tiết với tồn thuộc tính để lọc sản phẩm xếp hết đầu Để ý thấy thường trang web khác ẩn thuộc tính đi, người dùng ấn vào chọn lọc Chính nhờ yếu tố mà người dùng dễ dàng tìm kiếm sản phẩm với nhu cầu Chat trực tuyến : Cho phép khách hàng người quản lý website chat trực tiếp với website Có tìm kiếm văn      Điều hướng:  Có nút “back-to-top” cho trang dài  Nhãn điều hướng rõ ràng  Có dấu hiệu để người dùng biết vị trí trạng thái điều hướng  đường dẫn website để kết nối đến trang khác trang trang chủ, thời trang nữ, đăng kí đăng nhập, Footer: đặt cố định cuối trang, bao gồm thông tin công ty thể liên hệ cần thiết Liên kết mạng xã hội : công cụ giúp website liên kết với nhiều trang mạng xã hội phổ biến Facebook, Instagram, Zalo, Ngồi việc tìm hiểu website,khách hàng tìm hiểu,quan tâm nhãn hàng trang mạng xã hội 10 Kết luận chung : Nội dung đầy đủ,phù hợp với mục tiêu xây dựng website, với đối tượng khách hàng mà nhóm hướng đến Bố cục xếp cách hợp lý,tạo điều kiện cho người đọc dễ định hướng website Hình thức đẹp,phù hợp với chủ đề nội dung Các tính website hoạt động tốt,đáp ứng nhu cầu khách hàng 11 IV Bảng phân chia công việc STT Họ tên Dương Thị Loan (Nhóm trưởng) Mã sinh viên Thiết kế web Báo cáo, slide B19DCTM037  Trang chủ  Phần  Prototype design  Sitemap  Thuyết trình  Trang chủ  Phần planning Phùng Thị Minh Anh B19DCTM007 Ngô Thị Vân Anh B19DCTM001  Trang nội dung  Phần design Nguyễn Thị Luyến B19DCTM041  Trang đăng  Slide  Trang chủ nhập  Trang đăng kí Phạm Thị Hồng Dịu B19DCTM015 Nguyễn Thị Thắm B19DCTM073  Tổng hợp báo cáo  Trang nội dung  Phần planning  Trang chủ  Phần đánh giá website Nguyễn Thị Phượng B19DCTM059  Trang  Trang đăng kí thành cơng  Phần đánh giá website 12 ... trang web bán hàng có nhiều phương thức tốn để dễ dàng lựa chọn tốn Vì web cần liên kết với nhiều cách thức toán khác Liên kết với mạng xã hội  Khách hàng thích trang web có liên kết với trang. .. Vậy nên trang web IVY moda thiết kế liên kết với trang mạng xã hội hãng Kiến trúc thông tin Xây dựng tổ chức thông tin cho web: Trang Web bao gồm: Header:  Logo: phía bên trái trang web  Trong... công cụ giúp website liên kết với nhiều trang mạng xã hội phổ biến Facebook, Instagram, Zalo, Ngồi việc tìm hiểu website, khách hàng tìm hiểu,quan tâm nhãn hàng trang mạng xã hội 10 Kết luận chung