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

vừa đi làm nên rất bận rộn nên muốn sự nhanh chóng -> tần suất mua hàng Online sẽ rất cao b, Xác định mục tiêu người dùng • Mục đích chính khi vào website thời trang của khách hàng là tì

E1 _ i

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 2

HÀ NỘI - 2021

Ì1 4

MỤC LỤC

I. Planning 2

1 Phân tích yêu cầu của website: 2

a, Nghiên cứu khách hàng mục tiêu 2

b, Xác định mục tiêu người dùng 2

c, Phân tích và đề xuất các tính năng cho website 2

2 Kiến trúc thông tin 3

II. Design 4

1 Wirefram 4

a) Desktop 5

b) Tablet 6

c) Smartphone 6

2 Visual design 8

III. Đánh giá website 9

1 Thông tin sơ bộ 9

2 Các chức năng được cung cấp bởi website của IVY moda 10

IV. Bảng phân chia công việc 12

I Planning

1 Phân tích yêu cầu của 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 là 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: hiện đạ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 sự mới

lạ đồng thời độ tuổi này là độ tuổi có thể vừa đi học vừa đi làm nên rất bận rộn nên muốn sự nhanh chóng -> tần suất mua hàng Online sẽ rất cao

b, Xác định mục tiêu người dùng

• Mục đích chính khi vào website thời trang của khách hàng là tìm kiếm thông tin sản phẩm và mua hàng

• Ngoài ra họ còn tìm hiểu thông tin về công ty thương hiệu xem các tin tức về thời trang,

c, Phân tích và đề xuất các tính năng cho website.

về sản phẩm

• Khi vào website để mua hàng khách hàng sẽ quan tâm đến các vấn đề về sản phẩm như giá cả mẫu mã chất lượng số lượng hàng :

^ Giá cả phải phù hợp với túi tiền của khách hàng Đặc biệt họ rất quan tâm đến những sản phẩm có chương trình ưu đãi khuyến mại

^ Mẫu mã mới mẻ đẹp hơn so với các đối thủ cạnh tranh

^ Chất lượng sản phẩm: đây là điều khách hàng cảm thấy lo lắng nhất khi mua sắm online Vì vậy việc đưa các thông tin chi tiết về sản phẩm cũng như đánh giá về sản phẩm của khách hàng mua trước sẽ tại được lòng tin cho khách hàng về 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 khi sử dụng trang web của họ Ngoài ra khi nhắc đến thương hiệu thời trang “IVY moda” có thể còn 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 đáo để ngay khi vào trang web sẽ thu hút được sự chú ý của họ khiến họ ở lại trang web lâu hơn

• Họ thường vào trang web với mục đích chính là để mua hàng nên sẽ không thích các phần quảng cáo gây khó chịu và gây mất thời gian Trang web sẽ hạn chế hiển thị quảng cáo và không đưa những 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 cả khách hàng luôn muốn có tốc độ truy cập nhanh Việc chờ quá lâu để tải trang sẽ làm khách hàng cảm thấy khó chịu và muốn rời trang Nên để tăng tốc độ cho web có thể làm làm tối ưu trang web như sử dụng tên miền ngắn, không sử dụng những plugin phải trả phí và liên quan đến mã HTML, CSS ,JS phải được tối ưu

Công cụ tìm kiếm, giỏ hàng và thanh toán

• Trên trang web thường sẽ có nhiều danh mục sản phẩm khác nhau, trong đó được chia ra làm nhiều phân loại vậy nên người dùng thích có thanh tìm kiếm ở mọi trang

để thuận tiện hơn trong việc tìm kiếm sản phẩm Ngoài ra, cần có bộ lọc sản phẩm giúp họ tìm kiếm nhanh chóng hơn

• Sự xuất hiện của giỏ hàng ở các sản phẩm sẽ giúp người dùng có thể thêm hàng vào giỏ ngay khi họ xem sản phẩm mà không cần phải thoát trang để tìm đến giỏ hàng;

