Bạn đang duyệt một trang web hoặc nhấp vào một số nút, ngay lập tức trang mờ đi và một cửa sổ bật lên xuất hiện trên màn hình của bạn hiển thị một số thông báo hoặc kêu gọi một hành động, chẳng hạn như đăng ký danh sách email hoặc tải xuống nội dung bài viết.

Có thể bạn sẽ thấy vui vẻ khi thấy cửa sổ bật lên này, nhưng cũng có thể bạn sẽ ngạc nhiên và bối rối. Nhưng cho dù bạn phản ứng thế nào, cửa sổ này chắc chắn đã thu hút sự chú ý của bạn. Theo thuật ngữ thiết kế web, kiểu hiển thị này được gọi là modal, tuy nhiên trong phạm vi bài viết này chúng ta sẽ thống nhất gọi đây là pop-up - cửa sổ bật lên.

Có 2 ý kiến trái chiều về vấn đề này, nhiều người nhận thấy đây là một cách hay để nhanh chóng thu hút sự chú ý, trong khi những người khác coi đây là một sự gián đoạn không tích cực đối với trải nghiệm người dùng.

Trong thực tế, tất cả phụ thuộc vào việc liệu pop-up có được thiết kế tốt và có mục đích hay không. Khi được thực hiện đúng, chúng có thể là một yếu tố hữu ích cho cả người dùng và doanh nghiệp. Trong bài đăng này, chúng ta sẽ cùng xem xét điều gì sẽ khiến các pop-up hoạt động hiệu quả. Chúng tôi cũng sẽ thảo luận về thời gian, địa điểm và cách đặt các pop-up trên trang web của bạn.

Khi nào thì doanh nghiệp nên sử dụng các pop-up?

Cửa sổ pop-up sẽ có hiệu quả khi bạn cần người dùng xem hoặc làm điều gì đó cụ thể. Chúng thường xuất hiện sau một số hoạt động của khách hàng như khách hàng nhấp vào nút nào đó, sự kiện đang diễn ra hoặc khi khách hàng có ý định thoát. Các cách sử dụng phổ biến nhất của pop-up trong thiết kế web bao gồm cảnh báo, xác nhận, biểu mẫu, hiển thị phương tiện và các quy trình liên quan.

Cảnh báo, xác nhận thông tin

Đối với những thời điểm mà người dùng thực sự nên nhìn thấy một thứ gì đó thì các cửa sổ pop-up sẽ rất xuất sắc trong việc thu hút sự chú ý của người dùng. Các cửa sổ này có thể chứa cảnh báo về một sự kiện hoặc lỗi quan trọng, cảnh báo về kết quả của một số hành động hoặc xác nhận quá trình đã hoàn thành. Ví dụ:

Các biểu mẫu

Nếu quy trình trên trang web của bạn yêu cầu người dùng gửi thông tin cho bạn, bạn có thể đặt biểu mẫu bên trong cửa sổ pop-up. Bạn sẽ thường thấy đây là trang thay thế cho trang dành riêng để đăng nhập/ đăng ký hoặc trang quảng cáo nhận tin qua email, cung cấp ưu đãi hoặc mã giảm giá.

Các nội dung đa phương tiện

Phương tiện thường được dùng để hỗ trợ nội dung chính của trang web và thêm hiệu ứng âm thanh cho trải nghiệm duyệt web. Tuy nhiên, nếu thư viện hình ảnh hoặc video đóng vai trò là tiêu điểm trên trang web của bạn, thì một cửa sổ pop-up cho phép khách truy cập xem nó một cách riêng biệt mà không cần mở nó trong một trang khác.

Người dùng có thể nhấp vào hình thu nhỏ trên trang, trang web sẽ mở ra một cửa sổ nhỏ hiển thị hình ảnh liên quan, có thể dễ dàng điều hướng bằng các nút mũi tên ở cả hai bên cửa sổ. 

Một lợi ích bổ sung của việc sử dụng các cửa sổ để hiển thị hình ảnh/ video là hiệu quả về không gian. Phương tiện có xu hướng chiếm khá nhiều không gian trên trang, nhưng việc làm cho thư viện hoặc trình phát video có thể truy cập được bằng hình thu nhỏ sẽ tiết kiệm được những không gian có giá trị trên web.

8 cách ứng dụng cửa sổ bật lên hiệu quả 

  • Sử dụng có mục đích và không lạm dụng

  • Làm mờ các nội dung phía sau cửa sổ

  • Nội dung hiển thị và điều hướng rõ ràng

  • Cung cấp nút thoát khỏi cửa sổ

  • Điều chỉnh kích thước cửa sổ phù hợp

  • Hiển thị và tắt cửa sổ với hiệu ứng làm mờ

  • Hạn chế sử dụng cửa sổ trên phiên bản di động

  • Tăng sự tiện dụng cho các cửa sổ

1. Sử dụng có mục đích và không lạm dụng

Người dùng thường không thích các cửa sổ bật lên bởi sự bất ngờ không dễ chịu khi chúng xuất hiện trong hành trình trải nghiệm của khách hàng và mọi thứ sẽ còn tệ hơn nếu bạn điều hướng khách hàng qua một trang khác mà chưa được sự đồng ý của họ. Vì thế khi xây dựng các pop-up hãy nghĩ đến những lợi ích có thể đem lại cho khách hàng chứ không chỉ phục vụ nhu cầu của doanh nghiệp.

Đối với các cảnh báo - các lỗi quan trọng và các hành động không thể thay đổi được nên được thông báo qua các cửa sổ bật lên. Đối với các biểu mẫu, hãy tuân theo những biểu mẫu thu thập thông tin cần thiết hoặc ít nhất là cải thiện đáng kể trải nghiệm của họ trên trang web của bạn. 

