A Linguagem Simples, ou Plain Language, é uma abordagem de comunicação que busca tornar textos e informações mais acessíveis, claros e fáceis de entender. Sua aplicação no campo de interface e experiência do usuário (UX) é cada vez mais relevante, pois contribui diretamente para uma melhor usabilidade e acessibilidade aos usuários em ambientes digitais.

Breve Contexto Histórico da Linguagem Simples

O movimento da linguagem simples começou a ganhar força no século XX, especialmente a partir dos anos 1940 no Reino Unido e nos Estados Unidos, como uma resposta à complexidade excessiva de documentos oficiais e jurídicos. O objetivo era garantir que todos, independentemente de seu nível de escolaridade, pudessem compreender informações essenciais para a vida em sociedade. Nos anos 1970, o governo dos Estados Unidos intensificou esse movimento, exigindo que documentos públicos fossem menos burocráticos e mais compreensíveis. Em 1978, o presidente Jimmy Carter emitiu ordens executivas para tornar regulamentos federais mais claros. O marco legal mais recente foi a Lei da Escrita Simples de 2010, assinada pelo presidente Barack Obama, que tornou obrigatória a redação clara em documentos federais.

Dessa forma, a linguagem simples se consolidou como um direito civil, defendendo o direito de todos de entender as informações que impactam seu cotidiano. Hoje, está presente em mais de cinquenta países e em diversos idiomas, sendo reconhecida como uma prática fundamental para a cidadania e a inclusão.

Relevância da Linguagem Simples no Design de Interfaces Digitais

No contexto do design de interfaces digitais, a linguagem simples é um ponto chave para criar experiências mais intuitivas. Interfaces digitais — como sites, aplicativos e sistemas — são pontos de contato fundamentais entre pessoas e serviços. Quando a comunicação é confusa, técnica ou excessivamente formal, o usuário pode se sentir perdido, frustrado ou até mesmo excluído.

A aplicação da linguagem simples em UX pode trazer uma série de benefícios como:

• Facilita a localização e compreensão de informações, reduzindo o tempo e o esforço do usuário para realizar tarefas.
• Aumenta a acessibilidade, especialmente para pessoas com menor escolaridade, deficiência cognitiva ou que não dominam o idioma principal da interface.
• Reduz erros de uso, dúvidas e a necessidade de suporte, tornando a experiência mais fluida e agradável.
• Constrói confiança e aproxima a marca do usuário, ao adotar um tom mais humano e empático.

Sendo assim, a Linguagem Simples acaba se tornando uma estratégia de design centrada no usuário, que considera suas necessidades, limitações e contexto de uso.

Microinterações, Feedbacks e Acessibilidade

Além do texto claro, a experiência do usuário é profundamente impactada por micro interações e feedbacks visuais. Micro interações são pequenas respostas do sistema a ações do usuário, como animações, mudanças de cor em botões, notificações e transições suaves. Elas funcionam como “apertos de mão digitais”, orientando o usuário, confirmando ações e transmitindo informações de objetiva e rápida, sem sobrecarregar a interface.

Por exemplo, ao clicar em um botão de envio, uma animação sutil ou uma mensagem de “Enviado com sucesso” fornece feedback imediato, reduzindo a incerteza e tornando a navegação mais fluida. Durante o carregamento de uma página, um ícone animado ou uma mensagem simples como “Carregando, por favor, aguarde…” mantém o usuário informado, evitando frustrações ou esperas desnecessárias.

Esses detalhes, quando alinhados às diretrizes da linguagem simples, diminuem a fricção existente na interação humano-computador. Pessoas com deficiência, baixa escolaridade ou que não dominam o idioma principal da interface se beneficiam de instruções objetivas, feedbacks claros e ausência de jargões. A atenção aos detalhes e à clareza textual contribui para uma experiência mais democrática.

Aplicando a Linguagem Simples em Interfaces Digitais

Para alinhar sua interface digital às diretrizes de linguagem simples, é importante seguir alguns passos práticos:

1. Conheça seu público
   Antes de escrever, compreenda quem são seus usuários, quais são suas necessidades, expectativas e nível de familiaridade com o tema. Isso ajudará a escolher o vocabulário e o tom adequados.
2. Use frases curtas e objetivas
   Prefira frases com até 20 ou 25 palavras, evitando períodos longos e complexos. Isso facilita a leitura e a compreensão, especialmente em telas pequenas.
3. Escolha palavras comuns e evite jargões
   Utilize termos do dia a dia e evite palavras técnicas ou estrangeirismos. Se o uso de termos técnicos for inevitável, explique-os de forma clara e simples.
4. Estruture o conteúdo de forma lógica
   Organize as informações de modo que o usuário encontre rapidamente o que procura. Use títulos, subtítulos, listas e destaques para facilitar a navegação e a escaneabilidade do texto.
5. Use voz ativa
   Prefira a voz ativa à passiva, pois ela torna as frases mais diretas e fáceis de entender. Por exemplo: “Preencha o formulário” em vez de “O formulário deve ser preenchido”.
6. Teste com usuários reais
   Realize testes de usabilidade e peça feedback sobre a clareza das informações. Ajuste o conteúdo conforme as dificuldades identificadas.
7. Humanize a comunicação
   Adote um tom acolhedor e empático, mostrando que a interface foi pensada para ajudar o usuário, não para dificultar sua vida.

Exemplo Prático

Considere um aplicativo de pagamentos. Em vez de “Efetuar a transação bancária”, prefira “Transferir dinheiro”. Ao clicar em “Transferir”, o botão pode mudar de cor e exibir uma animação de carregamento, seguida de uma mensagem simples: “Pronto! Sua transferência foi feita”. Se houver erro, uma mensagem clara como “Não foi possível transferir. Tente novamente.” deve aparecer imediatamente.

Conclusão

A Linguagem Simples, combinada com micro interações bem projetadas, feedbacks claros e uma hierarquia bem estruturada, torna-se uma poderosa aliada na inclusão digital. Nunca foi tão fácil fornecer serviços e transmitir conteúdos de maneira acessível. Ao seguir essas diretrizes, designers e desenvolvedores podem criar experiências mais humanas, beneficiando tanto os usuários quanto as organizações, que ganham sua fidelidade ao oferecer um bom serviço.

Comprometer-se com a clareza e a interação intuitiva se torna, acima de tudo, um ato de respeito ao usuário.

Referências

https://www.thelegaldesigner.com.br/post/dia-mundial-da-linguagem-simples-e-sua-import%C3%A2ncia-para-o-legal-design
https://comunicasimples.com.br/linguagem-simples/
https://brasil.uxdesign.cc/a-evolu%C3%A7%C3%A3o-da-esp%C3%A9cie-e-a-linguagem-simples-c1596286be49
https://prensali.substack.com/p/linguagem-simples
https://gtindependence.com/pt/o-que-%C3%A9-linguagem-simples-e-como-ela-melhora-a-acessibilidade/
https://www.gov.br/gestao/pt-br/acesso-a-informacao/estrategia-e-governanca/estrutura-de-governanca/Manualdelinguagemsimples_comoplanejardesenvolveretestartextosquefuncionam.pdf

Autor: Enzo Zanini Becker

Em um mundo cada vez mais tecnológico, é comum o uso de programas e aplicativos no nosso cotidiano, seja para comunicação, passatempo, auxílio nas atividades diárias e trabalho e diversos outros. Mas o que tornou isso comum a esse ponto? Foi a praticidade, utilidade e facilidade que essas aplicações trouxeram para essas atividades rotineiras. Apesar disso, diversas ferramentas que eram muito utilizadas alguns anos atrás não se mantiveram assim, além de várias novas soluções não irem adiante no mercado nem em popularidade e foram sendo esquecidas ao longo do tempo.

