Erros no design e na usabilidade são as falhas pelas quais os visitantes criticam o site, não querem comprar nada, se recusam a se inscrever e ir para os concorrentes. Na maioria das vezes, esses erros estão relacionados a mau funcionamento técnico, lógica, navegação, design, marketing e conteúdo do site.
Neste artigo, examinaremos exemplos de grandes erros de UX e destacaremos sessenta problemas comuns, cuja correção garante um aumento na conversão.
Em caso de dúvida, você precisa - leia a história do Vasya descontente. Ele conta como, devido a um erro, a loja online perdeu um cliente comum.
Como Vasya escolheu um microfone em uma loja on-line com pouca usabilidade
O nome do nosso amigo é Vasya. Ele é um youtuber iniciante que precisava de um microfone para gravar vídeos. Seu futuro microfone deve ter três características: preço baixo, som nítido e demanda pelo Avito.
O último ponto é especialmente importante, porque com a dublagem pode não funcionar e nosso YouTube não é avesso a devolver a maior parte do dinheiro investido. Os requisitos são formulados e Vasya vai atrás do microfone para o site de uma loja online confiável.
Devido à navegação cuidadosa, Vasya não se perdeu e rapidamente encontrou a categoria "Microfones".
Quando Vasya abriu a categoria "Microfones", ele imediatamente encontrou o primeiro problema na forma de um filtro de rubricagem mal concebido. Este filtro não é adequado para iniciantes, pois requer uma compreensão do tema do microfone. É difícil sem isso:
Como não havia pistas no rubricador, a Vasya filtrou as mercadorias de acordo com a sua finalidade e selecionou microfones de estúdio. A lógica aqui é esta: se o estúdio é de alta qualidade. Tudo o resto é secundário e incompreensível.
Na seção "Microfones", Vasya foi atendida por um filtro complexo, que um iniciante não pode configurar adequadamente. Se você conhece um tópico, não pode escolher um microfone adequado.
Sob o título de microfones de estúdio, Vasya organizou os produtos com preços crescentes e optou pelo microfone Superlux HO8 por US $ 50. Esta é a opção mais econômica dos microfones de estúdio disponíveis e, de acordo com as avaliações dos clientes, vale a pena. É isso que você precisa para um youtuber iniciante. Vasya faz a compra e já concordou com o cliente para dar voz ao primeiro vídeo.
A escolha de Vasya é um microfone Superlux HO8 de US $ 50.
Vasya espera o pacote, imprime o microfone, conecta-o ao computador e recebe um som repugnante. É tudo sobre alimentação fantasma, sem a qual o Superlux HO8 não pode funcionar totalmente. Uma linha é dada a esse momento no cartão do produto, que Vasya perdeu devido à inexperiência.
Uma fonte de alimentação fantasma é um elemento adicional sem o qual o microfone de estúdio Superlux HO8 não soa normalmente. No cartão do produto, esse momento é escrito em uma linha, da qual um iniciante despreparado pode facilmente faltar.
Em seguida, Vasya começou a coletar informações independentemente sobre o microfone selecionado e descobriu as seguintes nuances:
- No site da mesma loja on-line, a instalação mais barata da alimentação fantasma ZEEPIN 48V. Custa cerca de US $ 37 e está disponível apenas em pré-venda. O custo de instalações mais caras começa em US $ 65.
- Além da alimentação fantasma para o microfone Superlux HO8, você precisa adquirir um suporte e um filtro pop. Ainda não coloca uma placa de som externa e uma tela acústica para suprimir ruídos desnecessários. Juntos, isso é pelo menos US $ 100.
- Em vez de todas as opções acima, você pode comprar um microfone USB econômico que atenda às necessidades de um youtuber iniciante. Por exemplo, por US $ 50, você pode comprar o Trust GXT 232; e por US $ 85 - Blue Microphones Snowball iCE.
O que aconteceu como resultado: Vasya jogou dinheiro em vão e não usou o microfone comprado, e o proprietário da loja online perdeu um cliente comum.
Instalação de uma phantom power de US $ 37 ZEEPIN 48V.
Para evitar a perda de um cliente, o proprietário de uma loja on-line deve analisar seus produtos de uma perspectiva iniciante e apostar no conteúdo educacional - adicione dicas, artigos ou vídeos úteis a todos os produtos complexos. Se Vasya descobrisse sobre o phantom power em tempo hábil, ele não compraria um produto que não precisava: ele iria para a página com um microfone Superlux HO8 → aprenderia sobre o phantom power nas instruções abertas → iria para um artigo que detalha as configurações de phantom → material estudado sobre variedades microfones → Eu voltaria à lista de microfones e escolheria a melhor opção com um conector USB dentre as ofertas disponíveis. Todos ficariam satisfeitos e continuariam a cooperação. E, portanto, ressentimento e preocupação com os concorrentes.
A falta de conteúdo educacional é um dos muitos erros cometidos pelos proprietários de lojas online. Falaremos sobre outros assuntos mais tarde.
Parte técnica
Baixa velocidade de download
Aproximadamente 40% dos usuários deixarão o site se não virem a aparência original nos primeiros três segundos. O mesmo número de visitantes sairá imediatamente após clicar em uma seção e congelará novamente. Para evitar isso, você precisa realizar testes constantemente, otimizar imagens pesadas e verificar a velocidade dos downloads de fontes. Uma situação separada com o vídeo é que, se não houver nada sem eles, você precisará investir fundos adicionais e pensar em aumentar a capacidade produtiva do site. Se o vídeo puder ser substituído por texto e imagens, é melhor fazê-lo. A velocidade do download é mais importante que o formato do conteúdo.
Site de carregamento longo.
O exemplo mostra que o tempo de carregamento do site é de 9,83 segundos. Esta não é uma opção válida porque é raro os visitantes aguardarem mais de 3 segundos.
Arquivos de imagem pesados.
Imagens pesadas são um dos principais fatores que afetam a velocidade de carregamento do site. Portanto, se você precisar aumentar a velocidade, comece por recarregar as imagens.
Um grande número de solicitações durante o carregamento da página.
A Amazon conduziu uma pesquisa e calculou que, se a velocidade de download do site cair em pelo menos 100 ms, a conversão de vendas diminui imediatamente em 1%. Para evitar isso, os proprietários do site são incentivados a realizar dois tipos de testes. O primeiro teste deve ser realizado em tempo real e você pode calcular imediatamente as páginas lentas. O segundo teste deve ser periódico (uma vez por semana ou mês) e todos os elementos lentos podem ser corrigidos de acordo com seus resultados.
Links quebrados ou quebrados
Se o usuário acessou seu site, significa que ele estava interessado em algumas informações e essa é a informação que ele deve obter. Se isso não acontecer e um link quebrado aparecer no lugar da página que você está procurando, o usuário deixará o site, o colocará na lista negra e sempre entrará em contato com os concorrentes no futuro.
Não apenas os usuários, mas também os robôs de pesquisa reagem negativamente a links quebrados. Quando o robô encontra um link quebrado, ele tira a seguinte conclusão: não há conteúdo novo no lugar de uma página em branco → o site não está sendo desenvolvido e não é interessante para o proprietário → o site pode ser baixado nos resultados da pesquisa.
Links quebrados no código do programa.
O monitoramento constante é a única maneira de evitar links quebrados e quebrados. Quando encontrar um mau funcionamento, comece imediatamente a corrigir o código do programa.
Ao abrir uma página em uma nova janela.
Erro 404
Se o seu site tiver até 100.000 páginas, comece a monitorar pelo menos uma vez por mês. Se houver mais páginas, tente organizar verificações semanais.
Página 404 não otimizada
A página 404 é o local vazio onde o visitante do site estará clicando em um link quebrado ou inexistente. Se essa página não for otimizada, o usuário sairá do site imediatamente e não retornará a ele sem motivo. Se a página for otimizada, não haverá perda de tráfego e o usuário poderá passar para a seção desejada.
Verifique se a página 404 não está chata e em branco.
Para otimizar sua página 404, siga estas diretrizes:
- Descreva brevemente para onde a pessoa foi e por que está aqui.
- Coloque um link para a página principal do site.
- Publique links para seções populares do site.
- Peça ao usuário para relatar o erro ao administrador do site.
- Confunda-se com o design e faça com que a página 404 seja decorada no mesmo estilo que o site inteiro.
Última dica - não esqueça o humor. Se o usuário sorrir, você conquistará a localização dele e poderá contar com a atenção dele.
Rolagem horizontal mal implementada
A rolagem horizontal é uma das maneiras de exibir o conteúdo de um site ao percorrer as páginas não é de cima para baixo (), mas da direita para a esquerda (). O problema com a rolagem horizontal é que é difícil se adaptar a diferentes tipos de dispositivos. Se você não alocar um orçamento e elaborar cada elemento do código do programa, o site desmorona e funciona incorretamente.
Os estúdios de rolagem na Web gostam de trabalhar com rolagem horizontal, que, por meio de uma ação multicomponente tão complexa, provam sua competência. Se seu orçamento não permitir que você solicite um layout individual para cada tipo de gadget moderno, não será possível elaborar bem o site. Nesse caso, a rolagem horizontal não é para você e você precisa criar um site com um esquema de movimento clássico - faça a rolagem vertical.
Falta de layout adaptável
Em 2019, mais da metade do tráfego da Internet vem de usuários de smartphones e tablets. No futuro, essa proporção poderá mudar ou outros dispositivos substituirão smartphones e tablets. O layout adaptável permite que você não dependa dessa tendência e não perca a conversão devido às preferências tecnológicas do público. Ou seja, o layout adaptável é quando um site pode se ajustar corretamente à largura de qualquer tela e exibir corretamente em computadores, tablets, smartphones e outros gadgets modernos.
Site sem layout adaptável.
Se o seu orçamento ainda estiver limitado e você não puder solicitar o layout adaptável, adapte parcialmente o site. A adaptação parcial é quando você ajusta o site à largura da tela dos dispositivos que seus usuários costumam usar. Na maioria dos casos, esses serão todos os tipos de smartphones.
O site não está configurado para monitores Ultra HD ultra-precisos
Em 2019, a maioria dos sites concentra-se em monitores com dois tipos de resolução: HD e Full HD. Em telas HD, a densidade de pixels é 1366 × 768 - esses são os monitores com maior orçamento, que estão gradualmente perdendo sua popularidade. Nas telas Full HD, a densidade de pixels é de 1920 × 1080 - esses são os monitores mais populares, cuja resolução é orientada pela maioria dos desenvolvedores ao configurar o layout adaptável.
Juntamente com os monitores HD e Full HD, as telas com resolução Ultra HD (monitores 4K) estão ganhando popularidade. Nas telas Ultra HD, a densidade de pixels é 3840x2160 - isso permite obter imagens ultra nítidas com exibição detalhada dos menores detalhes no site. Você também pode comprar um monitor 8K, onde a densidade de pixels é 7680 × 4320.
Diante dessa tendência, pode-se supor que o padrão Full HD em breve passará para a categoria de orçamento e os mais populares serão os monitores com resolução Ultra HD. Portanto, é importante realizar um teste adicional e garantir que todos os elementos do site sejam exibidos corretamente nos monitores 4K. Se isso não for feito, à medida que os usuários mudarem para monitores ultra-sensíveis, a conversão do seu site diminuirá constantemente.
Pesquisa inativa no site
Um mecanismo de pesquisa em um site é uma ferramenta cuja frequência de uso depende do formato do recurso: é usado com pouca frequência em sites de informações e, nas lojas online, pode substituir completamente o filtro categórico. Daí a conclusão: o mecanismo de pesquisa deve e sempre funciona corretamente. Se não for esse o caso, o usuário não poderá encontrar rapidamente as informações ou produtos necessários, sair do site, encontrar tudo o que for necessário dos concorrentes e com alta probabilidade de nunca retornar.
Prioridade de resultado de pesquisa inválida.
Ao configurar um mecanismo de pesquisa, lembre-se das nuances de que algumas consultas geralmente são inseridas com erros. Por exemplo, se o usuário estiver com pressa, em vez de "laptop", digite "laptop". Para um mecanismo de pesquisa em um site, isso não deve ser um problema - ele deve reconhecer corretamente a solicitação e produzir o resultado desejado: “laptop” → “laptop” → uma lista dos modelos necessários.
Salvamento automático não configurado na cesta de pedidos
O carrinho deve duplicar todas as compras do usuário. Isso significa que, se o usuário indicou três cobertores no cartão do produto, três cobertores também devem ser exibidos na cesta. O problema não surge se várias unidades de mercadorias forem compradas.
Tudo muda muito se um usuário faz muitas compras. Nesse caso, a falta de salvamento automático pode levar à perda do cliente.
Configure o salvamento automático na cesta e não force seus clientes a fazer um trabalho duplo. Caso contrário, você corre o risco de ficar sem clientes regulares.
Por padrão, a cesta de mercadorias é "0". De acordo com a análise usando o mapa de cliques, vemos que, por causa disso, o usuário deve executar uma ação desnecessária: primeiro adicione o produto à cesta e depois indique sua quantidade.
Mesmo que a função de salvamento automático funcione corretamente na cesta, verifique se seus gerentes sempre ligam de volta para os clientes e especificam o pedido. Às vezes, os clientes clicam erroneamente no botão Comprar várias vezes, não verificam a cesta e recebem a quantidade errada de mercadorias. Isso também é ruim, por isso é melhor ligar de volta.
Problemas de layout
O site sempre deve ser exibido corretamente em todos os navegadores. Se o layout começar a desaparecer, será difícil para o site executar a ação útil planejada e os visitantes terão uma opinião de que os leigos estão envolvidos nele. Imagine que o cliente deseja fazer um pedido e, devido ao layout voado, não pode fazer isso. Na melhor das hipóteses, ele recarregará a página e tentará novamente; na pior das hipóteses, ele deixará de trabalhar com você. Isso não deve ser permitido.
Um exemplo de layout travado: clique no formulário para preencher → a tela retorna automaticamente à sua posição superior original.
Quando a tela retorna à sua posição original, isso afasta o usuário do pedido. Se o procedimento for repetido pelo menos uma vez, você poderá ficar sem um cliente.
Um exemplo de layout com falha: ícones de redes sociais cabem no texto da página.
Se os botões das redes sociais estiverem fora do lugar, parecerá feio e provocará desconfiança dos proprietários do recurso. Além disso, você pode clicar erroneamente em um dos botões e abrir um site adicional. Isso é chato.
Um exemplo de layout com falha: exibição incorreta de texto na versão adaptável de um site.
Na maioria dos sites, o texto atua como a principal unidade de conteúdo - o meio de informação para o qual o usuário está na Internet. Portanto, se o texto for inconveniente para ler, ninguém vai querer trabalhar com esse site.
Um exemplo de layout quebrado: as migalhas de pão se sobrepõem ao título do artigo e o texto não começa na imagem principal.
Acima, publicamos apenas uma pequena parte dos exemplos possíveis em que um site pode ter problemas de layout. O comum nesses exemplos é um: eles tornam o site feio e desconfortável de ler. Veja algo assim - corrija com urgência.
Botões não clicáveis
O botão no site atua como um contrato entre o proprietário e o visitante do site. , . — .
: « » « 1 ».
« » . , . « 1 » , . , .
: .
, . , .
: . - .
, , . .
: .
, . — «» «».
— , - . «» , . — . : «» . , «», «» «» .
, . , . , — , .
Forbes. . .
«»
«» — , . .
, . , .
«» , .
— , . — , . , . .
, 1-5% . , . , : → → . — : , .
— . → → . , . — .
— . , .
Qualquer arquivo multimídia na página deve desempenhar alguma função útil: entreter, contar uma história ou ajudar a lidar com o tópico. Se houver muitas animações, a página será redundante e será difícil de estudar. O princípio do contraste também será violado e todas as animações importantes serão misturadas às secundárias. Como resultado, o usuário não se lembrará de nada ou até se recusará a estudar a página sobrecarregada.
Evite redundância e concentre-se em animações importantes.
Distraindo elementos
Aqui você precisa aderir ao mesmo princípio das animações redundantes: se algum elemento não funcionar para uma ação útil, é melhor não publicá-lo na página. Exceções são permitidas apenas em situações em que esses elementos são apresentados na forma de algum tipo de decoração de alta qualidade, o que permite criar uma atmosfera agradável no local. Se a qualidade é um problema, é melhor não usar elementos de distração - assim, haverá menos visitantes irritados.
Pop-ups sem o botão Fechar
Um visitante do site é um convidado, cujas ações devem ser apenas voluntárias. Se você adicionar pop-ups ao site e projetá-los sem o botão Fechar, o usuário não terá escolha livre. Por isso, ele garante que não vai gostar do seu site e da próxima vez ele escolherá definitivamente um recurso concorrente. Portanto, se você usar janelas pop-up aleatoriamente - adicione um grande botão "Fechar" a elas.
CAPTCHA irritante
CAPTCHA é uma ferramenta útil que protege a página do influxo de robôs. Portanto, o captcha deve ser e não pode ficar sem ele. O problema surge então, o captcha é programado incorretamente e iguala cada novo visitante a um bot: uma pessoa chega ao site para se registrar de uma maneira interessante → em vez de estudar o conteúdo, ele deve gastar tempo digitando números e letras que não fazem sentido para ele. A situação é agravada se o captcha estiver danificado ou muito longo - é mais fácil para o usuário fechar a página do que decodificá-la. Portanto, para não perder o público, torne o captcha compacto, invisível, raramente funcionando e capaz de distinguir melhor uma pessoa de um robô. A opção de norma é reCAPTCHA.
Janelas pop-up intrusivas
A janela pop-up é um banner pop-up que solicita que o usuário tome alguma ação específica: assine a newsletter, deixe um número de telefone ou siga um link específico. Os pop-ups executam uma função de publicidade e são muito irritantes nas situações em que um pop-up aparece com uma mensagem inadequada na página:
Se você estiver executando janelas pop-up - ofereça algo útil e configure-as para que o usuário tenha tempo de estudar pelo menos um pouco o conteúdo do site.
Procedimento de registro obrigatório
Se você precisar se registrar na loja online antes de comprar, prepare-se para uma baixa conversão.
Se você deseja coletar dados do usuário com segurança, simplesmente explique as vantagens do procedimento de registro e torne-o automático quando a primeira compra ocorrer. Envie a senha por e-mail.
É difícil reunir contatos de usuários interessados, mas perder é fácil. Portanto, não incomode seus assinantes, não envie spam e publicidade inútil. Eles prometeram informações sobre bônus benéficos - primeiro fale sobre bônus e depois disso você poderá inserir alguma publicidade. É possível, mas não o contrário.
Procedimento de registro complexo
Se o usuário decidiu se registrar no seu site, esse processo não deve demorar mais de um minuto. Quando o formulário de registro é muito complexo, saturado demais com os campos obrigatórios e consiste em várias etapas, é mais fácil para o usuário mudar de idéia do que executar a ação proposta.
Se um usuário precisar inserir muitos dados necessários para o registro, pense em como simplificar esse processo. Por exemplo, você pode conectar o plug-in e arrastar os dados necessários das redes sociais. Ou você pode dividir o registro em várias partes: correio, nome e número de telefone são inseridos no início e você pode adicionar todas as outras informações em sua conta pessoal.
Mascarando o campo de Senha
O campo de entrada de senha oculta (****) é apropriado para uso no banco on-line e nos sites em que dinheiro ou documentação importante do usuário é armazenada. Nesse caso, uma senha oculta é necessária e é usada como uma medida de proteção adicional. Por exemplo, se você decidir usar o banco on-line em um café público, poderá fazer login e não se preocupar com a segurança da sua conta.
Para todas as outras situações, é melhor não usar o campo de senha oculta, pois isso complica o processo de inserção da sua conta pessoal. Se, por algum motivo, não for possível desclassificar o campo de entrada da senha, certifique-se de que os usuários possam ativar e desativar essa opção a seu critério.
Navegação
Paginação não configurada
Paginação são páginas do catálogo de mercadorias que são lidas pelos robôs de pesquisa imediatamente após a página principal. Se a paginação estiver incorretamente enquadrada na loja online, o site será pouco promovido e mal vendido.
Se houver um grande número de produtos de uma determinada categoria no site, divida essa categoria em páginas de paginação. Vale a pena adicionar um botão de troca de página na parte inferior do artigo, uma lista abreviada de todas as páginas. Freqüentemente, nas páginas de paginação, você pode encontrar um botão adicional para exibir todos os produtos de uma só vez. Aqui, você deve ter muito cuidado e garantir que, ao atualizar a lista de produtos, o URL seja alterado, para o qual o índice será aplicado antecipadamente.
Cenários de viagem mal concebidos
Enquanto estiver no site, o usuário sempre deve saber quais ações ele pode executar e o que seguirá. Assim que algum ponto não é acordado, começam os problemas de confusão e conversão. Para deixar claro: analisaremos esse momento no exemplo de uma compra descoordenada de mercadorias em um clique:
Aqui está outra situação. Imagine que você precisa entrar em contato com o gerente de suporte técnico e isso só pode ser feito através de uma solicitação de retorno de chamada. Você digita um número de telefone e não recebe nenhuma notificação. Por esse motivo, você não sabe se o gerente recebeu sua solicitação, quando aguardar uma resposta e onde entrar em contato se a situação for urgente. Ou seja, é formada uma razão pronta para partir para os concorrentes.
O número de telefone é indicado, mas não há confirmação de que ele foi entregue ao gerente.
Para consertar, analisaremos outro caso. Programadores mal projetaram o site e os usuários têm problemas com os cartões de produtos. Nos cartões, você não pode alterar o número de unidades de mercadorias e não pode excluir o produto selecionado da cesta. Como não há pistas - o usuário ficará desapontado rapidamente e não comprará nada em uma loja online.
O número selecionado de unidades não é indicado e não há como alterar nada. Se você passar para a próxima etapa, a função de escolher a quantidade de mercadorias não estará disponível
Evite cenários precipitados e faça backup de cada etapa personalizada com dicas de esclarecimento. Essa é uma maneira fácil de evitar conflitos.
Sem migalhas de pão
"Breadcrumbs" é um sistema de navegação que mostra a cadeia de movimento do usuário da página principal para a seção atual. É habitual exibir “migalhas de pão” na parte superior do site e, com a ajuda deles, você pode voltar rapidamente e encontrar uma seção visualizada anteriormente. Vimos o produto 10 - nas “migalhas de pão” você pode alternar para o produto 2 em um clique.
Além da função de navegação, as trilhas de navegação afetam a otimização de SEO: elas criam um link entre outras páginas e influenciam positivamente o fator comportamental. Portanto, se não houver “migalhas de pão”, os usuários ficarão desconfortáveis em estudar o site por um longo tempo e encontrar rapidamente as seções de que gostam.
Navegação na página inicial
"Página inicial" é a página à qual o usuário retornará se se perder no site. Se não houver essa página, nos primeiros problemas com a navegação, alguns visitantes deixarão o site. Para que a página "Página inicial" realize tarefas mais úteis, é recomendável adicionar as principais categorias em sua descrição ou informar sobre toda a estrutura do site.
Para a loja online, esse item de menu pode ser omitido.
Não há navegação nos artigos do site
Para artigos grandes de blog, você precisa de sua própria navegação. Para prepará-lo, basta executar duas ações:
- Instale um plug-in que formará automaticamente o conteúdo dos subtítulos do artigo. Este conteúdo será exibido no início do artigo e, com sua ajuda, o usuário poderá começar a ler imediatamente a partir da seção desejada.
- Adicione o botão "Para cima", que permitirá que você mova rapidamente de qualquer seção para o conteúdo.
Se o artigo for pequeno e caber em 3-5 telas de rolagem, não será necessário adicionar navegação. O usuário encontrará rapidamente o material certo.
Navegação formal
A navegação é uma ferramenta que deve ajudar a limpar o site. Se a navegação for difícil ou ilógica, isso impedirá que o usuário explore completamente o site e realize as ações de conversão necessárias: faça uma compra, deixe um número de telefone ou assine notícias.
O menu com a classificação incorreta de categorias é publicado abaixo: a seção principal não é destacada e as categorias secundárias não são estruturadas.
Outro erro comum da navegação formal é a duplicação de posições. É quando na seção "Acessórios" você encontra a categoria "Acessórios". Essa coincidência deve ser removida e não confundir o usuário.
Exemplo de itens de menu duplicados quando "Acessórios" são usados na seção e categoria.
Além disso, não esqueça de garantir que todas as páginas tenham um menu de primeiro nível. Se você não o adicionar, não poderá alternar rapidamente entre categorias e navegar por diferentes produtos.
Um exemplo de um catálogo de produtos sem um menu de nível superior. Os usuários não têm a oportunidade de acessar a seleção de outra categoria em um clique.
Para fazer a navegação certa - coloque-se no lugar de um novato que não sabe nada sobre o site. Agora, faça a pergunta: um novato pode se mover rapidamente pelos itens de menu publicados e encontrar as informações necessárias? Se a resposta for não, a cadeia de navegação deve ser reformulada.
Liquidação
Design inadequado
O design é uma imagem visual que deve atrair um público e simplificar a interação com o site. Design de qualidade faz exatamente isso. Um design mal concebido, desatualizado ou excessivamente criativo reduz todas as métricas de conversão e precisa ser corrigido imediatamente.
Um exemplo de design não profissional. Aqui tudo é misturado em uma pilha e inundado com um fundo vermelho.
O problema com o design criativo é que é difícil criar. Portanto, em caso de dúvida sobre suas idéias, é melhor dar preferência a técnicas simples de design que sejam compreensíveis para todo o público-alvo.
Um exemplo de design criativo quando um sistema de filtro não é percebido como filtro.
A beleza de um design complexo só pode ser apreciada pelo proprietário do site que pagou por esse design. Se as páginas não cortarem os olhos e tudo estiver claramente nelas, isso será suficiente para os usuários. O resto é excesso.
Um exemplo de design complicado, quando a posição usual das mercadorias se transformava em réplica. No mapa de cliques, vemos que aqui os usuários não entendem a possibilidade de interagir com os ícones correspondentes.
O design de qualidade não precisa ser caro e volumoso. Se um estilo minimalista simples for combinado com serviços de qualidade, isso será suficiente para atrair um público fiel. Haverá um público satisfeito → as vendas aumentarão → o design profissional aparecerá.
Coluna de texto inconveniente
O texto deve ocupar 60-70% da largura da página. Se você fizer uma margem estreita, o texto se estenderá e se transformará em uma folha vertical ilegível. Se você usar a largura máxima, uma folha ilegível será esticada horizontalmente. Uma falha completa ocorre quando as fontes com serifa são adicionadas ao texto esticado. Pense nos usuários e não crie inconvenientes desnecessários.
Imagens desproporcionais
No site, todo o design visual deve estar no mesmo estilo. Os elementos de destaque são aceitáveis, mas devem ser projetados com precisão e o usuário deve entendê-los. Por exemplo, se você estiver fazendo uma descrição do produto de alguém, é permitido inserir imagens com proporções e escalas diferentes no artigo - o leitor entende que se trata de propriedades diferentes de um produto. Ao mesmo tempo, não se pode alterar as proporções no catálogo geral de mercadorias - aqui, sem comentários adicionais, não está claro como algumas imagens diferem de outras.
Um exemplo de uma imagem muito alta no cabeçalho. Para acessar o conteúdo - você precisa rolar a página. O problema é resolvido reduzindo a altura da tampa em 50-70%.
Freqüentemente, problemas com proporcionalidade surgem no layout adaptável. Portanto, é importante testar o design no maior número possível de dispositivos.
Um exemplo da distribuição incorreta de elementos na versão móvel do site. A primeira imagem sai do catálogo e parece maior que o resto.
Imagens desproporcionais criam uma sensação de confusão e falta de profissionalismo. Portanto, quando um dos usuários prestar atenção nisso, na próxima vez que ele for às compras no site sem esses problemas.
Texto e plano de fundo incompatíveis
A opção ideal é texto em preto sobre fundo branco. O mesmo efeito fornece texto em branco sobre fundo preto. Você pode combinar outras cores que não se fundem e permitir que você leia facilmente as informações do site. Se todo o conteúdo é fácil de ler rapidamente, você escolheu o texto e o plano de fundo certos.
Se você não tiver uma tarefa de design especial, escolha texto em preto sobre fundo branco. Não é necessário brincar com flores apenas por uma questão de beleza - é melhor gastar o tempo economizado na produção de conteúdo. Os usuários irão certamente apreciar.
Um exemplo de texto pouco legível nas ilustrações.
Com cuidado especial, você precisa abordar as experiências de texto e plano de fundo no layout adaptável. Em dispositivos móveis, as informações são mais difíceis de considerar, portanto, a seleção de cores deve ser abordada com muito cuidado.
Um exemplo de texto ilegível no layout adaptável.
Se, por algum motivo, o clássico na forma de texto em preto e fundo branco não combina com você, lembre-se desta nuance: aparelhos diferentes têm cores diferentes. Se tudo parecer bom no seu computador, isso não significa que um usuário com um smartphone econômico no Android tenha legibilidade semelhante.
Design de texto bruto
Nenhum dos usuários está interessado em ler uma tela de texto sólido que não possui elementos de controle de atenção visual: parágrafos, legendas, listas, imagens e blocos individuais com informações importantes. O olho não se apega a nada; portanto, mesmo que seja bom, é improvável que seja lido.
Esta é uma folha de texto chata.
— . .
.
, , . — . .
. , . , - , , . .
. , .
: , , . , .
— . , . , . : , .
— . , . — - , .
.
— . Apple .
, . - . , - . , . , .
— , . .
.
, . , .
. , , .
. , .
.
, . , .
.
. .
.
— . , . .
. , , . , .
.
— (). , - .
, . - , . , , . — . , , .
, . — .
instagram.
, . , . , . , . , Telegram, , . .
— , . . Apple — , . , . , .
— , . -, MacBook Air 2018 1900 $. , 12 . -.
MacBook Air 2018 — , - . .
, . . , .
, , . , . , - - . , — . , .
-
, -, . — . - , , . , , . .
: IT- 2 Dell P2418D. IT- - → → .
2 Dell P2418D, , . .
- , : , . . IT- , , . , , - .
, - . , , . .
15%: 100 $ → 115 $. - , -:
- , . — .
- , .
- — , , . , .
, . - , - . — . .
. , . : , .
: , . : , . — .
, . , .
, : 100 $, 200 $. , , .
- — . .
— , . , , . , , : → → → → . .
, . , .
« » «»
« » — , . , . « » , .
« » — : , , , , .
«» — , , . , .
/
, . , . , . , : , , . , .
. , , .
, , . .
,
- , . , , , — . , , . , .
.
. : → → . .
— -, . : . , . , .
, . , , . , , .
: .
: , . , . . — .
, . - , .
, : , . .
, . . , .
. . , .
— , : . , . , .
, . — . .
№1.
- .№2. , .
№3. .
? Compartilhe suas experiências nos comentários.
: , CEO Plerdy.com