USABILIDADE

Usabilidade é um dos pontos centrais de um bom web design, segundo Ryan e Jones (2009). E normalmente é ignorada ou não sou priorizada nos projetos. Sendo que é muito importante porque dá certeza de que o conteúdo do site é acessado por uma audiência ampla e que entrega a informação e funcionalidade que o usuário quer em um caminho que é confortável para ele (RYAN, JONES, 2009, p.44).

A teoria da usabilidade é que sendo simples, elegante e funcional o design ajuda os usuários a achar o que eles querem achar mais efetivamente. É sobre garantir que as coisas funcionem intuitivamente, eliminando barreiras que atrapalham os objetivos dos usuários e da empresa, que é o objetivo de que o usuário converta (RYAN, JONES, 2009, p.44). Segundo Stokes (2009), usabilidade é uma medida de quão o site é fácil de usar.

Para Krug (2008), a usabilidade, num sentido mais abrangente, significa ter certeza realmente de que algo funciona bem, funciona bem para uma pessoa de média capacidade e experiência.

O autor também afirma que todos os tipos de coisas em uma página Web podem nos tirar a atenção ou mesmo nos fazer parar e pensar desnecessariamente. Um exemplo disso é a utilização de nomes complicados para termos no site que levam o usuário a refletir sobre seu real significado. Outro exemplo é sobre os botões que não são obviamente clicáveis. A questão de fazer o usuário pensar é que cada uma dessas dúvidas e reflexões acrescenta ao nosso trabalho cognitivo, distraindo então a atenção da tarefa que tínhamos em mãos. Essas distrações até podem ser ligeiras, mas também podem ser motivos de perda de usuários (KRUG, 2008, p.15).

Um ponto muito interessante que Krug (2008) aborda para sites é a questão da leitura. Segundo ele, as pessoas não leem páginas web. Pelo contrário, nós escaneamos as páginas, procurando por palavras e frases que capturem nossos olhos.

A exceção existe para páginas que contêm histórias, reportagens ou mesmo descrição de produto. Segundo ele, esse comportamento acontece porque o uso da web é motivado pelo desejo de salvar tempo. Com a sensação de que nós não podemos ter tempo para ler mais do que o necessário. Além do mais o que nós

olhamos na página depende do que nós temos em mente, mas usualmente é apenas uma fração do que há na página (KRUG, 2008, p22).

Carregamento de site também é um ponto importante. Steve Krug (2008) afirma que a maioria dos usuários não gostam de páginas de carregamento lento. E isso pode fazer com que abandonem o site. Segundo ele, o botão de voltar no navegador é o mais acessado, o que deixa claro como a decisão é tomada de forma rápido pelo usuário.

Quando a criação de estrutura e conteúdo da página, Krug (2008) realça a necessidade de trabalhar uma boa hierarquia visual, que seja clara em questão do que deve ser lido primeiro. Segundo ele, quanto mais importante algo é, mais proeminente ele deve ser na página. Então deve-se trabalhar diferentes formas e tamanhos para diferenciar a importância das informações.

Figura 14 – Diferença de leitura das páginas

Fonte: Não me Faça Pensar, Steve Krug.

Segundo Wilson (2010), a usabilidade possui múltiplos componente e é tradicionalmente associada com 5 atributos:

a) Aprendizagem: o sistema/site deve ser fácil de aprender para que o usuário possa rapidamente usá-lo (WILSON, 2010, p.6).

b) Eficiência: deve ser eficiente a fim de que, uma que vez que o usuário tenha aprendido, seja mais produtivo nas outras vezes em que usar (idem).

c) Memorável: deve ser fácil de lembrar para que mesmo que o usuário passe um tempo sem acessar o site, quando retornar, ele consiga usar facilmente (idem).

d) Erros: deve ter uma taxa de erro baixa para que os usuários errem pouco durante a navegação e se cometerem, seja fácil de recuperar (idem).

e) Satisfação: deve ser agradável de usar para que os usuários fiquem satisfeitos subjetivamente ao usá-lo.