• Việc mua các sản phẩm thời trang trên các trang web tuy tiện lợi nhưng việc chọn size, màu sắc, kiểu dáng sao cho phù hợp với mình sẽ khó hơn khi mua trực tiếp tại cửa hàng Do đó khách hàng luôn mong muốn được tư vấn về sản phẩm trước khi mua để có lựa chọn đúng đắn Vì vậy trang web sẽ có tính năng trò chuyện để khách hàng liên hệ trực tiếp với nhân viên bán hàng một dễ dàng

• Khách hàng thích những trang web bán hàng có nhiều phương thức thanh toán để dễ dàng lựa chọn khi thanh toán Vì thế web sẽ cần được liên kết với nhiều cách thức thanh toán khác nhau

Liên kết với mạng xã hội

• Khách hàng thích những trang web có liên kết với các trang mạng xã hội như Facebook, Instagram, để thuận tiện trong 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 của IVY moda sẽ được thiết kế liên kết với các trang mạng xã hội của hãng

Xây dựng và tổ chức thông tin cho web: Trang Web bao gồm:

Header:

• Logo: phía trên bên trái của trang web

• Trong menu có trang chủ, thời trang nữ, phụ kiện, chăm sóc, ưu đãi được xếp theo hàng ngang ở phía trên cùng của trang web

• Thanh search, tài khoản, giỏ hàng: được đặt ở trên cùng bên phải của trang

Body:

• Hình ảnh: liên quan đến sản phẩm, rõ nét, đẹp mắt, thể hiện được bản chất của sản phẩm sẽ được chia thành các hàng, đối với giao diện desktop và tablet

• sẽ để 4 ảnh trên 1 hàng còn với giao diện phone do có kích thước

để 2 ảnh trên 1 hàng

• • Nội dung các trang chia làm các mục như: sản phẩm nổi bật, sản phẩm theo

xu hướng, phụ kiện, tin tức,

• Footer bao gồm: chính sách, địa chỉ, liên lạc, hỗ trợ khách hàng được xếp dàn trải ở

cuối trang web

• Ngoài ra trên trang web còn có nút “back-to-top”, nút tin nhắn được đặt góc bên

phải

ở cuối trang hiển thị

• Bên cạnh đó trang web sẽ được điều hướng sang các trang mạng xã hội để làm tăng độ

hiện thị của trang web tăng lượng khách hàng vào trang web

1 Wirefram

er • Logo: vị trí phía trên bên trái, ở giữa tuỳ thuộcvà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 có thể tìm kiếm sản phẩm theo nhu cầu của mình nhanh nhất có thể

• Biểu tượng tài khoản: đăng nhập / đăng kí

• Giỏ hàng:khách hàng có thể thêm vào giỏ hàng

để hàng chờ mà không cần phải mua luôn

• Body • Banner: vị trí dưới header và có nhiều chấm tròn

thể hiện đây dạng slide

• Nội dung, hình ảnh của từng mục sản phẩm

r

• Chính sách: bán hàng, bảo mật thông tin, giao hàng và thanh toán

• Địa chỉ

• 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, các nút biểu tượng link quan các trang mạng xã hội khác như Facebook, Twitter, Youtobe, Instagram

•

a) Desktop

• Tỷ lệ khung:1440W-4653H

• Phần Header và Footer giống nhau như mô tả bên trên ở các trang nhóm chỉ nói về body của từng trang

• Banner được chia theo từng chủ đề sản phẩm

• Nội dung sản phẩm được chia thành : Sản phẩm nổi bật; Sản phẩm theo xu hướng; Phụ kiện; Tin tức

• Mỗi hàng trong phần nội dung sẽ xuất hiện 4 sản phẩm gồm hình ảnh, tên và giá sản phẩm tượng trưng cho shop Bên cạnh đó nhóm thiết kế khi người dùng hover vào 1 sản phẩm nào đó sẽ hiện ra ô mua ngay và giỏ hàng dễ dàng vào mua thay vì phải vào 1 sản phẩm chi tiết rồi mới đi đến các bước đó được

