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ố
Trang 1KHOA: SƯ PHẠM KỸ THUẬT
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
MÔN: TÂM LÝ HỌC KỸ SƯ
Giảng viên giảng dạy: Lê Ngọc PhươngLớp: 10121939
Sinh viên thực hiện: 1 Hà Văn Trung
Hưng Yên – 03/2024
Trang 2Nhận xét của giảng viên hướng dẫn:
Trang 3LỜ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
Trang 4MỤ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
Trang 5DANH MỤC CÁC HÌNH VẼ
HÌNH 1 1 GIAO 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 THÔNG TIN CHI TIẾT VỀ TỪNG SẢN PHẨM 7
HÌNH 1 5 THANH Đ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 NGUYÊN TẮC ROXIMITY P 11
HÌNH 1 10 NGUYÊN TẮC THẨM MỸ 12
HÌNH 1 11 NGUYÊN TẮC ITTS’S AW F L 13
HÌNH 1 12 GIAO DIỆN MỚI 14
HÌNH 1 13 Đ ỔI PHÔNG NỀN ADD TO CART 14
HÌNH 1 20 S ẮP XẾP THEO GIÁ TỪ CAO ĐẾN THẤP 18
HÌNH 1 21 THANH Đ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
Trang 6CHƯƠ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
Trang 7- 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
Trang 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ụ
Trang 91.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
Trang 10Hì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ồnhttps://www.sachtiengnhat100.com/ )
Trang 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 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
Trang 12Hì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.
Trang 13Hì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
Trang 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)
Trang 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
Trang 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
Trang 17Hì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
Trang 18KẾ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
Trang 19TÀ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