Jan 06, 2022

Các nguyên tắc tâm lý học trong thiết kế UX - Phần 3

Tiếp tục series các nguyên tắc tâm lý học trong thiết kế UX, bài viết hôm nay sẽ đề cập đến các nguyên tắc về Gestalt. Vậy Gestalt là gì? Gestalt trong tiếng Đức là hình dáng hoặc hình thức, trong UX đây là nguyên tắc về thị giác được xây dựng dưới góc nhìn tâm lý học. Sau khi xem xong các nguyên tắc, chắc chắn bạn sẽ rất bất ngờ bởi sự hiệu quả và hấp dẫn của chúng!

Chuỗi bài viết Các nguyên tắc tâm lý học trong thiết kế UX sẽ bao gồm 4 phần. Mời bạn tham khảo các phần còn lại của chuỗi bài:

1. Nguyên tắc không gian chung

Định nghĩa: Các thành phần liên quan nhau nên nằm chung một không gian, những ranh giới rõ ràng này giúp thông tin trở nên tách bạch và dễ nắm bắt.

Ứng dụng của nguyên tắc không gian chung trong thiết kế UX:

Cách đơn giản và hiệu quả nhất là tạo đường viền đối với những mục có chức năng tương tự nhau. Ví dụ như giao diện in tài liệu, cửa sổ bao gồm 3 mục chính là: Chọn máy in, phạm vi trang, số lượng bản sao.

Phân vùng theo màu sắc cũng là một cách rất hiệu quả. Nhìn vào hình minh họa giao diện hai màu xanh dương và trắng trên màn hình, chúng ta có thể thấy sự tách bạch rõ ràng và nhận biết vùng màu xanh là thiết lập, nhóm chức năng trong khi màu trắng là cửa sổ làm việc.

Việc phân vùng chức năng cùng tạo nên mối quan hệ của các đối tượng trong một vùng, Trong các ứng dụng đặt thức ăn, chúng ta có thể các thông tin về tên cửa hàng, ảnh đại diện, vị trí, mã giảm giá cùng nằm trong một vùng tức các thông tin đó của một cửa hàng, người dùng có thể dễ dàng nắm bắt và theo dõi.

2. Nguyên tắc kề bên

Định nghĩa: Nguyên tắc kề bên có nội dung, các mục gần nhau có khả năng được coi là một phần của cùng một nhóm - chia sẻ chức năng hoặc đặc điểm tương tự.

Ứng dụng của nguyên tắc kề bên trong thiết kế UX:

Các khoảng trống là vũ khí đắc lực của các nhà thiết kế UX bởi chúng rất hiệu quả để mô tả sự tách biệt hoặc hợp nhất các nội dung. Nhìn vào trang web Wellington City Council chúng ta có thể thấy được thanh Tìm kiếm được cách riêng so với các phần còn lại để nổi bật ngầm khẳng định sự quan trọng của chức năng này.

Đối với đoạn văn bản, khoảng trống cũng rất hiệu quả để phân tách các đoạn. Nếu tiêu đề của đoạn được đặt gần đoạn người dùng sẽ dễ trong việc hiểu nội dung và sắp xếp thông tin.

Ngược lại, khi nhóm các đối tượng không liên quan lại gần nhau có thể gây nhằm lẫn lớn và giảm trải nghiệm đối với người dùng. Cùng tham khảo trang web bên dưới chúng ta có thể thấy được sự rắc rối khi các nút Next, Add, Save as Draft và Cancel được nhóm lại với nhau. Nếu nút Previous và Next được nhóm lại gần người dùng sẽ dễ thao tác hơn, từ đó tăng sự hài lòng khi sử dụng trang web.

3. Nguyên tắc Prägnanz

Định nghĩa: Trong tiếng Đức, Prägnanz có nghĩa là “tối giản, ngắn gọn, bản chất vốn có”. Trong UX Design, định luật này có nghĩa mọi người có xu hướng giải thích những hình ảnh không rõ ràng hoặc phức tạp thành những dạng đơn giản, thân thuộc hơn ít đòi hỏi sự nổ lực.

Ứng dụng của nguyên tắc Prägnanz trong thiết kế UX:

Mắt người có khả năng đơn giản hóa hình ảnh và đưa chúng về dạng quen thuộc để ngăn sự quá tải về thông tin. Nhìn vào ảnh minh họa, chúng ta luôn có xu hướng tách ảnh thành các hình chữ nhật, tròn, tam giác (bên phải) thay vì nhìn cả khối hình (bên trái).

Trong thiết kế wireframe, UX designer hãy phân bố bố cục cho trang web của mình thật đơn giản và tránh xa sự phức tạp để đảm bảo người dùng nhìn vào không bị rối mắt.

