7 mẹo thiết kế cửa sổ bật lên: Cách tạo cửa sổ bật lên không làm phiền khách truy cập

Ngay cả những quảng cáo hay nhất, sáng tạo nhất, thú vị nhất, đắt giá nhất cũng không hơn gì sự gián đoạn. Người xem không yêu cầu chúng và thường không muốn nhìn thấy chúng. Nhưng quảng cáo bật lên — như tên của nó — có tiếng là đặc biệt dễ xâm phạm. Giống như một pha dọa nhảy trong một bộ phim kinh dị, chúng là một sự ngạc nhiên trực diện của bạn. Đây là lý do tại sao thiết kế cửa sổ bật lên đặc biệt lại quan trọng: nó có thể làm cho cửa sổ bật lên không chỉ dễ chịu mà còn có sức thuyết phục.

Theo nghiên cứu của Sumo, mặc dù có tiềm năng làm trầm trọng thêm khách truy cập trang web, nhưng cửa sổ bật lên vẫn tồn tại vì lý do chính đáng: tỷ lệ trò chuyện của họ có thể đạt trung bình 9% ở hiệu suất cao nhất theo nghiên cứu của Sumo. Điều này làm cho việc thiết kế cửa sổ bật lên tốt không chỉ cần thiết để giảm bớt sự thất vọng của người dùng mà còn cho sự thành công trong kinh doanh. Với ý nghĩ đó, hãy cùng xem qua một số phương pháp hay nhất về cách tạo thiết kế cửa sổ bật lên có thể chuyển đổi.

1. Cân nhắc các tùy chọn của bạn cho các phong cách thiết kế cửa sổ bật lên
–

Cửa sổ bật lên cơ bản và phổ biến nhất là cửa sổ hình vuông xuất hiện ở giữa màn hình. Ưu điểm ở đây là không thể bỏ sót. Tất nhiên, đó chỉ là vì nó cắt trực tiếp tầm nhìn của người dùng. Mặc dù không có gì đặc biệt sai với cửa sổ bật lên truyền thống, nhưng nó thường được sử dụng làm mặc định khi có quá nhiều tùy chọn khác (có khả năng hiệu quả hơn) cần xem xét.

Một cửa sổ bật lên có thể xuất hiện ở bất kỳ vị trí nào trên màn hình và mỗi vị trí sẽ mang hàm ý về bản chất của thông tin. Phương pháp tiếp cận trung tâm tiêu chuẩn có xu hướng biểu thị điều gì đó đủ quan trọng để bạn sẵn sàng làm gián đoạn quá trình duyệt của người dùng. Nó thường được sử dụng để mua ngay lập tức hoặc trả phí cho nội dung (như trong báo chí trực tuyến).

Ngược lại, cửa sổ bật lên có thể trượt vào từ đầu hoặc cuối màn hình, cho phép người dùng tiếp tục tương tác với trang web trong khi cửa sổ bật lên hiện diện. Với cách tiếp cận này, khách truy cập có thể chọn thời điểm họ muốn tương tác với cửa sổ bật lên và họ được khuyến khích làm như vậy sớm hơn là muộn hơn nếu cửa sổ bật lên che phủ đủ trang để gây mất tập trung. Cách tiếp cận này thường được sử dụng cho các hành động ít cấp bách hơn, chẳng hạn như yêu cầu khách truy cập nhập địa chỉ email của họ.

Cuối cùng, một cửa sổ bật lên cũng có thể xuất hiện ở bên cạnh hoặc ở góc của trang. Do cách tiếp cận này không phô trương như thế nào, nên nó thường được sử dụng cho các nội dung tùy chọn, chẳng hạn như các mẹo hướng dẫn.

Thiết kế của Burhan Khawaja qua Dribbble.

Một cân nhắc thiết kế khác đôi khi bị bỏ qua là hoạt ảnh — cách cửa sổ bật lên xuất hiện trên màn hình có thể tạo ra sự khác biệt lớn về cách nó được tiếp nhận. Ví dụ, một lớp phủ mờ dần sẽ nhẹ nhàng hơn và ít chói tai hơn nhiều so với một lớp phủ đột ngột. Trong khi đó, một hoạt ảnh bật và trả lại theo nghĩa đen mang lại cảm giác vui vẻ và thân thiện. Các phương pháp tiếp cận nỗ lực cao hơn — như để các yếu tố khác nhau của cửa sổ bật lên xuất hiện thông qua các hoạt ảnh riêng biệt, độc đáo — làm cho cửa sổ bật lên có cảm giác ít giống một quảng cáo hơn và giống một tính năng sáng tạo, đáng giá của trang web.

