fbpx
mesa com papéis de planejamento de responsividade css

Responsividade CSS e a experiência de usuário (UX)

Você entende a real importância da responsividade CSS no seu site? E como a responsividade está ligada diretamente com a experiência do usuário? Neste artigo, você descobre o que é de fato um site responsivo, por que é importante você entender de responsividade, onde UX se encaixa nesse contexto, com bons exemplos práticos!

Antes de entrar no conteúdo em si, eu gostaria de me apresentar e falar um pouco mais sobre a minha experiência com desenvolvimento web. Meu nome é Maria Porcina e sempre trabalhei com desenvolvimento front end. Hoje em dia, estou focada no desenvolvimento de websites, utilizando linguagens como HTML, CSS e Javascript, aplicando conceitos relacionados a experiência de usuário, como a responsividade.

Como alguém que trabalha com front end já há algum tempo, acredito que os desenvolvedores que atuam nessa área são os que possuem maior contato com os usuários. Isso nos permite entender melhor esse outro lado e, consequentemente, nos leva a dar uma atenção maior às questões relacionadas à experiência de usuário.

Hoje, em específico, vou falar um pouco mais sobre as minhas experiências, alguns pontos que compõem o conceito de UX e informações importantes que compartilho diariamente com os alunos da Kenzie Academy Brasil, escola de programação para desenvolvedores full stack, em que atuo hoje como Facilitadora de Ensino, ajudando jovens devs no mundo do desenvolvimento web!

Responsividade CSS: Mas afinal, o que de fato é isso? ou melhor, o que é um site responsivo?

Para o universo da programação web, a responsividade sugere que o design do website responda dinamicamente ao ambiente atual, com base no tamanho da tela, plataforma e orientação. Ou seja, é a capacidade que um website tem de se adaptar a tela do dispositivo utilizado pelo usuário, independentemente do tamanho e resolução, de forma a não comprometer a sua usabilidade.

E por que a responsividade é tão importante?

Com a evolução da tecnologia e os diversos dispositivos de vários tamanhos e resoluções desenvolvidos e lançados no mercado, a web consequentemente precisou evoluir para acompanhar a evolução desses dispositivos, já que agora os usuários podem acessar à internet de diversas maneiras, smartphones, smart TVs, desktops de diferentes tamanhos e muito mais!

Tá, mas onde entra a experiência de usuário?

A experiência de usuário é um tópico amplo e é constituído por diversos pilares. Entre os principais que destaco são: a estética, a usabilidade e a acessibilidade. Antes de mais nada, gostaria de deixar bem claro que, cada um desses tópicos, sozinhos, não significam uma boa experiência de usuário, o que torna isso real é a implementação deles em conjunto.

Estética

Muitos quando ouvem falar pela primeira vez de UX (User Experience), pensam automaticamente no design do site. Ser esteticamente atrativo não é o ponto fundamental para uma boa experiência de usuário, mas certamente é muito importante. Afinal, a primeira impressão é o que segura ou não, o usuário no seu site, nos primeiros segundos dentro dele. Neste caso, a primeira impressão é a que fica! #ficadica

Usabilidade

A usabilidade está ligada principalmente à facilidade de uso, ou seja, o quão fácil é a utilização das funcionalidades do seu site.

Um ponto muito importante relacionado à usabilidade é em relação às convenções de implementação já consolidadas na web, ou seja, padrões aos quais o usuário já está acostumado. Não seguir essas convenções causa uma quebra no princípio da usabilidade e isso é significativamente ruim.

Por exemplo, a área do usuário dentro de um site, como logar ou criar conta, geralmente se localiza no topo da página, ao lado direito. Então o usuário já sabe onde procurar por essas informações, mas se não estiver posicionado dessa maneira, ele terá uma dificuldade para se localizar. A dica aqui é: deixe o layout intuitivo e se coloque no lugar do usuário, como ele vai se familiarizar mais rápido com sua página? Facilite ao máximo para ele, as vezes o óbvio precisa ser dito e, neste caso, visto. 😉

Acessibilidade

A acessibilidade refere-se às possibilidades de acesso que o seu website proporciona, ou seja, a garantia de que poderá ser acessado de diferentes dispositivos, além dos notebooks e computadores de mesa, como celulares e tablets. E é exatamente aqui que entra a responsividade, que falamos no começo deste artigo.

E não para por aí, a acessibilidade também tem o objetivo de incluir usuários que possuem algum tipo de limitação física, como a deficiência visual ou auditiva.

Entendendo a responsividade CSS na prática

Existem algumas técnicas que nos ajudam a implementar a responsividade na prática, que consistem na utilização de propriedades CSS de flexibilização de elementos e adição de breakpoints, através das media queries.

Chegou a hora de você conferir as dicas valiosas que separei pra você! Vamos lá?

