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

Mục đích chính của phân tích dữ liệu là gì? Ứng dụng thực tế trong công việc

Mục đích chính của phân tích dữ liệu là gì và làm thế nào để ứng dụng trong công việc là những câu hỏi thường gặp. BAC sẽ giúp bạn tổng hợp những kiến thức nền tảng thông qua các ví dụ thực tế, gần gũi.
Bài tập phân tích dữ liệu trong kinh doanh cho người mới bắt đầu có đáp án

Bạn muốn tìm bài tập phân tích dữ liệu trong kinh doanh cho người mới bắt đầu có đáp án? Bạn là người mới và chưa biết phải bắt đầu từ đâu? Hãy để BAC giúp bạn thông qua hướng dẫn chi tiết ở đây.
Dữ liệu thứ cấp là gì? phương pháp phân tích dữ liệu thứ cấp là gì?

Nếu bạn đang tìm hiểu về phân tích dữ liệu và gặp khái niệm dữ liệu thứ cấp thì đây là bài viết dành cho bạn. BAC sẽ giúp bạn tìm hiểu tất cả thông tin như định nghĩa, đặc điểm, ưu và nhược điểm cũng như những phương pháp phân tích.
Business Analyst thời đại AI: Cơ hội, thách thức và kỹ năng cần có để không bị thay thế

Trí tuệ nhân tạo (AI) đang thay đổi ngành phát triển phần mềm, ảnh hưởng đến vai trò của Business Analyst (BA). Hãy phân tích BA cần làm gì để thích nghi ở thời đại mới

Bình luận

Lê Anh Tuấn

Chuyên viên HO - Kỹ thuật Ngân hàng số Eximbank

Tôi là nhân sự thuộc Trung tâm Phát triển CNTT – Khối Ngân hàng số, hiện đang đảm nhiệm vai trò kiểm thử phần mềm (tester). Việc tham gia khóa học Business Analyst đã mang lại cho tôi góc nhìn toàn diện và rõ ràng hơn về vai trò của BA trong lĩnh vực ngân hàng.

Khóa học Fundamental Business Analysis tại BAC không chỉ giúp tôi hiểu đúng bản chất công việc BA mà còn hỗ trợ phát triển tư duy nghiệp vụ – từ tiếp cận giải pháp kỹ thuật sang tập trung vào nhu cầu người dùng. Phương pháp giảng dạy kết hợp lý thuyết và thực hành thực tiễn, cùng các hoạt động mô phỏng, thảo luận nhóm đã giúp tôi nâng cao kỹ năng giao tiếp, phân tích và trình bày yêu cầu – những năng lực thiết yếu để phối hợp hiệu quả giữa các bên trong dự án công nghệ.

Xem chi tiết +
Huỳnh Cao Cường

Nhân viên HO - Kỹ thuật Ngân hàng số Eximbank

Tôi hiện đang công tác tại Trung tâm Phát triển CNTT – Khối CNTT, với vai trò là nhân sự chức năng phụ trách mảng Ngân hàng số, chuyên sâu về kiểm thử phần mềm (Tester). Trước khi tham gia khóa học Fundamental Business Analysis do BAC tổ chức, tôi từng hình dung BA chỉ đơn thuần là cầu nối giữa bộ phận kỹ thuật và nghiệp vụ.

Tuy nhiên, quá trình học đã giúp tôi nhận thức rõ hơn về bản chất và tầm quan trọng của vị trí này. BA không chỉ kết nối các bên liên quan, mà còn giữ vai trò định hình yêu cầu, đảm bảo giải pháp được thiết kế đúng mục tiêu và sát với nhu cầu thực tế. Khóa học đã trang bị cho tôi tư duy phân tích bài bản, khả năng diễn đạt yêu cầu rõ ràng, và kỹ năng phối hợp hiệu quả trong môi trường dự án đa chiều.

Với nền tảng công nghệ thông tin sẵn có, khóa học là bước chuyển hướng quan trọng giúp tôi phát triển tư duy nghiệp vụ vững chắc và sẵn sàng theo đuổi lộ trình nghề nghiệp chuyên sâu trong lĩnh vực Business Analysis tại Eximbank.

Xem chi tiết +
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 +

Professional Transfer Services in Batumi

Luxury Georgian Transfer Services – Tbilisi & Batumi

Airport Transfers in Georgia

Mục đích chính của phân tích dữ liệu là gì? Ứng dụng thực tế trong công việc

Bài tập phân tích dữ liệu trong kinh doanh cho người mới bắt đầu có đáp án

Dữ liệu thứ cấp là gì? phương pháp phân tích dữ liệu thứ cấp là gì?

Business Analyst thời đại AI: Cơ hội, thách thức và kỹ năng cần có để không bị thay thế

CÔNG TY CỔ PHẦN ĐÀO TẠO VÀ TƯ VẤN BAC