Kiến thức thiết kế website và giao diện số hôm nay khó có thể thiếu phần nói riêng về dark mode. Đây là chế độ hiển thị mà ngày càng nhiều người dùng chọn làm mặc định. Cách đây không lâu, đội ngũ chúng tôi tiếp nhận một website mà bên làm trước đó xử lý dark mode khá vội. Họ chỉ đơn giản đảo nền trắng thành đen tuyền, chữ đen thành trắng tinh. Nhìn bản demo ban ngày thì có vẻ ổn thỏa. Nhưng khi bật thử vào buổi tối, độ tương phản quá gắt giữa nền đen và chữ trắng khiến mắt mỏi chỉ sau vài phút đọc. Một số icon quan trọng gần như tan biến, vì màu quá tối so với nền mới. Chúng tôi phải ngồi thiết kế lại từ đầu. Nền đen tuyệt đối được đổi sang xám than, độ sáng từng thành phần được cân chỉnh lại kỹ lưỡng. Kết quả sau đó mới thực sự là một dark mode dễ chịu để dùng lâu dài.

Vì sao dark mode là phần không thể thiếu trong kiến thức thiết kế website và giao diện số

Vài năm trước, dark mode còn được xem là tính năng phụ, làm cho có để theo trend. Giờ thì khác hẳn rồi. Nhiều hệ điều hành di động và trình duyệt đã đặt dark mode làm gợi ý mặc định vào buổi tối. Người dùng cũng dần quen tay bật chế độ tối ngay khi mở app hoặc website mới. Từ kinh nghiệm rà soát nhiều dự án, chúng tôi nhận thấy tỷ lệ người bật dark mode trên điện thoại thường cao hơn hẳn trên máy tính, đặc biệt với nhóm xem web vào buổi tối hoặc trước khi ngủ.

Lý do không chỉ nằm ở sở thích cá nhân. Màn hình OLED trên nhiều điện thoại đời mới tiêu thụ ít điện hơn khi hiển thị pixel đen, vì pixel đó gần như tắt hẳn. Mắt người cũng đỡ mỏi hơn khi đọc chữ trên nền tối trong không gian thiếu sáng. Chính vì những lý do thực tế này, dark mode không còn là món trang trí thêm cho đẹp mắt. Nó dần trở thành một phần kiến thức thiết kế website và giao diện số mà bất kỳ ai làm web cũng nên nắm vững, dù bạn là designer, marketer hay chủ doanh nghiệp tự quản lý website của mình.

Nguyên tắc giúp dark mode đẹp ở cả hai chế độ

Nguyên tắc đầu tiên, cũng là nguyên tắc nền tảng nhất mà đội ngũ chúng tôi luôn nhắc nhau: đừng dùng màu đen tuyệt đối làm nền chính. Đen tuyệt đối kết hợp với chữ trắng tinh tạo ra độ tương phản quá cao. Mắt người phải điều tiết liên tục để đọc, dẫn tới mỏi mắt nhanh hơn nhiều so với tưởng tượng. Thay vào đó, nên chọn tông xám đậm, kiểu xám than hoặc xám xanh nhạt, làm nền chính. Chữ cũng nên dùng xám sáng thay vì trắng tinh. Cách phối này giữ được độ dễ đọc mà không gây chói mắt.

Hình ảnh và biểu tượng cũng cần được xử lý lại khi chuyển sang nền tối. Phần lớn icon, hình minh họa ban đầu được vẽ cho nền sáng. Khi đặt thẳng lên nền tối mà không chỉnh sửa gì, chúng dễ bị mất chi tiết hoặc trông lạc lõng. Đội ngũ chúng tôi thường chuẩn bị riêng bộ icon phiên bản dark, hoặc ít nhất cũng giảm độ bão hòa màu, tăng nhẹ độ sáng để icon vẫn nổi bật trên nền tối mà không chói.

