dự án học tập vận dụng các lý thuyết và quy luật tâm lý vào thiết kế trang web bán đồ công nghệ

Giao diện về phần giỏ hàng của trang web Tính năng đặt giỏ hàng quen thuộc, thân thiện, dễ dùng có thể cập nhật thông tin giỏ hàng, thêm ghi chú vào sản phẩm để người bán hàng có thể nắm

BỘ GIÁO DỤC VÀ ĐÀO TẠO

TRƯỜNG ĐẠI HỌC SƯ PHẠM KỸ THUẬT HƯNG YÊN

KHOA SƯ PHẠM KĨ THUẬT

DỰ ÁN HỌC TẬP TÊN DỰ ÁN: Vận dụng các lý thuyết và quy luật tâm lý vào thiết kế trang web

bán đồ công nghệ Học phần: Tâm lý học kĩ sư

Giảng viên giảng dạy: Nguyễn Thị Cúc

Họ tên sinh viên – Mã SV: 1 Lý Văn Linh -10121865

MỤC LỤC LỜI CẢM ƠN 1

LỜI CAM ĐOAN 2

PHẦN I: MỞ ĐẦU 3

PHẦN II: NỘI DUNG 4

1.1 Sản phẩm sẽ được thiết kế/ cải tiến 4

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

1.1.2 Đ c đi m s n ph m ( ặ ể ả ẩ Ch rõ, đ c đi m s n ph m đó vềề tấất c các m t: u đi m, ỉ ặ ể ả ẩ ả ặ ư ể h n chềấ)ạ 8 u đi m : Ư ể 8 1.2 Cơ sở tâm lý trong thiết kế/ cải tiến sản phẩm trên 9

1.2.1 Giao di n chính c a tệ ủ rang web 9 1.2.1.1 ng d ng quá trình c m giác trong thiềất kềấ giao di n chínhỨ ụ ả ệ 9 1.2.1.2 ng d ng quá trình tri giác trong thiềất kềấ giao di n chínhỨ ụ ệ 10 1.2.1.3 Hi u ng Von Restorfệ ứ 12 1.2.1.4 Lý thuyềất Dao c o c a Occamạ ủ 13 1.2.1.5 Lu t Gestalậ 13 1.2.2 Phấền đăng nh p và đăng kí c a trang webậ ủ 16 1.3 Sản phẩm sau cải tiến/thiết kế 17

PHẦN III KẾT LUẬN 18

TÀI LIỆU THAM KHẢO 18

PHỤ LỤC 19

LỜI CẢM ƠN

Đầu tiên, em xin gửi lời cảm ơn chân thành đến Trường Đại học Sư Phạm Kỹ ThuậtHưng Yên đã đưa môn học Tâm lý học kĩ sư vào trương trình giảng dạy Đặc biệt, emxin gửi lời cảm ơn sâu sắc đến giảng viên bộ môn - Cô Nguyễn Thị Cúc đã dạy dỗ,truyền đạt những kiến thức quý báu cho em trong suốt thời gian học tập vừa qua.Trong thời gian tham gia lớp học Tâm lý học kĩ sư của cô, em đã có thêm cho mìnhnhiều kiến thức bổ ích, tinh thần học tập hiệu quả, nghiêm túc Đây chắc chắn sẽ lànhững kiến thức quý báu, là hành trang để em có thể vững bước sau này

Bộ môn Tâm lý học kỹ sư là môn học thú vị, vô cùng bổ ích và có tính thực tế cao.Đảm bảo cung cấp đủ kiến thức, gắn liền với nhu cầu thực tiễn của sinh viên Tuynhiên, do vốn kiến thức còn nhiều hạn chế và khả năng tiếp thu thực tế còn nhiều bỡngỡ Mặc dù em đã cố gắng hết sức nhưng chắc chắn bài tiểu luận khó có thể tránhkhỏi những thiếu sót và nhiều chỗ còn chưa chính xác, kính mong cô xem xét và góp ý

để bài tiểu luận của em được hoàn thiện hơn

Kính chúc cô sức khoẻ, hạnh phúc thành công trên con đường sự nghiệp giảng dạy

Em xin chân thành cảm ơn!

LỜI CAM ĐOAN

Chúng em xin cam đoan rằng: Những nội dung trình bày trong quyển báo cáotiểu luận môn Tâm lý học kỹ sư này là công trình nghiên cứu của nhóm và không phải

là bản sao chép từ bất kì tiểu luận nào có trước Các số liệu tham khảo là trung thực vàđược trích dẫn đầy đủ Nếu không đúng sự thật, chúng em xin chịu mọi trách nhiệmtrước cô

