Vận dung lý thuyết và các quy luật tâm lý vào cải tiến web bán truyện tranh

Cơ sở tâm lý trong thiết kế1.2.1 Cải thiện về giao diện- Quy luật về tính lựa chọn của tri giác: Khi ta tri giác một sự vật hiện tượng nào đó thì có nghĩa là ta tách sự vật đó ra khỏi bố

KHOA: SƯ PHẠM KỸ THUẬT

VẬN DUNG LÝ THUYẾT VÀ CÁC QUY LUẬT TÂM LÝ VÀO

CẢI TIẾN WEB BÁN TRUYỆN TRANH

MÔN: TÂM LÝ HỌC KỸ SƯ

Giảng viên giảng dạy: Lê Ngọc Phương Lớp: 10121939

Sinh viên thực hiện:

1 Hà Văn Trung

Hưng Yên – 03/2024

Nhận xét của giảng viên hướng dẫn:

GIẢNG VIÊN HƯỚNG DẪN (Ký và ghi rõ họ tên)

LỜI CẢM ƠN

Để có thể hoàn thành bài tập nhóm này, lời đầu tiên em xin phép gửi lời cảm ơn tới bộ môn Công nghệ phần mềm, Khoa Công nghệ thông tin – Trường Đại học Sư phạm Kỹ thuật Hưng Yên đã tạo điều kiện thuận lợi cho

em thực hiện bài tập nhóm môn học này

Đặc biệt em xin chân thành cảm ơn thầy Lê Ngọc Phương đã rất tận tình hướng dẫn, chỉ bảo em trong suốt thời gian thực hiện bài tạp nhóm vừa qua

Em cũng xin chân thành cảm ơn tất cả các Thầy, các Cô trong Trường

đã tận tình giảng dạy, trang bị cho em những kiến thức cần thiết, quý báu để giúp em thực hiện được bài tập nhóm này

Mặc dù em đã có cố gắng, nhưng với trình độ còn hạn chế, trong quá trình thực hiện đề tài không tránh khỏi những thiếu sót Em hi vọng sẽ nhận được những ý kiến nhận xét, góp ý của các Thầy giáo, Cô giáo về những kết quả triển khai trong bài tập nhóm

Em xin trân trọng cảm ơn!

3

MỤC LỤC

NHẬN XÉT 2

DANH MỤC CÁC HÌNH VẼ 5

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI 6

1.1 Cái tiến web bán truyện tranh 6

1.1.1 Mô tả sản phẩm 6

1.1.2 Đặc điểm sản phẩm 9

1.2 Cơ sở tâm lý trong thiết kế 9

1.2.1 Cải thiện về giao diện 9

1.3 Sản phẩm sau cải tiến 14

1.3.1 Mô tả sản phẩm sau cải tiến 14

1.3.2 Những mặt đã được cải tiến sản phẩm 14

KẾT LUẬN 21

TÀI LIỆU THAM KHẢO 22

DANH MỤC CÁC HÌNH VẼ

HÌNH 1 1 G IAO DIỆN CƠ BẢN 6

HÌNH 1 2 C ÁC MỤC LỰA CHỌN 6

HÌNH 1 3 C ÁC LỰA CHỌN THANH TOÁN 7

HÌNH 1 4 T HÔNG TIN CHI TIẾT VỀ TỪNG SẢN PHẨM 7

HÌNH 1 5 T HANH ĐIỀU HƯỚNG 8

HÌNH 1 6 C ÁC THANH ĐIỀU ỨNG PHỤ 8

HÌNH 1 7 ỨNG DỤNG QUY LUẬT VỀ TỊNH LỰA CHỌN CỦA TRI GIÁC TRONG 10

HÌNH 1 8 S ẮP XẾP PHÂN LOẠI TÍNH Ý NGHĨA CỦA TRI GIÁC 10

HÌNH 1 9 N GUYÊN TẮC ROXIMITY P 11

HÌNH 1 10 N GUYÊN TẮC THẨM MỸ 12

HÌNH 1 11 N GUYÊN TẮC ITTS’S AW F L 13

HÌNH 1 12 G IAO DIỆN MỚI 14

HÌNH 1 13 Đ ỔI PHÔNG NỀN ADD TO CART 14

HÌNH 1 14 C HI TIẾT SẢN PHẨM MỚI 15

HÌNH 1 15 T Ự ĐỘNG PHÓNG TO HÌNH ẢNH KHI TRỎ QUA 15

HÌNH 1 16 CÁC SẢN PHẨM TƯƠNG TỰ CHO NGƯỜI DÙNG 16

HÌNH 1 17 B Ố CỤC GẦN NHAU (1) 16

HÌNH 1 18 B Ố CỤC GẦN NHAU (2) 17

HÌNH 1 19 CÁC LỰA CHỌN SẮP XẾP 17

HÌNH 1 20 S ẮP XẾP THEO GIÁ TỪ CAO ĐẾN THẤP 18