Có một nguyên tắc khác ít người để ý, đó là cách phân lớp giao diện bằng độ sáng thay vì đường viền. Ở chế độ sáng, ta hay dùng bóng đổ hoặc đường kẻ để tách các khối nội dung. Trên nền tối, bóng đổ gần như vô hình. Cách làm hiệu quả hơn là dùng nhiều sắc độ xám khác nhau cho từng lớp giao diện, lớp nào càng nổi lên trên thì màu càng sáng hơn một chút. Nếu website của bạn đang chạy trên WordPress và cần thử nghiệm nhiều phiên bản giao diện trước khi chốt bản chính thức, có thể xem thêm cách dùng nhiều giao diện cùng lúc trên WordPress để việc thử nghiệm sáng – tối diễn ra thuận tiện hơn.

Màu thương hiệu cũng cần được cân chỉnh riêng cho dark mode, đây là điều nhiều đội thiết kế hay bỏ qua. Một màu cam rực dùng làm nút bấm trên nền trắng có thể trông ổn. Nhưng đặt y nguyên màu đó lên nền xám than, nó dễ trở nên chói mắt hoặc lệch tông so với phần còn lại của giao diện. Cách xử lý phổ biến là giảm nhẹ độ bão hòa, hoặc chọn một biến thể tối hơn một chút của màu thương hiệu, miễn sao vẫn giữ được sự nhận diện mà không gây khó chịu cho mắt.

Nói rộng ra, tất cả những nguyên tắc trên nên được tính đến ngay từ lúc lên ý tưởng giao diện, chứ không phải chờ website chạy được một thời gian rồi mới sửa. Với những doanh nghiệp đang chuẩn bị làm website bán hàng hoàn toàn mới, đội ngũ chúng tôi luôn khuyên nên đưa dark mode vào bản thiết kế đầu tiên. Bạn có thể tham khảo dịch vụ thiết kế website bán hàng để được tư vấn giao diện chuẩn ngay từ đầu, tránh phải sửa đi sửa lại tốn kém về sau.

Những lỗi thường gặp khi bắt tay làm dark mode

Lỗi phổ biến nhất mà chúng tôi hay gặp khi rà soát website mới chuyển sang dark mode là chữ có độ tương phản quá thấp. Một số designer muốn giao diện trông “mềm” hơn nên chọn màu chữ gần sát màu nền. Kết quả là văn bản mờ nhạt, đọc rất mệt, nhất là với người lớn tuổi hoặc người có thị lực kém. Chúng tôi từng thấy một trang tin có phần mô tả bài viết gần như biến mất trên nền tối, vì màu chữ xám chỉ đậm hơn nền đúng vài sắc độ.

Một số chi tiết nhỏ cũng hay bị bỏ sót khi đội thiết kế chuyển đổi giữa hai chế độ: đường viền, bóng đổ, trạng thái hover khi rê chuột. Đây là những phần tử ít được kiểm tra kỹ trong quá trình bàn giao. Nếu không rà lại từng cái, giao diện dễ trông thiếu đồng bộ. Người dùng có thể không nói ra được lỗi cụ thể là gì, nhưng vẫn cảm nhận website “có gì đó chưa ổn”.

Ít ai để ý cho đến khi gặp phải, đó là khoảnh khắc chuyển đổi giữa hai chế độ cũng cần được kiểm tra kỹ. Nhiều website chỉ test kỹ giao diện tĩnh ở từng chế độ riêng lẻ. Đến lúc người dùng bấm nút đổi chế độ thì màn hình nhấp nháy, giật hình khó chịu trong tích tắc. Chi tiết nhỏ này ảnh hưởng không nhỏ tới cảm nhận chuyên nghiệp của cả website.

Nếu doanh nghiệp bạn đang tìm đơn vị có kinh nghiệm xử lý những lỗi kiểu này ngay từ bản thiết kế đầu tiên, có thể tham khảo thêm công ty thiết kế website hiện đại để hình dung rõ hơn tiêu chuẩn giao diện chuyên nghiệp hiện nay, bao gồm cả phần dark mode.

Kiểm tra dark mode trên nhiều thiết bị trước khi ra mắt