• Có ô “ Chat” được thiết kế bên phải: Khi người dùng cần tư vấn

• Nút “Quay về đầu trang” được đặt bên phải để ng dùng có thể quay về đầu trang

•

• (Wirefram trang chủ- Desktop)

• Nhóm phủ một lớp opacity lên trên các trang chủ, nội dung và đè lên một lớp đăng

ký, đăng nhập và thoát Mục đích để làm giảm các nội dung của các trang đi và nổi bật lên các ô đăng ký đăng nhập và thoát để mọi người không bị loãng thông tin

• Đặc biệt trang thoát nhóm dựa theo trải nghiệm người dùng thường khi họ không may click vào nút x của tab sẽ bị mất trang luôn nên nhóm làm trang exit để thông báo cho người dùng có chắ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 của trang chủ và vì sau khi đăng nhập rồi nên nhóm

sẽ thay icon tài khoản thành avatar của người dùng đã cung cấp

• Dòng “Trang chủ/Thời trang nữ”: thể hiện vị trí của người dùng đang đi từ trang nào đến trang nào

• Phần nội dung:

• Nhóm chia Grid thành 5 phần bằng nhau:

Đánh giá sản phẩm Điều này để người dùng có thể lựa chọn sản phẩm theo

ý của mình nhanh hơn

• J Các phần còn lại là nội dung: hình ảnh , giá, tên sản phẩm được chia đều cho

4 cột

• Ở phía dưới nhóm có điều hướng cho khách hàng sang trang tiếp bằng các nút điều hướng để người dùng có nhiều lựa chọn về sản phẩm ở các trang tiếp theo

• < 1 2 3 4 >

b) Tablet

• Tỷ lệ khung: 768W-2982H

• Giữ nguyên toàn bộ bố cục như trang Desktop chỉ thay đổi chiều rộng của trang

c) Smartphone

• (wrieframe trang chủ- smartphone)

•

• Header:

• Logo: được đặt ở giữa màn hình Smartphone: vì kích thước của điện thoại nhỏ, nên khi đặt ở giữa mắt người dùng có thể chú ý đến

• Biểu tượng “3 dấu gạch ngang” được đặt phía bên trái: Khi ấn vào sẽ có các mục như phần Menu

• Biểu tượng “Kính lúp” được đặt bên phải màn hình: thể hiện đây là nút tìm kiếm nhanh hơn

• Biểu tượng “hình người” Tài khoản: để đăng ký và đăng nhập

• Biểu tượng “giỏ hàng”: đặt ngay trên đầu thì ng dùng có thể cho sản phẩm vào giỏ khi chưa đưa ra quyết định mua

• Footer:

• Chia thành các 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 các dòng như trên: có mũi “tên bên cạnh trỏ xuống”: thể hiện khi khách hàng

cần biết thêm thông tin đó thì chỉ cần ấn xuống có thể đọc

• Phần trang chủ(body):

• Phần nội dung của Smartphone tương tự như phần Desk và Table: Nhưng khi thiết kế

ta chỉ thiết kế trên 1 hàng sẽ hiển thị 2 sản phẩm vì phù hợp với giao diện điện thoại

• Phần trang chủ 3: thể hiện menu khi được click vào icon danh mục

• Trang thời trang nữ(body):

• Để tối ưu trang nhóm em đã thay đổi bộ lọc cụ thể bằng bộ lọc ẩn khi người dùng click vào sẽ hiển thị ra những thông tin về size, về sản phẩm hay đánh giá

• Sản phẩm cũng được chia bố cục như trang chủ

2 Visual design

• Hệ thống lưới (Grid) chia thành 12 cột được sử dung xuyên suốt cái giao diện để đảm bảo độ chính xác khi thiết kế

• Dựa vào wireframe, nhóm thay sản phẩm vào các khung đã dựng trước đó và thêm vào hình ảnh và màu sắc cho trang web