HÌNH 1 21 T HANH ĐIỀU HƯỚNG 18

HÌNH 1 22 HIỆU ỨNG KHI LƯỚT QUA CÁC MỤC TRONG THANH ĐIỀU HƯỚNG19 HÌNH 1 23 KHUNG VIỀN ẢNH KHI LƯỚT QUA 19

Hình 1 24 Hiệu ứng đối với bảng xếp hạng 20

5

CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI

1.1 Cái tiến web bán truyện tranh

1.1.1 Mô tả sản phẩm

- Web bán truyện tranh, với các loại truyện tranh phổ thông phù hợp với thị trường hiện nay Giúp việc sản phẩm đến với người dùng một cách đơn giản và nhanh chóng Đơn giản trong việc tìm, chọn truyện muốn mua và hình thức mua hàng

Hình 1 1 Giao diện cơ bản

- Thanh điều hướng chính

Hình 1 2 Các mục lựa chọn

- Lựa chọn thanh toán dễ dàng.

Hình 1 3 Các lựa chọn thanh toán

- Thông tin chi tiết về sản phẩm

Hình 1 4 Thông tin chi tiết về từng sản phẩm

7

- Thanh điều hướng cũ, ít lựa chọn.

Hình 1 5 Thanh điều hướng

- Các thanh điều hướng phụ, cứng nhắc có cảm giác không được đẹp, không được chỉnh chu

Hình 1 6 Các thanh điều ứng phụ

1.1.2 Đặc điểm sản phẩm

- Ưu điểm:

+ Tính tiện lợi: với web bán truyện tranh có thể mua truyện từ bất cứ đâu mà không cần đến tận nơi bán hàng vẫn có được cuốn truyện mong muốn

+ Tiết kiệm chi phí: với những vùng quê nơi cách xa các trung tâm mua sắm lớn, sẽ giảm thiểu được chi phí đi lại

+ Tiết kiệm thời gian: khoảng thời gian lên web tìm kiếm truyện với đến nơi bán sẽ ngắn hơn đơn giản hơn Chưa kể đến nơi cũng phải xếp hàng, đặc biệt những ngày có lễ hội

- Nhược điểm:

+ Giao diện: còn chưa bắt mắt thu hút người dùng, ít hiệu ứng bắt mắt + Thiếu các phương thức thu hút khác hàng: đăng ký làm thành viên sẽ được các đặc quyền và khuyến mãi riêng

+ Chưa có các sản phẩm liên quan đến truyện tranh: như mô hình truyện đó, ảnh, quần áo, thẻ bài

+ Các tính năng chưa có: lọc truyện, sắp xếp theo tên, giá

1.2 Cơ sở tâm lý trong thiết kế

1.2.1 Cải thiện về giao diện

- Quy luật về tính lựa chọn của tri giác:

Khi ta tri giác một sự vật hiện tượng nào đó thì có nghĩa là ta tách sự vật đó ra khỏi bối cảnh chung quanh lấy nó làm đối tượng phản ánh của hình Vai trò giữa đối tượng và bối cảnh có thể chuyển đổi cho nhau

Có liên hệ chặt chẽ với tính trọn vẹn Do hứng thú, trạng thái tâm lý cũng ảnh hưởng tới tri giác

VD: trong sách có nhiều chữ in nghiêng để nhấn mạnh, giáo viên dùng mực đỏ đánh giấu chỗ sai của học sinh

9

Hình 1 7 Ứng dụng quy luật về tịnh lựa chọn của tri giác trong SGK

( nguồn https://www.giaoduc.edu.vn/ )

- Quy luật về tính ý nghĩa của tri giác:

Tri giác của con người luôn gắn chặt với tư duy, với sự hiểu biết về bản chất của sự vật hiện tượng Khi con người hiểu được ý nghĩa của sự vật hiện tượng thì chúng ta có thể gọi tên chúng, sắp xếp chúng theo nhóm đối tượng cụ thể Chính vì thế áp dụng quy luật này để tạo ra lựa chọn sắp xếp khác nhau

Hình 1 8 Sắp xếp phân loại tính ý nghĩa của tri giác ( nguồn https://www.sachtiengnhat100.com/ )

- Quy luật về tính ổn định của tri giác:

Khả năng phản ánh sự vật hiện tượng một cách không thay đổi khi điều kiện tri giác thay đổi Tính ổn định của tri giác được hình thành trong hoạt động với đồ vật và là một điều kiện cần thiết của đời sống con người Tính ổn định của tri giác do kinh nghiệm mà có Tính ổn định của tri giác phụ thuộc vào nhiều yếu tố, do cấu trúc của sự vật hiện tượng tương đối ổn định trong một thời gian, thời điểm nhất định, mặt khác do cơ chế tự điều chỉnh của hệ thần kinh cũng như vốn kinh nghiệm về đối tượng Là điều kiện cần thiết của hoạt động thực tiễn của con người

Ví dụ: Khi viết lên trang giấy ta luôn thấy trang giấy có màu trắng mặc

dù ta viết dưới ánh đèn dầu, lúc trời tối

- Quy luật tổng giác:

Ngoài bản thân những kích thích gây ra nó, tri giác của con người còn

bị quy định bởi một loạt các nhân tố nằm trong bản thân chủ thể tri giác (thái độ, nhu cầu, hứng thú, sở thích, tình cảm, mục đích, động cơ, )

-Sự phụ thuộc của tri giác vào vào nội dung của đời sống tâm lý con người, vào đặc điểm nhân cách của họ gọi là tổng giác Điều này chứng

tỏ ta có thể điều khiển được tri giác

1.3 Sản phẩm sau cải tiến

1.3.1 Mô tả sản phẩm sau cải tiến

- Giao diện bắt mắt hơn, có tính thu hút cao, thêm được các tính năng hữu ích, khắc phục được đã số các nhược điểm đã mắc phải của web cũ

1.3.2 Những mặt đã được cải tiến sản phẩm

- Áp dụng các quy luật về tính lựa chọn, tính ý nghĩa, tính ổn định, tổng giác của tri giác: thay đổi giao diện, kiểu chữ tên sách được thay đổi, tên giá cũ được để màu đen và gạch đi, tên mới được để nào đỏ và chữ

to hơn Thêm phầm nhấn mạnh hàng còn trong kho và đặt trước, khi trỏ qua mục add to cart sẽ đổi phông nền và phông chữ

11

Hình 1 9 Giao diện mới

Hình 1 10 Đổi phông nền ADD TO CART

- Áp dụng các quy luật về tính lựa chọn, tính ý nghĩa, tổng giác: với chi tiết sản phẩm thêm các hình thức, thêm vào giỏ hàng hoặc mua ngay Thêm tính năng thu hút với khách hàng đăng ký làm thành viên điểm nhấn thay đổi phông nền tại hình thức này thêm các icon gây hút mắt với người dùng, tự động phóng to hình ảnh khi trỏ vào hình, thêm phần các sản phẩm tương tự cho người dùng dễ di chuyển

Hình 1 11 Chi tiết sản phẩm mới

Hình 1 12 Tự động phóng to hình ảnh khi trỏ qua

Hình 1 13 Các sản phẩm tương tự cho người dùng

13

- Áp dụng các quy luật về tính lựa chọn, tính ý nghĩa, tính ổn định, tổng giác của tri giác: đưa các mục thẻ lại gần nhau, vẫn có khoảng trắng để tăng cường phân cấp thị giác và luồng thông tin, giúp người dùng dễ quét thông tin hơn, đáp ứng như cầu một cách nhanh chóng

Hình 1 14 Bố cục gần nhau (1)

Hình 1 15 Bố cục gần nhau (2)

- Áp dụng tính ý nghĩa của tri giác: ta thêm mục sắp xếp theo tên, nhiều lượt xem, lượt bán

Hình 1 16 Các lựa chọn sắp xếp

Hình 1 17 Sắp xếp theo giá từ cao đến thấp

15

- Áp dụng các quy luật về tính lựa chọn, tính ý nghĩa, tổng giác của tri giác: thêm các mục và hiệu ứng xuất hiện khi trỏ qua danh mục tiêu biểu trên thanh điều hướng, hiệu ứng biến mất khi không trỏ qua

Hình 1 18 Thanh điều hướng

- Áp dụng các quy luật về tính lựa chọn, tính ý nghĩa, hêm hiệu ứng đổi màu khi lướt qua các mục trong thanh điều hướng, thêm khung viền khi qua hình ảnh

Hình 1 19 Hiệu ứng khi lướt qua các mục trong thanh điều hướng

Hình 1 20 Khung viền ảnh khi lướt qua

- Áp dụng quy luật về tính lựa chọn của tri giác: thêm hiệu ứng đổi lấp lánh ngôi sao và đổi màu nền đối với bảng xếp hạng

Hình 1 21 Hiệu ứng đối với bảng xếp hạng

17

KẾT LUẬN

- Trình bày kết quả đạt được: Sau khi hoàn thành bài tập nhóm “Vận dụng lý thuyết và các quy luật tâm lý vào cải tiến web bán truyện tranh”, em đã trở nên đam mê hơn với ngành học của mình Qua đó, em cũng có được thêm một

số kiến thức như:

● Cách thiết kế giao diện thu hút người dùng

● Các hiệu ứng hoạt ảnh của web

● Áp dụng lý thuyết và các quy luật tâm lý vào cải thiện web

TÀI LIỆU THAM KHẢO

[1] Khoa Sư phạm Kĩ thuật (2021), Giáo trình Tâm lý học kỹ sư, Tài liệu sử dụng nội bộ, trường Đại học Sư phạm Kĩ thuật Hưng Yên

[2] https://beau.vn/vi/goc-nhin/nhung-nguyen-tac-gestalt-khai-thac-quy-luat-thi-giac-trong-thiet-ke-ui

[3] https://gitiho.com/

19