Đã 10 tháng trôi qua kể từ khi chúng tôi giới thiệu Page Builder Sandwich tới công chúng. Hiện tại chúng tôi có khoảng 6.000 lượt cài đặt đang hoạt động, và đó là một thành tựu khá lớn đối với chúng tôi. Nhờ đó, chúng tôi cũng nhận được rất nhiều phản hồi, cả khen lẫn chê. Tuy nhiên, điểm chung mà mọi người đều đồng tình là họ rất thích sự dễ dàng khi xây dựng bố cục và tạo nội dung so với các công cụ tạo trang khác hiện có.

Một phần lớn các phản hồi chúng tôi nhận được là yêu cầu tính năng, và chúng tôi đã bổ sung rất nhiều tính năng đó trong vài tháng qua. Nhưng khi tiếp tục làm như vậy, chúng tôi cũng bắt đầu từ từ thay đổi giao diện người dùng trong quá trình này. Và hệ quả là, chúng tôi cũng đang thay đổi trải nghiệm người dùng… theo chiều hướng tệ hơn. Mọi chuyện đã đi đến mức chúng tôi cần phải suy nghĩ lại về giao diện, bởi vì nó đơn giản là không còn hoạt động mượt mà nữa, và các tính năng khác nhau cũng không còn ăn khớp với nhau.

Giao diện cũ không còn hiệu quả

Trong các phiên bản trước của PBS, chúng tôi muốn mọi thứ đều ở dạng các nút bấm. Tại sao? Bởi vì các nút bấm rất dễ sử dụng. Bạn chỉ cần… nhấp vào chúng. Ở các phiên bản cũ hơn của bảng điều khiển (thanh bên ở hình ảnh trên), nhấp vào một nút sẽ tăng giá trị, sau đó giữ phím shift + nhấp vào một nút sẽ giảm giá trị đó. Nghe có vẻ đủ dễ dàng. Nhưng với việc bổ sung carousel, tab, bản đồ cùng các yếu tố và tính năng mới khác, tất cả các nút đó đã trở thành một mớ hỗn độn các biểu tượng khác nhau với các thiết kế khác nhau, và bắt đầu trông giống chữ tượng hình hơn là một giao diện tuyệt vời. Điều này không phải là vấn đề đối với những người dùng kỳ cựu, nhưng nó khá đáng sợ nếu bạn là người mới làm quen với PBS.

Tiếp theo, có một vài vấn đề xuất hiện trên bảng điều khiển. Ý tưởng ban đầu là làm cho mọi thứ trở nên đơn giản và có sẵn bên trong bảng điều khiển. Và ý tôi khi nói mọi thứ là tất cả mọi thứ – từ chuyển văn bản thành tiêu đề, đến thay đổi màu nền, màu phông chữ, v.v. Tuy nhiên, ở trạng thái hiện tại, bảng điều khiển giờ đây chứa rất nhiều tùy chọn khiến bạn phải dùng con lăn chuột để cuộn lên xuống liên tục. Khá khác biệt so với bảng điều khiển mà trước đây tôi hy vọng sẽ tạo ra cho người dùng.

Cuối cùng, gần đây chúng tôi đã giới thiệu ánh xạ shortcode cho các plugin yêu thích của bạn. Tính năng này đòi hỏi chúng tôi phải tạo các trường văn bản, thanh trượt số, hộp kiểm và các loại tùy chọn mới bổ sung cần thiết để giúp trải nghiệm chỉnh sửa shortcode của bạn dễ chịu hơn. Ban đầu, đó là một ý tưởng hay, và đúng vậy, nó giúp việc thao tác với shortcode dễ dàng hơn cho bạn. Nhưng một lần nữa, tính năng này lại đi chệch khỏi giao diện “chỉ dùng nút” của chúng tôi. Nhìn lại thì việc chỉ dùng các nút bấm để thay đổi thuộc tính shortcode thực sự là điều bất khả thi. Giờ đây, trong phiên bản mới nhất, chúng tôi lại có 2 loại điều khiển: các nút bấm và các trường shortcode.

Còn một vài lý do nữa khiến chúng tôi quyết định rằng giao diện của mình không còn hiệu quả (hoặc không còn phù hợp với nhu cầu của chúng tôi), nhưng các điểm trên là những điểm chính. Tuy nhiên, có một điều luôn chắc chắn: chúng tôi biết rằng mình phải cập nhật giao diện.

Xác định cách một công cụ tạo trang lý tưởng nên hoạt động