Ký tên thành viên 1 Ký tên thành viên 2 Lý tên thành viên 3

PHẦN I: MỞ ĐẦU

1 Tổng quan học phần

Tâm lý học Kỹ sư là một ngành tâm lý học ứng dụng, có ý nghĩa quan trọng đối với sự phát triển năng lực chuyên môn kỹ thuật của người kỹ sư Học phần Tâm lý học Kỹ sư cung cấp cho sinh viên các ngành kỹ thuật công nghệ các kiến thức về tâm lý con người, những quy luật tâm lý và ứng dụng các kiến thứcnày vào thiết kế hệ thống/ sản phẩm kỹ thuật để tạo ra sản phẩm kỹ thuật đẹp vềhình thức, tốt về chất lượng, thân thiện với người sử dụng

2 Lí do lựa chọn dự án

Trong thời buổi hiện nay, sự phát triển của công nghệ đã mang đến nhiều mặt tiện ích hơn cho cuộc sống chúng ta Trong đó có thể kể đến việc mua bán hàng hoá qua các kênh online với những ưu điểm lợi ích như: Không giới hạn thời gian, địa điểm, việc chọn lựa sản phẩm, tham khảo giá cả, thanh toán đơn giản,…

Website bán hàng là trang web giúp người mua hàng và doanh nghiệp tiến hành quá trình giao dịch, mua bán sản phẩm trực tuyến Nó đem lại tiện ích cho các khách hàng khi dễ dàng tìm được sản phẩm để mua chỉ với thao tác truy cậpđơn giản vào website, cũng như cho phép người bán hàng đăng tải các sản phẩm của cửa hàng, doanh nhiệp, cùng với một số chức năng quản lý cơ bản Chỉ cần truy cập vào website bán hàng, cho dù là đang trong thời gian hay địa điểm nào, người mua hàng cũng có thể tìm được thông tin của sản phẩm, việc đặt hàng và thanh toán cũng tiết kiệm thời gian và đơn giản hơn Điều này thuận tiện và tiết kiệm thời gian hơn nhiều so với việc phải tìm đến các cửa hàng bán lẻ

Và các mặt hàng như đồ dùng công nghệ, các thiết bị thông minh cũng đượcnhiều người tìm hiểu và đặt mua hàng trên mạng Chính vì thế đề tài “Vận dụngcác lý thuyết và quy luật tâm lý vào thiết kế trang web bán đồ công nghệ” đang rất phù hợp vào bối cảnh và xu hướng mua sắm trong thời đại bận rộn như hiện nay

PHẦN II: NỘI DUNG

1.1 Sản phẩm sẽ được thiết kế/ cải tiến

1.1.1 Mô tả sản phẩm

Trang website bán hàng của thương hiệu LTN Digital Store

được thiết kế đơn giản, hiện đại, chuyên nghiệp và thân thiện với

người dùng Các đề mục, bố cục web được sắp xếp khoa học, rõ

ràng Giao diện được thiết kế rất giống với các trình duyệt phổ biến

hiện nay

Hình ảnh banner quảng cáo và sản phẩm chất lượng, bố trí

hấp dẫn, có thể zoom lên, di chuột vào có thể hiển thị hình ảnh trực

quan mặt trước và mặt sau

Website bán hàng tương thích với mọi loại thiết bị thông

minh máy tính, điện thoại và trên mọi độ phân giải

Hình 1 Trang chủ của trang web Trang web bao gồm các đề mục: Trang chủ, Sản phẩm, Blog, Giới thiệu, Liên hệ, Tìm kiếm, Tài khoản, Giỏ hàng.

Hình 2 Phần sản phẩm mới và các đề mục nổi bật

Các sản phẩm mới sẽ được hiển thị ở nơi dễ nhìn để người dùng có thể dễ dàng nắm bắt về thông tin của các mặt hàng

Hình 3 Phần giới thiệu về thương hiệu

Hình 4 Phần cuối trang web

Cung cấp đầy đủ thông tin về công ty, chính sách đổi trả hàng, chính sách bảo mật, các thông tin liên hệ với cửa hàng để nhanh chóng hỗ trợ kịp thời, tư vấn cho khách hàng trong và sau khi mua hàng các dịch vụ phù hợp với nhu cầu mong muốn của khách hàng

Hình 5 Giao diện về trang sản phẩm