Định luật Prägnanz còn đề cập đến phương diện ngược lại là con người có xu hướng tốn nhiều thời gian và khó khăn hơn khi gặp những hình trừu tượng, phức tạp. Vậy nên khi ở những màn hình chờ, bạn có thể để hình ảnh chi tiết, phức tạp để người dùng mường tượng và phân tích để không còn cảm thấy quá lâu khi chờ đợi.

4. Nguyên tắc tương tự

Định nghĩa: Mắt người có xu hướng cảm nhận các yếu tố tương tự trong một thiết kế, hình dạng hoặc nhóm hoàn chỉnh ngay khi chúng được tách rời. Có nghĩa là, một hình ảnh dù chưa được hoàn thiện nhưng với những đường nét cơ bản, đặc trưng thì người dùng vẫn có thể mường tượng được đó là hình ảnh gì.

Ứng dụng của nguyên tắc tương tự trong thiết kế UX:

Áp dụng nguyên tắc tương tự vào thiết kế UX, màu sắc là phương thức rất hiệu quả khi thể hiện sự liên kết trong một nhóm hoặc cùng nhóm chức năng. Trong trang web Synchrony ta thấy, các nút Cancel, Submit Inquiry và Add Attachment có cùng màu xanh lá hòa hợp với nhau khi các chức năng trên cùng đươc thực hiện trên trang web. Nút Return to dashboard với màu xanh dương nổi bật và khác biệt để người dùng cẩn trọng hơn khi bấm.

Hình khối cũng là một cách thức giúp nhà thiết kế UX dễ dàng nhóm các chức năng tương tự lại với nhau. Trong trang web ta thấy khối hình chữ nhật có bo góc và khối hình chữ nhật bên dưới rõ ràng là có chức năng khác biệt nhau hoàn toàn.

Một phương thức khác không kém phần hiệu quả trong nguyên tắc tương tự là kích thước. Người dùng sẽ nhận thấy sự cùng nhóm khi các phần trên trang web có cùng kích thước. Người dùng có thể dễ dàng nhận biết sản phẩm và quảng cáo ở trang web bên dưới bởi nhóm sản phẩm có cùng kích thước trong một hình và quảng cáo có kích thước gấp đôi các không gian của sản phẩm.

Ba phương thức trên chỉ là những phần cơ bản nên hiện nay có rất nhiều cách để thể hiện sự tương tự như phông chữ, xử lý phông chữ (in nghiêng, in đậm, gạch chân), hiệu ứng trên trang web,...Vậy nên nhà thiết kế UX chúng ta cần học hỏi, và trau dồi mỗi ngày để tìm thấy những cách thức mới lạ, hấp dẫn.

5. Nguyên tắc kết nối

Định nghĩa: Những nội dung có kết nối thể hiện qua mặt hình thức (hình ảnh, màu sắc,...) sẽ giúp người dùng có cái nhìn trực quan và nhận thấy sự kết nối đó dễ dàng.

Ứng dụng nguyên tắc kết nối trong thiết kế UX:

Nguyên tắc kết nối thường được sử dụng trong trường hợp mô tả trạng thái đơn hàng của bạn khi đặt hàng trên các sàn thương mại điện tử, người dùng dễ dàng thấy được các bước giao hàng nối tiếp, tuần tự và liên kết chặt chẽ với nhau qua hình mô tả trên giao diện.

Nguyên tắc kết nối còn hỗ trợ liên kết các phần tử không có cùng hình dạng (như trên nguyên tắc tương tự đã đề cập). Trong hình minh họa bên dưới chúng ta có thể thấy dù hình vuông và hình tròn không hề giống nhau nhưng khi có đường liên kết lại chúng vẫn thể hệ mối quan hệ rất chặt chẽ.

Vừa rồi mình đã giới thiệu xong 5 nguyên tắc trong phần Gestalt, mong rằng các bạn có thể áp dụng vào thiết kế của mình để giao diện của bạn trở nên thân thiện hơn với người dùng. Cám ơn đã theo dõi và hẹn gặp lại các bạn ở phần 4 của chuỗi bài viết.

Nguồn tham khảo:

lawsofux.com

Nhu cầu đào tạo doanh nghiệp

BAC là đơn vị đào tạo BA đầu tiên tại Việt Nam. Đối tác chính thức của IIBA quốc tế. Ngoài các khóa học public, BAC còn có các khóa học in house dành riêng cho từng doanh nghiệp. Chương trình được thiết kế riêng theo yêu cầu của doanh nghiệp, giúp doanh nghiệp giải quyết những khó khăn và tư vấn phát triển.

CÁC KHOÁ HỌC BUSINESS ANALYST BACs.VN DÀNH CHO BẠN

Khoá học Online:

Khoá học Offline:

Tại Tp.HCM:

Tại Hà Nội:

Tham khảo lịch khai giảng TẤT CẢ các khóa học mới nhất

Ban biên tập nội dung - BAC

Click để đọc tiếp

Các Business Analyst cần trau dồi những công nghệ gì trong năm 2025

Đối với sự phát triển nhanh chóng của công nghệ ngày này, việc không ngừng trau dồi và học hỏi là điều bắt buộc mà các Business Analyst phải làm để phát triển hơn trong lĩnh vực phân tích nghiệp vụ. Trong bài viết này, các bạn hãy cùng BAC tìm hiểu các xu hướng và các kỹ năng mới để làm hành trang trên sự nghiệp Business Analyst nhé!
Sự khác biệt giữa UAT và Usability Testing Business Analyst cần lưu ý

UAT và Usability Testing thường được mang lên bàn cân để so sánh nhưng, đây là 2 phương pháp kiểm thử khác nhau. Trong khi Usability Testing đảm bảo sự hài lòng của người dùng thì UAT lại giúp các Business Analyst xác thực chức năng. Cả hai đều là một phần không thể thiếu để cung cấp một sản phẩm chất lượng cao. Hãy cùng BAC tìm hiểu ngay nhé!
API là gì? Khám phá cầu nối giữa các ứng dụng

API là nền tảng quan trọng kết nối các ứng dụng và dịch vụ trong kỷ nguyên số, tạo ra sự linh hoạt, hiệu quả và mở rộng cho các hệ thống. Bài viết sau giới thiệu API, cách hoạt động, các kiểu kiến trúc phổ biến cùng các công cụ kiểm thử API như Postman.
Meta AI là gì và cách sử dụng Meta AI hiệu quả 2025

Meta AI là một công cụ Trí Tuệ Nhân Tạo do chính công ty mẹ của Facebook, Instagram, WhatsApp ra mắt. Đây được xem là một cuộc cách mạng sẽ làm thay đổi cách mà các doanh nghiệp và người dùng sử dụng mạng xã hội.

Bình luận

Nguyễn Thị Mai Bình

Business Analyst

Với một người ngoại đạo như mình thì những chuyên đề về "kỹ thuật" của BA hết sức quan trọng. Ví dụ như sử dụng các diagram để mô hình hóa requirement, viết User Story/Use case, v...v..

Đến với khóa học Fundamental Business Analysis, mình đã được gặp thầy Lộc, một người người rất nhiệt tình và có tâm. Ngoài việc chia sẻ các kinh nghiệm thực tế trên lớp thì thầy còn dành thời gian ra để tư vấn, hỗ trợ, góp ý CV cho mình. Bên cạnh đó trung tâm và anh Phụng cũng hỗ trợ gửi CV, kết nối học viên tới mạng lưới các công ty đối tác chất lượng, điều này giúp học viên như mình tìm được công việc phù hợp nhất. Cảm ơn BAC.
Xem chi tiết +
Phạm Quế

Business Analyst

Khoá học Product Design của BAC đã cung cấp cho tôi nhiều kiến thức và nền tảng vô cùng hữu ích. Giảng viên giảng dạy rất nhiệt tình, truyền cho chúng tôi ngọn lửa đam mê và nhiệt huyết trong ngành. Đồng thời chia sẻ các kiến thức và kỹ năng cần thiết trong bài giảng một cách dễ hiểu hơn. Số lượng học viên không quá nhiều nên chất lượng giảng giạy vô cùng tốt. Giảng viên sửa bài tập 1-1 nên bài giảng sẽ chuyên sâu hơn.
Xem chi tiết +
Nguyễn Văn Long

Chuyên viên về chế độ kế toán & Giải pháp nghiệp vụ Tài chính kế toán trong ứng dụng CNTT - Tập đoàn Điện lực Việt Nam (EVN)

Tôi đã tham gia khóa Phân tích nghiệp vụ phần mềm cơ bản 3.0 tại BAC. Ở đây, tài liệu đào tạo cung cấp nhiều nội dung bổ ích và trình bày dễ hiểu. Giảng viên rất nhiệt tình, ngoài nội dung giảng dạy theo giáo trình còn chia sẻ nhiều kinh nghiệm thực tiễn, các câu hỏi của học viên đều được giải đáp ngay trên lớp và có minh họa từ các dự án trong thực tế. Sau tất cả, tôi cảm ơn BAC và Thầy giáo Thái Sơn.
Xem chi tiết +