Nesse mercado em que tudo se transforma muito rapidamente, as tecnologias precisam se adaptar às mudanças, o que, muitas vezes, não ocorre ou, no mínimo, não no momento certo - como é o caso destas aplicações que fracassaram ou perderam popularidade. Nessa circunstância, um fator crucial para manter o usuário fiel ao aplicativo ou programa, além da sua funcionalidade e eficácia é a experiência que o mesmo proporciona a esse usuário. Com uma experiência positiva quanto ao sistema, ele terá mais interesse em continuar utilizando-o. Para ficar ainda mais claro, pense pelo lado contrário: se você está usando um sistema e acha difícil ou cansativo utilizá-lo, você ainda iria querer usá-lo tendo versões mais amigáveis disponíveis? Provavelmente, não.
Assim sendo, o foco desta redação é justamente “User Experience” (UX), ou, em português, “Experiência do Usuário”, um fator muito importante para o sucesso de um sistema.

Além da UX, temos a UI, ou seja, “User Interface”. As duas áreas diferem no seguinte quesito: enquanto a UI se preocupa em ter todos os componentes necessários para um sistema funcionar, a UX se preocupa mais em fazer esses componentes estarem dispostos de maneira confortável e atrativa para o usuário e facilitar o acesso e visualização dessas funcionalidades. Para saber mais sobre a diferença e importância das duas áreas, recomendo a leitura de outra redação já publicada anteriormente, que se encontra aqui.

Voltando à UX, irei apresentar nesta redação alguns pontos, temáticas e habilidades importantes para trabalhar nesta área, com exemplos práticos. Estas são habilidades importantes para desenvolvedores front-end que querem se destacar no mercado, uma vez que, dado o avanço das tecnologias, o desenvolvimento de aplicações vem se tornando mais fácil e, consequentemente, o mercado vai se saturando de soluções semelhantes. Assim, o diferencial entre estes produtos pode estar na UX, que poderá ter um peso significativo na decisão final dos usuários quanto a qual produto escolher.

Pensando na área correlata de Web Design, há alguns pontos que estão também relacionados à UX. Estes pontos são:

• Heurísticas de usabilidade
• Uso de cores e formas

Na sequência, irei apresentar sobre esses tópicos em mais detalhes e, após a conceituação inicial, irei implantá-los em uma aplicação com um cenário fictício para exemplificação.

1. Heurísticas de Usabilidade

         Essa heurística dita que os usuários devem estar cientes do que está acontecendo no sistema, recebendo feedbacks de suas ações para mantê-los situados.

         1.2. Correspondência entre o sistema e o mundo real

         Já essa heurística propõe que o sistema utilize a linguagem comum do seu público, com expressões e ícones aos quais ele está familiarizado.

         1.3. Controle e liberdade do usuário

        Essa por sua vez, comenta que o usuário é humano e, portanto, está sujeito a errar. Dessa forma, ele deve ser capaz de desfazer e refazer ações dentro do sistema, tendo controle          total de suas ações no mesmo.

       1.4. Consistência e padrões

       Aqui está detalhado que todos botões, links e demais componentes devem manter um padrão, evitando que o usuário fique com dúvidas quanto à funcionalidade de tal                         componente.

      1.5. Prevenção de erros 

      Esta heurística, por sua vez, sugere que hajam mensagens e alertas antes do usuário realizar ações permanentes, evitando, assim, que o mesmo cometa erros.

      1.6. Reconhecimento ao invés de memorização

      Já aqui, é proposto que o usuário pode esquecer ações passadas e, por isso, o sistema deve indicar para o mesmo essas ações que realizou, adicionando essas informações aos              passos seguintes.

     1.7. Flexibilidade e eficiência de uso

     Esta por sua vez, propõe que o sistema pode possuir diferentes perfis de usuário. Alguns mais acostumados ao sistema e outras aplicações em geral e alguns com menos                       conhecimento. Assim, o usuário deve ter liberdade para utilizar atalhos e facilitadores, bem como prestar auxílio para os que possuem menos familiaridade com o sistema.

    1.8. Estética e design minimalista

    Já esta heurística está mais atrelada ao design visual do sistema, propondo que o mesmo possua uma estética mais minimalista, evitando sobrecarregar as telas de informação e           dificultando para o usuário encontrar as informações que precisa.

   1.9. Ajudar os usuários a reconhecer, diagnosticar e se recuperar de erros

   Quanto a essa heurística, ela propõe que o usuário receba mensagens de erro na sua linguagem, ao invés da linguagem da máquina. Assim, por exemplo, ao invés de receber uma         mensagem com “404”, erro comum quando não é encontrada a rota de alguma página em um sistema, o usuário deve receber a mensagem “página não encontrada”. Além disso, o     sistema deve fornecer um caminho para o usuário se recuperar desses erros sozinho, para não impossibilitar o usuário de continuar utilizando o sistema.

  1.10. Ajuda e documentação

  Por fim, a última heurística abordada é a de ajuda e documentação. Esta heurística prevê que o sistema deve possuir um espaço que explique como utilizar o sistema de forma clara e   precisa, e que o auxilie nas diversas funcionalidades do mesmo.

