Báo cáo đồ án môn thiết kế giao diện người dùng đề tài website bán hàng tmđt

Ở trang chủ sẽ bao gồm các thành phần như sau:  Thanh HEADER: bao gồm o LOGO; o Đường dẫn đến TRANG CHỦ, LIÊN HỆ, GIỚI THIỆU,… ; o Các biểu tượng như tài khoản, tìm kiếm, ưa thích, giỏ

TRƯỜNG ĐẠI HỌC CÔNG NGHỆ THÔNG TIN KHOA KHOA HỌC VÀ KỸ THUẬT THÔNG TIN

IE106 – Thiết kế Giao diện Người dùng

NHẬN XÉT CỦA GIÁO VIÊN HƯỚNG DẪN

……., ngày…… tháng……năm 20…

Người nhận xét

(Ký tên và ghi rõ họ tên)

BẢNG PHÂN CÔNG, ĐÁNH GIÁ THÀNH VIÊN:

Bảng 1: Bảng phân công, đánh giá thành viên

Họ và tên MSSV Phân công Đánh giá

● Tuần 2: Phác thảo giaodiện, hoàn thiện giaodiện, viết báo cáo

● Tuần 3: Hoàn thànhtương tác với ngườidùng, viết báo cáo

● Tuần 2: Phác thảo giaodiện, hoàn thiện giaodiện

● Tuần 3: Hoàn thànhtương tác với ngườidùng, làm slide

● Tuần 2: Phác thảo giaodiện, hoàn thiện giaodiện

● Tuần 3: Hoàn thành

Hoàn thành 100%

IE106 – Thiết kế Giao diện Người dùng

tương tác với ngườidùng, làm slide

LỜI MỞ ĐẦU

Hiện nay, Internet là một trong những công cụ giúp người dùng có thể tìm kiếmthông tin, đăng thông tin, bán hàng cũng như mua sắm… Trên các trang TMĐT luônđược chú trọng đến Giao diện và khả năng tương tác của trang website đối với ngườidùng Trong quá trình học môn Thiết kế giao diện người dùng, được sự hướng dẫn của

Cô Tạ Thu Thủy, nhóm chúng em học hỏi được nhiều kiến thức và áp dụng vào việcxây dựng trang website bán hàng

Trân thành cảm ơn Cô trong suốt thời gian qua!

Sau đây, nhóm chúng em sẽ trình bày về phần mềm, quy trình thiết kế giao diện

và giao diện hoàn chỉnh qua các chương sau:

● Chương 1: Quy trình khảo sát phần mềm

● Chương 2: Thiết kế phác thảo giao diện

● Chương 3: Giao diện website hoàn chỉnh

● Chương 4: Tương tác giao diện

● Chương 5: Kết luận

MỤC LỤC CÁC CHƯƠNG

MỤC LỤC CÁC CHƯƠNG 5

MỤC LỤC HÌNH ẢNH 7

KHẢO SÁT, PHÂN TÍCH, THAM KHẢO 8

1.1 Khảo sát yêu cầu khách hàng và phân tích yêu cầu 8

1.1.1 Khảo sát yêu cầu: 8

1.1.2 Phân tích yêu cầu và đề xuất giải pháp 10

1.2 Tìm hiểu, nghiên cứu trang website liên quan 10

1.2.1 Baya (baya.vn) 10

1.2.2 Nội thất nhà đẹp (nhadep.com.vn) 10

1.2.3 Nội thất hòa phát (noithathoaphat.com.vn) 11

1.3 Rút ra kinh nghiệm 16

PHÁC THẢO GIAO DIỆN 17

2.1 HOMEPAGE – TRANG CHỦ: 17

2.2 Thanh HEADER 18

2.2.1 LOGO 18

2.2.1.1 Màu sắc 18

2.2.1.2 Biểu tượng 18

2.2.2 MENU DROPDOWN 19

2.2.2.1 SEARCH BAR - THANH TÌM KIẾM 19

