O Hover é usado em sites há anos como uma maneira de fornecer um trecho de informação aos visitantes sem desencadear uma ação. Com smartphones e tablets assumindo gradualmente a Internet, precisamos dar uma atenção maior ao criar um site. Como as telas sensíveis ao toque não conseguem lidar com o foco, precisamos procurar alternativas para efeitos de foco. Se você estiver configurando seu próprio site ou não tiver recursos para contratar um web designer profissional, este tutorial é para você.
Você pode gerenciar efeitos de foco instantâneo com telas sensíveis ao toque, mas pode ser um pouco estranho. Pode ser melhor projetá-los completamente e usar algo completamente diferente. Se você usá-los em seu site para computador, geralmente tem três alternativas para passar o mouse em sites para celular:
- Remova-os completamente e substitua-os pela ação principal.
- Adicione um menu secundário onde você pode tocar uma vez para o efeito de foco e novamente para a ação principal.
- Coloque as informações instantâneas em sua própria página.
Tudo funcionará bem em telas sensíveis ao toque e em desktops, mas exigirá alguns ajustes de design para implementar em um design existente. Você também pode contornar isso com JavaScript ou código jQuery inteligente, se tiver as habilidades necessárias, mas se estiver tentando descobrir tudo por conta própria, pode ser melhor usar alternativas de design do que código. Se você quiser explorar alternativas de código para efeitos de foco, visite esta página.
Remova efeitos de foco instantâneo do seu design
A menos que você possa empregar um web designer freelancer para ajudá-lo, é melhor remover completamente os efeitos de foco. Certamente eles parecem organizados e podem oferecer informações adicionais úteis, mas sempre há outras maneiras de obter o mesmo efeito.
Você pode manter a ação do menu como a ação principal e incluir as informações suplementares em outras partes da página. Você pode usar caixas de interrupção, pop-ups, aumentar o conteúdo do descritor para o ponto que você está tentando destacar ou algo mais. Se você não possui as habilidades necessárias para implementar o jQuery, esta é provavelmente a opção mais simples.
Adicionar um menu secundário
Um menu secundário inclui o primeiro toque que simularia um efeito de foco. Você pode incluir as informações no menu e mostrar um segundo menu no mesmo elemento. Esse segundo menu atua como a seleção real, como aconteceria em uma área de trabalho. A primeira pressão simula a passagem do mouse e a segunda pressão simula o usuário executando a ação principal.
Essa é uma alternativa elegante para efeitos de foco, mas é limitada pelo tamanho da tela e limita a quantidade de informações que você pode adicionar ao seu efeito. Os efeitos de foco flutuante são limitados por sua natureza, mas são mais limitados no celular pela propriedade da tela com a qual você está lidando. Se você realmente deseja incluir dados suplementares de maneira não padrão, pode ser isso.
Coloque as informações instantâneas em sua própria página
Talvez uma opção mais fácil seja incluir as informações de foco em sua própria página com um link de texto. Isso simplifica seu menu e mantém a navegação direta. O hyperlink funciona em vários dispositivos e você obtém uma página extra para o tamanho do site e SEO. A desvantagem é que você terá que aumentar o conteúdo suplementar em pelo menos 300 palavras ou mais para fazê-lo funcionar.
Desde que você consiga preencher as informações com cuidado o suficiente para que elas sejam lidas bem e agreguem valor ao leitor, pessoalmente acho que essa é a melhor alternativa. A decisão de onde colocar esses links para os dados suplementares depende de você e dependerá do seu design, mas páginas extras oferecem uma oportunidade extra de adicionar apelos à ação, adicionar seu número de telefone, endereço de email e qualquer informação extra que possa ser usada fazer uma venda.
Ficar com pairar
Se você deseja usar algum tipo de efeito de foco no site principal, precisará inseri-lo no site móvel ou na versão móvel, pelo menos. Existem alternativas de menu de alternância ou soluções JavaScript, mas elas precisam de um especialista para serem implementadas. Esta página discute suas alternativas, caso você queira explorá-las ainda mais.
Uma das armadilhas mais fáceis de cair quando você está iniciando por conta própria ou construindo seu primeiro site é projetar para si e não para o seu público. Você certamente precisa criar algo que goste, mas, ao considerar a usabilidade, deve priorizar o público. Você também deve levar em consideração os dispositivos que eles usarão e a maneira como eles provavelmente se envolverão melhor com seu site.
Se seu público for jovem, eles usarão o celular. Se eles usam dispositivos móveis, efeitos de foco e outras opções de design como essa não são a melhor opção.
