Categoria ‘ Webdesign ’

Introdução: Uma nova visão sobre o Design centrado no usuário

O design centrado no usuário sempre consistiu em observar o comportamento de seus visitantes e otimizar seu conteúdo e funcionalidades de acordo com as necessidades desses visitantes, mas nos últimos anos esse conceito vem evoluindo bastante.

Hoje, já não se trata apenas de garantir que o seu design seja funcional. Existem muitos outros fatores que precisam ser levados em conta, como as necessidades emocionais do indivíduo e suas motivações.

Antes de fazer um compra, pesquisamos em dúzias de sites, comparamos preços, funcionalidades e opiniões, por isso, muitos designers, principalmente fora do Brasil, se dedicam a pesquisas sobre como alcançar o engajamento e incentivar os usuários em suas tomadas de decisão e, principalmente para o varejo, sobre quais gatilhos funcionam para trazer para a web um conceito tão comum no ponto de venda, a compra por impulso, em um cenário onde o excesso de informação torna o processo de compra muito mais cuidadoso, planejado e consequentemente lento.

Nós hoje deixamos de ser simples observadores do comportamento humano, e passamos a ser influenciadores de suas ações.

É disso que se trata a série de artigos que vou trazer pra vcs nos próximos meses.

E para começar:

A influência social no design para web

Os seres humanos são animais sociáveis.  Esse instinto é tão forte que quando nos sentimos sozinhos, desamparados ou deslocados, qualquer interesse em comum é suficiente para que se formem grupos focados em defender algum interesse em comum, por menor que ele seja.

Pesquisa: O seu coração faz meu coração bater

O pesquisador David Cwir dirigiu testes muito interessantes que comprovam o quanto o relacionamento social pode afetar o nosso comportamento.

Nos dois estudos, cada participante foi chamado na primeira semana para preencher uma pesquisa com algumas preferências, interesses e informações pessoais.

Na semana seguinte, foram colocados em dupla com outro participante que, sem que soubessem, estava trabalhando para os pesquisadores, eles deveriam fazer algumas perguntas sobre interesses pessoais, para o outro, que planejadamente compartilhava a maioria dos interesses em comum, ou nenhum interesse em comum. A intenção era saber se seria criado algum vínculo entre os participantes com os mesmos interesses, e com base nas últimas perguntas, sobre se sentiam algum vínculo ou se desejavam conhecer mais sobre o outro participante, isso funcionou.

Em seguida foram realizado dois testes, no primeiro, um dos participantes deveria fazer um pequeno discurso em público, planejadamente, o que participava junto com os pesquisadores, então enquanto ele se preparava para o discurso mostrando um desconforto ou nervosismo com a exposição, o participante preenchia um questionário sobre as suas emoções. Como esperado, os participantes que compartilhavam os mesmo interesses de seus pares, demonstraram um completa empatia, eles se sentiam tensos, ansiosos e nervosos, por ver o colega nessa situação, mesmo sendo estranhos um ao outro, essa pequena conexão foi suficiente para causar níveis de stress muito parecidos entre os dois.

No segundo estudo, ainda mais interessante, um dos participantes foi convidado a correr no mesmo lugar por 3 minutos, enquanto monitoravam os batimentos cardíacos dele e do seu par.

Por incrível que pareça, os batimentos do par com afinidades também aumentaram só de observar enquanto o outro corria. O fato de terem interesses simples em comum, foi tão significativo, que criou um vínculo real entre os dois.

Pertencer e se identificar com um grupo é tão importante que experiências positivas ou negativas podem causar reações químicas e biológicas capazes de modificar completamente o comportamento do indivíduo. O medo da rejeição ou o desejo de aprovação são armas muito importantes para conseguir o engajamento dos seus visitantes ou até incentiva-los a tomar decisões.

Tipos de motivação social

A motivação social, ou influência social, descreve como os valores, comportamentos e crenças de um indivíduo são influenciados pelas expectativas (reais ou projetadas) dos outros. Os psicologistas Morton Deutsch e Harold Gerard determinaram  dois tipos de influência social: Normativa e Informacional.