Hình 6 Giao diện về phần giỏ hàng của trang web Tính năng đặt giỏ hàng quen thuộc, thân thiện, dễ dùng có thể cập nhật thông tin giỏ hàng, thêm ghi chú vào sản phẩm để người bán hàng có thể nắm bắt được nhu cầu của người mua hàng xoá sản phẩm khỏi giỏ hàng, thanh toán và đặt hàng mới

Hình 7 Phần liên hệ của trang web

1.1.2 Đặc điểm sản phẩm (Chỉ rõ, đặc điểm sản phẩm đó về tất cả các mặt: ưu điểm, hạn chế)

Ưu điểm :

- Giao diện chính được thiết kế đơn giản, gọn nhẹ, quen thuộc với người sửdụng

- Hình ảnh sản phẩm chi tiết, trực quan, sinh động, rõ nét

- Màu chủ đạo của giao diện rất sáng và dễ nhìn

- Các mục lớn, nhỏ được thiết kế rất hợp lý, phân bố rành mạch

Hạn chế:

- Chưa có logo riêng của thương hiệu

1.2 Cơ sở tâm lý trong thiết kế/ cải tiến sản phẩm trên

1.2.1 Giao diện chính của trang web

Hình 8 Giao diện chính của trang web

1.2.1.1 Ứng dụng quá trình cảm giác trong thiết kế giao diện chính

đã chỉ ra nhiều điều còn hơn thế nữa.Vô số nghiên cứu đã được thực hiện về mối quan

hệ giữa màu sắc, đặc biệt là trong linh vực tiếp thị và xây dựng thương hiệu Một số kết quả nghiên cứu: Màu sắc ảnh hưởng đến 85% quyết định mua hàng của người mua Khoảng 62-90% đánh giá sản phẩm chỉ dựa trên màu sắc Màu sắc giúp tăng nhận thức về thương hiệu lên 80%

Vì thế tông màu chủ đạo của trang web sử dung màu trắng Pha trộn giữa sự êmdịu, hài hoà gắn liến với biển và bầu trời của màu xanh lam cùng với sự đơn giản, thuần khiết của màu trắng, màu trắng truyền tải tính thẩm mỹ tối giản, chất lượng, sạch

sẽ và hiện đại Còn màu xanh mang lại độ tin cậy và chuyên nghiệp trong việc tương tác với người dùng và nó cũng là màu ưu thích của các công ty lớn như Facebook, Twitter và Samsung

Màu chữ toàn trang được sử dụng màu đen sẽ được làm nổi bật khi đi cùng với màu nền trắng là hai màu sắc tương phản giữa hai gam màu lạnh và trung tính đơn giản tinh tế và tránh gây chói mắt, việc thiết kế màu chữ này được dựa trên quy luật tác động lẫn nhau của cảm giác

Quy luật ngưỡng cảm giác

Các kích thước chữ được sử dụng linh hoạt theo từng mục, khi chữ tiêu đề thì được in đậm màu đen to và rõ ràng còn các mục con thì được sử dụng các chữ màu trắng, việc phân bố các hình ảnh cũng rất đồng đều phù hợp với kích thước của trang web không quá thừa hoặc không quá lệch trong việc ứng dụng quy luật ngường cảm giác vào việc thiết kế giao diện chi tiết của sản phẩm

Hình 9 Các phông chữ màu chữ khác nhau của trang web

1.2.1.2 Ứng dụng quá trình tri giác trong thiết kế giao diện chính

Tính lựa chọn của tri giác

Các sản phẩm mới và các sản phẩm nổi bật được đưa lên trang chủ và đầutrang để dễ dàng thu hút khiến cho cho người xem dễ dàng tìm hiểu, thu hút kháchhàng

Khi di chuột hoặc di chuyển đến các chữ hay các nút bấm thì sẽ thay đổimàu sắc linh hoạt màu chữ khiến nổi bật các yếu tố trọng tâm

Thanh tìm kiếm được đưa lên đầu trang rất dài nổi bật với màu trắng để khách hàng có thể đễ dàng quan sát, tìm kiếm được các sản phẩm một cách nhanh chóng

Hình 10 Hình ảnh thanh tìm kiếm ở đầu trang

Tính trọn vẹn của tri giác

Trên biểu tượng giỏ hàng được in kèm theo số để biểu tượng cho số lượng sản phẩm được thêm vào trong giỏ hàng ví dụ số 2 thì sẽ có 2 sản phẩm có trong giỏ hàng

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 các đề mục sắp xếp riêng từng nhóm hàng, từng mục sản phẩm phân loại theo đối tượng, mục đích sử dụng sản phẩm khác nhau

