<span class="text_page_counter">Trang 1</span><div class="page_container" data-page="1">

<b>KHOA: SƯ PHẠM KỸ THUẬT</b>

<b>VẬN DUNG LÝ THUYẾT VÀ CÁC QUY LUẬT TÂM LÝ VÀOCẢI TIẾN WEB BÁN TRUYỆN TRANH</b>

<b>MÔN: TÂM LÝ HỌC KỸ SƯ</b>

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

<b>Sinh viên thực hiện:</b>

<b>1. Hà Văn Trung</b>

<b>Hưng Yên – 03/2024</b>

</div><span class="text_page_counter">Trang 2</span><div class="page_container" data-page="2">

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

</div><span class="text_page_counter">Trang 3</span><div class="page_container" data-page="3">

<b>LỜI CẢM ƠN</b>

Để có thể hồ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 <b>Lê Ngọc Phương </b>đã 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 q 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

</div><span class="text_page_counter">Trang 4</span><div class="page_container" data-page="4">

<b>MỤC LỤC</b>

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

</div><span class="text_page_counter">Trang 5</span><div class="page_container" data-page="5">

<b>DANH MỤC CÁC HÌNH VẼ</b>

H<small>ÌNH 1. 1 GIAO DIỆN CƠ BẢN</small>...6

H<small>ÌNH 1. 2 CÁC MỤC LỰA CHỌN</small>...6

H<small>ÌNH 1. 3 CÁC LỰA CHỌN THANH TỐN</small>...7

H<small>ÌNH 1. 4 THƠNG TIN CHI TIẾT VỀ TỪNG SẢN PHẨM</small> ...7

H<small>ÌNH 1. 5 THANH ĐIỀU HƯỚNG</small>...8

H<small>ÌNH 1. 6 CÁC THANH ĐIỀU ỨNG PHỤ</small>...8

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

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

H<small>ÌNH 1. 9 NGUYÊN TẮC ROXIMITY</small> P ...11

H<small>ÌNH 1. 10 NGUYÊN TẮC THẨM MỸ</small>...12

H<small>ÌNH 1. 11 NGUYÊN TẮC ITTS’S AW</small> F L ...13

H<small>ÌNH 1. 12 GIAO DIỆN MỚI</small>...14

HÌNH 1. 13 Đ <small>ỔI PHƠNG NỀN</small> ADD TO CART...14

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

H<small>ÌNH 1. 21 THANH ĐIỀU HƯỚNG</small>...18

HÌNH 1. 22 H<small>IỆU ỨNG KHI LƯỚT QUA CÁC MỤC TRONG THANH ĐIỀU HƯỚNG</small>19 HÌNH 1. 23 K<small>HUNG VIỀN ẢNH KHI LƯỚT QUA...19</small>

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

5

</div><span class="text_page_counter">Trang 6</span><div class="page_container" data-page="6">

<b>CHƯƠNG 1: TỔNG QUAN VỀ ĐỀ TÀI</b>

<b>1.1. Cái tiến web bán truyện tranh</b>

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

</div><span class="text_page_counter">Trang 7</span><div class="page_container" data-page="7">

- Lựa chọn thanh tốn dễ dàng.

Hình 1. 3 Các lựa chọn thanh tố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

</div><span class="text_page_counter">Trang 8</span><div class="page_container" data-page="8">

- 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ụ

</div><span class="text_page_counter">Trang 9</span><div class="page_container" data-page="9">

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á...

<b>1.2. Cơ sở tâm lý trong thiết kế</b>

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

</div><span class="text_page_counter">Trang 10</span><div class="page_container" data-page="10">

Hình 1. 7 Ứng dụng quy luật về tịnh lựa chọn của tri giác trong SGK ( <i>nguồn </i> )

- 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.

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

</div><span class="text_page_counter">Trang 11</span><div class="page_container" data-page="11">

- 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 ln 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.

<b>1.3. Sản phẩm sau cải tiến</b>

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

</div><span class="text_page_counter">Trang 12</span><div class="page_container" data-page="12">

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.

</div><span class="text_page_counter">Trang 13</span><div class="page_container" data-page="13">

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

</div><span class="text_page_counter">Trang 14</span><div class="page_container" data-page="14">

- Á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)

</div><span class="text_page_counter">Trang 15</span><div class="page_container" data-page="15">

- Á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

</div><span class="text_page_counter">Trang 16</span><div class="page_container" data-page="16">

- Á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

</div><span class="text_page_counter">Trang 17</span><div class="page_container" data-page="17">

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

</div><span class="text_page_counter">Trang 18</span><div class="page_container" data-page="18">

<b>KẾT LUẬN</b>

- 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ư:

<small>●</small> Cách thiết kế giao diện thu hút người dùng. <small>●</small> Các hiệu ứng hoạt ảnh của web.

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

</div><span class="text_page_counter">Trang 19</span><div class="page_container" data-page="19">

<b>TÀI LIỆU THAM KHẢO</b>

[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]