Motivação social Normativa

É a necessidade de ser aceito e querido pelos outros. Assim, agindo como os outros, conquistamos a aprovação ou ao menos evitamos a desaprovação em um grupo, então agimos conforme acreditamos que os outros esperam de nós, sejam essas formas reais ou imaginadas.

Motivação social Informacional

Representa a nossa necessidade de agir sempre corretamente, então observamos os outros para aprender com suas experiências. Acreditamos se as pessoas do nosso grupo agem de uma certa maneira, essa é a maneira mais correta de agir, principalmente quando são pessoas mais velhas ou mais experientes.

A Influência Social Informacional, de maneira geral, entra em ação quando somos confrontados por uma decisão. As vezes até inconscientemente, procuramos pelos outros para aprovarem as nossas decisões,  somos copiadores, mas isso garante que nossas decisões são realmente efetivas e inteligentes.

No design para web, existem diversas formas de usar os vínculos sociais a seu favor.
Veja alguns deles a seguir

“The Mere Belonging” ou “A Necessidade de Pertencimento”

Não é a toa que na Pirâmide de Maslow, criada em 1943 pelo professor de psicologia Abraham Maslow, trata a “necessidade de pertencimento” de forma tão relevante. Para quem está familiarizado com a ideia, eu me refiro a imagem abaixo, uma pirâmide que estrutura hierarquicamente as principais necessidades humanas. As duas primeiras categorias, se referem a aspectos cognitivos básicos se sobrevivência: a fisiologia (respirar, comer, dormir e etc) e a autopreservação (física, familiar, profissional). O terceiro item dessa pirâmide, e primeiro aspecto absolutamente psicológico se refere aos aspectos sociais.

Eu gosto de entender essa ideia como um constatação de que o principal aspecto para garantir a nossa sanidade mental, são as relações sociais.

Uma forma interessante criar o senso de grupo ou de pertencimento,  é através de um rótulo. Por exemplo: em projetos de caridade, expressões como “seja um doador” ou “seja um herói” causa mais efeito do que “Faça uma doação”.

Validação social

Segundo essa pesquisa da Universidade de Princeton, quando vemos alguma pessoa em situação de dificuldade, o primeiro instinto é olhar em volta, se nenhum outra pessoa tiver notado a situação, ou se não houverem outras pessoas, é muito provável que tentaremos ajudar.

Quando existem outras pessoas no ambiente que notaram a situação, nós as observamos antes de qualquer ação, se elas estiverem ajudando, então é muito provável que tentaremos ajudar também, mas se ninguém demonstrar qualquer reação, dificilmente seremos os primeiros a oferecer ajuda.
Nós somos influenciados pelas ações ao redor, e online, isso não é diferente. Por exemplo:

• Quando muitas pessoas estão comprando um produto, estaremos mais propensos a comprar esse produto também.
• Quando muitas pessoas avaliam um modelo como positivo, é muito provável que escolheremos aquele modelo.
• O mesmo para vídeos, quando buscamos por um clipe ou trailer de filme, por exemplo, estamos mais propensos a clicar naquele que tem mais visualizações.
• Quando muitas pessoas estão fazendo doações, tendemos a doar também.

Enfim, as informações sobre a quantidade de pessoas que participam, aprovam ou indicam o seu produto, são fatores de decisão de compra.
E elas são ainda mais poderosas quando o usuário é capaz de identificar que o perfil dos visitantes é parecido com o seu como na pesquisa que mostrei acima.

O site Booking.com é um ótimo exemplo. Ele dividiu os usuários por perfil de viajante (grupo de amigos, casal, viajantes individuais, negócios, etc) dessa forma, a avaliação de um usuário individualmente faz muito mais sentido. Por exemplo, se dezenas de “casais” qualificarem um hotel como positivo, e um “viajante individual” avaliar como negativo, essa única avaliação pode ser mais importante para um outro “viajante individual” do que todas as outras junto.

 Popularidade

Como explicado anteriormente, as pessoas tendem agir diferente quando existem outras pessoas ao redor, existe uma necessidade de mostrar que estamos engajados, que compartilhamos as mesmas opiniões, e por isso reafirmamos cada uma delas sempre que possível.