2.2.2.2 Biểu tượng ACCOUNT 20

2.2.2.2.1 LOGIN – ĐĂNG NHẬP 20

2.2.2.2.2 REGISTER – ĐĂNG KÝ 20

2.2.2.3 Biểu tượng CART – GIỎ HÀNG 21

2.2.2.3.1 Thao tác với GIỎ HÀNG – Khi không có sản phẩm trong giỏ hàng .21

2.2.2.3.2 Thao tác với GIỎ HÀNG – Khi đã có sản phẩm trong giỏ hàng 22

2.2.3 MENU SIDEBAR 24

2.3 PRODUCT – SẢN PHẨM 26

2.4 NEW & POPULAR 27

2.5 Thanh FOOTER 28

GIAO DIỆN WEBSITE HOÀN CHỈNH 29

TƯƠNG TÁC GIAO DIỆN 29

2.6 Tương tác giao diện 29

IE106 – Thiết kế Giao diện Người dùng

2.7 Trang chủ 30

2.8 Cửa hàng 33

2.9 34 2.10 Sản phẩm 35

2.11 Giỏ hàng 38

2.12 Khi chọn mua và nhấn thêm vào giỏ hàng, ta đưa chuột đến mà chưa cần click thì giỏ hàng sẽ mở ra tức thì nhưng chưa chuyển trang Ở đây ta có thể chọn để xem giỏ hàng hoặc thanh toán và cũng có thể nhấn icon “x” để xóa sản phẩm vừa chọn: 38

2.13 Thanh toán 40

2.14 Sản phẩm yêu thích và hồ sơ khách hàng 44

2.15 Contact 50

2.16 Giới thiệu về doanh nghiệp 51

2.17 Đăng nhập và Đăng ký tài khoản 54

KẾT LUẬN 60

2.18 Ưu điểm 60

2.19 Nhược điểm 60

2.20 Hướng phát triển 60

LINK 60

2.21 Link khảo sát 60

2.22 Link Demo Figma 60

2.23 Link Drive (Báo cáo, Slide) 61

TÀI LIỆU THAM KHẢO 61

M C L C HÌNH NỤ Ụ Ả

Hình 1 Hình phác thảo chi tiết các thành phần của HOMEPAGE – TRANG CHỦ 17

Hình 2 Hình chi tiết thành phần của thanh HEADER 18

Hình 3 Hình biểu tượng LOGO 18

Hình 4 Hình Menu Dropdown 19

Hình 5 Hình Thanh Tìm Kiếm 19

Hình 6 Hình biểu tượng Account 20

Hình 7 Hình cửa sổ bật lên khi ấn vào biểu tượng Account 21

Hình 8 Hình khi đưa con trỏ chuột đến biểu tượng GIỎ HÀNG 21

Hình 9 Hình khi nhấn vào biểu tượng GIỎ HÀNG 22

Hình 10 Hình khi đưa con trỏ chuột đến biểu tượng GIỎ HÀNG 23

Hình 11 Hình khi nhấn vào biểu tượng GIỎ HÀNG 24

Hình 12 Hình chi tiết thành phần của MENU SIDEBAR 25

Hình 13 Hình chi tiết khi chọn một sản phẩm 26

Hình 14 Hình chi tiết các thành phần thuộc NEW & POPULAR 27

Hình 15 Hình chi tiết các thành phần thuộc Thanh FOOTER 28

IE106 – Thiết kế Giao diện Người dùng

KHẢO SÁT, PHÂN TÍCH, THAM KHẢO

PHÁC THẢO GIAO DIỆN

H#nh 1 H#nh phác thảo chi tiết các thành phần của HOMEPAGE – TRANG CHỦ.

Ở trang chủ sẽ bao gồm các thành phần như sau:

 Thanh HEADER: bao gồm

o LOGO;

o Đường dẫn đến TRANG CHỦ, LIÊN HỆ, GIỚI THIỆU,… ;

