Lightbox

Uma sobreposição que mostra imagem ou vídeo em destaque sobre a página, escurecendo o fundo sem tirar a pessoa do lugar.

Hard

O que é

Lightbox é uma camada que abre por cima da página com a mídia em foco, seja imagem, vídeo ou galeria. O fundo escurece ou borra, a atenção vai toda pro conteúdo, e a pessoa interage com ele sem precisar sair da página onde já estava.

O ganho principal é a continuidade. Sem lightbox, ver a imagem maior exigiria abrir outra página e depois voltar pelo botão do navegador, o que quebra o fluxo e ainda faz perder a posição na rolagem. Com lightbox, abrir e fechar parece mais como dar zoom num detalhe da mesma experiência.

Um bom lightbox tem saída fácil e óbvia, como clicar fora, apertar Esc ou usar um botão de fechar visível, além de navegação confortável entre os itens e transição rápida. E a acessibilidade não é opcional: ao abrir, o foco precisa ir pra dentro dele e voltar pro gatilho ao fechar, com o papel de diálogo anunciado pro leitor de tela.

Em uma frase

Vamos abrir a foto ampliada num lightbox pra pessoa folhear as imagens sem sair da página do produto.

A pergunta que ele responde

Como eu amplio uma imagem sem tirar a pessoa da página em que ela estava?

Quando usar

Ajuda pra dar destaque a conteúdo focado e contido, como imagem, vídeo, mapa ou prévia de documento, sempre que faz sentido ampliar algo sem tirar a pessoa do contexto.

Como não usar

O cuidado é não colocar tarefa complexa, como um formulário de vários passos, dentro de um lightbox, nem deixar só uma saída escondida. Os dois prendem a pessoa num espaço apertado e sem rota clara de saída.

Na prática

Pense na vitrine de um produto em que clicar na miniatura abre a foto ampliada em lightbox. Assim a pessoa folheia as imagens sem perder a página do produto, voltando pra ela com um clique.

Não confunda com

Vale separar lightbox de página dedicada. O lightbox mantém a pessoa no lugar, com a mídia em destaque sobre o conteúdo. A página dedicada exige sair e depois voltar. Um preserva o contexto da navegação, o outro interrompe e recomeça, e isso muda bastante a sensação de fluidez.

D

Em inglês

Lightbox

Pronúncia

láit-bóks

Também chamado de

lightbox, sobreposição de mídia, overlay de imagem

Origem

n/a

Fonte

Saiba mais

Nielsen Norman Group, artigo sobre modais e overlays