Como prova disso temos as páginas do Facebook e as antigas comunidades do falecido Orkut, que foram criadas com o propósito de se tornarem um fórum de discussão, mas acabaram virando um painel de exibição das suas preferências pessoais. Antes de saber se queremos ser amigos ou até contratar alguém para uma vaga de trabalhamos, olhamos as páginas que curtiram (entre outras preferências), se houver afinidade então há chances de ser aprovado.

O raciocínio aqui é bastante lógico:

• Se muitas pessoas curtem, gostam ou seguem uma pessoa ela deve ser interessante
• Se pessoas que eu admiro curtem, gostam ou seguem uma pessoa ela deve ser realmente interessante
• Se pessoas dentro do meu grupo curtem, gostam ou seguem uma pessoa ela com certeza é interessante

Portanto, se vc tem uma página no Facebook, Linkedin, Twitter ou etc, use a seu favor

Referências:

http://blog.usabilla.com/

No ano de 2008, escrevi um artigo que dizia o seguinte:

“Eles [os formulários] são hoje a forma mais usada de interação entre usuário e o site, é o modo pelo qual o visitante transmite para o site (ou para os responsáveis) tudo aquilo que ele desejar ver ou fazer.”

Hoje, posso complementar dizendo que essa frase se refere também a botões, mas não necessariamente objetos input type=”button”, e sim elementos que visualmente se parecem com botões, os famosos Call to action (em tradução livre “chamadas para executar uma ação”).
Alguns dos tipos mais comuns de Call to Action incluem: “leia mais”, “imprimir”, “ver detalhes”, “cadastre-se”, “login”, “Comprar”, “Adicionar ao carrinho”, “Salvar” e “Cancelar” em todas as suas variações, e a forma como tratamos esses botões podem garante o sucesso ou fracasso de um projeto, principalmente em sistemas e e-commerce, onde o objetivo principal é induzir o usuário a executar uma ação.
A ideia de escrever esse artigo, surgiu de varias discussões que participei recentemente, como pessoas da minha equipe e clientes, que divergem principalmente sobre o posicionamento dos botões na tela.

Posicionamento dos botões na tela

Porque os usuários clicam mais em botões alinhados a direita do que a esquerda

Antes de falar sobre isso, acho importante explicar que todos os argumentos que vou colocar aqui, são baseados na psicologia cognitiva, gestáltica e no Behaviorism clássico (Watsoniano), essas três áreas de estudo, de forma muito parecida, tratam de uma parte do comportamento humano baseada na reação involuntária a estímulos.

Introdução

Um problema que tenho com muitos clientes, e acredito que vcs tbm têm, é a necessidade que eles tem de destacar tudo. Pensando em e-commerce, começam com o preço, depois querem um texto grande piscando dizendo “Promoção”, ai querem um “Envie para um amigo” chamando a atenção. No final, o botão mais importante “adicionar ao carrinho” ou “comprar” praticamente desaparece na tela. Então, o que eles dizem? “Deixa o botão ‘comprar’ maior”.

O que muita gente não considera, é que um botão bem posicionado é muito mais eficiente do que um botão grande piscando numa área ruim da tela. Vamos considerar o potencial de ganho financeiro que um design apropriado de um botão de “comprar” ou “adicionar ao carrinho” pode trazer para um e-commerce, no final desse artigo, tenho um exemplo, onde a simples adição de uma barra de navegação, aumentou a quantidade de produtos adicionados ao carrinho  em 34%.

Diagrama de Gutenberg

O diagrama de Gutemberg foi desenvolvido para ilustrar o comportamento do usuário ocidental conhecido como “gravidade da leitura” . Ele sugere que o processo de escaneamento dos blocos de conteúdo acontece da esquerda para a direita e de cima para baixo, formando um Z.

Dessa forma, conseguimos identificar facilmente quais são as áreas mais significativas da tela, as chamadas Zonas quentes. Mas a utilização do diagrama de Gutemberg vai além de posicionar as informações mais importantes nas áreas quentes, ele sugere que a leitura é linear, e que as informações expostas devem seguir essa linha de raciocínio.

