Làm thế nào để tận dụng hiệu quả khoảng trắng trong quá trình thiết kế web

L

Khi nghe nói đến cụm từ “khoảng trắng”, có thể bạn sẽ nghĩ ngay đến hình ảnh “hai cột sidebar kẹp phần nội dung chính của trang web ở giữa”.

Tuy nhiên, khoảng trắng (white space hoặc negative space) còn đề cập đến khoảng không gian trống nằm xung quanh bức ảnh hoặc xung quanh những nội dung khác trên trang web, cùng với khoảng trắng phân cách giữa câu chữ ở phần tiêu đề và phần nội dung bài viết.

Bổ sung thêm khoảng trắng là điều cần thiết trong quá trình thiết kế web ở hầu hết mọi website (ngoại trừ trang web của The Million Dollar).

Nếu thực hiện một cách hiệu quả, khoảng trắng sẽ khiến trang web của bạn trông thanh lịch hơn mà không cần phải hy sinh quá nhiều không gian hiển thị trên trang web.

Bạn vẫn chưa thấy bị thuyết phục, kiểu như: “Tôi không trả tiền chỉ để bày ra khoảng trắng trên trang web!”?

Tuy nhiên, bài viết dưới đây sẽ trình bày 4 lý do có thể khiến bạn suy nghĩ lại.

 

1. Thu hút sự chú ý

Hãy bắt đầu với điều đơn giản nhất.

Trong khi mọi người vẫn còn tranh cãi về chiến lược làm thế nào để thu hút sự chú ý của người dùng trên internet thì tất cả chúng ta đều có thể đồng ý về một thứ hoàn toàn không gây được sự chú ý nào – đó là phần khoảng trống không có nội dung gì hết.

Điều đó cho thấy khoảng trắng sẽ là một yếu tố hiệu quả để lôi kéo sự chú ý của người dùng bởi vì bạn có thể hướng sự chú ý của họ đến những nội dung khác nhanh hơn.

 

 

Ví dụ, bạn có thể sử dụng nhiều đoạn văn bản và hình ảnh để phân chia bố cục trên trang web và cũng đồng thời nhấn mạnh đến những nội dung quan trọng của trang web đó.

Bạn có thể bổ sung thêm nhiều khoảng trắng xung quanh bức ảnh chính hoặc tăng kích thước font chữ (bằng cách tăng khoảng cách giữa các ký tự và khoảng cách giữa các dòng chữ), từ đó khiến những nội dung này nổi bật hơn và trang web cũng sẽ trông gọn gàng hơn.

Arfa đã đề cập đến tầm quan trọng của những phần nội dung chính trên trang web thông qua bài viết của mình.

Bạn có thể sử dụng phương pháp trên với tất cả các trang web, ví dụ như trang chủ, trang landing page, phễu chuyển đổi, trang sơ yếu lý lịch/hồ sơ năng lực…

Bạn cũng có thể xem qua bài viết của Nataly để tham khảo các mẫu thiết kế website khác.

Nguyên tắc chính ở đây rất đơn giản: khoảng trắng xung quanh những nội dung chính trên trang web sẽ thu hút sự chú ý của người dùng bởi vì xung quanh nó sẽ không còn các yếu tố nào khác gây xao nhãng.

 

2. Sắp xếp thứ tự ưu tiên

Làm thế nào để bạn biết được sự khác nhau giữa logo và popup trên trang chủ?

Hiển nhiên là bạn sẽ nghĩ ngay đến kích thước của chúng.

Có lẽ một thứ ít hiển nhiên hơn nhưng lại cực kỳ quan trọng dưới góc nhìn của thiết kế web, đó là kích thước của khoảng trắng xung quanh 2 phần nội dung này.

Những nội dung được ưu tiên nhiều hơn sẽ có nhiều khoảng trắng xung quanh hơn, và đó là lý do tại sao chúng lại trở nên nổi bật và hút tầm mắt của người dùng.