E quando passamos a considerar a usabilidade para páginas de destino, devemos sempre contar com a seguinte imagem da mentalidade e do comportamento típicos dos visitantes (ASH, 2008, p.131):

• O visitante tem extrema impaciência (ASH, 2008, p.131):.

• O nível de comprometimento do visitante em seu site é baixo (idem). • O texto é escaneado, e não lido (idem).

• O visitante tem uma fixação curta em itens de interesse mais proeminentes (idem).

• O visitante prestará atenção a certos tipos de imagens (idem). • A próxima ação típica desejada do visitante é clicar em algo (idem).

3.3.1 Formulários

Um elemento importante em páginas web são os formulários de contato. A usabilidade dos formulários é fundamental para garantir uma boa experiência do usuário. E para entender a melhor forma de desenhá-los, existem pesquisas realizadas pelo NN Group (Nielsen Norman Group), um grupo liderado por Jakob Nielsen e Don Norman que são referências em usabilidade e design de interfaces e que realizam grandes pesquisas avaliando interfaces digitais e orientando decisões de design, definem as melhores práticas para a construção de formulário baseados em testes de usabilidades.

Dois elementos são destacados pelas pesquisas, a label e o placeholder, sendo a label o nome do campo que será visto pelo usuário e o placeholder podendo ser um texto auxiliar ou exemplo de como preencher o campo que vai dentro do mesmo. Abaixo, na figura 13, é possível ver a melhor estrutura de label, campo e

Figura 15 – Como um campo de formulário deve ser

Fonte: NN Group https://www.nngroup.com/articles/form-design-placeholders.

Segundo Sherwin (2014), que descreveu sobre estes elementos em um artigo, apesar de muitas pessoas usarem o placeholder como sendo o próprio nome do campo, ou seja, a própria label, para encurtar o tamanho do formulário quando se tem muitos campos, isto torna difícil para as pessoas lembrarem quais as informações daquele campo quando estão preenchendo, por exemplo. Além de tornar impossível que os usuários verifiquem as informações preenchidas anates de enviar.

Sherwin (2014), destaca também que nos testes de usabilidades realizados, quanto menos campos usavam textos em placeholder, melhor era a experiência do usuário. Ou seja, o placeholder deve ser usado quando necessário para auxiliar o entendimento do usuário.

Em outra pesquisa do NN Group focada em dispositivos mobile, afirma-se que digitar uma senha leva duas vezes mais no celular do que em computadores e notebooks. Como soluções, destacam que o login com redes sociais é uma forma de o usuário não precisar digitar muitas coisas e ter menos chances de erros. Além de validar se realmente todos os campos do formulário são obrigatórios para o usuário completar uma ação.

3.3.2 Teste de usabilidade

Segundo Rogers, Sharp e Preece (2015) avaliar é uma parte integrante do processo de design e que se concentra tanto na usabilidade projeto, onde analisa-se a facilidade de aprender e usar, quanto a experiência dos usuários que interagem com ele, entendendo por exemplo quão motivadora e divertida é a interação, com o objetivo de melhorar o design.

Existem diversas formas de avaliação, mas basicamente os avaliadores vão coletar informações sobre experiências dos usuários ao interagirem com um protótipo, com um sistema, um site, ou qualquer aplicação de design, mesmo sendo um wireframe de baixa fidelidade. Nessa avaliação é fundamental explicar ao usuário a importância do teste e também definir os aspectos que serão avaliados (ROGERS, SHARP, PREECE, 2015 p.433).

É interessante lembrar que principalmente em um processo de desenvolvimento ágil, como o Lean UX, as avaliações são feitas com protótipos ou

wireframes simples para validar a ideia o mais rápido possível e colocando pouco

esforço de desenvolvimento na interface. 3.3.2.1 Tipos de testes

Uma das formas de se validar uma interface é através de uma avaliação heurística, que foi desenvolvida por Nielsen. É uma avaliação feita por profissionais e não por usuários e visa entender se os elementos da interface do usuário, como por exemplo se menus e estrutura de navegação, estão conforme aos princípios já testados de usabilidade, que são as heurísticas. Primeiramente Nielsen criou 10 heurísticas e posteriormente diferentes autores modificaram conforme tipos específicos de interfaces a serem testadas (ROGERS, SHARP, PREECE, 2015 p.404).