• Đối tượng khách hàng chủ yếu là từ độ tuổi 20-30 đặc biệt là những khách hàng làm

văn phòng chính vì vậy màu sắc được lựa chọn chủ yếu ở trang web này là những màu nhã nhặn: hồng phấn, xám, trắng cùng với các màu làm highlight cho những

• lần hover cũng như click chuột.

• Color Styles

• FDF8F& màu nền

• Màu chữ

• (màu được sử dung xuyên suốt trang web)

• Text Styles

• Ag 43px-h1 ■ 43/Auto

• Ag 35px-h2 ■ 35/Auto

• Ag 22px-hi3 - 22/Airto

• Ag 18px-p ■ 18/Auto

• Ag 14px-ncrte ■ 18/Auto

• (font chữ được sử dụng ở giao diện Desktop)

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

•

••

• (hình ảnh visual design trang chủ )

• III Đánh giá

website

• 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 và

các tính năng trong website

• Cách bố trí hình ảnh, sản phẩm và chương trình khuyến mãi, ưu đãi khá đầy đủ thông

tin và 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 giữa nền và chữ, hình ảnh hài hòa

• Kích thước văn bản của Website vừa phải, có thay đổi theo kích thước màn hình

• Giao diện, văn bản, hình ảnh của website có thể dễ dàng thay đổi kích thước trình duyệt

• Những loại hình ảnh được sử dụng trong website: JPEG, PNG

• Phần bộ lọc cực kỳ chi tiết với toàn bộ các thuộc tính để lọc sản phẩm đã được sắp xếp hết ở trên đầu Để ý thấy thường các trang web khác sẽ ẩn các thuộc tính này đi,

chỉ khi người dùng ấn vào chọn bộ lọc thì mới hiện ra Chính nhờ yếu tố này mà người dùng sẽ dễ dàng tìm kiếm sản phẩm đúng với nhu cầu của mình hơn

• Chat trực tuyến : Cho phép khách hàng và người quản lý website có thể chat trực tiếp với nhau ngay trên website

• Có thanh tìm kiếm bằng văn bản

• Điều hướng:

• J Có dấu hiệu để người dùng biết vị trí hoặc trạng thái của điều hướng

các trang trang chủ, thời trang nữ, đăng kí đăng nhập,

• Footer: được đặt cố định ở cuối các trang, bao gồm các thông tin của công ty như thể liên hệ khi cần thiết

• Liên kết mạng xã hội : đây là công cụ giúp website liên kết với nhiều trang mạng xã

hội phổ biến hiện nay như Facebook, Instagram, Zalo, Ngoài việc tìm hiểu trên website,khách hàng có thể tìm hiểu,quan tâm nhãn hàng trên các trang mạng xã hội

• Kết luận chung :

• Nội dung đầy đủ,phù hợp với các mục tiêu xây dựng website, đúng với đối tượng khách

hàng mà nhóm hướng đến Bố cục được sắp xếp một cách hợp lý,tạo điều kiện cho người đọc dễ định hướng được trong website Hình thức đẹp,phù hợp với chủ đề của nội dung Các tính năng của website thì hoạt động tốt,đáp ứng được các nhu cầu của khách hàng

• IV Bảng phân chia công việc

•

viên

• Thiết kế web

cáo, slide

Loan (Nhóm trưởng)

TM037

• Trang chủ

• Prototype

• Sitemap

• Phần design

• Thuyết trình

Minh Anh

• Trang chủ 3

• • Phần planning

Vân Anh

TM001 •dung • Trang nội

• • Phần

• design

Luyến

nhập

• Trang đăng kí

• Slide

• Tổng hợp báo cáo

Hồng Dịu

TM015

• • Trang nội dung

• • Phần planning

Thắm

TM073

• • Trang chủ • • Phần

• đánh giá website

Phượng

• Trang đăng kí thành công

• • Phần

• đánh giá website