Hình 11 Phân loại đề mục sản phẩm

1.2.1.3 Hiệu ứng Von Restorff

Hiệu ứng Von Restorff (còn được gọi là hiệu ứng cách ly) khi nhiều đối

tượng giống nhau cùng xuất hiện một lúc, thì đối tượng khác biệt nhất với các đối tượng khác sẽ được ghi nhớ nhiều hơn

Đây là lí do chính tại sao việc thiết kế các nút hành động di chuyển lại khác biệt hoàn toàn với các nút bấm thông thường để người dùng có thể dễ dàng ghi nhớ biết được rằng đây là nút chuyển cảnh hiệu ứng qua lại

Hình 12 Nút thao tác chuyển sang và các nốt chấm trên banner quảng cáo

Và khi di chuyển đến các nút bấm thì màu sắc sẽ được thay đổi hay hình ảnh sẽ được chuyển động ví dụ khi với hình ảnh của chiếc laptop ban đầu là giao diện mặt trước khi di chuột vào khung hình thì sẽ chuyển sang ảnh mặt sau của chiếc laptop Điều này sẽ giúp người dùng phân biệt được là mình đang thao tác trên sản phẩm hoặcnút bấm nào giữa các nút bấm hay sản phẩm giống nhau còn lại

Các mặt hàng sản phẩm được giảm giá thì sẽ được in đậm thêm số phần tram khuyến mại và giá cả với nền đỏ thay vì với màu đen trên các sản phẩm bình thường không được giảm giá khác

Hình 13 Sản phẩm được giảm giá và sản phẩm không được giảm giá

1.2.1.4 Lý thuyết Dao cạo của Occam

Giao diện trang web được thiết kế đơn giản, đầy đủ các tính năng không bị quá

dư thừa và phức tạp đáp ứng các tiêu chí như các trang web khác Phần thanh công cụ phía trên đầu trang được thiết kế tối giản chỉ với màu đen, trắng và xanh không quá loèloẹt rườm rà Trang sản phẩm cũng được trình bày tối ưu các sản phẩm giúp người dùng dễ tìm hiểu và mua các sản phẩm

1.2.1.5 Luật Gestal

- Nguyên tắc gần bên (Proximity)

Đặt các trang chức năng, nút bấm ở cạnh gần nhau chung một khung hình với cùng một font chữ và màu sắc

Các nút hay các mục sản phẩm, các khối văn bản mô tả sản phẩm luôn để cách

ra các khoảng trống giúp cho người dùng có thể dễ nắm bắt thông tin nhìn rõ được cách bố cục giao diện trang phân loại gom nhóm một cách dễ dàng, các khoảng trắng có thể tăng cường phân cấp thị giác và luồng thông tin, giúp cho bố cục thoáng và dễ quét thông tin hơn Điều này sẽ giúp người dùng đáp ứng được nhu cầu nhanh hơn và đào sâu được vào phần nội dung hơn

- Nguyên tắc hợp nhất

Các đường dẫn, mục liên quan với nhau như các điều khoản chính sách thì đượcđặt trong cùng một menu xổ xuống hay phần cuối trang được sắp xếp cùng một khung và màu nền trắng tách biệt

Hình 16 Giao diện đăng ký trước khi thanh toán

- Bằng việc sử dụng định luật Hick để hợp lý hoá quy trình, trật tự thao tác trên trang web thì thay vì hiện toàn bộ việc thanh toán dưới dạng dài thì việc chia nhỏ nó thành phần nhắc nhở người dùng điền đầy đủ các thông tin giao hàng, liên lạc trước khi đến trang thanh toán, việc áp dụng định luật Hick này sẽ khiếnngười dùng triển khai sự lựa chọn hơn và nhiều khả năng người dùng sẽ đến cuối quá trình hơn là từ bỏ giỏ hàng Bằng cách áp dụng định luật này sẽ giảm

đi sự phức tạp, số lượng tuỳ chọn trên màn hình, quy trình thanh toán trở nên thân thiện với người dùng hơn

Hình 17 Các tuỳ chọn sản phẩm đơn giản

- Việc lựa chọn sản phẩm cũng rất tối ưu và đơn giản khiến người dùng

không phải mất nhiều thời gian suy nghĩ, phân vân lựa chọn giữa nhiều sản phẩm

- Định luật Fitt

Các nút bấm như tìm kiếm, thêm vào giỏ hàng, thanh toán,…luôn được ưu tiênthiết kế theo hình dạng chữ nhật với kích thước lớn, to, rõ đặt ở vị trí các ngón tay tiệnlợi điều đó sẽ giúp người thao tác một cách thoải mái và nhanh chóng nhất, rút ngắn

