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ÊNKHOA 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 webbá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úcHọ tên sinh viên – Mã SV: 1 Lý Văn Linh -10121865

PHẦN II: NỘI DUNG 4

1.1 Sản phẩm sẽ được thiết kế/ cải tiến 4 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ật Hư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, em xin 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ình nhiề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 Tuy nhiê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ánh khỏ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áo tiể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ệm trướ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ức nà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 được nhiề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ụ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ệ” đ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.

3 Về dự án

Ý tưởng chính của 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ệ.

Giá trị của dự án :

Với một xã hội phát triển như ngày nay thì công nghệ là một phần của cuả cuộc sống có vai trò vô cùng khác biệt, tạo nên một cuộc sống muôn màu Chính vì thế mà các món đồ công nghệ ra đời để phục vụ, nâng cao chất lượng cuộc sống cho con người như TV, máy tính, điện thoại, máy ảnh… giúp chúng ta giải trí, học tập và làm việc ngày càng được chú trọng Bởi vậy là những người sử dụng việc tìm mua những món đồ này là hết sức quan trọng để làm sao có thể tối ưu hoá việc sử dụng cũng như là việc kinh doanh các mặt hàng này Cho nên việc vận dụng các yếu tố tâm lý học kỹ sư vào việc thiết kế trang web bán hàng làm sao có thể thu hút được nhiều khách hàng sử dụng hơn là một dự án rất có ý nghĩa trên thị trường thương mai điện tử ngày 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

Trang web được thiết kế mang lại cho người dùng cảm giác thoải mái, thân thiện, dễ chịu, tiện lợi, hài lòng.

Đặc biệt trong việc thiết kế trang web này đã sử dụng và kết hợp các màu sắc một cách hợp lý Trong thiết kế sản phẩm thì cần quan tâm yếu tố màu sắc Màu sắc là cái đầu tiên tác động đến nhận thức của người sử dụng, vận hành Màu sắc nắm giữ 1 sức mạnh rất lớn Nó có thể tác động đến tâm trạng, cảm xúc và hành vi của chúng ta Hoặc cũng có thể là một nguồn thông tin Mặc dù phản ứng của một cá nhân với màu sắc có thể xuất phát từ trải nghiệm cá nhân, nhưng các nghiên cứu về màu sắc đã 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ự êm dị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à đầu trang để dễ dàng thu hút khiến cho cho người xem dễ dàng tìm hiểu, thu hút khách hàng

Khi di chuột hoặc di chuyển đến các chữ hay các nút bấm thì sẽ thay đổi mà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

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ặc nú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

- Nguyên tắc hình - nền

Sử dụng hình nền đen được làm mờ đi để làm nổi bật phần chữ trắng và đen màu này làm nổi bật màu kia và ngược lại tương phản lẫn nhau để diễn tả phần nội dung ý nghĩa của các đề mục

1.2.1.6 Một số dịnh luật trong thiết kế kĩ thuật

- Định luật Hick

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ến ngườ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ên thiế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ện lợ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ức

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ết thường và giao diện sẽ đề xuất, cung cấp cho khách hàng khả năng tuỳ biến, và linh hoạ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ới nề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 cho nhau 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ầu củ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ười dù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ời gian, 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 trong thiế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ời vớ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 nhanh chó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, địa chỉ giao hàng, phương thức thanh toán là người dùng đã mua hàng thành công Trang web 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 mua hà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ệc nắ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