2. Giữ cửa sổ bật lên phù hợp với thương hiệu
–

Như thể một cửa sổ bật lên không đủ thu hút sự chú ý, các cửa sổ bật lên (và mong muốn chuyển đổi ngay lập tức) thường tạo ra sự cám dỗ cho càng nhiều chuông và còi càng tốt. Điều này có thể dẫn đến các thiết kế làm nổi bật quá mức lời kêu gọi hành động (CTA), đôi khi có các mũi tên theo nghĩa đen, hoặc in đậm một số dòng sao chép hoặc lạm dụng quá nhiều màu đỏ, tất cả để đảm bảo rằng người dùng không bỏ lỡ quảng cáo chiêu hàng.

Những chiến thuật như thế này có xu hướng gợi nhớ đến miền Tây hoang dã, đó là Internet những năm 90, khi các quảng cáo bật lên ban đầu rất ồn ào và tự hào với màu sắc xung đột và văn bản nhấp nháy. Trên thực tế, chúng tệ đến mức người tạo ra cửa sổ bật lên ban đầu đã phải xin lỗi thế giới. Ngoài ra, các thương hiệu không đơn độc trong việc sử dụng cửa sổ bật lên — những kẻ lừa đảo thường sử dụng cửa sổ bật lên phổ biến với thiết kế báo động, thu hút sự chú ý để lừa người dùng tải xuống phần mềm độc hại.

Vì những lý do này, các nhà thiết kế nên để cửa sổ bật lên phù hợp với phần còn lại của thương hiệu trang web, ngay cả khi điều này dẫn đến một phong cách nhẹ nhàng hơn. Sử dụng hệ thống phân cấp trực quan để ưu tiên thông tin và hình ảnh hấp dẫn để thu hút sự chú ý của người xem. Điều này không chỉ dẫn đến một thiết kế trông gọn gàng hơn, mà nó sẽ thiết lập độ tin cậy của cửa sổ bật lên để nó xuất hiện như một cơ hội chứ không phải một mánh khóe. Nói chung, các thiết kế cho thấy rằng chúng cần sử dụng các kỹ thuật phô trương, không có thương hiệu để gây sự chú ý cho thấy sự thiếu tự tin vào giá trị của ưu đãi của cửa hàng bật lên.

3. Sử dụng ngôn ngữ màu sắc và hình dạng một cách hiệu quả
–

Bản sao quảng cáo của cửa sổ bật lên — miễn là nó được viết tốt — phải thực hiện công việc thuyết phục người dùng thực hiện một hành động. Nhưng ngôn từ không phải là công cụ duy nhất mà cửa sổ bật lên của bạn phải giao tiếp: các yếu tố thiết kế trực quan như màu sắc và hình dạng có thể tiếp cận người xem ở cấp độ cảm xúc.

Nếu bạn muốn giảm kích ứng mà cửa sổ bật lên có thể gây ra, một màu dịu nhẹ như xanh lam hoặc xanh lá cây hoặc một số dạng phấn có thể thực hiện được điều này. Trong khi đó, màu trắng tinh khiết có thể gợi ra cảm giác sạch sẽ và gọn gàng, đặc biệt là khi được kết hợp với nhiều không gian giữa các yếu tố. Về hình dạng, cửa sổ bật lên — giống như bất kỳ cửa sổ máy tính nào — theo mặc định là hình chữ nhật hoặc hình vuông. Việc thay đổi hình dạng này thành hình dạng tròn hơn làm cho thiết kế có vẻ gần gũi và thân thiện do không có các cạnh sắc nét.

Dù bạn quyết định chọn hình dạng hay màu sắc nào, điều quan trọng là bạn phải biết rằng lựa chọn của bạn đang nói lên người xem, cho dù bạn có ý định như vậy hay không.

4. Giữ cho nội dung cửa sổ bật lên của bạn rõ ràng và đi vào trọng tâm
–

Bởi vì bản chất cửa sổ bật lên là gián đoạn, phản ứng đầu gối thường gặp của người dùng là đóng chúng ngay lập tức. Thật khó để thuyết phục khách truy cập nhấp vào CTA trong những trường hợp lý tưởng nhất, nhưng cửa sổ bật lên có một khoảng thời gian đặc biệt nhỏ để hoàn thành mục tiêu của họ. Điều này dẫn đến các phong cách thiết kế cửa sổ bật lên chủ yếu là tối giản — rõ ràng và đi vào trọng tâm. Giá trị của hành động bạn muốn người dùng thực hiện phải rõ ràng trong nháy mắt.

Về cấu trúc cơ bản, bạn nên sử dụng một cửa sổ bật lên có những nội dung sau:

• Dòng tiêu đề thông báo ưu đãi hoặc chủ đề của cửa sổ bật lên
• Hỗ trợ sao chép mở rộng về giá trị của phiếu mua hàng
• Một hình ảnh hấp dẫn
• CTA
• Nút đóng

Trong thực tế, một số cửa sổ bật lên có thể cần bao gồm nhiều hơn (chẳng hạn như trường đầu vào cho email) và nhiều cửa sổ chọn bao gồm ít hơn (chẳng hạn như bỏ bản sao hoặc hình ảnh hỗ trợ). Cuối cùng, điều đó phụ thuộc vào những gì bạn đang cố gắng hoàn thành và khả năng khách truy cập trang web của bạn sẽ ở lại để nghe trường hợp của bạn. Chuyển tiếp đến # 7 để biết các mẹo về thử nghiệm để hiểu rõ hơn về người xem của bạn.

5. Đừng bỏ qua nút đóng
–

Quảng cáo bật lên được tạo ra để chuyển đổi (hoặc hữu ích theo một cách nào đó), chứ không phải để đóng. Nhưng tất nhiên, khả năng đóng lại là điều cần thiết đối với thiết kế cửa sổ bật lên. Vấn đề của trải nghiệm người dùng tốt là đảm bảo người dùng có thể thực hiện các hành động họ cần, ngay cả khi đó là những hành động mà bạn không nhất thiết muốn họ thực hiện.

Về thiết kế, một dấu X đơn giản ở góc trên cùng bên phải thường là đủ. Ngay cả khi đây không phải là sự lựa chọn thiết kế nguyên bản nhất, nó là nơi tự nhiên nhất mà người dùng sẽ tìm kiếm nó. Nhiều nhà thiết kế xóa nút đóng và đây có thể là một chiến thuật hữu ích – khả năng thoát không nên bị ẩn, nhưng nó cũng không nhất thiết phải là thứ nổi bật nhất trên cửa sổ bật lên.

Ngoài ra, nút đóng đôi khi được trình bày cùng với CTA ở dạng nút hình chữ nhật truyền thống. Làm như vậy chắc chắn sẽ làm giảm CTA và nhấn mạnh một hoặc / hoặc sự lựa chọn. Đồng thời, đây có thể là một cách tiếp cận tốt nếu bạn thay đổi văn bản trên nút đóng để làm rõ ràng rằng người dùng không chỉ thoát ra khỏi cửa sổ bật lên mà còn bỏ lỡ điều gì đó (“Tôi không muốn tiết kiệm 15 % ”). Đôi khi điều này được đặt bên dưới CTA trong một loại nhỏ hơn.

Vào cuối ngày, nếu người dùng muốn thoát khỏi cửa sổ bật lên, thiết kế chỉ nên cho phép họ làm như vậy, vì bất kỳ sự thất vọng nào thêm vào cửa sổ bật lên sẽ chuyển thành sự thất vọng với thương hiệu. Nói cách khác, nếu bạn sắp thua trận, hãy thiết lập bản thân để giành chiến thắng trong cuộc chiến thông qua trải nghiệm người dùng tốt.

6. Thiết kế riêng cho các phiên bản di động
–

Tạo phiên bản di động của cửa sổ bật lên bao gồm nhiều thứ hơn là thu nhỏ thiết kế. Trải nghiệm di động khác hẳn so với trải nghiệm trên máy tính để bàn.

Đầu tiên, ngoài kích thước nhỏ hơn, bạn nên xem xét tỷ lệ khung hình: điện thoại di động ở hướng dọc trong khi máy tính để bàn ở hướng ngang. Điều này có nghĩa là các thiết kế (và đặc biệt là bản sao) phải đọc tốt trong một cửa sổ cao hơn, hẹp hơn. Ngoài ra, phần lớn người truy cập sẽ mặc định sử dụng một tay và một ngón cái. Điều này có nghĩa là các trường biểu mẫu — phải đủ giới hạn trên cửa sổ bật lên trên máy tính để bàn — sẽ thậm chí còn cồng kềnh hơn đối với người dùng. Ngoài ra, các cửa sổ bật lên xuất hiện gần cuối màn hình sẽ dễ dàng tiếp cận ngón tay cái hơn.