o Các biểu tượng như tài khoản, tìm kiếm, ưa thích, giỏ hàng…;

 Thanh gồm đường dẫn và tên trang hiện tại để người dùng có thể biết mình đang ởtrang nào;

 Một menu dropdown gồm các tùy chọn về giá cả để người dùng có thể xem sản phẩm

ở được sắp xếp với giá cả từ cao đến thấp, từ thấp đến cao, v.v ;

 Menu - Sidebar ở bên cạnh cho người dùng lựa chọn đến các trang hoặc mục chứa sảnphẩm cần tìm

 Các mục sản phẩm sẽ được hiển thị ở giữa trang

 Bên dưới sẽ có các mục số để người dùng theo dõi, chuyển đổi trang sản phẩm ởTRANG CHỦ

 Tiếp đến sẽ có các mục NEW & POPULAR: người dùng có thể theo dõi được các sảnphẩm mới và nổi bật của cửa hàng

 Bên dưới cùng sẽ là FOOTER: gồm các thông tin, đường dẫn đến các page khác (nhưBLOG, FAQ, INFO,…)

 Ngoài ra, cũng sẽ có nút để quay về trên đầu trang

IE106 – Thiết kế Giao diện Người dùng

Vì chủ đề nhóm chọn là về nội thất nên logo mang màu sắc thuộc vàng – cam – nâu để

có thể gợi lên được sự ấm cúng, sự ổn định, thịnh vượng và nhiều tài lộc, may mắn từ màunâu và màu cam thụ hưởng sự mạnh mẽ của màu đỏ và năng lượng tích cực, sôi động lẫnhạnh phúc của màu vàng

2.2.1.2 Biểu tượng

Vì là chủ đề về nội thất nên logo sẽ mang biểu tượng gần gũi với người dùng/gia chủ,

và nhóm đang tham khảo, lên ý tưởng về biểu tượng logo thuộc 1 trong 3 lựa chọn dưới đây:

 Tên shop & hình ảnh bàn ghế;

 Tên shop & hình ảnh ngôi nhà;

 Tên shop & hình ảnh ngôi nhà & bàn ghế

H#nh 3 H#nh biểu tượng LOGO.

2.2.2 MENU DROPDOWN

Thành phần thứ hai của trang sẽ là Menu dropdown – Thanh lựa chọn thả xuống cho ngườidùng lựa chọn ngay bên trên thanh HEADER thay vì phải kéo xuống để tìm, lựa chọn ở thanhmenu bên cạnh như ở trang chủ

Ở mỗi lựa chọn mà người dùng đưa trỏ chuột vào, lựa chọn đó sẽ có một màu sắc hover đểgiúp người dùng phân biệt được mình đang trỏ chuột đến lựa chọn nào

H#nh 4 H#nh Menu Dropdown.

2.2.2.1 SEARCH BAR - THANH TÌM KIẾM

Thành phần tiếp theo sẽ là Thanh Tìm Kiếm

Với Thanh Tìm Kiếm ở ngay trên đầu và vì thanh HEADER là một navigation bar,người dùng sẽ có thể dễ dàng tương tác đến thành phần này và tìm kiếm bất kỳ sản phẩm nàomình mong muốn mà không phải di chuyển lên tận đầu trang để có thể bắt đầu vào tìm.Người dùng có thể gõ bất kỳ nội dung nào vào, và thanh tiêu đề sẽ hiển thị những kếtquả gợi ý, hoặc trùng khớp với nội dung được gõ Ngoài ra, Thanh Tìm Kiếm còn có nút xbên cạnh để xóa toàn bộ những gì người dùng vừa nhập mà không cần phải xóa từng ký tự đi.Sau đó, để tìm sản phẩm dựa theo nội dung vừa nhập, người dùng chỉ cần ấn vào biểu tượnghình kính lúp hoặc ấn phím Enter

H#nh 5 H#nh Thanh T#m Kiếm.

