Mô hình Gutenberg là gì? Ứng dụng của Gutenberg Diagram trong thiết kế UX/UI

Trong thiết kế web và ứng dụng, cách tổ chức và sắp xếp thông tin là yếu tố then chốt giúp người dùng dễ dàng tiếp cận nội dung và thực hiện hành động mong muốn. Một trong những nguyên tắc nổi bật trong thiết kế bố cục là Mô hình Gutenberg (Gutenberg Diagram), được phát triển để mô tả cách mà mắt người dùng di chuyển qua các phần tử trên trang. Việc áp dụng đúng mô hình này không chỉ giúp tăng tính trực quan mà còn tối ưu hóa trải nghiệm người dùng, đặc biệt trong thiết kế UX/UI. Cùng colorME tìm hiểu chi tiết về mô hình Gutenberg và ứng dụng của nó trong thiết kế giao diện nhé!

Mô hình Gutenberg là gì?

Mô hình Gutenberg (Gutenberg Diagram) là một nguyên tắc thiết kế bố cục văn bản dựa trên cách mà mắt người dùng quét qua trang từ trên xuống dưới và từ trái sang phải. Khái niệm này xuất phát từ những nghiên cứu về thói quen đọc văn bản in trên giấy và trang web. 

Cách người dùng thường sẽ đọc một thiết kế (Nguồn ảnh: Chimkudo Academy)

Trong môi trường kỹ thuật số, mô hình Gutenberg giúp dự đoán cách người dùng sẽ tiếp cận và tiêu thụ nội dung trên trang web hoặc ứng dụng, đặc biệt khi giao diện có ít yếu tố đồ họa và bố cục đơn giản. Việc áp dụng mô hình này giúp các nhà thiết kế tối ưu hóa trải nghiệm người dùng và tối đa hóa sự tương tác với các yếu tố quan trọng.

Các vùng chính trong mô hình Gutenberg

Mô hình Gutenberg chia trang thành bốn vùng chính, mỗi vùng có một chức năng và đặc điểm riêng biệt. Đầu tiên là Primary Optical Area (vùng quang học chính), nằm ở góc trên bên trái của trang, là nơi người dùng sẽ nhìn vào đầu tiên khi truy cập trang. Đây là khu vực lý tưởng để đặt các yếu tố quan trọng như logo, tiêu đề chính, giúp tạo ấn tượng mạnh mẽ ngay từ lúc đầu. 

Sau đó, người dùng sẽ quét qua Strong Fallow Area (vùng quan tâm mạnh), nằm ở góc trên bên phải. Đây là vùng tiếp theo thu hút sự chú ý và thường được sử dụng để hiển thị các yếu tố quan trọng, như hình ảnh sản phẩm hoặc các ưu đãi đặc biệt. 

Weak Fallow Area (vùng quan tâm yếu) nằm ở góc dưới bên trái, là vùng ít được chú ý nhất và thường không phải là nơi lý tưởng để đặt các yếu tố quan trọng. Cuối cùng, Terminal Area (vùng kết thúc) nằm ở góc dưới bên phải, là nơi người dùng quét qua cuối cùng, và nơi này thường được sử dụng để đặt các nút kêu gọi hành động (CTA) nhằm tối ưu hóa tỷ lệ chuyển đổi.

Designer cần nắm vững bố cục này để tối ưu hóa thiết kế của mình (Nguồn ảnh: TECHWALA BLOGS)

Ngoài ra, một yếu tố quan trọng khác trong mô hình Gutenberg là Reading Gravity (lực hấp dẫn khi đọc). Người đọc thường có xu hướng quét nội dung từ góc trên bên trái (Primary Optical Area) xuống góc dưới bên phải (Terminal Area). Điều này được tạo thành từ thói quen đọc văn bản từ trái qua phải, từ trên xuống dưới. Đây là lý do tại sao các nút kêu gọi hành động (CTA) thường được đặt ở vị trí Terminal Area để tối ưu hóa tỷ lệ chuyển đổi.

Tuy nhiên, vùng 2 (Strong Fallow Area) và vùng 3 (Weak Fallow Area) nằm ngoài Reading Gravity nên sẽ ít được chú ý hơn, đặc biệt là vùng 3. Nếu muốn tối ưu hóa trải nghiệm người dùng, bạn có thể điều chỉnh độ nổi bật của các phần tử trong hai vùng này. Nếu làm nổi bật các yếu tố ở hai vùng này quá mức, Reading Gravity có thể bị lấn át và trình tự đọc không còn tuân theo quy tắc của mô hình Gutenberg nữa.