Segundo Krug (2008), em um teste de usabilidade mostra-se o site ou uma página específica do site para o usuário e pede-se a ele que primeiramente entenda o que é. E posteriormente que o usuário tente executar as tarefas indicadas pelo designer. Lembrando também de pedir ao usuário que fale alto o que estiver pensando quanto à interface para que seja possível entender a percepção que ele tem e assim identificar erros e chances de melhoria para uma melhor compreensão ou execução de tarefas.

Um dos testes mencionados é o teste de compreensão. Neste teste é mostrado ao usuário o site desejado para ver se ele compreende o propósito do site, como funciona, como o site está organizado. E a outra forma de avaliação é selecionar uma tarefa e pedir ao usuário que a realize (KRUG, 2008, p. 144).

Para interfaces digitais existe também o teste A/B, que basicamente é a execução de duas diferentes versões de uma página ao mesmo tempo, onde mede-

se os resultados a partir do objetivo do teste para identificar qual versão produz melhores resultados (RYAN, JONES, 2009, p. 123).

Uma das ferramentas mais conhecidas para realizar testes A/B é o Optimizely. Onde é possível registrar nos elementos da interface, as métricas de cliques para por exemplo entender qual página está gerando mais conversões. E também por padrão a ferramenta calcula a taxa de engajamento, que é qualquer interação que o usuário tem com a página. Tanto os cliques, como movimentação de mouse e rolagem pela página.

Segundo Page (2012), para a realização de um teste A/B que impacte as métricas de um site, melhores os elementos da página e seja efetivo, é muito importante ter uma abordagem e processo claros. O autor afirma que a falta de uma hipótese bem desenvolvida pode gerar pouco impacto e demorar a ter resultados.

Um exemplo dado por ele de uma hipótese de melhoria, seria "Nossos comentários no site revelaram que os visitantes da página inicial parecem estar confusos com o número de opções em que podem acessar e navegar" (PAGE, 2012, p.156, tradução nossa).

Sendo assim, Page (2012) define o seguinte processo mostrado na figura 14 para ter resultados efetivos em um teste A/B. No fluxo apresentado, para a realização do teste, inicia-se com a criação de ideias e uma hipótese de melhoria ou de um problema identificado e termina com a execução de próximos testes e abordagens para continuar maximizando o impacto dos testes a partir da hipótese gerada.

Figura 16 – Melhores práticas de abordagem de testes traduzida pelo aluno

Fonte: Livro Website Optimization, página 157.

Em questão da quantidade e o nível de alterações em uma página a ser melhorada e testada, uma boa abordagem inicial é executar um teste A/B entre a página atual e um design totalmente novo, uma versão radicalmente diferente podendo-se mover, adicionar e remover elementos do design principal. Isto é efetivo

porque tem maiores chances de influenciar significativamente as taxas de conversão do site. Podendo ser chamado de teste de inovação. E nesta nova página é importante envolver também o time de marketing para garantir que a estratégia e objetivos da página sejam executados e analisados (PAGE, 2012, p.160).

3.4 DESIGN RESPONSIVO

Com a evolução dos dispositivos de acesso à internet, web designers mudaram a forma como projetam páginas. Antigamente os sites só precisavam funcionar em monitores que variavam pouca coisa em tamanho. Já hoje, as telas são dos mais variados tamanhos.

Um marco dessa mudança, foi com a entrada do iPhone em 2007 no mercado. Com isto, por um tempo passou-se a projetar dois sites; um para funcionar em desktop e outro otimizado para funcionar especificamente em iPhone. Porém, logo o mercado reagiu com a entrada de novos modelos de dispositivos em diversos tamanhos, surgiu então a necessidade de uma solução que funcionasse em todos os tamanhos de tela, pois não seria sustentável criar diferentes páginas para cada uma. A solução ideal era uma forma de criar sites que pudessem se adaptar às telas em que estavam sendo exibidos (PETERSSON, 2014, p.11).