Tuy nhiên, thiết kế dành cho thiết bị di động không phải là tất cả về hạn chế: các trang web dành cho thiết bị di động cũng có nhiều hình thức đầu vào hơn so với máy tính để bàn — chẳng hạn như vuốt, chụm và nhấn ở các áp lực khác nhau — và thiết kế cửa sổ bật lên có thể sử dụng điều này cho nhiều tương tác bất ngờ hơn.

Cửa sổ bật lên dành cho thiết bị di động thường được đặt ở cuối màn hình. Thiết kế bởi Oğuz Yağız Kara qua Dribbble.

Tất cả những điều này muốn nói rằng ngay cả khi bạn đã thiết kế một phiên bản dành cho máy tính để bàn của cửa sổ bật lên, bạn phải dành nhiều công sức cho một phiên bản dành cho thiết bị di động riêng biệt. Ngày nay, nhiều nhà thiết kế áp dụng cách tiếp cận ưu tiên thiết bị di động trong thiết kế kỹ thuật số (trong đó phiên bản dành cho thiết bị di động được tạo ra trước kích thước màn hình lớn hơn) và không có lý do gì bạn không thể tiếp cận thiết kế cửa sổ bật lên theo cách tương tự. Làm như vậy cho phép bạn bắt đầu đơn giản và thêm chi tiết khi kích thước màn hình tăng lên (trái ngược với nhiệm vụ của Sisyphean là đơn giản hóa phiên bản chi tiết của thiết kế).

7. Điều chỉnh thiết kế cửa sổ bật lên của bạn dựa trên thử nghiệm
–

Mặc dù (giống như tất cả các thiết kế) có nghệ thuật liên quan đến thiết kế cửa sổ bật lên, nhưng cuối cùng nó phụ thuộc vào hiệu suất. Cách duy nhất bạn sẽ biết thiết kế của mình là tốt là nếu nó hoạt động: có nghĩa là, nó đang chuyển đổi khách hàng. Tỷ lệ chuyển đổi trung bình của các cửa sổ bật lên thành công là khoảng 3%.

Đây là lý do tại sao phần quan trọng nhất của quy trình thiết kế cửa sổ bật lên là kiểm tra và phân tích. Khi bạn đã đánh giá hiệu suất của thiết kế so với mục tiêu của mình (đối với mục tiêu này, bạn có thể sử dụng chuyển đổi trong quá khứ cùng với tỷ lệ chuyển đổi trung bình đã đề cập trước đó), bạn phải hành động dựa trên những phát hiện của mình bằng cách điều chỉnh thiết kế. Một phương pháp đặc biệt phổ biến là thử nghiệm A / B, trong đó bạn đặt hai phiên bản thiết kế khác nhau trước hai phân khúc người dùng khác nhau để xem phiên bản nào hoạt động tốt hơn. Bạn có thể sử dụng thử nghiệm A / B để thay đổi các yếu tố cụ thể của thiết kế để khám phá công thức nào có thể dẫn đến chuyển đổi cao hơn.

Điểm mấu chốt là không quan trọng cửa sổ bật lên của bạn trông tuyệt vời như thế nào đối với bạn hay nó được thiết kế tốt về mặt lý thuyết như thế nào — điều quan trọng là khách truy cập của bạn nghĩ gì.

Nâng cấp thiết kế cửa sổ bật lên của bạn
–

Cửa sổ bật lên vốn dĩ không gây phiền toái cho người dùng. Giống như rất nhiều yếu tố khác của giao diện kỹ thuật số, chính thiết kế sẽ quyết định trải nghiệm đó là một trải nghiệm thú vị hay khó chịu. Tất cả chỉ là vấn đề góc độ: thiết kế cửa sổ bật lên có thể làm gián đoạn người xem bằng quảng cáo hoặc cảnh báo họ về một cơ hội. Mặc dù các mẹo mà chúng tôi đã cung cấp ở đây là một nơi tuyệt vời để bắt đầu tạo cửa sổ bật lên mà khách truy cập của bạn sẽ thực sự đánh giá cao, nhưng thiết kế cửa sổ bật lên tốt cuối cùng phụ thuộc vào việc hợp tác với một nhà thiết kế giỏi.