Ứng dụng của Gutenberg diagram trong thiết kế UX/UI

Thiết kế trang web & landing page

Trong thiết kế trang web và landing page, việc áp dụng mô hình Gutenberg có thể giúp tối ưu hóa cách người dùng tiếp nhận thông tin. Để thu hút sự chú ý ngay từ đầu, logo và tiêu đề chính nên được đặt ở Primary Optical Area, vì đây là vị trí mà mắt người dùng sẽ quét qua đầu tiên. 

Tiếp theo, Strong Fallow Area là khu vực lý tưởng để hiển thị các yếu tố quan trọng như hình ảnh sản phẩm, ưu đãi đặc biệt hoặc các thông điệp chính, giúp người dùng tiếp cận nội dung một cách dễ dàng. 

Đặc biệt, Terminal Area nên được sử dụng để đặt các nút kêu gọi hành động (CTA) để tối đa hóa tỷ lệ chuyển đổi. Trong khi đó, Weak Fallow Area không nên chứa các thông tin quan trọng vì đây là vùng ít được chú ý và có thể làm giảm hiệu quả của các yếu tố quan trọng.

Thiết kế ứng dụng di động

Khi thiết kế ứng dụng di động, việc áp dụng mô hình Gutenberg cũng rất quan trọng. Primary Optical Area có thể được tận dụng để đặt thanh điều hướng hoặc các biểu tượng chính, giúp người dùng dễ dàng điều hướng qua các chức năng quan trọng của ứng dụng. 

Strong Fallow Area là khu vực lý tưởng để hiển thị các nút hành động hoặc các thông tin quan trọng như giá cả, hình ảnh sản phẩm, vì đây là nơi người dùng sẽ chú ý đến nhất khi quét qua màn hình.

Tận dụng tốt mô hình Gutenberg sẽ giúp thiết kế được tối ưu hơn (Nguồn ảnh: UI Design Tips by Jim Raptis)

 Các nút hành động chính nên được đặt ở Terminal Area, nơi người dùng thường nhấn vào theo quán tính. Điều này giúp nâng cao trải nghiệm người dùng và cải thiện khả năng hoàn tất các hành động quan trọng. 

Thiết kế UX/UI cho thương mại điện tử

Trong thiết kế UX/UI cho thương mại điện tử, Primary Optical Area là vị trí lý tưởng để đặt hình ảnh sản phẩm chính, đảm bảo khách hàng có ấn tượng mạnh ngay từ đầu. Các thông tin quan trọng như giá và nút “thêm vào giỏ hàng” nên được đặt trong Strong Fallow Area, vì đây là khu vực mà người dùng thường quét qua nhiều nhất. 

Đặc biệt, việc đặt các nút thanh toán nhanh và CTA ở Terminal Area giúp người dùng hoàn tất đơn hàng một cách dễ dàng. Đánh giá sản phẩm cũng có thể được hiển thị dọc theo trục Gutenberg, giúp người mua tham khảo trước khi đưa ra quyết định mua hàng.

Tổng kết 

Mô hình Gutenberg là một công cụ mạnh mẽ trong thiết kế UX/UI, giúp tối ưu hóa cách người dùng tiếp nhận và tương tác với nội dung trên trang web hoặc ứng dụng. Bằng cách áp dụng các nguyên tắc của mô hình này, các nhà thiết kế có thể tối đa hóa sự chú ý và tương tác của người dùng với các yếu tố quan trọng, đồng thời cải thiện tỷ lệ chuyển đổi và nâng cao sự hài lòng của người dùng. 

Nếu bạn muốn học thêm về cách áp dụng mô hình Gutenberg và các nguyên tắc thiết kế UX/UI khác vào công việc của mình, khóa học UI UX Toàn Diện của colorME là lựa chọn lý tưởng. Với lộ trình bài bản và các bài tập thực hành, bạn sẽ có cơ hội áp dụng mô hình Gutenberg vào các dự án thực tế, nâng cao năng lực thiết kế và chuẩn bị sẵn sàng cho những thách thức trong ngành UX/UI.