thời gian và khoảng cách từ trỏ chuột (hoặc ngón tay) đến các vị trí nút bấm ở mứcthấp nhất.

- Định luật Postel

Hình 18 Giao diện tìm kiếm sản phẩm

- Trong việc tìm kiếm sản phầm sẽ không phân biệt chữ viết hoa hay chữ viếtthường và giao diện sẽ đề xuất, cung cấp cho khách hàng khả năng tuỳ biến, và linhhoạt khi tìm kiếm

1.2.2 Phần đăng nhập và đăng kí của trang web

Hình 19 Trang đăng nhập và đăng ký tài khoản

-Các quy luật định luật được áp dụng

Nút đăng nhập sẽ được thiết kế to và nổi bật bởi phần quan trọng cần được thiết

kế sao cho người dùng dễ dàng chú ý nhờ việc áp dụng tính lựa chọn của tri giác vớinền màu xanh và chữ màu trắng hai gam màu này tương phản nhau làm nổi bật chonhau Phần nút bấm cũng được đặt ở nơi dễ dàng thao tác và đơn giản

Áp dụng quá trình tư duy trong thiết kế để giải quyết và đáp ứng những nhu cầucủa người dùng mỗi khi quên mật khẩu thì sẽ tích hợp phần khôi phục lại

Phần đăng nhập và đăng kí được thiết kế đơn giản, tối ưu thân thiện với ngườidùng không quá phức tạp khiến người dùng dễ dàng thiết lập mà không mất nhiều thờigian, gây phiền toái khi nhanh chóng đến trang mua hàng

1.3 Sản phẩm sau cải tiến/thiết kế

Mô tả sản phẩm sau cải tiến/ được thiết kế

Bằng việc áp dụng vận dụng các định luật, quy luật tâm lý ứng dụng vào trongthiết kế bọn em đã xây dựng ra một trang web với đầy đủ các chức năng đăng nhập,đăng ký tài khoản, và hỗ trợ người dùng lấy lại mật khẩu đã bị mất, cung cấp thông tin

về thương hiệu, phần tìm kiếm mặt hàng, sản phẩm theo từ khoá, kích thước, giá cả…linh hoạt tuỳ biến giúp người dùng dễ dàng tiếp cận, tìm hiểu các mặt hàng Đồng thờivới tiện ích thêm vào giỏ hàng giúp người dùng chọn lựa sản phẩm một cách nhanhchóng Thanh toán tiện lợi khi người dùng chỉ cần điền đầy đủ thông tin cá nhân, địachỉ giao hàng, phương thức thanh toán là người dùng đã mua hàng thành công Trangweb còn cung cấp thêm các chính sách mua hàng, hoàn tiền, đổi trả và số điện thoại,trang fanpage của thương hiệu để có thể nhận được sự hỗ trợ trong và sau khi muahàng

PHẦN III KẾT LUẬN

Bài tiểu luận trên đã nêu rõ được sự ảnh hưởng to lớn của việc ứng dụng tâm lý học đối với việc thiết kế sản phẩm Đó chính là Thiết kế UX giao diện bán hàng càng thân thiện và giải quyết được càng nhiều vấn đề của người dùng luôn là mối quan tâm hàng đầu của người làm product Để tạo ra một sản phẩm không chỉ tuyệt vời về phần nhìn mà còn thỏa mãn về phần “chạm” thì ngoài các nguyên lý trong design, hiểu rõ các yêu cầu từ người dùng, thì việc hiểu về tâm lý con người cũng sẽ giúp thiết kế UX/UI của sản phẩm công nghệ trở nên vượt trội và ‘cuốn hút’ người dùng sử dụng nhiều hơn

Màu sắc có tác động mạnh mẽ đến nhận thức của người dùng Đó là lý do tại sao việc nên chọn màu sắc có chủ ý để đảm bảo trình bày đúng thông điệp và hài hòa Bởi vậy mà việc chọn màu sắc chủ đạo là màu trắng và màu xanh sẽ thể hiện được sự đơn giản, thuần tuý hiện đại mà không thiếu đi tính chuyên nghiệp đồng thời truyền tải

sự đáng tin cậy hơn đến với người dùng

Thiết Kế UI - Thiết Kế Giao Diện trang web bán hàng không chỉ dừng lại ở việcnắn nót từng pixel hay đồ hoạ cuốn hút Thực tế, các thiết kế phải được dựa vào tính