Figura 17 – Site não adaptado para diferentes dispositivos

Fonte: Learning Responsive Web Design, Clarissa Peterson.

Ethan Marcotte (2011) afirma que além de afetar a experiência do usuário com rolagens horizontais e conteúdo cortado quando o site não é ajustado, os nossos negócios e clientes também podem ser afetados. Na figura 15 é mostrado um exemplo de página não adaptada para um tamanho menor de dispositivo, isto porque apresenta rolagem lateral e vertical cortando o conteúdo da página e dificultando a leitura do usuário, onde é necessário que o usuário dê um zoom e utilize os dedos para navegar pelo conteúdo que aparece cortado na tela.

Desta forma, criou-se o Web Design Responsivo. Um método de criação de sites que são flexíveis, que não dependem de um tamanho de tela fixo, e que também são capazes de detectar a tela e ajustar o design para proporcionar uma ótima experiência de visualização naquele dispositivo, como é possível ver na figura 16, onde o layout é adaptado às diferentes resoluções organizando o conteúdo da melhor forma para cada experiência (PETERSSON, 2014, p.11).

Figura 18 – Site adaptado para diferentes dispositivos

Fonte: Learning Responsive Web Design, Clarissa Peterson.

Buscando entender elementos da experiência do usuário que deveriam ser analisados na comparação de acessos em desktop e mobile, Jacob Nielsen, considerado o “papa” da usabilidade, realizou no ano de 2009 seus primeiros testes de usabilidade mobile e identificou pontos importantes:

a) Na execução de tarefas em dispositivos mobile, os usuários mais falham do que as realizam com sucesso (NIELSEN, 2012, p.10);

b) As páginas demoram muito mais a carregar quando comparado ao acesso em desktop. O que faz com que os usuários desistam da navegação. Atualmente, isto é um dos requisitos considerados pelo Google para indexação de sites (idem);

c) A rolagem excessiva da página é outro problema, o excesso de conteúdo e a não adaptação do site, faz com que os usuários percam informações e fiquem insatisfeitos (idem);

Em relação à performance e resultados de um site, a taxa de conversão pode ser muito afetada sem páginas responsivas. Um estudo realizado em 2012 pela empresa analítica Monetate com 100 milhões de visitas aos e-commerces dos seus clientes, mostrou a grande diferença nas taxas de conversão via desktop, mobile e tablete (figura 17).

Figura 19 – Taxa de conversão por dispositivo

Fonte: Mobile Usability, Jacob Nielsen.

A conclusão desta pesquisa é de que existem muitas oportunidades de aumentar o número de vendas se as empresas projetarem sites otimizados para celular. Afinal, as vendas em mobile poderiam ser 2,5 vezes maiores se os sites para celular fossem tão fáceis de usar quanto os sites de desktop (NIELSEN, 2012, p.11). Hoje, a não otimização de sites para diferentes dispositivos também afeta os resultados de pesquisa. Em 2012 o Google recomendou a otimização para

smartphones, não só porque cria uma experiência melhor para os usuários, mas

também porque permite que o rastreador de sites do Google recuperem o conteúdo do site com mais eficiência (PETERSSON, 2014, p.17).

Juntando os fatos argumentados acima por Nielsen, o autor Ethan Marcotte (2011) define os ingredientes necessários para a construção de sites responsivos como sendo: layout baseado em grid flexível, imagens e mídia flexíveis e media queries, um módulo da especificação CSS3. Através destes, o autor afirma que estaremos criando um design que se adapta às restrições dos navegadores ou dispositivos que o renderizam, criando desta forma um design que responde às necessidades do usuário (MARCOTTE, 2011, p. 9).

Já Petersson (2014) afirma que se deve pensar primeiro no conteúdo. Isto porque o usuário chega a um site interessado no seu conteúdo, sem pensar no funcionamento do site, mas tendo a expectativa de que o conteúdo se adaptará em qualquer dispositivo que ele acessar. Assim, o designer deve ter certeza que o conteúdo será adaptável a qualquer tela.