2. Uso de cores e formas

Muitas vezes ao desenvolver um trabalho, um sistema, uma imagem para divulgação utilizamos as cores que mais gostamos ou achamos que combinam com a temática, mas o uso das cores vai além disso. As cores influenciam diretamente na nossa percepção das coisas e influenciam também se iremos utilizar um sistema ou não. Pense assim, você gostaria de utilizar um sistema que possui o fundo bege claro com a fonte branca? Provavelmente não, pois você teria dificuldades para ler o que está escrito, observe na figura abaixo:

Nesta figura, temos um retângulo na tonalidade bege claro com o texto “Bem Vindo!” escrito no centro. Você pode até conseguir ler, mas terá que forçar muito a visão para conseguir enxergar. 

Desta forma, não é recomendado utilizar cores próximas no círculo cromático, pois oferecem um baixo contraste e dificultam a visão. Assim, utilizar-se de cores complementares como azul e amarelo, pode tornar o sistema muito mais agradável de se utilizar.

Além de tudo isso, o apelo visual de um sistema pode ter um fator decisivo na decisão de um usuário. Dessa forma, as cores também são muito abordadas no marketing.

Esse apelo visual muitas vezes está vinculado ao significado que está atrelado às cores. Assim, uma cor também representa os valores e a identidade do produto. Em um sistema relacionado a práticas sustentáveis e ecológicas, por exemplo, pode ser utilizada a cor verde, marrom, laranja, entre outras.

Para mais informações sobre o significado das cores, pode ser interessante acessar: https://www.portalsaofrancisco.com.br/arte/percepcao-das-cores.

Além das cores, as formas também tem um peso significativo para o layout de um sistema. Por exemplo, os cantos das áreas, figuras, botões e demais formas arredondadas são melhores para a visão do que as bordas retas. “Alguns especialistas afirmam que retângulos que possuem cantos arredondados são bem mais fáceis dos olhos processarem que um retângulo com as bordas afiadas, pois pedem menos esforço cognitivo e processamento visual.” 