IE106 – Thiết kế Giao diện Người dùng

2.2.2.2 Biểu tượng ACCOUNT

Thành phần thứ tư không thể thiếu đó là Biểu tượng Account, ở biểu tượng này sẽgiúp cho người dùng có thể tối ưu được các trải nghiệm của mình bằng cách có cho mình mộttài khoản đăng nhập để mua sắm được các sản phẩm ở trang này

Người dùng sẽ phải đăng nhập để có thể có được tính năng mua sắm Như vậy, ngườidùng có thể truy cập được lịch sử mua hàng của mình và xem được những đơn hàng đã có,hiện có, và những đơn hàng có thể mua

H#nh 6 H#nh biểu tượng Account.

Khi ấn vào biểu tượng Account, ta sẽ có một trang pop-up, một trang sẽ được bật lên

và được chia ra làm hai bên tương ứng với LOGIN – ĐĂNG NHẬP và REGISTER – ĐĂNGKÝ

 Mật khẩu (bắt buộc người dùng phải nhập nếu không sẽ hiện lỗi) ;

 Nút Đăng Nhập – Login mang màu trầm và đậm hơn để phân biệt được đây là mộtnút quyết định một việc gì đó: người dùng sẽ nhấn vào khi hoàn tất điền các thôngtin đăng nhập của mình;

 Ô để người dùng chọn xem là trang sẽ ghi nhớ tài khoản của mình nếu có truy cậpđến lần sau để tiện cho phải lặp lại các thao tác đăng nhập;

 Forgot Password? Là đường dẫn đến trang điền lại email để hệ thống gửi tin nhắncài lại mật khẩu khi quên mật khẩu

2.2.2.2.2 REGISTER – ĐĂNG KÝ

Phía bên phải sẽ hiển thị ô cho người dùng nhập thông tin về REGISTER – ĐĂNG

KÝ Các thành phần được hiển thị ở mục này sẽ bao gồm:

 Ô nhập thông tin về Địa Chỉ Email ( bắt buộc người dùng phải nhập nếu không sẽhiện lỗi);

 Ô để người dùng chọn xem có theo dõi và cập nhật thông tin website qua thư haykhông;

 Bên dưới ô sẽ có dòng chữ thuộc cam kết bảo vệ thông tin người dùng kèm theođường dẫn đến cam kết đó qua Privacy Policy;

 Nút Register – Đăng ký mang màu trầm và đậm hơn để phân biệt được đây là mộtnút quyết định một việc gì đó: người dùng sẽ nhấn vào khi hoàn tất điền các thôngtin đăng ký của mình.

H#nh 7 H#nh cửa sổ bật lên khi ấn vào biểu tượng Account.

Khi người dùng hoàn tất việc đăng nhập, đăng ký hoặc khi ấn nhầm và người dùng có mong muốn thoát khỏi cửa sổ bật lên của biểu tượng Account này, người dùng có thể nhấn vào nút

X ở bên góc trên bên phải của cửa sổ

Tiếp theo là một thành phần không thể nào thiếu của một trang mua sắm đó là GIỎ HÀNG.Đối với biểu tượng được thiết kế trên thanh HEADER, người dùng có thể có hai cách đểtương tác đến biểu tượng này:

 Cách 1 : Đưa trỏ chuột đến và sẽ có các trang nhỏ được hiển thị và người dùng có thểthao tác khi trang đó được xuất hiện

 Cách 2 : Nhấn vào biểu tượng và website sẽ đưa người dùng đến một trang Giỏ Hàngbao gồm các thông tin về sản phẩm, về đơn hàng hiện có,…

2.2.2.3.1 Thao tác với GIỎ HÀNG – Khi không có sản phẩm trong giỏ hàng

Đối với trường hợp chưa có sản phẩm nào ở trong giỏ hàng của người dùng:

 Khi người dùng đưa con trỏ chuột đến GIỎ HÀNG: Thông báo “There are no products

