Thỉnh thoảng, chúng tôi nghe rất nhiều về việc thiết kế web đáp ứng đã trở thành nhu cầu của thế nào trong giờ. Có một số yếu tố góp phần làm cho một thiết kế đáp ứng thành công, và yếu tố quan trọng nhất là yếu tố dễ đọc.

Vì ngày càng có nhiều người dùng có xu hướng sử dụng các thiết bị khác nhau để đáp ứng nhu cầu đọc của họ, điều quan trọng là mang đến cho người dùng trải nghiệm đọc tốt trên các màn hình thiết bị khác nhau - có thể là Điện thoại thông minh, máy tính bảng hoặc màn hình máy tính. Điều này phụ thuộc vào hai khía cạnh: chiều dài dòng (còn được gọi là thước đo) và kích thước phông chữ. Mặc dù độ dài dòng giúp cải thiện trải nghiệm đọc, mặt khác, kích thước phông chữ là cần thiết để giúp người dùng thoải mái đọc nội dung.

Bài đăng này sẽ khám phá cách duy trì độ dài dòng và kích thước phông chữ chính xác trong thiết kế đáp ứng của bạn, để mang đến cho người dùng trải nghiệm đọc màn hình tuyệt vời. Nhưng trước đó, trước tiên chúng ta hãy xem mô hình đọc phổ biến mà mọi người theo dõi để đọc nội dung web.

Làm thế nào để mọi người thích đọc?
Chà, rõ ràng là chúng ta đã đọc một cái gì đó để đáp ứng nhu cầu của chúng ta: để có được một số thông tin, tìm ý tưởng mới và tăng cơ sở kiến ​​thức của chúng ta. Chẳng hạn, bạn sẽ đọc một số hướng dẫn lập trình nếu bạn thích làm việc với mã hoặc muốn một số trợ giúp mã hóa cho dự án của bạn. Rất nhiều khám phá đã được thực hiện trên màn hình đọc và một trong những khám phá nổi tiếng nhất là - Mẫu hình chữ F hình chữ nhật để đọc.

Jakob Nielsen, một chuyên gia về khả năng sử dụng web nổi tiếng và là đồng sáng lập của công ty Nhóm Ni Ni Norman Norman cùng với Donald Norman vào năm 2006, đã phát hiện ra một mô hình sử dụng mọi người đọc nội dung web. Công ty phát hành bản đồ nhiệt bằng cách tiến hành nghiên cứu theo dõi bằng mắt, theo đó mọi người đọc theo mẫu hình chữ F, bao gồm ba thành phần:

Người dùng bắt đầu đọc văn bản một cách ngẫu nhiên theo chuyển động ngang và bao phủ phần trên của khu vực nội dung.
Tiếp theo, người dùng bỏ qua một vài dòng văn bản và di chuyển xuống trang. Họ bắt đầu đọc ngang trong một chuyển động ngang thứ hai bao phủ một khu vực ngắn hơn so với chuyển động trước đó. Đó là mọi người quét nội dung để tìm văn bản phục vụ mục đích của họ và do đó họ sẽ chuyển từ phần này sang phần khác - cho đến khi họ nhận được những gì họ đang tìm kiếm.
Cuối cùng, người dùng đọc nội dung một cách hấp dẫn khi họ tìm thấy nội dung họ quan tâm. Họ sẽ chậm lại và đọc văn bản một cách cẩn thận. Nhưng trong trường hợp mất hứng thú, họ sẽ không thể tập trung vào nội dung và sẽ tiếp tục đọc ở cạnh trái của văn bản.
Làm thế nào để chiều dài dòng ảnh hưởng đến việc đọc?
phông chữ-so sánh

Người đọc thường có xu hướng theo một chuyển động đọc ngang để đọc văn bản. Khi những người đọc bình thường cảm thấy mệt mỏi sau khi đọc một hàng ngang dài, rất có thể họ sẽ lướt nhanh sang cạnh trái của văn bản - đó có thể là dòng tiếp theo hoặc có thể là hai đến ba dòng của văn bản. Ngược lại, khi một số độc giả tham gia bị kiệt sức khi đọc một hàng ngang dài, họ có thể sẽ đọc cùng một dòng văn bản nhiều lần.

Do đó, điều thiết yếu đối với các nhà thiết kế web là đặt độ dài dòng hợp lý cho văn bản: đó là độ dài dòng 45 đến 75 ký tự cho phương tiện in, đặc biệt là 66 ký tự bao gồm cả khoảng trắng. Có số lượng ký tự phù hợp trên mỗi dòng sẽ giúp tăng khả năng đọc văn bản của bạn.

Làm thế nào để kích thước phông chữ ảnh hưởng đến việc đọc?
Ngoài chiều dài dòng, việc duy trì kích thước phông chữ thoải mái cũng rất quan trọng để làm cho văn bản có thể đọc được. Khi tạo một thiết kế web, văn bản sẽ quá nhỏ hoặc quá lớn để đạt được độ dài dòng lý tưởng. Có ba khía cạnh quan trọng để xem xét:

1. Duy trì kích thước phông chữ cho các trang web tĩnh
Lợi ích lớn nhất của việc đọc trên một trang web phản hồi là mọi người không phải chụm hoặc thu phóng để đọc văn bản trên các thiết bị cầm tay của họ. Nhưng nếu một trang web có chiều rộng cố định, thì việc đặt độ dài dòng lý tưởng sẽ không hoạt động và văn bản của bạn sẽ quá chậm để đọc trên một thiết bị nhỏ như điện thoại.

2. Duy trì kích thước phông chữ cho các thiết bị nhỏ
Khi bạn đang làm việc trên một trang web đáp ứng, hãy đảm bảo đặt kích thước phông chữ thoải mái và độ dài dòng lý tưởng cho văn bản của bạn. Nhưng trong trường hợp văn bản của bạn không thể đọc được trên một số thiết bị, tốt hơn là thay thế độ dài dòng lý tưởng bằng độ dài dòng kém lý tưởng để đảm bảo trải nghiệm tốt nhất trên tất cả các thiết bị.

Văn bản thường trông nhỏ hơn trên điện thoại so với các thiết bị lớn hơn, nhưng đó không phải là vấn đề, vì thực tế là mọi người giữ thiết bị cầm tay của họ gần khi đọc. Tuy nhiên, việc giữ văn bản quá nhỏ có thể khiến người dùng khó đọc thoải mái. Và do đó, tại sao, nó trở nên cần thiết để vượt quá độ dài dòng lý tưởng của kích thước phông chữ để cung cấp trải nghiệm đọc thoải mái hơn cho các thiết bị có kích thước bỏ túi.

3. Duy trì kích thước phông chữ cho các thiết bị lớn
Mặc dù, mọi người đang ngày càng sử dụng các thiết bị cầm tay cho mục đích đọc, nhưng phần lớn mọi người sử dụng máy tính xách tay hoặc máy tính để bàn. Và vì vậy, hãy nhớ rằng độ dài dòng chữ và kích thước phông chữ của trang web phản hồi sẽ không chỉ ảnh hưởng đến trải nghiệm đọc của những người sử dụng thiết bị cầm tay mà cả những người sử dụng các thiết bị lớn.

Nhiều thiết kế đáp ứng đặt văn bản trong một cột dễ dàng mở rộng và hợp đồng theo kích thước của thiết bị. Điều này sẽ giúp cung cấp trải nghiệm đọc tốt - trừ trường hợp khi kích thước phông chữ được sử dụng để duy trì độ dài dòng lý tưởng, thay vì chiều rộng của cột.

Hơn nữa, giống như chúng ta đã thảo luận ở trên rằng việc đặt kích thước phông chữ quá nhỏ có thể khiến việc đọc trở thành một nhiệm vụ khó khăn, tương tự phông chữ quá lớn có thể làm mất mắt người đọc và họ sẽ không thể đọc được một dòng văn bản. Chúng tôi đã quen xem văn bản trực tuyến lớn hơn văn bản in. Đó không phải là vấn đề vì chúng ta thường đọc một cái gì đó trên các thiết bị lớn như máy tính xách tay hoặc máy tính để bàn ở khoảng cách xa trong khi đọc. Nhưng việc sử dụng văn bản quá lớn sẽ khiến người đọc thất vọng, vì họ sẽ phải chậm lại để đọc văn bản đúng cách và điều chỉnh khoảng cách họ sẽ phải di chuyển mắt để bỏ qua văn bản họ đang đọc.

Khi đọc theo chiều ngang trở nên nặng nề, người đọc rất có thể sẽ bắt đầu đọc văn bản theo chiều dọc.

Gói lại
Có một cuộc đấu tranh không ngừng giữa việc đọc văn bản theo chuyển động ngang hoặc dọc, đặc biệt khi màn hình thiết bị khác nhau được sử dụng để đọc văn bản. Và độ dài dòng và kích thước phông chữ là hai yếu tố quan trọng nhất của một trang web phản hồi giúp văn bản có thể đọc được cho người dùng. Trong trường hợp, bạn đang sử dụng độ dài dòng để xác định điểm dừng trong thiết kế web đáp ứng của mình, thì nhiều khả năng bạn quan tâm đến loại và đọc. Và bạn nên bảo tồn chiều dài dòng. Nhưng loại của bạn thực sự hoạt động trên một thiết bị nhỏ hơn đòi hỏi phải nhìn kỹ, nếu nó không hoạt động, hãy đảm bảo cân bằng độ dài dòng và kích thước phông chữ giúp đọc thoải mái.
Phân tích trang web của đối thủ
Giới thiệu về tác giả
Ben Wilson là một nhà phát triển web WordPress có kinh nghiệm trong việc đưa trang web HTML trở nên thân thiện với WordPress với hơn nửa thập kỷ mở rộng trong lĩnh vực này. Ông thích chia sẻ ý tưởng sâu sắc trực tuyến.