Dưới đây là một mẫu thiết kế thể hiện thứ tự ưu tiên cực kỳ rõ ràng.

 

 

Bạn có thể nhận thấy hoàn toàn không có bất kỳ đường kẻ, màu sắc hay yếu tố phân tách nào giữa các phần nội dung với nhau.

Tuy vậy, bạn vẫn có thể phân biệt được các yếu tố giúp định hướng người dùng, ví dụ như các tùy chọn trên trang web, tiêu đề, nút bấm chia sẻ lên mạng xã hội và thông tin liên hệ.

Làm thế nào mà bạn biết được?

Đó là nhờ khoảng trắng.

Bằng cách áp dụng thứ tự ưu tiên kết hợp với khoảng trẳng, thiết kế của bạn sẽ trông liền mạch và loại bỏ cảm giác mơ hồ, nhập nhằng.

Người dùng sẽ biết được đâu là nội dung quan trọng và tiếp theo nên đi đâu.

Thông thường landing page sẽ là kiểu trang web thể hiện rõ rệt nhất điều này.

Bạn sẽ thiết kế tiêu đề với nhiều khoảng trắng xung quanh hơn so với những dòng chữ ở bên dưới.

Và bên dưới tiêu đề sẽ là một nút bấm lớn để kêu gọi hành động với khoảng trắng cực lớn xung quanh nó.

Thông thường đây sẽ là một tiêu chuẩn cơ bản mà bạn thường xuyên bắt gặp khi lướt web.

Hãy xem qua trang web của GTMetrix.

 

 

Trang chủ của GTMetrix tận dụng tối đa khoảng trắng để tạo ra thứ tự ưu tiên cực kỳ rõ ràng.

Khi đi đến trang web này, ngay lập tức bạn sẽ bị thu hút vào tiêu đề và nút bấm “Analyze”.

Đây là kiểu giao diện đối xứng, đồng thời font chữ có kích thước lớn sẽ thúc giục người dùng sử dụng dịch vụ trên website này.

 

3. Phân tách các phần nội dung

Nếu bạn nghĩ rằng khoảng trắng là phần không gian lãng phí thì tôi sẽ giúp bạn làm thế nào để tiết kiệm được phần không gian đó.

Nếu bạn thấy không còn đủ chỗ trống để trình diễn sản phẩm, dịch vụ hay bất kỳ thứ gì khác nhằm thu hút sự chú ý của người dùng, có thể bạn sẽ đặt chúng sát lại với nhau đến mức hầu như không còn khoảng trắng nào ngăn cách.

Điều này sẽ khiến cho những phần nội dung đó trông gần như giống nhau hoặc không thể lôi kéo được nhiều sự chú ý, bởi vì chúng đã hòa trộn và chen chúc với nhau.

Có một giải pháp là thay đổi kích thước, thay đổi kết cấu, cách định hướng hoặc kết hợp toàn bộ các phương pháp trên.

Điều này sẽ tạo ra thêm nhiều khoảng trắng giữa những nội dung khác nhau trên trang web, giúp phân tách chúng với nhau và khiến cho người dùng dễ dàng đưa ra lựa chọn hơn.

Hãy xem qua cách phân chia những phần nội dung khác nhau trên trang web của CoSchedule.

 

 

Những phần nội dung của CoSchedule được sắp xếp để trình bày chỉ một nhóm nội dung trong cùng một thời điểm.

Với mỗi phần nội dung, họ sử dụng một hình ảnh và một đoạn mô tả ngắn.

Bởi vì bạn chỉ nhìn thấy một nhóm nội dung duy nhất trong cùng một thời điểm nên nó sẽ hoàn toàn thu hút được sự chú ý của bạn.

Bạn cũng có thể gộp các ô điền thông tin vào chung một form để tận dụng khoảng trắng.

Điều đó sẽ giúp người dùng dễ đọc form đăng ký hơn và nhiều khả năng là họ sẽ điền thông tin đăng ký.

Những form đăng ký có ít hoặc không có khoảng trắng sẽ trông khá khó chịu và hầu như người dùng sẽ không có đủ cảm hứng để điền thông tin cá nhân.

Ngoài ra, những form đăng ký đó sẽ tạo ấn tượng rằng nó đang yêu cầu quá nhiều thông tin mặc dù thực sự có thể lại không phải như vậy.

Dưới đây là ví dụ về 2 form đăng ký khác nhau – một form có sử dụng khoảng trắng, còn một form thì không.

Bạn có nhận thấy form sử dụng nhiều khoảng trắng cũng như không sử dụng những đường kẻ phân chia nội dung (form bên trái) sẽ tạo cảm giác các ô điền thông tin được gom lại thành một nhóm thống nhất không?

 

 

4. Dễ đọc nội dung hơn

Cuối cùng nhưng không kém phần quan trọng: khoảng trắng là yếu tố quyết định bạn có dễ dàng đọc được nội dung hay không.

Bạn sẽ không thể đọc trọn vẹn phần nội dung nếu chúng co khít lại với nhau và chỉ sử dụng một lượng khoảng trắng tối thiểu.

Sử dụng quá ít khoảng trắng sẽ khiến cho các chữ cái bị ép chặt lại với nhau và tạo cảm giác rất khó đọc.

Nhưng nếu sử dụng quá nhiều khoảng trắng thì bạn sẽ làm lãng phí không gian hiển thị và có thể câu chữ trông sẽ rời rạc.

Đó là lý do tại sao những nhà thiết kế hàng đầu thế giới lại cực kỳ chú tâm vào font chữ và kiểu chữ.

Dưới đây là ví dụ về 2 font chữ – BioRhyme Expanded và Cookie.

 

 

Font BioRhyme Expanded sử dụng quá nhiều khoảng trắng, trong khí font Cookie lại hơi khó đọc bởi vì khoảng trắng giữa các ký tự của font này không đủ lớn.

Bây giờ hãy so sánh với 2 font chữ trông rất cân đối dưới đây:

 

 

Những font chữ khác nhau sẽ sử dụng số lượng khoảng trắng khác nhau dựa trên từng kiểu chữ.

Tuy nhiên, một yếu tố quan trọng khác là kích thước font chữ.

Tiêu đề sẽ lớn hơn và sử dụng nhiều khoảng trắng hơn để trở nên nổi bật hơn với người dùng.

Một số khu vực nội dung khác sẽ sử dụng khoảng trắng để cải thiện trải nghiệm đọc của người dùng, bao gồm khoảng cách giữa các dòng chữ và canh lề cho đoạn văn.

 

Kết luận

Tóm lại, khoảng trắng trong công việc thiết kế là một trong những điểm giao thoa giữa nghệ thuật và khoa học.

Khi áp dụng một cách khoa học loại hình nghệ thuật này, bản thiết kế của bạn đạt hiệu quả cao hơn rất nhiều.

Đó sẽ là một bước tiến mới: đẹp hơn dù vẫn đơn giản hơn – ít hơn nghĩa là nhiều hơn.

Tôi hy vọng mình đã có thể thuyết phục bạn rằng khoảng trắng không phải là phần không gian vô giá trị trên trang web.

Ngược lại, khoảng trắng có giá trị tương đương với nội dung trên website, nếu không muốn nói đó là yếu tố định hình nên cấu trúc và cải thiện khả năng tương tác trên trang web.

Bạn có nghĩ rằng mình có thể cải thiện thiết kế của website bằng cách sử dụng khoảng trắng không?

Nếu có, bạn sẽ làm như thế nào?

Chúng tôi mong được bạn chia sẻ trong phần bình luận bên dưới!

Nguồn: Hack Inbound

Add comment