in cart” - “Không có sản phẩm nào trong giỏ hàng” được hiển thị bên dưới biểu tượng

H#nh 8 H#nh khi đưa con trỏ chuột đến biểu tượng GIỎ HÀNG.

IE106 – Thiết kế Giao diện Người dùng

 Khi người dùng nhấn vào biểu tượng GIỎ HÀNG: Website sẽ dẫn người dùng đếntrang gồm có:

o Thanh HEADER – navigation bar ở bên trên cùng;

o Dòng chữ thông báo cho người dùng “There are no products in cart” - “Không

có sản phẩm nào trong giỏ hàng” như lúc đưa con trỏ chuột đến biểu tượng vàngay bên dưới đó sẽ là nút để quay về SHOP/HOME – CỬA HÀNG/TRANGCHỦ;

o Các mục sản phẩm thuộc NEW & POPULAR;

o Thanh FOOTER ở bên dưới cùng

H#nh 9 H#nh khi nhấn vào biểu tượng GIỎ HÀNG.

2.2.2.3.2 Thao tác với GIỎ HÀNG – Khi đã có sản phẩm trong giỏ hàng

Đối với trường hợp đã có sản phẩm ở trong giỏ hàng của người dùng:

 Khi người dùng đưa con trỏ chuột đến GIỎ HÀNG: Thông báo được hiển thị bên dướibiểu tượng sẽ bao gồm:

o Mục PRODUCT – SẢN PHẨM: Gồm các thông tin về sản phẩm cho ngườidùng xem, khi nhấn vào mục sản phẩm đó thì người dùng sẽ đi đến trang hiểnthị thông tin sản phẩm đó;

o Dòng được hiển thị tổng tiền hiện có của đơn hàng của người dùng;

o Nút xanh đậm CHECK CART – XEM GIỎ HÀNG: Người dùng nhấn vào nútnày để đi đến trang GIỎ HÀNG của mình để xem đơn hàng hiện có;

o Nút xanh nhạt REDEEM (BUY) – THANH TOÁN: Người dùng nhấn vào nútnày để đi đến trang THANH TOÁN để bắt đầu điền thông tin để thanh toán màkhông cần phải xem giỏ hàng xem chi tiết hiện đang có những sản phẩm nào;

 Với hai nút khác màu sẽ giúp cho người dùng nhận biết được rằng đây

là hai lựa chọn khác nhau và sẽ dẫn đến những trang khác nhau khinhấn vào

 Mỗi mục sản phẩm, dòng TOTAL – TỔNG HÓA ĐƠN và các nút đượcchia nhau ra với mỗi gạch phân chia giúp người dùng dễ phần biệt đượccác thành phần

 Có thêm nút X bên cạnh sản phẩm để có thể xóa bỏ sản phẩm màkhông cần phải đi đến trang GIỎ HÀNG

H#nh 10 H#nh khi đưa con trỏ chuột đến biểu tượng GIỎ HÀNG.

 Khi người dùng nhấn vào biểu tượng GIỎ HÀNG: Website sẽ dẫn người dùng đếntrang gồm có:

o Thanh HEADER – navigation bar ở bên trên cùng;

o Các thông tin về đơn hàng khi nhấn vào biểu tượng GIỎ HÀNG sẽ được chia

 Nút X bên cạnh sản phẩm để người dùng xóa sản phẩm khikhông muốn mua sản phẩm đó nữa;

 Nút CẬP NHẬT GIỎ HÀNG – UPDATE CART: Người dùngnhấn vào nút này để có thể cập nhật giỏ hàng sau khi có một sốthao tác thay đổi, tác động đến đơn hàng hoặc sản phẩm màchưa thấy được thay đổi trên website

 Ở phía bên phải sẽ là hóa đơn để người dùng theo dõi thông tin đơnhàng của mình:

 Các thông tin sẽ được ngăn cách bởi dấu gạch và chia theo hàngngang;

 Dòng hiển thị giá cả của đơn hàng;

 Dòng hiển thị địa chỉ mà shop sẽ giao hàng đến cho ngườidùng;

 Tổng hóa đơn;

 Bên dưới tổng hóa đơn sẽ là nút THANH TOÁN với hiệu ứng