2. Làm mờ các nội dung phía sau cửa sổ

Để thu hút mọi sự chú ý vào các cửa sổ một cách hiệu quả, tất cả các yếu tố nền phải được loại bỏ dần về mặt trực quan và chức năng phía sau cửa sổ con.

Về mặt trực quan, trang nền nên được làm mờ và/ hoặc làm tối hầu hết hoặc tất cả các phần tử chính. Điều này tạo cảm giác rằng cửa sổ nằm phía trên nội dung khác, áp dụng việc bóng đổ xung quanh cửa sổ cũng có thể tạo ra hiệu ứng này.

Về mặt chức năng, hãy đảm bảo rằng không có phần tử trang nào bên ngoài cửa sổ có thể nhấp hoặc có thể chọn được thông qua bàn phím, đồng thời cân nhắc việc tắt tính năng cuộn.

3. Nội dung hiển thị và điều hướng rõ ràng

Để giúp người dùng nhanh chóng hiểu lý do tại sao các cửa sổ được bật lên, hãy làm cho tất cả văn bản ngắn gọn và rõ ràng nhất có thể. Tất cả các cửa sổ phải bao gồm văn bản tiêu đề cho biết ý định của cửa sổ hoặc hành động được yêu cầu. Nội dung của các CTA cũng nên được thiết kế ngắn gọn và trực quan.

4. Cung cấp nút thoát khỏi cửa sổ

Một cửa sổ hiệu quả là cho phép ít nhất một hành động, tùy chọn để đóng nó. Quy ước nói rằng cửa sổ sẽ xuất hiện sau khi người dùng nhấn phím thoát hoặc nhấp vào biểu tượng “X” hoặc văn bản “Đóng” ở góc trên cùng bên trái hoặc bên phải của cửa sổ.

Bạn cũng có thể chọn đóng cửa sổ khi người dùng nhấp vào bên ngoài cửa sổ và cân nhắc đặt nút “Hủy” bên cạnh nút “Tiếp tục”.

5. Điều chỉnh kích thước cửa sổ phù hợp

Các cửa sổ sẽ xuất hiện dưới dạng một lớp hiện bên trên trang chủ. Nếu bạn đặt nó quá lớn người dùng có thể nghĩ rằng họ đã bị chuyển sang một trang hoàn toàn mới; ngược lại nếu các cửa sổ quá nhỏ người dùng có thể hiểu nhầm đây là một quảng cáo. Kích thước hợp lý phù hợp của một cửa sổ là tối đa 50% chiều rộng và chiều cao của cửa sổ trình duyệt.

6. Hiển thị và tắt cửa sổ với hiệu ứng làm mờ

Thêm hiệu ứng chuyển tiếp để dễ dàng chuyển từ cửa sổ mẹ sang cửa sổ con. Việc làm mờ dần nội dung nền và làm mờ dần cửa sổ phương thức sẽ hiệu quả trong hầu hết mọi trường hợp vì nếu các cửa sổ xuất hiện và không có các hiệu ứng chuyển tiếp có thể gây khó chịu cho một số người.

7. Hạn chế sử dụng cửa sổ trên phiên bản di động

Tất cả các tính năng thiết kế trong bài viết này mô tả đều hoạt động tốt cho web phiên bản máy tính nhưng đối với thiết bị di động lại là một câu chuyện khác. Kích thước màn hình điện thoại sẽ khiến giao diện cửa sổ khó hiển thị mà tránh khỏi các trường hợp xuất hiện quá lớn hoặc quá nhỏ.

Hãy cân nhắc việc không sử dụng các cửa sổ đối với các phiên bản di động, với trường hợp bạn vẫn thích sử dụng các pop-up trên trang web dành cho thiết bị di động của mình, hãy kiểm tra để đảm bảo rằng chúng phản hồi nhanh, dễ đọc và dễ sử dụng.

8. Tăng sự tiện dụng cho các cửa sổ

  • Mọi hành động có thể nhấp trong cửa sổ cũng nên được thiết kế để có thể thực hiện được với bàn phím. Phím thoát sẽ đóng cửa sổ và các phím tab và phím enter có thể được sử dụng để chọn các tùy chọn.

  • Tất cả các phần tử khác bên ngoài cửa sổ sẽ không thể truy cập được bằng bàn phím khi cửa sổ đang được bật.

  • Cửa sổ phải tương phản trực quan với trang nền.

  • Các chuyển tiếp vào và ra khỏi cửa sổ phải mượt mà và không phức tạp.

  • Mọi hình ảnh, video hoặc các mục phương tiện khác phải bao gồm văn bản mô tả thay thế.

  • Tất cả văn bản và phương tiện có thể được giải thích bằng trình đọc màn hình và các công nghệ hỗ trợ khác.

Làm thế nào để cài đặt các cửa sổ pop-up cho trang web? 

Ứng dụng Pop-up Window được Haravan cung cấp miễn phí cho Nhà bán hàng, nhằm hỗ trợ hoạt động kinh doanh của Nhà bán hàng.

Với ứng dụng Pop-up Window, Nhà bán hàng dễ dàng thiết lập, tùy chỉnh và thay đổi cập nhật cho pop-up theo ý muốn chỉ với vài cú nhấp chuột. Để cài đặt và sử dụng ứng dụng Pop-up Window miễn phí hãy truy cập tại đây. Nếu bạn vẫn chưa sở hữu trang web của riêng mình, bắt đầu ngay hôm nay với Haravan.