Sendo assim, a leitura se inicia no topo, na extrema esquerda e termina embaixo, na extrema direita. Seguindo esse pensamento, fica bastante óbvio que uma ação, o preenchimento de um formulário, por exemplo, deve sempre ser de cima baixo. Mas o que a maioria das pessoas não parecem perceber, é que o verdadeiro final da tela é a estrema direita, portanto, a conclusão de uma ação, deve, na maioria dos casos, ser exibida nesta posição.

Gestalt: principio da continuidade

Baseado no pensamento de que uma analise do todo tem um resultado diferente da analise das partes em sua individualidade, as leis da gestalt, tratam da percepção da organização dos elementos, de como as pessoas interpretam o mundo.

Levando isso para o design de interface, em um formulário por exemplo, os campos (inputs e similares) devem estar diagramados levando em conta seus rótulos (labels). Esses podem ser diagramados como grupos (filedsets). Os agrupamentos, por sua vez, devem ser enxergados como o formulário propriamente, junto com seus auxílios visuais, mensagens de erro, e Call to Actions (botões de conclusão). Se analisarmos cada um desses itens separadamente, podemos ter campos lindos, e bem organizados mas com um agrupamento incorreto. Ou ainda, campos brilhantemente agrupados, mas arruinar tudo com um rótulo e campo mal alinhados . Essa linha de raciocínio garante que a navegação seja orgânica, e entendida no primeiro contato do visitante.

Um dos princípios da Gestalt, a lei da continuidade, está diretamente ligada ao Diagrama de Gutemberg. Entendendo como o usuário navega, entendemos qual será a expectativa dele sobre a organização do conteúdo, assim é fácil entender que, se a navegação é finalizada na estrema direita na parte de baixo da tela, é evidente que ao procurar o Call to Action (botão de conclusão), o usuário vai se dirigir imediatamente para esta área da tela.

Sendo assim, associando o principio da continuidade ao Diagrama de Gutemberg, o botão de confirmação de uma tela deve ficar posicionado sempre no final dela, ou seja alinhado a direita, na parte de baixo da tela.

Lei de Fitts

O psicologista americano Paul Fitts, publicou um artigo em 1954 que pode ajudar os designers de interface a tomar decisões mais assertivas no que diz respeito ao posicionamento e dimensões dos elementos na tela.

A lei de Fitts sugere que: Quanto mais rápido você consegue alcançar um alvo, mais fácil e usável ele é.

Bem previsível né?

Bom, para chegar a essa definição, ele criou uma equação matemática que leva em consideração o tamanho da área e a distancia do alvo para  determinar o quanto fácil ele é de ser acessado. Assim, um elemento mais próximo do ponteiro do mouse se torna mais fácil de acessar, enquanto elementos muito distantes da posição atual do mouse exigem maior atenção do usuário.

Superfície ativa dos botões (o tamanho)

A área do click de um botão é conhecida como superfície ativa, enquanto a área do botão sem click é chamada de “dead pixel”. Certo… Mas porque um botão deveria ter uma área sem click? Parece bastante óbvio que um botão seja inteiramente clicável, se usarmos um input padrão automaticamente a totalidade da área passa a ficar ativa no click, o mesmo acontece com os links. Mas existem casos bastante específicos onde pode existir uma área de “dead pixel” sem que você perceba.

O que temos que aprender com os erros dos grandes?

O Windows Vista por muito tempo teve um problema de usabilidade bastante chato. O Botão iniciar, na maioria das versões fica posicionado na extrema esquerda na parte de baixo da tela e essa região não foi escolhida somente com a intenção de melhorar a visibilidade. Assim como o botão “fechar” das janelas padrões do sistema,  como expliquei anteriormente as extremidades da tela são as áreas mais fáceis de se acessar com o movimento do mouse.

No entanto, os desenvolvedores das primeiras versões do Windows Vista, tiveram um descuido: o botão era redondo!

O que aconteceu nesse caso, foi que o botão foi reduzido quase que a metade do tamanho se comparado ao Windows XP, e a superfície ativa do botão se limitava ao circulo do botão, não alcançava a extremidade esquerda da tela, o processo de click no botão, se tornou maçante e cansativo, quase um trabalho de tiro ao alvo.

Mas não demorou muito tempo para que fosse resolvido, as versões seguintes já vieram com essa correção e a maioria das pessoas nem chegou a ver o problema acontecendo.

Nem sempre, maior é melhor

Sabendo que um botão maior é mais fácil de usar, essa proporção não é escalável, ou seja, aumentar 50px em um botão já grande, não melhora sua usabilidade na mesma proporção.

Por exemplo se vc possui um botão representado por um ícone de 16px×16px, a sua área de click será muito pequena,  aumentando 10px de cada lado do botão, a sua área passa a ser de 36px, o que dará um ganho enorme na usabilidade.

Por outro lado, um botão de 130px×36px, com o aumento dos mesmo 10px de cada lado, não traz grandes diferenças na facilidade do click, o tamanho original já é suficientemente grande para garantir o bom uso dele.

Exemplos de uso

Caso Slide Shop

Um Caso interessante, é o do site www.slideshop.com. A versão do ano de 2010 desse site, trazia um menu superior que quando acionado, abria um submenu.

Baseados em teste A/B, a Optimeria (o site deles não está mais disponível), empresa responsável pelo estudo, concluiu que os usuários não estavam se adaptando bem ao fluxo de navegação das subcategorias do menu. Uma análise dos Heatmaps (mapas de calor) e dos Clickfows (fluxo dos clicks) das páginas principais, mostraram que os usuários não conseguiam atingir um nível ideal de profundidade na navegação, muitas vezes não chegavam se quer as subcategorias. O que levantou uma suposição de que, melhorando o modelo de navegação, conseguiram melhorar o engajamento do usuário, levando a uma navegação mais linear e por consequência mais profunda, dando visibilidade aos produtos.

Partindo dessa afirmação, proposta era: melhorar a usabilidade e estudar como isso afetaria o padrão do fluxo de clicks.
Começaram removendo os banners laterais promocionais, e adicionando uma barra de navegação vertical a esquerda, o resultado foi esse:

Não foi uma diferença muito significativa, vocês concordam?

Os resultados:
Essa pequena alteração, melhorou em 8,9% o interesse dos usuários, e apresentou um crescimento de 34%  na quantidade de produtos adicionados ao carrinho no processo de compra!
Além disso, essa alteração ajudou a traçar novos perfis de interesse e padrões de navegação.

Hey! Adivinha só quem voltou!
Pois é, depois de quase um ano eu estou aqui escrevendo novamente.
Nesse momento estou trabalhando no desenvolvimento de interface para duas aplicações totalmente diferentes, e cheguei a um ponto que pode ser crucial para o sucesso da aplicação: o Dashboard. Como percebi a carência desse assunto em português resolvi escrever sobre o que aprendi ao longo do processo de criação, espero que sirva de fonte de informação pra vocês quando estiverem no meu lugar.

Dashboard, ao pé da letra “Painel de bordo”, é um termo usado em diversas áreas e nada mais do que um painel de indicadores.
Em se tratando de aplicações web, o dashboard é uma forma rápida de visualizar as principais atividades sendo executadas dentro de uma aplicação, e funciona como uma porta de entrada para a maioria das ações que o usuário pode executar. O Dashboard, na maioria das vezes, é dividido em pequenos blocos que exibem as informações referentes as diversas áreas e funcionalidades da aplicação e são chamados Widgets.
Parece complicado, mas é super simples, a maioria dos webdesigners desenvolve pequenos dashboards regularmente sem perceber
Cada aplicação tem a sua própria linguagem de comunicação com o usuário, que é basicamente estabelecida através da regra de negócio determinada pelo tipo de serviço à que o sistema de aplica. Por exemplo: uma aplicação para a área de turismo terá uma necessidade especifica no seu dashboard, que é diferente da necessidade de um sistema de reservas para um restaurante.  Será que podemos chamar isso de algum tipo de Folksonomia?
Mas de modo geral, o dashboard é uma forma simples e rápida de reunir todas as informações importantes em uma única página (ou aba).
Essa pequena definição provavelmente foi suficiente para ajudá-lo a entender como o dashboard é importante, no entanto, normalmente o mínimo de esforço e estudo é aplicado no desenvolvimento dessa área. A intenção desse artigo é passar alguns conceitos básicos que encontrei nas minhas pesquisas e aquilo que considero boas práticas de desenvolvimento.