(https://www.oficinadanet.com.br/artigo/usabilidade/usablidade-cantos-arredondados-sao-melhores-aos-olhos).

Assim, vale atentar-se para esse detalhe também.

Para finalizar este tópico, irei abordar a disposição dos elementos na tela. No ocidente, a leitura se dá da esquerda para a direita, de cima para baixo. Dessa forma, ao acessar um sistema, devemos levar em conta que, por costume, o usuário irá visualizar a informação nessa ordem. Assim, as cores, formas e tamanhos podem ser usados para dar destaque. 

Por exemplo no trecho abaixo:

De A a Z: confira mais de 100 guias de produtos online

Black Friday: de airfryer a webcam, Guia de Compras do g1 te ajuda a escolher o produto ideal

Com mais de 100 listas, dicas e testes, o g1 tem curadoria para descomplicar suas compras. De A a Z, busque pelo produto que você deseja.

Geralmente, a leitura se iniciaria em “De A a Z: confira mais de 100…”. Visualmente neste caso, porém, o maior destaque está no título “Black Friday: de airfryer a webcam…”, pois está maior o tamanho da fonte, com uma cor de destaque e em negrito. Assim, lembre-se de utilizar estes recursos quando quiser dar destaque em algum componente ou alterar a ordem de visualização dos itens na tela.

Agora iremos abordar estes tópicos na prática:

Considerando um cenário de uma Pet Shop que deseja desenvolver um sistema para si mesma, que terá dois tipos de usuário: o cliente, que poderá cadastrar seus pets, visualizar os profissionais que trabalham na pet shop, serviços e realizar agendamento de serviços para seus pets; e o funcionário, que poderá visualizar todas as informações referentes a seus colegas de trabalho, agendamentos, clientes e pets.

Nesse cenário, os pets serão classificados em tipos e raças, os serviços possuirão duração prevista e custo e os agendamentos para os pets, data e horário. Ainda, cada usuário terá um acesso restrito ao sistema com seu email, nome e senha, podendo gerenciar o seu perfil.

Vamos realizar a prototipação da tela inicial deste sistema, para o perfil do funcionário? Iniciando pela User Interface, com os requisitos do sistema teremos:

(Descrição da imagem acima: neste caso, temos a tela inicial do sistema, com um menu lateral contendo a logo da empresa no topo e, logo abaixo as opções do menu: início, clientes, gerenciar pets, gerenciar tipos, gerenciar raças, agendamentos, serviços e funcionários. Na parte superior ao lado do menu temos a barra superior com, no lado direito, a foto do usuário. Abaixo da barra e ao lado do menu temos três espaços: agendamentos, pets e funcionários. O espaço de pets e o de funcionários contém duas fotos dos respectivos cadastros com o nome no canto inferior das imagens. Ao lado das mesmas possui setas de navegação de páginas e, abaixo, um botão para ver todos. Já o espaço de agendamento é bem semelhante, mas além do nome, possui data, horário e um botão para gerenciar agendamento. No final da página, há o rodapé com o nome da empresa no canto esquerdo e a logo no direito.)

Nesta imagem temos todas as funções exigidas na tela inicial do sistema, que possui acesso a todas as funcionalidades e atalhos para as mesmas. Apesar disso, do ponto de vista da UX ainda há alguns pontos que podem ser melhorados.

Vejamos um protótipo da mesma tela que leva em conta as heurísticas, cores e formas conforme apresentado anteriormente:

(Descrição da imagem: menu lateral semelhante ao anterior, com a diferença sendo o grupamento das funcionalidades gerenciar pets, tipos e raças em um único menu “pets” que possui estes submenus. Além disso, para cada item de menu foi adicionado um ícone correspondente: casa (início), pessoa (clientes), pata de animal (pets), lápis (editar: gerenciar pets, tipos e raças), calendário (agendamentos), engrenagens (serviços) e pessoa com gravata (funcionário). Menu superior com o diferencial da borda envolta do usuário arredondada. Já a parte central da página agora possui apenas uma seção com 3 abas: agendamentos, pets e funcionários, iniciando em agendamentos. Além disso, para cada agendamento está sendo exibido o serviço agendado e o valor a ser cobrado. Por fim, as setas de navegação entre as páginas se encontram agora na parte inferior da seção, com indicador de qual página se encontra).

Nesta tela é possível notar as diferenças. Iniciando-se pelas cores, agora o sistema transmite uma mensagem mais descontraída e com cara de pet shop (uma vez que os pets tendem a ser um pouco brincalhões). Assim, usando tons mais vivos do que pastéis (como no outro protótipo) tornam o sistema mais agradável e com a identidade de uma pet shop. Além disso, as cores usadas, além das básicas (preto e branco), foram verde, laranja e azul.

• Verde representa natureza, prosperidade.
• Laranja, por sua vez, energia, entusiasmo.
• E azul segurança e confiança (muitas vezes utilizado em sistemas bancários, como o Banco do Brasil, Itaú e Banrisul).

Essas cores são ótimas para transmitir os valores que uma pet shop tem a oferecer. Além disso, as formas e fontes de texto nos títulos são outro aspecto a ser observado. Ambas agora assumem um layout com bordas arredondadas, seguindo na linha do que foi estudado anteriormente, tornando o sistema mais amigável.

Pulando para a parte das heurísticas, agora o funcionário que acessar o sistema não precisa se lembrar em que página está, pois o sistema já está indicando ("início" no topo da página, no menu lateral também está em destaque). Também indica a página que está na visualização dos agendamentos (círculos coloridos de cinza e azul - caso na página -, na parte inferior da seção de agendamentos). 

Outro ponto é que o funcionário não precisa abrir o agendamento para verificar valores nem serviços, muito menos se lembrar desses detalhes, pois isso já está visível nesta tela. 

Além disso, para usuários mais experientes, agora há a possibilidade de minimizar o menu lateral, aumentando assim o espaço para visualização das informações principais da página que está acessando.

O menu lateral também possui ícones para facilitar a associação com as funcionalidades por parte do usuário, além de agrupar as opções de gerenciamento de tipos, pets e raças dentro de um único menu pets, facilitando o mesmo encontrar as funcionalidades que precisa e diminuindo a extensão do menu, ao mesmo tempo que o mantém completo. Isso contribui também para a estética minimalista.

Por fim, um ponto de bastante destaque é que agora possuímos apenas uma seção/card com abas (agendamentos, pets e funcionários), diminuindo a poluição visual com informações demais e mantendo o principal (agendamentos) em destaque.

Considerando as duas telas apresentadas, você não concorda que a segunda ficou muito mais fácil de utilizar? Ainda há diversas outras técnicas que podem ser usadas para aprimorar este mesmo protótipo, mas já é um começo. 

UX é uma área que está em alta e, portanto, ainda há diversos estudos sobre os melhores caminhos a se tomar. Antes de tudo, é importante analisar o seu público alvo, suas necessidades, emoções e interesses e partir deste ponto para o desenvolvimento de uma solução interessante e adequada a ele. 

Outras referências:

https://crushpets.com/blog/pet-shop/identidade-visual-para-pet-shop/

Raíssa Arantes, 2022

Oi pessoal, nesta edição do PET Redação vamos compreender a importância da acessibilidade em páginas web, tão quanto dar algumas dicas de como atingir isso usando a tecnologia HTML.

Primeiro, precisa-se entender a extensão do termo acessibilidade, uma vez que ele não demonstra-se totalmente explorado. Dessa maneira, entende-se como acessível todo serviço, produto, página que atenda tanto às necessidades de pessoas com dificuldade motoras (Paraplegia, Hemiplegia,Tetraplegia), sensoriais(pessoas idosas, cegas, surdas, daltônicas) e cognitivas quanto as que não possuem. Assim, pode-se concluir que para o ramo da web a acessibilidade demonstra-se unir programação, design e tecnologia a fim de permitir que todos os usuários obtenham o mesmo nível de experiência, em relação ao entendimento, à aprendizagem, à  navegação e à interação na página.

Ademais, pode-se pontuar que a acessibilidade é um direito e um dever regidos por lei. Em 2004 o decreto federal n° 5.296 prevê que todos os portais e sites governamentais deveriam atender aos padrões de acessibilidade digital, e após isso, em 2011 a Lei de Acesso à Informação Nº 12.527 abrange os padrões de todos os sites da web.

Explicado isso, espera-se que páginas acessíveis possuam imagens, vídeos com audiodescrição,possibilidade de aumentar a fonte do texto, vídeos com legendas, boa organização da página para aplicativos leitores de tela, navegabilidade possível apenas por teclado, entre outros.

Vamos as dicas no html:

• criar uma boa e consistente estrutura de títulos, parágrafos, listas, etc.

Visto que essa prática irá melhorar a experiência de um usuários por meio de um leitor de tela

• Usar os elementos HTML para o que eles foram designados.

Nada de criar “divs” e transformá-los em botões pelo css.

• Não utilizar tabelas como cabeçalhos ou rodapés, prefira usar a tag <nav>

• Usar links com uma descrição clara

Exemplo:

Errado:

<p>As baleias são criaturas realmente incríveis. Para saber mais sobre baleias, <a href="whales.html">clique aqui</a>.</p>

Correto:

<p>As baleias são criaturas realmente incríveis. <a href="whales.html">Saiba mais sobre baleias</a>.</p>

• usar o atributo alt na tag img

Por meio do alt consegue-se fazer descrições sobre a imagem e o leitor de tela captará isso. Além disso para adicionar um contexto a imagem pode-se utilizar o atributo title

Exemplo:

<img src="dinosaur.png"

     alt="Um tiranossauro Rex vermelho: Um dinossauro de duas patas em pé como um humano, com braços pequenos e uma cabeça grande com muitos dentes afiados."

     title="O dinossauro vermelho da Mozilla.">

• Adicionar legenda por meio de texto vídeos sem legenda.
• Adicionar audiodescrição em vídeos. 

E também, as diretrizes a serem seguidas em uma página acessível estão descritas pelo Web Accessibility Initiative (sigla: WAI), e atualmente está na versão Web Content Accessibility Guidelines 2 (sigla: WCAG 2).

Se você quiser ler mais sobre o assunto:

Lei de Acesso à Informação:http://www.planalto.gov.br/ccivil_03/_ato2011-2014/2011/lei/l12527.htm 

Dicas html: https://developer.mozilla.org/pt-BR/docs/Learn/Accessibility/HTML 

https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML

informações adicionais de acessibilidade: https://www.iberdrola.com/inovacao/o-que-e-acessibilidade-na-web

Diretrizes do WCAG 2: https://www.w3.org/WAI/standards-guidelines/wcag/ 

Eaí, pessoal. Tudo bem? Nesta semana no PET Redação, iremos falar sobre as principais técnicas de otimização de um site para os mecanismos de busca, como o Google por exemplo.

De acordo com o Resultados Digitais, site reconhecido pelo trabalho com SEO, “92% dos possíveis clientes utilizam a internet como primeiro canal de pesquisa”, e procuram no Google antes de qualquer compra. Dito isso, sabemos que qualquer empresa, seja de pequeno, médio ou grande porte, precisa estar presente na internet e contar com boas estratégias de marketing para alavancar o seu negócio, como algumas ações que são capazes de atrair novos consumidores e estreitar os relacionamentos com aqueles que já conhecem a marca. 

Mas existem milhares de sites online e muitos outros sendo publicados todos os dias na internet, e isso faz com que haja bastante concorrência. Portanto, como fazer com que uma página fique à frente das outras nas buscas? É aí que entra o SEO (Search Engine Optimization). Como a própria tradução já sugere, SEO é uma otimização para os mecanismos de busca, isto é, um conjunto de técnicas que influenciam os algoritmos dos buscadores a definir o ranking de uma página para determinada palavra-chave que foi pesquisada. Agora vamos entender um pouco mais sobre marketing para os mecanismos de busca e a melhor forma de otimizar seu site para o Google.

• O que é SEM (Marketing para Mecanismos de Busca)?

É uma área de marketing visando os mecanismos de buscas na internet. Entende-se como marketing uma série de teorias, estratégias e ferramentas usadas para melhorar vendas e imagem de marcas e empresas. Na maioria da vezes, de forma paga. Vale a pena pesquisar mais sobre isso!

• O que é SEO (Otimização para os Mecanismos de Busca)?

Faz parte do SEM. É um conjunto de técnicas que tem como objetivo posicionar um site nas primeiras páginas dos sites de busca, como Google. São ações que tornam um site relevante perante os motores de busca. Funciona de forma orgânica, ou seja, sem custos. E é neste ponto que iremos focar esta redação.

Primeiramente vamos recapitular os principais motivos de se ter um site e as vantagens que ele pode trazer à sua empresa:

1. Melhor forma de ter visibilidade online;
2. Apresentação da empresa e dos serviços;
3. Acompanhamento dos resultados/conversões;
4. Facilita o contato com o cliente através de formulário para mensagens, endereço, telefone e e-mail;

Sabendo de tudo isso, vamos conversar sobre técnicas a serem trabalhadas em um site, para agregar ainda mais valor ao seu conteúdo, e assim, trazer cada vez mais acessos a sua página, aumentando suas taxas de conversão e a possibilidade de fidelizar novos clientes.

• Responsividade

Um dos principais pontos que o Google e outros mecanismos de busca verificam antes de indexar o seu site na primeira página das buscas, é a sua responsividade. Um site responsivo nada mais é do que uma página da web que se adapta a diferentes tamanhos de tela da melhor forma possível, trazendo ao usuário a mesma experiência que ele teria em um computador, adaptando  todo o layout do site, assim como o tamanho das imagens e da fonte, de uma forma harmônica.

• Imagens leves e com as tags devidas

Usualmente, sites que demoram para carregar são os que têm as imagens mais pesadas e isso tem um impacto direto na velocidade em que o usuário consegue interagir com a página. Por isso, o recomendado é sempre utilizar de imagens leves e otimizadas para facilitar o carregamento do site independente da velocidade de internet do usuário. Outro ponto importante em relação às imagens da página são as tags de texto alternativo. É o preenchimento desse item que auxilia os softwares de leitura de tela e o algoritmo do Google a entenderem o que a imagem apresenta. O próprio Google recomenda que o texto alternativo seja descritivo em relação à imagem que representa e não fique muito longo, isso também ajuda no posicionamento orgânico do conteúdo.

• Palavras chaves e estruturação dos textos;

A definição da palavra-chave do seu site é essencial para os mecanismos de busca qualificarem o seu conteúdo, uma boa palavra chave pode fazer toda a diferença. Além disso, o conteúdo é o ponto mais importante para um bom trabalho de otimização. A utilização da sua palavra-chave em seu conteúdo facilita as chances de que o Google exiba o seu site como resultado para quem busca aquela palavra. Outras dicas que são muito úteis: estruturar o seu texto buscando facilitar a leitura por parte do usuário, utilizando de parágrafos curtos, títulos e subtítulos claros, assim como uma tag title e um meta description, pontos que influenciam diretamente na taxa de cliques do site.

• Domínios e links

O link, ou URL, da página é considerado outro elemento que os robôs do Google analisam durante as suas verificações. Uma URL amigável normalmente tem a preferência em relação à outros links. É recomendado utilizar da palavra-chave do que de apenas um código de referência no link, por exemplo: site.com/palavra-chave-da-pagina é sempre melhor avaliado do que site.com/ 4815162342. Links internos e externos também podem ajudar no melhor ranqueamento nas buscas do Google, isto é, páginas que referenciam outros conteúdos similares, tanto dentro como fora do seu site.

Entre outras técnicas comuns de otimização, também podemos citar a obtenção de um certificado SSL para habilitar o protocolo HTTPS, algo que o Google entende como um “site seguro” e isso acaba interferindo na qualidade do site. Além disso, não podemos esquecer da Experiência do Usuário (UX) que também agrega valor à interação com o site e pode gerar uma boa conversão.

O impacto desse trabalho é enorme, pois a busca orgânica (não paga) pode se tornar uma das principais fontes de geração de tráfego no site e, posteriormente, de conversão. Sempre bom salientar que o trabalho de SEO apresenta resultados em médio a longo prazo, mas são bem duradouros. Então, nada de desistir antes da hora!

Referências:
Orgânica Digital
Resultados Digitais