Thay vì vội vàng lao vào và thay đổi mọi thứ ngay lập tức, chúng tôi đã lùi lại một trăm bước để xem xét toàn bộ trải nghiệm công cụ tạo trang. Chúng tôi muốn mang lại sức sống mới cho giao diện. Thành thật mà nói, chúng tôi không muốn cứ phải xây dựng lại nó năm này qua năm khác. Điều đó thật mệt mỏi và chắc chắn không mang lại sự trợ giúp đáng kể nào cho cộng đồng WordPress. Lần này, chúng tôi quyết định làm mọi thứ chậm rãi và cẩn thận. Chúng tôi đã nghiên cứu từng ngóc ngách của Page Builder Sandwich và những gì làm cho nó trở thành một công cụ tạo trang tốt, và cuối cùng đã cụ thể hóa toàn bộ trải nghiệm chỉnh sửa thành một vài khái niệm cốt lõi.

Khái niệm cốt lõi #1: Gõ trực tiếp vào nội dung để chỉnh sửa

Một trong những lý do chính để cài đặt một công cụ tạo trang là thoát khỏi những ràng buộc của trình chỉnh sửa văn bản backend của WordPress. Không phải là trình chỉnh sửa backend không tốt, nhưng khi tạo các trang web của mình, nó không hiển thị ngay cho bạn thấy trang web sẽ trông như thế nào đối với khách truy cập, cũng như không cho phép bạn bố trí nội dung của mình ngoài bố cục một cột. Bạn chỉ có thể thấy văn bản của mình ở đó và một vài hình ảnh, nhưng không có những thứ phức tạp hơn (ví dụ: biểu mẫu liên hệ). Bạn có thể thêm shortcode, đúng vậy, nhưng chúng sẽ không hiển thị ở định dạng đã kết xuất*.

* Có những plugin do người khác tạo ra để giải quyết vấn đề này chẳng hạn như Shortcake UI, nhưng đó lại là chuyện khác.

Đó là lúc các công cụ tạo trang frontend phát huy tác dụng. Chúng đưa trải nghiệm chỉnh sửa ra khỏi backend và đưa vào frontend, giúp bạn chỉnh sửa trang web của mình theo đúng cách mà khách truy cập sẽ thực sự nhìn thấy. Như Pippin đã diễn đạt: Thấy là được (WYSIWYG).

Một điểm hay khác của trình chỉnh sửa frontend là nó cho phép bạn chỉnh sửa văn bản trực tiếp. Việc nhập tiêu đề và đoạn văn mang lại sự dễ dàng như khi sử dụng trình xử lý văn bản thông thường trong việc xây dựng trang web. Các nút và nhãn tab cũng có thể thay đổi được chỉ bằng cách nhấp vào chúng và gõ văn bản.

Đây là lĩnh vực mà hầu hết các công cụ tạo trang khác không làm tốt. Hầu hết chúng đều bắt bạn phải gõ bên trong một trường văn bản để chỉnh sửa mọi thứ. Một lần nữa, điều này không nên xảy ra trong các công cụ tạo trang frontend thực sự. Gõ và chỉnh sửa văn bản trực tiếp đã là một thế mạnh của Page Builder Sandwich kể từ phiên bản 2, và chúng tôi đảm bảo rằng điều này vẫn được duy trì trong phiên bản 3.

Khái niệm cốt lõi #2: Tận dụng chuột để tinh chỉnh nhanh

Chuột là một công cụ mạnh mẽ thường bị bỏ quên trong các công cụ tạo trang. Thông thường, các công cụ tạo trang sử dụng chuột để cho phép mọi người kéo thả các thứ xung quanh đến các vị trí khác nhau, hoặc để nhấp vào các nút hoặc trường nhập liệu. Mặc dù điều này ổn, nhưng bạn có thể làm được nhiều hơn thế với chuột khi xây dựng trang.

Thứ nhất, có phản hồi trực quan tuyệt vời khi sử dụng chuột làm công cụ chỉnh sửa trang, đặc biệt là trong việc điều chỉnh các thuộc tính trực quan như lề ngoài (margin), lề trong (padding) và kích thước. Giờ đây, việc tinh chỉnh các phần tử của bạn trở thành một trải nghiệm tự nhiên.

Trong PBS phiên bản 3, bạn sẽ có thể điều chỉnh nhiều thứ bằng chuột của mình. Bạn có thể điều chỉnh lề ngoài/khoảng cách giữa các phần tử riêng lẻ, lề trong bên trong các cột, cũng như kích thước của hình ảnh, biểu tượng và bản đồ. Chúng tôi cũng đã thay thế các nút cho phép bạn thay đổi giá trị số thành các thanh trượt.

Khái niệm cốt lõi #3: Định dạng văn bản phải dễ dàng

Nếu bạn lùi lại một bước khỏi màn hình, bạn sẽ nhận thấy rằng hầu hết những gì bạn thêm vào các trang web của mình đều là nội dung văn bản. Đúng vậy, chúng ta có hình ảnh và biểu tượng ở đó để đi kèm – và gần đây chúng ta có xu hướng thêm hình ảnh lớn hơn vào các trang web của mình. Nhưng phần lớn nội dung quan trọng đều là văn bản: tiêu đề, danh sách dấu đầu dòng, đoạn văn, trích dẫn, v.v. Cùng với đó là cách chúng ta định dạng văn bản để phù hợp với thiết kế của mình. Chúng ta thay đổi kích thước và màu sắc của chúng, hoặc in đậm hay in nghiêng. Điều này giúp nội dung của chúng ta dễ đọc hơn, phù hợp hơn và hấp dẫn hơn đối với độc giả tương ứng.

Bởi vì chúng ta định dạng văn bản thường xuyên, các nút cho phép thay đổi kiểu dáng nên rất dễ tiếp cận. Chúng không nên bị giấu kín bên trong một hộp bật lên (pop up) mà chúng ta phải mở ra trước. Hầu hết các công cụ tạo trang đều mắc phải căn bệnh này. Để giao diện người dùng của họ được dán nhãn là ‘gọn gàng’, ngay cả những tùy chọn được sử dụng nhiều nhất cũng bị che khuất khỏi tầm nhìn trực diện.

Để giải quyết vấn đề này, chúng tôi đã xem xét các trình xử lý văn bản được sử dụng phổ biến nhất. Chúng tôi nhận thấy rằng chúng thường có một hàng với rất nhiều nút gần phía trên cùng của màn hình được sử dụng để định dạng văn bản và chúng tôi đã sao chép bố cục tương tự cho phiên bản 3. Giờ đây, chúng tôi có một hàng gồm tất cả các nút định dạng văn bản luôn hiển thị ở đầu màn hình của bạn. Điều này giúp việc định dạng thực sự nhanh chóng và trở thành phản xạ tự nhiên của bạn khi chỉnh sửa văn bản.

Khái niệm cốt lõi #4: Các tùy chọn định dạng nâng cao phải linh hoạt nhưng dễ hiểu

Điểm mấu chốt của một công cụ tạo trang là nó phải cho phép mọi người tạo ra các thiết kế tuyệt đẹp một cách dễ dàng. Điều này có nghĩa là chúng tôi phải cung cấp nhiều cài đặt và tùy chọn khác nhau mà không làm cho việc học cách sử dụng trở nên khó khăn. Khả năng điều chỉnh lề ngoài, lề trong và định dạng văn bản là rất tuyệt, nhưng những điều đó chỉ có thể làm được bấy nhiêu. Bạn sẽ cần nhiều tùy chọn phức tạp hơn nữa để hoàn thành công việc, các tùy chọn như hình nền, họa tiết, đường viền, nền cố định và nhiều hơn nữa. Việc xếp chồng tất cả các cài đặt khác nhau đó có thể gây choáng ngợp một chút, vì vậy chúng tôi đã đơn giản hóa một số cài đặt và sắp xếp chúng thành các danh mục để làm cho mọi thứ thân thiện hơn trong phiên bản 3.

Khái niệm cốt lõi #5: Hỗ trợ Shortcode

Cuối cùng, đừng quên rằng công cụ tạo trang của chúng tôi được xây dựng trên nền tảng WordPress. Chúng tôi nên nắm lấy nền tảng này cùng các tính năng của nó chứ không phải hạn chế hay đi chệch khỏi chúng. Một tính năng khổng lồ mà WordPress cung cấp là shortcode. Điều đó không có nghĩa là toàn bộ nội dung phải được tạo thành từ shortcode – như thế sẽ rất lộn xộn – mà thay vào đó chúng tôi chỉ cần tương thích với chúng. Rất nhiều plugin và chủ đề sử dụng shortcode, và sẽ là một tổn thất lớn nếu bỏ qua tất cả chúng. Trên thực tế, shortcode mang lại cho người dùng sự linh hoạt tối đa khi tạo trang.

Vài tuần trước, chúng tôi đã giới thiệu hệ thống ánh xạ shortcode của mình, và nhờ đó chúng tôi đã ánh xạ hàng trăm shortcode từ hàng trăm plugin. Chúng tôi đã ưu tiên các plugin phổ biến nhất được tìm thấy trong thư mục plugin của WordPress, vì vậy rất có thể bạn sẽ bắt gặp chúng trong các trang web của chính mình. Điều này càng được củng cố trong phiên bản 3, và chúng tôi sẽ tiếp tục cải thiện điều này trên con đường phía trước.

Kết luận

Chúng tôi đã đưa tất cả những đặc tính thiết yếu kể trên vào Page Builder Sandwich phiên bản 3. Đây là công cụ tạo trang tốt nhất mà chúng tôi từng xây dựng cho WordPress cho đến nay. Nó trực quan hơn và sử dụng tự nhiên hơn, hoạt động nhanh hơn, dễ sử dụng hơn và thân thiện hơn bao giờ hết.

Nếu bạn có bất kỳ suy nghĩ nào về một tính năng thiết yếu của công cụ tạo trang, hãy cho chúng tôi biết bằng cách bình luận bên dưới.