Porém, pensando no processo de criação de landing pages estratégicas, o conteúdo é interessante vir antes da codificação da página, portanto segue-se com a ordem do autor Ethan Marcotte.

3.4.1 Grid Flexível

A partir do design gráfico que surgiu a ideia de sistema de grid. Designers populares do tempo Modernista o conceituaram como “grid tipográfica: um sistema racional de colunas e linhas, sobre o qual poderiam ser colocados módulos de conteúdo” e então este conceito foi sendo adaptado ao mundo web, já que diferentemente do papel, trabalhamos com a janela do navegador, que pode ser visualizada nos mais flexíveis tamanhos por vontade do usuário ou esmo por ser limitado ao dispositivo, como os smartphones (MARCOTTE, 2011, p.14, tradução nossa).

Figura 20 – Exemplo de grid adaptado em diferentes dispositivos

Fonte:http://www.midiatismo.com.br/design-responsivo-entenda-o-que-e-a-tecnica-e- como-ela-funciona.

Normalmente, segundo Stokes (2009), sites são projetados com um bloco de largura fixa centralizado. No design responsivo, os elementos da página (cabeçalho, conteúdo, imagem principal e outras informações) são arranjados em um grid de colunas que tem um espaço pré-definido. Cada elemento se relaciona proporcionalmente com os outros. Isso permite com que os elementos se reorganizem em relação a diferentes tamanhos de tela. E para telas muito estreitas ou de tamanhos que quebram o layout mesmo sendo responsivo, pode-se usar as medias queries. A relação de colunas de um grid é visualizada na figura 18.

É bastante comum usar grades de 12 colunas para sites, porque ele oferece muita flexibilidade: 12 é divisível por 2, 3, 4 e 6, então seu layout pode incluir seções que usam qualquer um desses números de colunas - até mesmo Tudo na mesma página (PETERSSON, 2014, p.121).

Figura 21 – Relação de colunas do grid responsivo

3.4.2 Imagens flexíveis

Outro ponto a se considerar na criação de um site responsivo são as imagens que devem também se adaptar, assim como o conteúdo, às diferentes telas, como dito pelos autores Ethan Marcotte e Clarissa Petterson.

Considerando que as imagens são inseridas dentro de um outro elemento, como exemplo o container, usado para englobar o conteúdo e alinhá-lo, o estilo max-width: 100% forçará que a largura máxima da imagem corresponda à largura do container (MARCOTTE, 2011, p.45).

Ficaria então: img {

max-width: 100%; }

Figura 22 – À esquerda sem adaptação e à direita com max-width aplicado

Fonte: Responsive Web Design, Ethan Marcotte.

Já Petersson (2014) descreve a flexibilidade de imagens configurando a largura em %. Desta forma, a imagem sempre terá sua largura relativa ao elemento superior.

img {

width: 50%; }

E para dispositivos móveis seria usado o max-width descrito por Marcotte (2011), por conta de que em telas pequenas, o site assume a estrutura de possuir uma coluna, ao invés de 3 ou 4 como em resoluções maiores. Desta forma, a imagem seria adaptada com a utilização de media queries, que será a próxima etapa. (PETERSSON, 2014, p.159), como mostrado na figura 21 na diferença da apresentação das fotos nos dispositivos, ficando assim:

@media only screen and (max-width: 28em) {

article img { width: auto; float: none; padding-left:0; } }

Figura 23 – Imagem preencheendo toda a largura da coluna

Fonte: Learning Responsive Web Design, Clarissa Peterson.

E assim, o max-width seria usado com a função de evitar que as imagens, principalmente em dispositivos móveis, ultrapassem a tela, por conta do estilo width:

auto; finalizando então com o max-width aplicado para toda img do site (PETERSSON, 2014, p.163):

img {

max-width:100%; }

Petersson (2014) também chama atenção para otimização de imagens, para redução do tempo de carregamento do site e também acessibilidade, com o uso da tag alt para descrever a imagem.