Dica 1 – Flexbox

O Flexible Box Module (Módulo de Caixa Flexível) ou, simplesmente Flexbox, como é mais comumente chamado, é um conceito que facilita bastante a vida dos desenvolvedores quando se trata de alinhamento de elementos. O Flexbox possui propriedades avançadas de posicionamento e, ao mesmo tempo, é muito simples de se utilizar, seja para alinhar elementos em linha ou coluna, esquerda, direita ou centro, e também possibilita adicionar espaçamento, tudo isso de maneira dinâmica! O que facilita, e muito a implementação da responsividade.

Curtiu? Quer saber mais sobre? Então recomendo você dar uma olhada nesse artigo aqui, da CSS-Tricks.

Dica 2 – Media query e os breakpoints

Como você viu na dica acima, o Flexbox facilita bastante a vida, inclusive, se tratando de responsividade, mas, infelizmente, ele nem sempre resolve todos os nossos problemas. Para certas situações, como diminuir o tamanho de um título, para deixar proporcional à tela de um celular, por exemplo, nós vamos precisar utilizar outra técnica, a media query.

Media query é uma regra CSS, que nos possibilita a adição de breakpoints no site, mas como funciona isso? Bom, as media queries nos permitem informar uma condição, através da largura, por exemplo, para a aplicação de certo estilo. Ou seja, quando a largura de tela estiver entre 680px e 768px (tela de tablet), por exemplo, ele aplica determinado estilo.

Quer saber mais sobre as media queries? Da uma olhada nesse artigo aqui!

Dica 3 – Aba toggle device no DevTools do navegador

Aqui vai uma dica um pouco mais técnica, para os curiosos ou programadores iniciantes. A aba toggle device é uma ferramenta disponibilizada pelos navegadores, que nos permite fazer testes e verificar a aparência atual do nosso website em uma resolução específica. Para isso, basta acessar o devtools e, no canto superior, esquerdo da aba do devtools, você vai perceber que há um ícone de um tablet e de um celular, é só clicar nesse ícone e a página vai ficar mais ou menos assim:

Também há uma barra cinza no topo da página que disponibiliza um atalho para os tamanhos de dispositivos mais comuns:

Dica 4 – Garantir a compatibilidade do website nos diversos navegadores

Além da garantia de adaptação com as diferentes resoluções de dispositivos, para assegurar uma boa experiência de usuário, também é importante garantir a compatibilidade com os diversos navegadores disponíveis como, por exemplo, o Google Chrome, o Mozilla Firefox, o Microsoft Edge, e por aí vai.

Dica 5 – Dar foco para as informações mais importantes

Os dispositivos móveis, como celulares e tablets, possuem uma tela de tamanho menor que os notebooks ou computadores de mesa, obviamente. Então, para que o usuário tenha uma boa experiência, o ideal é viabilizar um ambiente no qual ele faça o menor esforço possível para encontrar a informação que procura, apesar de estar utilizando uma tela menor.

Para resolver isso, nós temos duas opções: colocar no final da página, os itens que podem ser interessantes e, até mesmo úteis para o usuário, mas não são imprescindíveis para a sua navegação, como, por exemplo, posts relacionados, levando em consideração um blog. Ou, quando se trata de itens que não afetam a navegação, como ícones ou imagens, você pode simplesmente esconder. Dessa maneira, você vai dar foco ao conteúdo principal e ajudar o usuário a encontrar mais rápido aquilo que procura.

Concluindo, a responsividade de um site não depende de um tópico em específico. Ele é o conjunto de várias características e é essa combinação de sucesso que faz seu site ter mais ou menos acessos. Considerando que, cada vez mais, os usuários têm voz, opiniões e são ativos em plataformas digitais, precisamos considerar uma boa experiência para eles com nossos produtos, do início ao fim de sua jornada!

Bom, espero que tenha gostado de conhecer um pouco mais sobre o trabalho  de um dev front end e, também, ter te ajudado a entender um pouco mais sobre esse grande universo que é a experiência de usuário. Mas não para por ai não, viu! o mundo do desenvolvimento web é vasto, amplo e abre um leque para diversos assuntos.

Se você gostou desse conteúdo e gostaria de entrar na área de programação, eu recomendo você conhecer mais sobre a Kenzie Academy Brasil! Dentro do nosso currículo, ensinamos as principais linguagens e tecnologias do mercado como  CSS,  HTML, JavaScript (React e Redux), Python e Node.

Últimas vagas para a Turma de Outubro: https://participe.kenzie.com.br/ 

A Kenzie Academy é uma escola americana de programação para desenvolvedores, em que você estuda por 12 meses, em tempo integral, as principais linguagens do mercado para entrar no mercado de tecnologia atuando como um Full Stack.

Leia também:

2+
Mostrar 2 Comentários

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *