Nội dung trước hay thiết kế trước cho website?

Chốt nhanh

Nội dung nên đi trước, hoặc ít nhất đi song song với thiết kế, chứ không phải nhét chữ vào khung làm sẵn. Khi thiết kế ra trước mà chưa có nội dung thật, đội dễ dùng chữ giả kéo dài và luồng trang bị rối vì thông điệp chưa được xác định. Cách làm tốt nhất là chốt chiến lược nội dung và bản nháp đại diện sớm, rồi mới dựng khung theo đúng thực tế đó.

Nội dung nên đi trước. Không phải vì thiết kế kém quan trọng hơn, mà vì thông điệp là thứ quyết định bố cục, độ dài từng khối, và thứ tự ưu tiên trên trang. Khi thiết kế được vẽ ra trước khi có nội dung thật, đội làm việc đang dựng nhà mà chưa biết sẽ ở mấy người.

Tại sao thứ tự này quan trọng

Thiết kế website không chỉ là việc chọn màu sắc hay font chữ. Bố cục của một trang quyết định khách đọc gì trước, tin gì, và hành động gì tiếp theo. Tất cả những điều đó xuất phát từ nội dung, không phải từ khung hình.

Khi thiết kế đi trước, đội thường phải dùng chữ giả (Lorem ipsum, tức văn bản tạm để giữ chỗ) để lấp đầy các ô. Chữ giả không có độ dài thật, không có thông điệp thật, nên khung nhìn đẹp trên màn hình designer nhưng vỡ ngay khi nội dung thật được điền vào. Tệ hơn, chữ giả đôi khi bám lại tới tận lúc trang chạy thật vì không ai rà soát kỹ.

Ngược lại, khi nội dung được xác định trước, từng khối thiết kế có căn cứ rõ: tiêu đề dài bao nhiêu, đoạn dẫn cần bao nhiêu dòng, danh sách có mấy mục. Thiết kế lúc đó phục vụ nội dung thay vì ép nội dung phải vừa khung.

Các yếu tố cần cân nhắc

Thông điệp đã rõ chưa: Nếu Anh Chị chưa biết trang muốn nói gì, chưa biết điểm bán chính là gì, thì thiết kế ra trước sẽ chỉ là vỏ đẹp không có ruột.
Độ dài thật của từng khối nội dung: Tiêu đề ngắn hay dài, đoạn mô tả dịch vụ có mấy câu, danh sách lợi ích có mấy điểm, tất cả ảnh hưởng trực tiếp tới bố cục. Chỉ nội dung thật mới cho con số này.
Rủi ro chữ giả bám lại: Mỗi lần chữ giả không được thay bằng nội dung thật trước khi bàn giao, trang chạy với lỗ hổng. Rủi ro này chỉ xảy ra khi thiết kế đi trước.
Sự phối hợp giữa người viết và người thiết kế: Nếu Anh Chị làm việc với đội có cả hai vai trò này, họ có thể đi song song từ sớm. Nhưng người viết phải vào trước hoặc cùng lúc, không phải sau.

Khi nào chọn hướng nào

Nội dung trước, thiết kế sau: Phù hợp khi thông điệp phức tạp, nhiều điểm bán, hoặc nội dung là linh hồn của trang (trang dịch vụ chuyên sâu, trang tuyển dụng, trang giới thiệu thương hiệu). Đây là hướng an toàn nhất cho hầu hết dự án.

Song song từ sớm: Phù hợp khi đội có cả người viết và người thiết kế cùng vào việc từ ngày đầu, chiến lược nội dung đã được chốt và bản nháp đại diện đã có, thiết kế có thể điều chỉnh theo nội dung thật trong quá trình lặp.

Khung trước, nội dung sau: Chỉ chấp nhận được khi Anh Chị dùng bản nháp thật (dù thô) chứ không phải chữ giả, và đội biết rõ sẽ phải chỉnh lại khung sau khi nội dung hoàn thiện.

Nội dung định hình bố cục, không phải bố cục định hình nội dung. Khi thiết kế lấy nội dung làm gốc, thông điệp và nhu cầu người dùng được đặt ở trung tâm.
Medium, Content-First Design

Lỗi thường gặp

Để chữ giả qua ngày phát hành: Đội bận, không ai kiểm tra lại, trang chạy thật với ô trống hoặc chữ vô nghĩa. Phòng tránh bằng cách không dùng chữ giả ngay từ đầu.
Thiết kế đẹp nhưng thông điệp mờ: Khách vào trang, nhìn thấy hình ảnh và màu sắc đẹp, nhưng không hiểu trang muốn nói gì, không biết bước tiếp theo là gì. Đây là hệ quả trực tiếp của việc thiết kế đi trước khi chưa có chiến lược nội dung.
Coi viết nội dung là bước điền vào ô cuối cùng: Khi nội dung bị đẩy về cuối quy trình, người viết bị ép phải co chữ vừa khung, cắt bỏ thông tin quan trọng, hoặc độn thêm chữ vô nghĩa. Cả hai đều hại chuyển đổi.

Góc nhìn của Sinh Vũ

Trong quy trình của Sinh Vũ, chiến lược nội dung và luồng trải nghiệm được xác định ở giai đoạn đầu, trước khi thiết kế giao diện bắt đầu. Sinh Vũ viết nội dung dẫn hành động, không chỉ vẽ khung đẹp, để mỗi trang có thông điệp rõ trước khi có giao diện hoàn thiện.

Lý do thực tế: khi thông điệp rõ, thiết kế nhanh hơn và ít phải làm lại hơn. Khi thông điệp mờ, đội có thể làm đi làm lại nhiều vòng mà trang vẫn không chuyển đổi được khách, vì vấn đề nằm ở nội dung, không phải màu sắc hay font chữ.

Anh Chị không cần bản nội dung hoàn hảo trước khi thiết kế bắt đầu. Nhưng cần ít nhất: thông điệp chính của từng trang, thứ tự ưu tiên thông tin, và bản nháp đại diện cho từng khối quan trọng. Đó là đủ để thiết kế đi đúng hướng ngay từ đầu.

Nguồn tham khảo

Medium (Content-First Design): UX success starts with words. Built In: Copy or Design, Which Comes First in UX. A List Apart: Priority Guides, a Content-First Alternative to Wireframes.

Câu hỏi thường gặp

Nếu tôi thuê agency thiết kế, họ thường làm theo thứ tự nào?

Nhiều agency bắt đầu bằng wireframe (bản khung bố cục) rồi dùng chữ giả để lấp đầy. Cách này nhanh về mặt quy trình nội bộ nhưng rủi ro là nội dung thật sau đó không vừa khung, hoặc thông điệp bị ép theo bố cục thay vì dẫn dắt bố cục. Anh Chị nên yêu cầu agency làm việc từ nội dung nháp thật ngay từ sớm, không phải chữ giả.

Tôi chưa biết viết gì, có thể để thiết kế trước cho có cái nhìn rồi mới viết không?

Được, nhưng chỉ khi dùng bản nháp ý thật, dù thô, chứ không phải chữ giả. Thiết kế trước với chữ giả thường dẫn tới tình trạng trang đẹp nhưng khi điền nội dung thật vào thì lộn xộn, vì độ dài và ưu tiên thông tin hoàn toàn khác. Nếu chưa viết được, hãy bắt đầu bằng việc liệt kê các điểm cần nói theo thứ tự quan trọng, đó là đủ để thiết kế đi đúng hướng.