Trước khi công bố phiên bản dark mode chính thức, chúng tôi luôn dành riêng một buổi để kiểm tra trên nhiều thiết bị khác nhau. Màn hình OLED và LCD hiển thị màu đen không giống nhau. Trên OLED, đen sâu và thuần hơn nhiều, khiến độ tương phản với chữ sáng gắt hơn so với khi xem trên LCD. Một giao diện dark mode trông ổn trên laptop văn phòng chưa chắc đã ổn khi mở trên điện thoại có màn hình OLED.

Trình duyệt cũng là yếu tố cần kiểm tra kỹ. Chrome, Safari, Firefox đôi khi render màu sắc và font chữ hơi khác nhau, đặc biệt với các gam màu tối có độ bão hòa thấp. Công cụ giả lập dark mode ngay trong DevTools của Chrome là cách nhanh để kiểm tra sơ bộ. Tuy nhiên vẫn nên xem lại trên thiết bị thật trước khi chốt bản chính thức. Với những dự án lớn, đội ngũ chúng tôi thường lập một checklist ngắn gồm độ tương phản chữ, độ rõ icon, trạng thái hover, và tốc độ chuyển đổi, rồi rà từng mục trên ít nhất ba loại thiết bị phổ biến nhất của tệp khách hàng mục tiêu.

Đo lường hiệu quả dark mode sau khi triển khai

Thiết kế xong dark mode không có nghĩa là công việc đã hoàn tất. Chúng tôi luôn khuyên khách hàng theo dõi thêm một thời gian sau khi ra mắt bản cập nhật. Xem thử tỷ lệ thoát trang, thời gian ở lại trang có thay đổi gì không, đặc biệt với nhóm truy cập vào khung giờ tối. Nếu tỷ lệ thoát tăng bất thường ngay sau khi đổi giao diện, rất có thể một vài thành phần trong dark mode đang gây khó chịu cho người đọc.

Công cụ quen thuộc nhất cho việc này vẫn là Google Analytics. Bạn có thể lọc dữ liệu theo khung giờ, so sánh hành vi người dùng trước và sau khi cập nhật dark mode. Với những trang có traffic đang giảm dần mà chưa rõ nguyên nhân, cách phân tích này còn giúp phát hiện nhiều vấn đề khác ngoài giao diện. Đội ngũ chúng tôi từng viết khá kỹ về việc phân tích dữ liệu Google Analytics để tìm điểm rơi traffic, bạn có thể đọc thêm nếu muốn đào sâu hơn về phần đo lường này.

Ngoài số liệu, phản hồi trực tiếp từ người dùng cũng đáng quý không kém. Một khung khảo sát ngắn, hoặc đơn giản chỉ là nút phản hồi nhỏ cạnh nút chuyển chế độ, đôi khi cho ra insight mà số liệu không nói hết được. Có khách hàng của chúng tôi từng nhận phản hồi rằng nút chuyển dark mode đặt quá khuất, phải mò mẫm mới tìm ra. Đó là chi tiết nhỏ nhưng ảnh hưởng trực tiếp tới trải nghiệm, dù giao diện dark mode bên trong đã làm rất chỉn chu.

Một giao diện chỉn chu cho cả hai chế độ

Quay lại câu chuyện website mà chúng tôi kể ở đầu bài, sau khi thiết kế lại đúng nguyên tắc, phản hồi từ người dùng thay đổi rõ rệt. Không còn ai than phiền về việc mỏi mắt khi đọc ban đêm. Các icon vốn từng biến mất giờ hiển thị rõ ràng trên nền xám than. Bài học rút ra khá đơn giản: dark mode không phải là phép đảo màu cơ học. Đó là một bài toán thiết kế cần được cân nhắc kỹ như bất kỳ phần giao diện nào khác.

Một website được đầu tư kỹ cho cả hai chế độ hiển thị luôn để lại ấn tượng chuyên nghiệp hơn hẳn so với việc làm dark mode cho có. Nếu bạn đang cân nhắc nâng cấp giao diện hoặc xây mới, hãy dành thời gian kiểm tra kỹ từng chi tiết nhỏ, từ màu chữ, icon, cho tới khoảnh khắc chuyển đổi giữa hai chế độ. Đó chính là phần kiến thức thiết kế website và giao diện số đáng để đầu tư ngay từ đầu, thay vì sửa chữa về sau.