Modal là gì, giải thích đơn giản nhất
Modal (đọc là “mâu-đồ”) là một hộp giao diện bật lên ngay giữa màn hình, che lên trên nội dung trang chính và yêu cầu người dùng tương tác trước khi tiếp tục. Trong khi modal đang mở, phần còn lại của trang bị mờ đi hoặc không thể bấm được.
Bạn chắc đã gặp modal nhiều lần mà không biết tên của nó. Hộp đăng nhập hiện ra khi bạn click “Đăng nhập”, cửa sổ xác nhận “Bạn có chắc muốn xoá không?”, hộp đăng ký email bật ra khi bạn đọc qua khoảng 60% bài viết, đây đều là modal. Nó bật ra, làm xong việc, rồi đóng lại.
Modal còn được gọi bằng nhiều tên khác: modal dialog, dialog box, popup (theo nghĩa rộng), hay lightbox (dạng modal chuyên để xem ảnh/video phóng to). Về kỹ thuật có khác biệt nhỏ giữa các tên này, nhưng trong giao tiếp hàng ngày người ta thường dùng lẫn nhau.
Cấu trúc của một modal đúng chuẩn
Một modal hoàn chỉnh gồm ba thành phần chính, thiếu bất kỳ cái nào cũng ảnh hưởng tới trải nghiệm người dùng.
Overlay (lớp phủ): lớp màu tối hoặc mờ che phủ toàn bộ trang phía sau hộp modal. Vai trò là tập trung sự chú ý của người dùng vào cái modal, đồng thời báo hiệu rõ ràng rằng họ đang ở trong một luồng hành động cần hoàn tất. Bấm vào overlay thường đóng modal lại, nhưng không phải lúc nào cũng nên làm vậy (ví dụ modal xác nhận xoá thì không nên đóng khi bấm overlay, vì dễ gây thao tác nhầm).
Hộp modal: phần nổi lên trên overlay, chứa tiêu đề, nội dung, và các nút hành động. Kích thước hộp tùy mục đích: modal hiển thị ảnh phóng to thì to, modal xác nhận “có/không” thì nhỏ gọn là đủ.
Nút đóng (✕): bắt buộc phải có và phải dễ thấy. Đây là lối thoát cho người dùng. Đặt ở góc trên bên phải của hộp là vị trí người dùng quen tìm nhất. Nếu modal không có nút đóng rõ ràng, người dùng cảm thấy bị “bẫy”, tỷ lệ bỏ trang tăng lên.
Modal, tooltip và dropdown khác nhau như thế nào?
Ba thứ này dễ bị nhầm vì cùng là những thành phần “hiện thêm” trên giao diện, nhưng mỗi cái phục vụ mục đích hoàn toàn khác.
Modal chặn tương tác với phần còn lại của trang, yêu cầu người dùng phải xử lý xong mới tiếp tục. Tooltip thì ngược lại, chỉ hiện chú thích nhỏ khi rê chuột vào, không chặn gì cả, người dùng vẫn làm việc bình thường. Dropdown là menu thả xuống để chọn một trong các phương án, người dùng chọn xong là xong, không cần bước xác nhận.
Nhầm lẫn phổ biến nhất là dùng modal ở chỗ chỉ cần tooltip, hoặc dùng dropdown ở chỗ cần modal. Ví dụ: muốn giải thích ý nghĩa của một từ viết tắt trong form, tooltip là đủ, không cần bật modal ra giải thích một đoạn dài. Ngược lại, muốn người dùng xác nhận xoá dữ liệu quan trọng, dropdown là sai chỗ vì không đủ “nặng ký” để người ta chú ý.
Modal giúp ích hay làm người dùng bỏ trang?
Câu trả lời là cả hai, tùy vào cách dùng.
Modal hữu ích khi nó xuất hiện đúng lúc người dùng cần. Bạn vừa bấm “Đặt hàng”, hộp xác nhận đơn hàng bật ra, bạn kiểm tra lại rồi bấm “Thanh toán”, đây là luồng tự nhiên và modal làm tốt vai trò của mình. Hay khi bạn click vào ảnh thumbnail để xem ảnh lớn, modal phóng to ảnh lên ngay giữa màn hình thay vì nhảy sang trang mới, nhanh hơn, mượt hơn.
Modal gây bực khi nó xuất hiện sai lúc. Ví dụ điển hình nhất là popup mời đăng ký email bật lên chỉ sau 3 giây kể từ khi người ta mở trang. Người dùng chưa kịp đọc gì, chưa biết nội dung có hay không, đã bị hỏi “Bạn có muốn nhận tin không?”. Phản ứng thông thường là đóng nó lại ngay, thậm chí bỏ luôn trang nếu cảm thấy bị làm phiền quá.
Nghiên cứu về hành vi người dùng cho thấy tỷ lệ đóng modal sớm (bounce) tăng đáng kể khi modal bật lên trong 5 giây đầu. Ngược lại, modal xuất hiện sau khi người dùng đã đọc 50 đến 70% nội dung, hoặc sau khi họ thực hiện một hành động cụ thể (cuộn tới cuối trang, dừng con trỏ ở nút thoát…), tỷ lệ tương tác cao hơn nhiều.
Khi nào nên dùng modal, khi nào không
Dùng modal khi bạn cần người dùng tập trung vào một hành động cụ thể và không muốn họ bị phân tâm bởi phần còn lại của trang. Xác nhận xoá dữ liệu, form đăng nhập, thêm sản phẩm vào giỏ hàng nhanh, xem ảnh phóng to, nhập mã giảm giá, đây là những tình huống modal phù hợp.
Không dùng modal khi nội dung cần hiển thị quá dài. Nếu bạn đang cân nhắc nhét 5 đoạn văn vào một cái hộp bật lên, đó thường là dấu hiệu nên làm trang riêng thay vì modal. Modal thiết kế cho những nội dung gọn, tương tác nhanh.
Không dùng modal để hiển thị quảng cáo hay nội dung mà người dùng chưa yêu cầu ngay khi trang vừa load. Google từng có hướng dẫn cụ thể về việc popup che nội dung chính ngay khi người dùng vào trang có thể ảnh hưởng tới thứ hạng tìm kiếm, đặc biệt trên thiết bị di động. Nếu cần dùng modal kiểu này, hãy đợi ít nhất 15 đến 30 giây sau khi trang load xong.
Muốn tìm hiểu thêm về các thành phần giao diện liên quan, xem bài tooltip là gì và carousel là gì, hai thứ cũng hay bị dùng sai chỗ không kém modal.
Những sai lầm phổ biến khi thiết kế modal
Không có lối thoát rõ ràng là sai lầm nghiêm trọng nhất. Một số modal thiếu nút đóng, hoặc đặt nút đóng ở vị trí quá nhỏ và khó bấm. Người dùng không biết cách đóng nó lại, họ sẽ chọn cách đơn giản nhất là thoát khỏi trang. Nút đóng cần đủ lớn (ít nhất 44x44px trên thiết bị cảm ứng), màu sắc tương phản rõ với nền, đặt ở góc trên bên phải.
Modal không có “focus trap” là lỗi về khả năng tiếp cận (accessibility). Khi modal mở, phím Tab của bàn phím cần bẫy focus bên trong modal, không được nhảy sang các phần tử phía sau overlay. Người dùng dùng bàn phím điều hướng (bao gồm người dùng thiết bị hỗ trợ) sẽ bị mất phương hướng nếu Tab cứ nhảy ra ngoài modal đang mở.
Nhồi quá nhiều nội dung vào modal là cái bẫy thường gặp. Khi nội dung dài hơn chiều cao màn hình, modal cần scroll bên trong, và điều đó tạo ra vùng scroll lồng nhau với scroll trang chính, gây khó chịu đặc biệt trên điện thoại. Nếu nội dung không gọn trong một màn hình, hãy xem xét dùng trang riêng.
Bạn cũng có thể xem thêm về hamburger menu là gì và above the fold là gì để có cái nhìn toàn cảnh hơn về các thành phần giao diện website.
Người không rành kỹ thuật cần biết gì về modal?
Nếu bạn đang quản lý một website và thấy tỷ lệ người dùng bỏ trang cao bất thường, modal xuất hiện quá sớm hoặc quá thường xuyên là một trong những nguyên nhân cần kiểm tra đầu tiên.
Bạn không cần tự code hay sửa gì. Chỉ cần quan sát: vào trang của mình bằng điện thoại, thử duyệt như một người dùng mới, xem có cái gì bật lên không cần thiết không, có khó đóng không, có che mất nội dung chính không. Những quan sát đó đủ để đưa ra yêu cầu cụ thể cho đội kỹ thuật.
Nếu bạn muốn xem xét lại cách dùng modal và các thành phần giao diện khác trên website của mình, dịch vụ thiết kế UI/UX của Web22 có thể giúp bạn đánh giá và đề xuất cải tiến phù hợp.
Câu hỏi thường gặp về modal
Modal và popup khác nhau không?
Trong thiết kế web hiện đại, hai từ này thường dùng lẫn nhau. Về mặt kỹ thuật, modal là kiểu popup chặn tương tác với phần còn lại của trang cho đến khi người dùng xử lý xong. “Popup” theo nghĩa rộng hơn bao gồm cả những hộp nhỏ xuất hiện ở góc màn hình, thông báo đẩy, hay các phần tử nổi lên khác mà không nhất thiết phải chặn tương tác trang.
Modal có ảnh hưởng tới tốc độ trang không?
Ít ảnh hưởng nếu làm đúng. Modal thường là một phần tử HTML ẩn, chỉ hiện ra khi cần, không ảnh hưởng tới quá trình load trang ban đầu. Vấn đề tốc độ chỉ xảy ra nếu modal cần tải thêm dữ liệu từ server khi mở (ví dụ modal xem chi tiết sản phẩm phải gọi API), lúc đó cần xử lý loading state cho tốt.
Làm thế nào để modal đóng được bằng phím Escape?
Đây là kỳ vọng mặc định của người dùng. Hầu hết framework và thư viện UI đều xử lý sẵn tính năng này. Nếu tự code, cần lắng nghe sự kiện keydown và đóng modal khi phím Escape được nhấn. Thiếu tính năng này thì modal kém khả năng tiếp cận (accessibility) và cũng bực người dùng quen dùng bàn phím.
Modal trên điện thoại có vấn đề gì đặc biệt cần lưu ý không?
Có hai điểm hay bị bỏ qua. Một là kích thước: modal không nên rộng hơn 90% chiều rộng màn hình điện thoại, và cần thêm khoảng cách từ mép màn hình để người dùng không bấm nhầm ra ngoài. Hai là bàn phím ảo: khi modal chứa trường nhập liệu, bàn phím ảo hiện ra và có thể che mất phần nội dung hoặc nút bấm của modal. Cần test kỹ trên thiết bị thật, không chỉ trên trình giả lập.