từ xanh nhạt sang xanh đậm để người dùng biết được mình đang

IE106 – Thiết kế Giao diện Người dùng

 Sau khi nhập mã voucher hoặc mã giảm giá thì người dùng ấnvào nút APPLY – với hiệu ứng từ trắng xám nhạt chuyển sangmàu xám đậm hơn để người dùng biết được mình đang để contrỏ chuột đến nút đó - để áp dụng mã mà mình vừa nhập

o Các mục sản phẩm thuộc NEW & POPULAR;

o Thanh FOOTER ở bên dưới cùng

H#nh 11 H#nh khi nhấn vào biểu tượng GIỎ HÀNG.

2.2.3 MENU SIDEBAR

Ở trang chủ sẽ có một Menu dọc ở bên trái website và mỗi dòng mục của menu sẽ lànhững đường dẫn bao gồm các lựa chọn/ tiêu đề liên quan đến sản phẩm cho người dùng thaotác tìm kiếm đến

Nếu ở mục menu đó có nhiều lựa chọn hơn thì có mũi tên chỉ xuống như một menudropdown để hiển thị thêm các lựa chọn của mục menu đó

Ngoài ra, ở thanh MENU SIDEBAR này còn có PRICE FILTER – Thanh Lọc Giá đểcho người dùng kéo thả lựa chọn các giá trị giá cả được hiển thị ở dòng Price Value như hình

và sau khi hoàn tất kéo thả lựa chọn thì người dùng có thể ấn nút FILTER – Lọc để bắt đầulọc theo giá trị mà mình vừa kéo thả

Cuối cùng, để tiện cho việc theo dõi và truy cập lại những sản phẩm mình vừa xem thì

ở bên dưới PRICE FILTER còn có mục RECENTLY VIEWED, mục này sẽ hiển thị nhữngsản phẩm mình vừa xem với các sản phẩm được sắp xếp thành từng ô theo hàng dọc, mỗidòng sẽ là một sản phẩm

H#nh 12 H#nh chi tiết thành phần của MENU SIDEBAR.

IE106 – Thiết kế Giao diện Người dùng

o Hình ảnh sản phẩm sẽ được hiển thị toàn khung này;

o Thêm vào ưa thích khi nhấp vào biểu tượng hình trái tim ở góc phải củakhung;

o Dưới góc trái sẽ có nút cho người dùng nhấn vào để phóng to sản phẩm lên;

 Bên cạnh hình ảnh, ngay trên đầu sẽ là dòng chữ in đậm mang tên sản phẩm;

 Phía dưới tên sản phẩm sẽ là giá của sản phẩm;

 Bên dưới sẽ là số lượng của sản phẩm và người dùng có thể tùy chọn tăng giảm vớihai nút hai bên số lượng với dấu (-) sẽ là giảm sản phẩm, dấu (+) sẽ là tăng sản phẩm;

 Nút Thêm vào giỏ hàng sẽ được đặt bên cạnh nút tăng giảm số lượng sản phẩm vớimàu xanh để nổi bật hơn so với phông nền hiện tại của trang sản phẩm;

 Bên dưới đó sẽ là dòng được ngăn cách và sẽ hiển thị dòng mã code của sản phẩm;

 Tiếp theo sẽ là một dòng được ngăn cách và nội dung là những cái mác tên của sảnphẩm hoặc có liên quan đến sản phẩm, khi người dùng nhấn vào thì website sẽ dẫnđến trang gồm các sản phẩm có cùng mác tên như vậy;

 Cuối cùng là người dùng có thể tương tác chia sẻ lên các trang mạng xã hội

H#nh 13 H#nh chi tiết khi chọn một sản phẩm.