User Experience - Blog da TreinaWeb User Experience - Blog da TreinaWeb
Posts da Tag: User Experience - Blog da TreinaWeb
Usabilidade é um conceito importantíssimo no processo de digitalização de qualquer empresa ou negócio. Pensar em uma ótima experiência para o usuário – termo conhecido como User Experience (UX) em inglês – é a principal tarefa dos profissionais de usabilidade dentro de uma organização. Basicamente, ele é o responsável por analisar, medir e melhorar o nível de satisfação do usuário ao utilizar um site ou aplicativo. Quanto mais a solução atender as necessidades, mais satisfeito o usuário final ficará.
Usar as técnicas de acessibilidade é um dos elementos mais importantes no desenvolvimento moderno de sites e aplicativos, pois visa adaptar as páginas para que o maior número de usuários possa ter acesso ao conteúdo publicado na web, caso não conheça o conceito de design inclusivo, já falamos aqui no blog sobre design inclusivo ou também conhecido como design universal. Com isso, todos os tipos de pessoas terão uma melhor experiência se a acessibilidade for levada em consideração.
É fundamental pensar em acessibilidade web no início do projeto, já que implementá-la adequadamente na etapa final, além de ser mais difícil, pode ter um custo um pouco mais elevado. Por isso, todo profissional de tecnologia deveria entender qual é a importância de abordar esse tema, bem como ter um entendimento, no mínimo intermediário, de como ele é tratado, elaborado e aplicado.
De acordo com o World Wide Web Consortium – W3C, um consórcio internacional no qual organizações filiadas trabalham juntas para desenvolver padrões para a web, as técnicas de acessibilidade na internet permite que cada pessoa possa "perceber, entender, navegar, interagir e contribuir para a web".
Nesse contexto, a acessibilidade de sites e aplicativos envolvem todas as condições necessárias para melhorar o acesso à internet, de pessoas com deficiências visuais, auditivas, físicas, de fala, cognitivas, neurológicas, entre outras.
Segundo a cartilha de acessibilidade do W3C Brasil, acessibilidade na web significa que pessoas com deficiência devem ser incluídas no ambiente digital. Ela também beneficia outros indivíduos que, ainda que não apresentem algum distúrbio, podem ter sua experiência de navegação prejudicada, como idosos.
Tim Berners-Lee, criador da World Wide Web, afirma que "o poder da web está na sua universalidade. O acesso por todas as pessoas, não obstante a sua deficiência, é um aspecto essencial". Para o W3C, "é essencial que a web seja acessível, de modo a prover igualdade de acesso e de oportunidades para pessoas com diferentes capacidades".
Nesse cenário, para possibilitar a igualdade de oportunidades para que diferentes tipos de pessoas, independentemente de suas situações, possam ter autonomia para utilizar a web, é necessário considerar a implementação de algumas ferramentas de acessibilidade em sites ou aplicativos. Nos últimos anos, a internet fez grandes avanços para tornar as páginas mais acessíveis, no entanto, é responsabilidade dos designers e desenvolvedores melhorar seus próprios websites. Abaixo vamos comentar sobre alguns recursos fáceis de serem implementados:
É impressionante como a quantidade de sites e páginas na web crescem cada dia mais. Por isso, juntamente com o crescimento da internet, também aumenta os padrões, técnicas e práticas de desenvolvimento web.
Diante disso, o HTML com uma boa semântica visa descrever o significado do conteúdo presente em documentos HTML, deixando tudo mais claro, tanto para desenvolvedores, quanto para browsers. O elemento button tem diversos estilos já aplicados nele mesmo e é embutido com padrões de acessibilidade pelo teclado, botões estes que podem ser navegados por meio da tecla Tab, e ativados utilizando a tecla Enter.
Além da acessibilidade na internet, alguns dos benefícios de utilizar o HTML semântico são:
Torna o código mais fácil de ser lido, entendido e desenvolvido;
Torna a página mais fácil de ser encontrada pelos mecanismos de busca.
Leitores de tela são programas utilizados para capturar qualquer informação apresentada em texto, com o objetivo de obter uma resposta do computador por meio de um sintetizador de voz. Em suma, o sistema passa por textos, fazendo a leitura de tudo o que ele consegue identificar, e permitindo que o usuário escute o conteúdo publicado na internet.
Esta ferramenta possibilita a navegação por menus, janelas e textos presentes em praticamente qualquer site ou aplicativo. A navegação é feita por meio de um teclado comum, então nenhuma adaptação ou equipamento especial é preciso para que este tipo de programa funcione. No entanto, é importante destacar que esse recurso não vai no site e, usar elementos como HTML semântico e atributo alt nas imagens, auxilia em seu funcionamento correto.
A navegação por meio de leitores de tela, que permite que o usuário consiga acompanhar a estrutura da página, funciona basicamente de três formas:
Lendo toda a página ao navegar com as setas;
Lendo os links ao navegar com a tecla Tab;
Lendo os cabeçalhos ao navegar com a tecla H.
Esta ferramenta é usada principalmente por pessoas portadoras de alguma deficiência visual, seja ela permanente ou momentânea. Segundo levantamento feito pelo Instituto Brasileiro de Geografia e Estatística – IBGE em 2010, apenas no Brasil, existem mais de 6,5 milhões de pessoas com deficiência visual, sendo 582 mil cegas e 6 milhões com baixa visão. Considerando estes dados, uma boa parte da população brasileira pode vir a usar este tipo de recurso.
Leitor de Libras
Leitor de Libras é responsável por traduzir automaticamente conteúdos digitais, seja em texto, áudio, ou vídeo, para a Língua Brasileira de Sinais – Libras. Com isso, o programa permite que pessoas portadoras de alguma deficiência auditiva possam acessar os conteúdos da internet, em sua língua de comunicação, reduzindo as dificuldades e quebrando as barreiras de acesso à informação.
Uma ótima ferramenta gratuita é o Suite VLibras, um software brasileiro, fruto de uma parceria entre o Ministério do Planejamento, Orçamento e Gestão (MP), por meio da Secretaria de Tecnologia da Informação (STI) e a Universidade Federal da Paraíba (UFPB). O recurso consiste em um conjunto de ferramentas computacionais de código aberto, responsável por traduzir os mais variados conteúdos digitais.
Abaixo é possível ver o leitor de libras funcionando no site do Governo federal:
O leitor de Libras é usando principalmente por pessoas portadoras de deficiência auditiva. Este grupo social encontra bastante dificuldade para ler, escrever e se comunicar de maneira oral na língua do seu país nativo. De acordo com o Censo de 2010, cerca de 10 milhões de brasileiros possuem algum tipo de deficiência auditiva. Outro dado importante de destacar é que 80% dos surdos não compreendem o português corretamente e precisam da Libras para receber informações.
O Alto Contraste é uma ferramenta que deixa o fundo da página totalmente escuro e as letras mais claras, podendo também ser relacionado à troca do tamanho das fontes. Este recurso, utilizado principalmente por pessoas que possuem médio ou alto déficit de visão, bem como usuários que apresentam algum grau de daltonismo, permite aumentar o contraste das cores do texto e das imagens na tela, facilitando sua identificação.
Podemos ver o recurso de alto contraste disponível na página do Governo:
Ao clicar no botão de alto contraste no canto superior direito, é possível ver o resultado:
Vale lembrar que a utilização de cores é um dos principais problemas de acessibilidade, pois nem todos os usuários as visualizam da mesma maneira, já que diversas pesquisas revelam que cerca de 8,5% da população masculina mundial apresentam deficiência na percepção de cores.
Sabemos que a cor é um recurso importante que costumamos utilizar para se comunicar na web. Entretanto, é um erro transmitir as informações somente por meio deste elemento visual. A cor deve sempre complementar uma mensagem, mas não pode ser o único mecanismo para passar o conteúdo. Para alcançar todas as pessoas, é recomendável que os designer e desenvolvedores adicionem ícones ou textos, mostrando claramente ao usuário a informação que ele deseja.
Ferramenta de Lupa e Zoom
A ferramenta de Lupa tem o objetivo de ampliar palavras e imagens. O recurso, que também é um software à parte, permite que o usuário com baixa visão aumente o tamanho da fonte e/ou das imagens na tela do dispositivo, podendo aplicá-lo em toda tela ou em parte dela. Em alguns programas é possível personalizar a disposição da ferramenta nos modos: tela inteira, lente e ancorado.
Somado ao uso da Lupa, é recomendável que designers e programadores não desative a funcionalidade de zoom nas páginas da web, para aquelas pessoas que utilizam dispositivos móveis. O bloqueio do zoom, que está dentro do próprio site, prejudica pessoas que sofrem com déficit de visão, sendo que é sim possível desenvolver uma boa aplicação com zoom de até 200%.
Muitos sites disponibilizam a ferramenta de zoom para seu conteúdo, veja como exemplo, o site do Governo do estado de São Paulo:
De modo geral, vale lembrar que pessoas com baixa visão, mesmo que tenham acesso ampliado em seus dispositivos, estão mais propensas à fadiga, por conta da forte exposição a que ficam submetidas aos raios emitidos pelas telas. Por isso a importância de se pensar em um conjunto de recursos de acessibilidade, e não apenas na utilização de uma única ferramenta de maneira isolada.
How to Conduct a Heuristic Evaluation – Interaction Design Foundation
Ao desenhar uma interface, é importante priorizar os elementos principais e estabelecer uma hierarquia visual sempre buscando responder as questões iniciais que um usuário possui ao acessar a sua aplicação. Não o faça pensar, tente deixar claro: onde está, o que pode fazer e onde pode ir. Caso contrário, há uma grande possibilidade que esse usuário abandone e deixe de usá-la, aumentando o que chamamos de "taxa de rejeição".
Em seu artigo Communicating with Visual Hierarchy, Luke Wroblewski, diretor de produtos da Google, explica que a apresentação visual de uma interface é essencial para:
Informar aos usuários – A interface deve guiar o usuário de uma ação para outra e estabelecer relacionamento entre elas.
Deixar claro a organização – Manter a consistência dos elementos da sua aplicação
Comunicar efetivamente a sua marca para sua audiência – Criando um impacto emocional positivo e fornecendo ao seu usuário uma experiência agradável.
Fatores que influenciam na hierarquia visual
A maneira que processamos as informações é afetada por alguns fatores que contribuem para que priorizemos determinados elementos. Alguns desses fatores incluem:
Tamanho – Uma regra simples e direta: quanto maior o elemento, maior a chance de atrair a atenção do usuário.
Cor – As cores brilhantes são mais propensas a chamar a atenção do que tons monótonos. Por exemplo, todos nós já utilizamos um marca-texto para destacar pontos importantes de um texto. O amarelo é mais rico e brilhante do que o branco, então ele se destaca. Depois das cores brilhantes, vem as cores escuras, e na parte inferior da hierarquia das cores, os tons de cinza.
Contraste – Tão importante quanto as cores, o contraste ajuda a destacar os elementos mais importantes da sua aplicação.
Repetição – Repetir estilos pode dar a impressão para o usuário que o conteúdo é relativo. Por exemplo, destacando esta palavra , a forma que o cérebro processa e interpreta a palavra será diferente comparada com o restante do conteúdo.
Proximidade – Elementos similares devem estar próximos um do outro. Com referência aos princípios da Gestalt, nosso cérebro tende a agrupar mais fácil as formas que estão próximas entre si.
Espaço em branco – Conhecido também como espaço negativo, o uso do espaço em branco ajuda a agrupar diferentes seções de uma aplicação e facilitar a legibilidade do conteúdo.
Alguns padrões utilizados
Existem dois formatos que podemos utilizar quando desenhamos e estruturamos os elementos de uma aplicação web. Os formatos abaixo são baseados nos movimentos dos nossos olhos e podem ser aplicados dentro do contexto da cultura ocidental (leitura da esquerda para direita)
Formato "F"
Com o formato "F", o usuário começa buscando informações ou palavras-chaves pelo topo, quando é encontrado algo de interesse, começa-se a leitura normalmente, formando uma linha horizontal. O resultado final é algo parecido com a letra "F" ou "E" como visto na imagem acima.
Formato "Z"
É possível ver esse formato aplicado na maioria das aplicações web. O formato "Z" é bastante utilizado para interfaces onde a simplicidade é a prioridade e o call to action a principal tarefa da tela. Para aplicações com conteúdo complexo, pode não funcionar tão bem quanto o formato "F", por outro lado pode ajudar a aumentar a taxa de conversão da sua Landing Page.
É importante entender como a sua audiência faz a leitura das informações antes de adotar um padrão de hierarquia. Considere também uma mistura dos itens mencionados no post para chegar a uma solução ideal para o seu negócio. Uma boa hierarquia visual irá diminuir o processo cognitivo dos usuários e destacar os pontos mais importantes para que concluam suas tarefas de uma forma mais eficaz.
Visual Hierarchy – Interaction Design Foundation
Communicating with Visual Hierarchy – Luke Wroblewski
As leis aqui abordadas podem parecer óbvias mas, muitas vezes, esquecemos de aplicá-las durante o processo de design ou simplesmente precisamos justificar nossas decisões de design para todos os envolvidos no projeto.
Existem várias pesquisas para cada lei descrita abaixo mas, para o propósito deste post, daremos uma breve introdução e alguns exemplos de como elas podem ser aplicadas para melhorar a usabilidade do seu produto/serviço.
A lei de Hick tem sido aplicada dentro da área de IHC (Interação Humano-Computador) com a simples ideia de que quanto mais opções de escolha forem apresentadas aos seus usuários, mais tempo levarão para chegarem a uma decisão.
Categorizando escolhas – Imagine um menu de navegação que oferecesse acesso direto para cada página em seu site, os usuários levariam um bom tempo até encontrarem a opção desejada. Agrupando as escolhas em categorias, você pode ocultar as escolhas e exibi-las apenas quando houver uma interação do usuário. Um elemento de interface bem conhecido que utilizamos para este fim é o Dropdown.
Para aplicações com fluxo de navegação complexo, existe uma técnica chamada Card sorting que pode ser útil para definir melhor a taxonomia (rotulação) das categorias e como elas podem ser agrupadas de acordo com seus usuários.
Redução de complexidade – Se a sua aplicação tem um processo complexo, você pode usar a Lei de Hick a seu favor mostrando-o por etapas, tornando-o mais fácil e amigável para os seus usuários.
Em cada etapa, lembre-se de deixar claro para os usuários onde eles estão, onde podem ir e onde já estiveram.
2. Lei de Fitts
Criada pelo psicólogo norte-americano Paul Fitts em 1952, é uma lei que prevê o tempo necessário para mover-se de uma posição inicial até uma posição final com base no tamanho do alvo. Em IHC (Interação Humano-Computador), a lei é normalmente avaliada em interfaces gráficas utilizando um mouse ou outro tipo de ponteiro.
Aumentando a área dos botões – Um elemento de interação deve ser visualmente diferente de elementos que não possuem nenhuma interação. E uma das formas de diferenciá-los é através do tamanho. Aumentando a área do botão, irá aumentar o nível de precisão para interagir com o elemento.
Utilizando os cantos da tela – Em desktop, os cantos da tela possuem um limite no qual você não consegue ultrapassar utilizando o mouse. O cursor do mouse "trava" quando você tenta ultrapassar esse limite. Sendo assim, os usuários precisam de menos precisão para interagir sobre essa área, pois eles podem simplesmente arrastar rapidamente o mouse para um dos cantos que o cursor do mouse não irá ultrapassar. É comum encontrarmos os principais elementos de interação de uma aplicação em uma dessas áreas, como é o caso do botão Iniciar do Windows ou o botão fechar dos navegadores.
3. Lei de Miller
Os estudos de George Miller apontam que a maioria das pessoas armazenam 7 (+-2) itens de informação na memória de curto prazo. Ou seja, a nossa memória de curto prazo comporta entre 5 a 9 itens.
Se uma tarefa tiver uma sequência definida de passos, você deve guiar o usuário utilizando um passo a passo ou algo semelhante. Não force o usuário a memorizar uma série de comandos ou como navegar várias telas para concluir a tarefa.
Embora as teclas de atalho e linhas de comando muitas vezes poupam nosso tempo, não devemos usá-las como únicos meios de interação, pois eles exigem memorização e aprendizado. Se você deve contar com esses atalhos, forneça um guia de referência ou algum outro tipo de material de ajuda para os usuários.
Lei de Hick – Wikipédia
Fitts's Law – Interaction Design Foundation
Miller's Law – Wikipedia
A definição de Affordances foi originalmente proposta pelo psicólogo James Gibson em 1977 para denotar a qualidade de um objeto que permite ao indivíduo identificar suas funcionalidades através de seus atributos (forma, tamanho, peso, etc…) de forma intuitiva, sem explicação.
Por exemplo, quando olhamos para uma maçaneta de um carro, sabemos a sua principal funcionalidade sem nem "pensar", não importando qual o modelo do carro ou se estamos vendo àquele tipo de maçaneta pela primeira vez.
Affordances em interfaces digitais
Não demorou muito para o termo ser utilizado nas disciplinas de IHC (Interação Humano-Computador) e Design de Interação. Em interfaces digitais, quando desenhamos os elementos de uma aplicação, muitas vezes adicionamos sombra, relevo e outros efeitos visuais, geralmente se baseando nos objetos que são utilizados no mundo real. Para entendermos um pouco mais, vamos abordar 4 tipos de affordances que são aplicados em interfaces digitais e o impacto que elas podem causar na usabilidade de uma aplicação.
1. Affordance explícito
É quando tornamos um elemento óbvio e claro das suas funcionalidades, indicando exatamente o que precisa ser feito.
Geralmente utilizado quando ainda não há um padrão definido de como podemos interagir com esse elemento.
2. Affordance padrão
São baseadas nas experiências anteriores e que são conhecidas para maioria dos usuários. Um clássico exemplo é o link sublinhado com a cor azul.
Padrões são úteis, pois somos capazes de reduzir a carga cognitiva dos usuários quando interagem com um determinado elemento.
3. Affordance escondida
Neste tipo, o affordance não está disponível ou claro até que uma ação seja realizada pelo usuário. Por exemplo, um menu dropdown, onde você precisa passar o mouse ou clicar no menu para ver os itens de da lista.
Frequentemente utilizado para diminuir a complexidade visual de um design, exibindo apenas as informações relevantes em um determinado contexto.
4. Affordance metafórica
Utilizamos objetos do mundo real como metáforas em interfaces digitais. Ícones e símbolos são grandes exemplos: carrinho de compra, envelope, telefone, vídeo, câmera, impressora, etc…
Elas podem ajudar a comunicar ideias abstratas sem muitas instruções. Ao utilizá-las, certifique se a sua audiência irá entendê-la.
Entender o conceito de affordances é um dos primeiros passos para desenhar interfaces intuitivas. No seu próximo projeto, após conhecer a sua audiência e entender suas limitações, tente combinar os quatro tipos de affordances descritos acima para criar uma boa experiência do seu produto/serviço aos seus usuários.
Affordances – Interaction Design Foundation
Qual o objetivo e o que queremos aprender com esse protótipo ou protótipos? Como sabemos se estamos chegando perto do design final?
"A experiência do usuário (UX) engloba todos os aspectos da interação do usuário final com a empresa, seus serviços e seus produtos." – Nielsen Norman Group
Uma definição simples mas que sintetiza todos os aspectos de UX.
UX não é somente interface (website, aplicativo, etc…), e sim toda a experiência que os usuários possuem ao utilizar o seu produto ou serviço. É desde o primeiro contato do usuário com a empresa até a relação pós-venda.
E as empresas cada vez mais estão percebendo que investir em UX pode trazer benefícios e um excelente retorno financeiro (ROI).
Veja abaixo alguns casos que provam a importância da experiência do usuário nos projetos:
Scroll infinito pode diminuir as taxas de abandono. O Time.com reduziu a taxa de abandono em 15% depois de implementar o scroll infinito. (Fonte)
A ESPN.com aumentou suas receitas em 35% depois de colher sugestões de seus usuários e implementá-las na sua homepage. (Fonte)
Para cada $1 dólar investido em email marketing, a média de retorno é de $44,25. (Fonte)
88% dos usuários alegam menos chance de retornar a um site depois de uma experiência negativa. (Fonte)
Sites com problemas de performance causam uma perda de $2.6 bilhões de dólares em vendas cada ano. ( Fonte )
O julgamento dos usuários sobre a credibilidade de um site é 75% baseado na sua qualidade estética. (Fonte)
As primeiras impressões são 94% relacionadas ao design. (Fonte)
85% dos adultos acreditam que a versão mobile de um site deve ser tão bom ou melhor quanto a versão desktop. (Fonte)
90% das pessoas usam uma variedade de telas sequencialmente. (Fonte)
Você tem 279,64% mais chances de escalar o Monte Everest do que clicar em um banner. (Fonte)
Em um mercado competitivo, projetar uma boa experiência acaba sendo fundamental para o sucesso de um produto ou serviço. Não investir em UX ou não considerar os usuários durante as etapas do projeto (Design centrado no usuário), implica em projetar algo com base em achismos, baseando-se somente nas necessidades do negócio.