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:

• Các nguyên tắc tâm lý học trong thiết kế UX (phần 1)
• Các nguyên tắc tâm lý học trong thiết kế UX (phần 2)
• Các nguyên tắc tâm lý học trong thiết kế UX (phần 4)

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