Continue Lendo »

Todos nós sabemos a importância de causar uma boa primeira impressão e que não existe uma segunda chance para isso.
A primeira impressão é um dos principais fatores de permanecia de um visitante no site, ela só perde para o fator “recomendação”, quando um amigo de confiança indica um site, o visitante tende a passar alguns segundos em alguma atividade especifica ainda que a primeira impressão não seja boa.

Levando em conta a primeira impressão do visitante como fator determinante para o tempo de permanecia, imediatamente entendemos a importância da Home Page para garantir um resultado positivo.

O que a sua “Página Inicial” diz sobre o site? Ela é suficientemente esclarecedora? Ela transmite a atmosfera que o visitante espera estar no momento que busca o seu produto ou serviço? Ela consegue despertar o interesse para que o visitante queira se aprofundar na visita? Carrega rápido o bastante? O tempo que o navegador necessita para renderizar as informações relevantes para o visitante é ideal?

Continue Lendo »

Antes de mais nada, eu confesso que estou entrando num território muito perigoso, que eu não domino completamente e que não faz parte do meu campo de atuação. Não pensem que eu estou desmerecendo o trabalho de vocês especialistas em identidade visual, simplificando a criação do logotipo aos conceitos abaixo, muito pelo contrario, quero explicar o quanto esse processo é complexo e como a prática é importante. Minha intenção é apenas mostrar algumas coisas que eu aprendi ao longo do meu tempo de trabalho para aqueles que tiveram pouco ou nenhum contato com essa área.
Espero muito receber correções e outros pontos de vista de vcs profissionais da área.
Vamos lá! Continue Lendo »

Uma boa tipografia na web é algo que realmente me impressiona, porque é tão fácil escolher a fonte errada. Eu propriamente acho que nunca fui muito bem sucedida na realização de um projeto baseado em fontes.

Com milhões de combinações possíveis, nós designers acabamos desistindo antes mesmo de começar. No entanto, temos que agradecer a perseverança de alguns de nossos colegas, que por não desistirem acabaram criando as maravilhas que serão listadas no final desse artigo.

Apesar do meu gosto pela analise mais profunda da tipografia, esse artigo tratará apenas da tipografia como elemento fundamental do design: títulos, manchetes e áreas de destaque, etc. Pretendo publicar brevemente algum material sobre “legibilidade na web”.

Continue Lendo »

Vc não sabe pq meu blog está pelado?

Entenda isso aqui

Minha mesa de trabalho
Muita gente já fez. Essa é a minha mesa de trabalho

Desenvolver formulários para web pode ser divertido ou frustrante e exige uma grande dose de persistência e determinação.

O modo como você estiliza e formata seus formulários é crucial para torna-lo aparentemente útil pois na maioria das vezes é preciso convencer o visitante a preencher as informações. Para formulários pequenos, basta adapta-los ao site, mas quando se trata de formulários mais complexos onde uma grande quantidade de informações é exigida ter um estilo bem elaborado e fácil de usar se torna o principal motivo de sucesso ou fracasso.

Antes de tudo é preciso entender a importância e o significado de um formulário: eles são hoje a forma mais usada de interação entre usuário e o site, é o modo pelo qual o visitante transmite para o site (ou para os responsáveis) tudo aquilo que ele desejar ver ou fazer. Mesmo quando não aparenta exatamente o tipo de formulário convencional, em algum lugar deve haver uma tag “input” escondida. A palavra “input” tem exatamente esse significado: passar, enviar informações.

Continue Lendo »