Em outras palavras, produtos de formas atraentes geram apego emocional em seus usuários. Mas por quê? O que há nesses produtos, quais características possuem para que despertem esse tipo de reação nas pessoas? No decorrer do texto irá se abordar atributos que possivelmente comprovem essa teoria.

A estética como fator de influencia na facilidade de uso do produto industrial

Segundo Milton Ribeiro (2000, p.149) “as melhores formas, as que mais impressionam, melhor se notam e de que mais facilmente nos recordamos, são as formas matematicamente determinadas como triângulo, quadrado, retângulo e eclipse“.

Pensando na estética do produto, Norman (2008, p.75), relata “quer você admita ou não, aprove ou desprovê, os produtos que você compra e seu estilo de vida ao mesmo tempo refletem e determinam sua auto-imagem, bem como as imagens que os outros têm de você”.

A cultura material faz parte da sociedade e é um valor humano, a meu ver. Assim como a cultura, educação, de cada individuo, interfere inevitavelmente na sua escolha por certos artefatos, aos quais são determinados não somente pelo seu poder aquisitivo, mas também, por sua cultura em geral.

O escritor Bernsen (1995, p.10) autor de “Design: Defina Primeiro o Problema“, delimita design como sendo significativo em se traduzir um propósito em uma forma física ou ferramenta. Este cita exemplos dos desenhos da natureza, cujas formas constituem-se ao mesmo tempo numa expressão de propósito, economia e beleza, e que tem uma relação viva com o mundo o seu redor.

Entretanto os desenhadores industriais utilizam os mesmos termos para o desenho industrial: propósito. Bem como economia de manufatura e construção, beleza e interação com o usuário e relacionamento com o ambiente. O fato de que os desenhos projetados pelo homem e os concebidos pela natureza, analisados em conjunto comum seguem algo semelhante em que ambos são soluções para um problema. Ambos são imaginados de maneira semelhante, como um processo de tentativa-e-erro. Portanto o autor define design como a integração de seis aspectos relevantes, tais como: Propósito, produção, construção, função, beleza e ambiente.

No design de produtos a forma coerente e harmônica atrai olhares e curiosos. Segundo Norman (2008, p. 39) “objetos atraentes fazem as pessoas se sentirem bem, o que por sua vez faz com que pensem de maneira mais criativa”. Como isso faz com que alguma coisa se torne mais fácil de usar. Lobach (2001) define estética como significante de algo da percepção sensorial. Define como sendo a “ciência das aparências perceptíveis pelos sentidos (por exemplo, a estética do objeto), de sua percepção pelos homens (percepção estética) e sua importância para os homens como parte de um sistema sociocultural (estética de valor)“.

Já o dicionário da língua portuguesa define estética como a ciência do belo, a filosofia das belas-artes, bem como a harmonia das formas, seus contornos e coloridos, etc. A estética nos produtos industriais é considerada fator importante para agradar os olhos dos usuários. Porém o que faz de um produto ser belo aos olhos dos observadores? Princípios de desenho e coerência formal são base para estudo do desenhador industrial. Este possui essa ferramenta de percepção visual, ao qual o diferencia de um simples inventor de qualquer coisa.

Um estudo realizado no inicio dos anos 90, por pesquisadores japoneses afirmam que de fato, objetos atraentes devem ter preferência em relação aos objetos feios e isso faz com que funcionem melhor aos olhos dos usuários. Mas por quê? Um exemplo claro, é que estes pesquisadores haviam estudado inúmeros leiautes diferentes de painéis de controle de caixas eletrônicos de banco, sendo que todas essas versões eram exatamente iguais em questões de função no numero de botões e na maneira como operavam.

Alguns, porém tinham botões e telas dispostos de maneiras diferentes, uns mais coerentes visualmente, outros não, simplesmente eram dispostos de maneira aleatória. O resultado dessa pesquisa revelou que os usuários achavam que os aparelhos considerados mais atraentes eram mais fáceis de usar, de compreender como este funciona. Estes estudos feitos em relação à percepção dos usuários para com a estética dos objetos de uso sugerem o papel da estética no design de produto. A resposta é que está ligado com o estado de espírito de cada um. Pessoas consideradas mais felizes, geralmente demonstram mais tranqüilidade em solucionar problemas, o que por sua vez, possuem mais paciência para conhecer os produtos e usá-los da maneira adequada.

Baseado nesses aspectos da biologia e emoção humanas, um estudo feito pelo Departamento de Psicologia na Northwestern University, propõem a existência de três diferentes níveis de estruturas do cérebro: a camada automática, pré-programada chamada de nível visceral; a parte que contém os processos cerebrais que controlam o comportamento quotidiano, conhecida como nível comportamental e também a parte contemplativa do cérebro, ou nível reflexivo. Cada nível desempenha um papel diferente no funcionamento integral das pessoas, sabendo que cada pessoa possui uma maneira diferente de percepção das coisas que o cercam.

Segundo esse estudo cada projeto em si diferem de exigências diferentes entre os níveis. Por exemplo, o nível visceral é pré-consciente, anterior ao pensamento, é onde a aparência importa e se formam as primeiras impressões. Este nível é veloz, ele faz julgamentos rápidos do que é bom ou ruim, seguro ou perigoso, e envia os sinais apropriados para os músculos (o sistema motor) e alerta o resto do cérebro. Este é o fundamento do processamento afetivo.

Já no nível comportamental é onde se localiza a maior parte do comportamento humano. Suas ações podem ser aprimoradas ou inibidas pela camada reflexiva e, portanto, ela pode aperfeiçoar ou inibir a camada visceral. O design visceral diz respeito ao impacto inicial de um produto, à sua aparência, toque e sensação. Já no nível comportamental diz respeito ao uso, é sobre a experiência com um produto, porém a própria experiência tem muitas facetas, tais como função, desempenho e usabilidade.

De acordo com o autor um produto deve sim ser atraente. Ele também deve ser prazeroso e divertido. Contudo também tem de ser eficiente e inteligível e também ter um preço apropriado. Em outras palavras, deve buscar equilíbrio entre os três níveis de design. Vamos citar alguns exemplos vividos no dia-a-dia para exemplificar esses níveis: andar numa montanha-russa, picar e cortar carne com uma faca extremamente afiada numa tábua de madeira ou contemplar uma obra de arte. Essas três atividades causam impactos diferentes em nós. A primeira é mais primitiva, origina-se do comportamento visceral, já a segunda está no prazer em usar uma ferramenta eficiente, ao qual se referem aos sentimentos de realização de tarefas especializadas e atuam no nível comportamental. O último se origina do nível reflexivo, ao qual exige estudo e interpretação para contemplar uma obra de arte.

Os três níveis interagem eternamente entre si, cada um modula o outro. São um conjunto. O fato é que, tudo o que fazemos possui componentes de cognição e componentes de afeto. O cognitivo serve para atribuir significado a algo, já o afetivo atribui valor as coisas. O afeto está sempre presente, mas fato consumado é que o sentimento de afeição quer seja positivo ou negativo, interfere na maneira como pensamos. Estudos provam quando se está em estado de afeto positivo, se tem muito mais probabilidade de ser receptivo a novas idéias ou acontecimentos. O cérebro está relaxado. Este estado desperta a curiosidade, envolve a criatividade e torna o cérebro um organismo eficiente de aprendizado. Por outro lado o estado negativo reflete a atitudes ansiosas e nervosas.

Mas de que maneira esses níveis tem ligação com o design? Segundo Norman (2008, p.46) quando alguém está relaxado, em bom humor, é mais criativo, está mais capacitado em lidar com problemas de um equipamento qualquer, em especial se for divertido de usar. Segundo o mesmo autor “os objetos feitos para serem usados em situações estressantes exigem muito mais cuidado, e muito mais atenção ao detalhe”. Caso que acontece quando se está em estado negativo. O usuário reage de maneira estressada, impaciente para com o objeto. Isso torna seu uso complicado e desinteressante.

Mas o que faz desses produtos serem atraentes ou não? Além de sabermos que boa parte dessa percepção está relacionada com o afeto que o usuário tem do produto, existem outros fatores de desenho industrial ao quais influencia cada observador perante o produto.

Para se projetar um produto industrial é necessário conhecer uma série de elementos de configuração formal. Norman (2008, p.57) fala que “a usabilidade descreve a facilidade com que o usuário do produto pode compreender como ele funciona e como fazê-lo funcionar. Mas se o produto fizer o que é necessário, se for divertido de usar e com ele for fácil satisfazer as metas, então o resultado é afeto positivo e caloroso”.

O que conclui que, existem inúmeros aspectos que são percebidos pelos usuários, desde afetos emocionais até aspectos de percepção formal, que muitas vezes são inconscientes para o observador. Estes fundamentos do desenho é que são de conhecimento imprescindível para o desenhador, e é disso que precisamos saber fundamentalmente.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Steve Jobs e as crianças na África
• Por onde começo a estudar sobre design?
• Resultado do sorteio #Imprima3D

Design interativo

Modelo de processo mais simples de pensar no design centrado no usuário. Quanto mais interação (interação = transmitir informações claras) o site tiver com o usuário final, melhor ficará. A medida que o usuário navega e busca por informações, o site responde para o navegante o seu status atual. Por exemplo: informar se encontrou ou não algo, mensagens de validações de formulário, pré-loading, sugestões de informações, dar um feedback para qualquer ação do usuário e etc.

Design paralelo

Esse modo não é tão complexo como se imagina, porém demanda mais tempo de planejamento, pois pode e deve ser feito pelo menos duas opções de wireframes. Depois, basta combinar o que todos os wireframes tem de melhor e produzir um design único para o site. Baseado nesse resultado, começar a pensar na navegação, como serão os feedbacks, interações, etc.

Conclusão

Os dois métodos compartilham uma idéia básica: não há um meio certo para criar a interface perfeita, e você pode não obter uma boa usabilidade comprando a primeira ideia. Você deve testar varias ideias, combinar… o importante é pensar no usuário final.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Princípios e meios para melhorar a experiência do usuário
• Hierarquia visual de elementos
• Mega sorteio Design Blog e Adobe!

Um dos meus contatos comentou que todo mundo está exagerando. Que precisamos nos importar com as crianças da África e não com Steve Jobs. Que falar sobre isso é só querer se exibir por ter gadgets caros.

Eu não poderia discordar mais.

Em primeiro lugar: das pessoas que usam como argumento “pare de falar sobre X e faça algo pelas crianças na África”, 100% não faz nada pelas crianças da África. Boa parte não faz diferença nenhuma no mundo, pra falar a verdade.

Em segundo lugar: todo mundo sabe que Jobs não era santo nem necessariamente um ótimo exemplo de pessoa. Além disso ele não fez a Apple sozinho. Mas foi ele que permitiu que isso acontecesse. Foi ele, como alguém que tem esse poder de decisão, que acreditou em ideias revolucionárias e realmente as colocou em prática. Foi ele que não teve medo do minimalismo e da usabilidade.

Mas foi só um fato recente que me fez realmente ver, ao vivo e a cores, a revolução que esse cara e sua empresa fez na tecnologia.

Sou fotógrafa, e fotografo principalmente famílias. Durante um ensaio mostrei uma das fotos na tela LCD da minha câmera para o filhinho de 5 anos dos meus clientes. O que ele fez?

Tentou trocar a foto arrastando o dedo na tela. E ele não se conformou: tentou fazer o movimento de pinça também!

Nós, adultos, demos muita risada do fato! Mas a partir daquele momento percebi que para a próxima geração usar os dedos para promover ações em uma tela é/vai ser uma coisa natural.

Steve Jobs não inventou a tela touch screen. Isso já existia (e o primeiro Tablet, mesmo, foi feito pela Microsoft.) Mas foi ele (e sua equipe, é claro) que fez com que o uso de uma tela touch screen se tornasse algo natural, entre muitas outras inovações.

O vídeo abaixo mostra bem isso: uma criança de um aninho de idade não se conforma com revistas em papel, que não “funcionam”:

Me lembrei do filhinho da minha cliente. E me lembrei de, eu mesma, tentando (literalmente) tocar em telas que não eram touch. Ou de eu mesma desejando que algumas fossem. Porque agora é natural.

Então sim, eu continuo triste pela morte dele. E continuo a tentar fazer a minha parte para um mundo melhor (inclusive para as crianças na África.) Sim, é possível fazer as duas coisas ao mesmo tempo.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Como Steve Jobs moldou o design moderno
• Como a estética pode influenciar o usuário na facilidade em se usar algo?
• Por onde começo a estudar sobre design?

Parceiros que fazem o que não fazemos

Quando começamos com o xCakeBlogs, o objetivo foi de facilitar ao máximo a vida de nossos clientes: fazíamos o design, a programação, o registro de domínios, a hospedagem, a configuração do WordPress e prestávamos assistência técnica. Nosso lema era simples: “Blogar é gostoso. Deixa o difícil com a gente”. Mas uma coisa nos trazia muita dor de cabeça: a hospedagem.

Tínhamos um plano de revenda de uma empresa. Não era ruim e nem sequer apresentava muitos problemas. O problema mesmo era com o cliente: se o blog ficasse fora do ar por 20 segundos, o cliente ligava pra gente cobrando. Se ele não conseguia acessar o e-mail, ligava. Se quisesse configurar um e-mail, ligava. Logo, terminávamos um projeto em 15 dias mas tínhamos contato constante com o cliente por 2 meses.

Mesmo cobrando um valor mensal pela hospedagem, muitas vezes o trabalho que dava ultrapassava o valor que ganhávamos. E quando você trabalha demais e ganha de menos, tem algo errado. É aqui onde entra a importância de ter um parceiro.

Dos seguidores no Twitter, o Cláudio Garcia sugeriu o serviço de hospedagem dele para cuidar dos nossos clientes – a Brasilserv. Testamos e vimos que era um servidor estável com atendimento rápido – algo importante nos dias de hoje, onde aguardar 24h por uma resposta é inadmissível. Não foi uma decisão fácil (pois não poderíamos correr o risco de trazer dor de cabeça ao cliente), mas transferimos todos os clientes hospedados conosco para a Brasilserv e paramos de oferecer um serviço de hospedagem.

Isto faz um ano e meio. Hoje, temos uma relação ótima com a equipe da Brasilserv. Se eu tenho algum problema ao hospedar algum site, eles resolvem. Quero abrir uma conta as 2 da manhã? Feito. E se houver algum erro na programação que deixe o site mais lento? Eles me informam (ao invés de avisar ao cliente) e eu resolvo.

Passamos em média 5 clientes por mês para o serviço deles, e eles cuidam do cliente como nós cuidamos – algo muito importante na nossa filosofia interna. E o melhor: eles entendem muito melhor de como funciona um servidor do que nós. Se algo dava errado na hora de hospedar alguém no nosso serviço, tínhamos que abrir um chamado no host e aguardar resposta (enquanto isto, o cliente gralhava no telefone). Um parceiro que faça o que você não sabe fazer é vital para oferecer um serviço completo ao cliente.

Parceiros para as horas de aperto

Recentemente tivemos férias coletivas no escritório, para compensar as férias que não tiramos durante o carnaval. Na semana antes, a correria para finalizar os projetos em aberto pois passaríamos uma semana longe do trabalho. Foi aí que um parceiro salvou a gente de novo.

Ironicamente, o próprio Cláudio Garcia (que nos indicou a empresa dele) nos ajudou nesta de novo. Tínhamos dois layouts prontos, só faltando passar pra HTML/CSS e fazer funcionar com o WordPress. Devido a experiências anteriores com ele, sabíamos que ele conseguiria quebrar esse galho.

Dito e feito: em pouco tempo ele conseguiu desenvolver tudo e colocar no ar. Fez até mais do que deveria, nos salvando de ter um cliente reclamão na volta das nossas férias.

Ter algum profissional competente como parceiro é importante. Não dá pra evitar qualquer designer ou programador e tratá-lo como inimigo profissional ou como concorrente; tem cliente o suficiente para todos no mar do design. Se você não tem alguém com que possa terceirizar seu trabalho nas horas de aperto, está na hora de colocar seu networking em prática. Assim, se você ficar doente algum dia ou tiver excesso de trabalho, pode encaminhar o trabalho para esta pessoa sem perder o cliente.

Desnecessário falar que você precisa dividir os lucros com seu parceiro, né? Afinal de contas, você pode ter conseguido o cliente: mas seu parceiro foi quem fez o trabalho.

Parceiros para troca de idéias

Sabe quando você está tentando resolver aquele problema macabro, mas não sabe como? Aquela cor de fundo não vai com a cor do texto, a imagem falta algo, o logo parece estranho, etc. São os problemas típicos de quem está a muito tempo no projeto e precisa de uma visão nova.

Eu, por exemplo, estou sempre batendo papo com o Filipe Fernandes – o rapaz maroto responsável pelo Choco La Design. Quando estou com alguma dúvida se a cor tá certa, se o alinhamento parece bom, ou o que quer que seja, mando uma mensagem e ele me fornece uma visão sob aspecto diferente. Em vez de passar as próximas horas tentando descobrir uma solução, em 5 minutos de conversa consigo descobrir como resolver o problema.

Parceiro nem sempre precisa ser o top da área

Claro que as vezes é importante ter um ponto de vista completamente diferente. Ou seja, “o mundo visto pelos olhos de quem não entende o que você faz”. Pode parecer bizarro, mas é verdade. Um exemplo: você criou um menu bem bacana pro seu site, mas está com medo que não pareça um menu. O risco do usuário não ver isto e assumir que não existem mais páginas internas no seu site é alto, e é um prejuízo com o qual você não pode arcar. Entra mais uma parceira minha: minha mãe.

Sim, ela sabe apenas ligar o computador para acessar o Facebook, falar no Skype com os parentes e jogar os joguinhos dela. Ela não sabe a importância da Gestalt no design, ou o que é proporção áurea. Ela é perfeita para conduzir testes de usabilidade. Ela representa a população mais leiga em termos de internet, então se ela consegue entender a mensagem que estou tentando passar com o meu projeto, eu obtive sucesso.

Procure parceiros

Não estou dizendo que você precisa ter o Cláudio, o Filipe, a Brasilserv ou minha mãe como parceiros – estou falando que você deve ter pessoas que podem te apoiar e te ajudar no que for necessário. E como falei: não importa se você é freelancer ou trabalha em uma empresa grande – um parceiro realmente pode ajudar.

Procure por parceiros em redes sociais, vire amigo deles acima de tudo (a relação profissional flui muito melhor quando você tem um nível alto de amizade com seu parceiro) e procure pessoas que façam parte de diferentes áreas – não só de design. Eles podem salvar tua pele no futuro.

Você tem alguma história interessante que envolva algum parceiro? Ou você está procurando alguém com quem trabalhar? Deixe um comentário!

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Workflow – sites e softwares
• Um espaço para designers brasileiros
• jQuery: o básico que todo designer precisa saber – parte I

Uma das frases que qualquer um que trabalhe com web verá muito é “Conteúdo é rei“. Se usa no SEO, nas mídias sociais, na publicidade, no design e em tantos outros lugares (e dita por tantos outros profissionais) que chega a ser inquestionável a importância desta frase. O conteúdo é, de longe, a coisa mais importante na web.

Sim, pasmem: eu, um designer, estou falando que o conteúdo é mais importante que o design. Estou destronando minha própria profissão! Ok, não seremos tão dramáticos.

O design não é nada sem conteúdo. E isto coloca a gente em uma posição delicada: e quando o cliente não sabe disto?.

De nada adianta ter um site fantástico, com a melhor usabilidade, com a melhor tipografia, com as melhores cores de todo universo web se o texto está escrito em “miguxês”, não possui pontuação e não faz sentido algum.

E mesmo se o texto está escrito certinho, de que adianta querer tentar vender algo no seu site se você não tem um serviço de atendimento ao cliente? Se demora 24h úteis para até responder um email? Ou se você simplesmente não atualiza o blog, a seção de notícias ou até mesmo a página inicial com um aviso da existência de descontos em produtos do seu site?

Se você for a uma loja física e ela estiver coberta de pó, com teias de aranha ou até mesmo parecer estar totalmente descuidada, você compraria nela? Mesmo se tivesse bons preços e uma faxada legal, você provavelmente não confiaria muito, certo? Por que seria diferente na internet?

Vários clientes meus querem mergulhar de cabeça no mundo digital, ter seu próprio site, mas não querem se dar ao trabalho de cuidar dele. É como ter um filho só por que bebês são fofos, mas não se dar ao trabalho de alimentar a criança. Ok, a analogia parece ter ido longe demais, mas deu pra entender.

Conteúdo é rei

Um conteúdo atualizado, escrito corretamente e um cuidado com o site são requisitos básicos para se ter um site de sucesso. Dá pra viver sem um design genial? Dá. Mas dá pra ter um design genial e conteúdo porcaria? Também – só não espere chamar a atenção de ninguém.

E você? Tem clientes que te pedem um site super bacana e não cuidam dele? Deixe seu comentário!

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Código comentado salva vidas!
• Design Blog Podcast – Episódio 04
• O que é um Teste A/B de Usabilidade?

Testes de usabilidade servem para avaliar se um design serve ao propósito dele: é fácil de identificar o telefone da empresa no cartaz criado? Dá pra encontrar a seção de contato no site em um só clique? O que é esse site e pra que ele serve? E por aí vai. Não preciso nem dizer que o objetivo do designer é de responder perguntas – afinal, é isso que o design é. E existem vários testes que podem ser feitos para responder a estas perguntas: desde dinâmicas de grupo até entrevistas individuais com pessoas aleatórias – mas o mais fácil de criar é o Teste A/B.

O que é um Teste A/B?

Imagine um campeonato de futebol. Um time joga contra o outro, e quando um perde é eliminado do campeonato. No fim, só vai restar o melhor. O Teste A/B funciona assim. Eventualmente o design que melhor se adequar a proposta ganha, e indiferente se você estiver comparado dois designs ou cem, você deve conseguir informação útil que te diz o que funciona melhor.

E o Teste A/B pode ser utilizado desde o início do processo de design, desde sketches a wireframes ao resultado final. Este teste de usabilidade pode nos ajudar a chegar a uma solução adequada.

Como funciona um Teste A/B?

É bem simples: você oferece duas versões (ou mais) de um mesmo design. Metade das pessoas que vão fazer o teste vendo a versão A, a outra metade a versão B. Perguntas simples são feitas aos usuários e eles clicam no local da imagem onde eles acreditam que esta informação esteja. Após um certo número de testes, um mapa de cliques é gerado e o designer pode ver onde os usuários acreditam que fica o conteúdo. Além disto, é também analisado o tempo levado para que o usuário encontrasse o que foi pedido.

Por exemplo, eu poderia mostrar duas versões do Design Blog e redirecionar metade do meu tráfego pra um, e metade para o outro – no primeiro, a página de contato estaria identificada como “Contato“, no segundo como “Fale conosco“. Faria perguntas simples aos usuários, como “Onde que fica a seção de contato?” ou, melhor ainda, “Onde você acharia um e-mail para contato?“.

O usuário clicaria na área da imagem onde ele acredita que esta informação ficaria, e então eu posso analisar qual das soluções funciona melhor: a palavra “Contato” ou “Fale conosco”. E assim por diante.

Existem scripts que geram mapas de cliques (em inglês, heat maps) mas que precisam ser configurados para o propósito. Um site bom que faz testes assim é o IntuitionHQ que cobra apenas US$ 9. Uma alternativa gratuita é o Google Website Optimizer, mas aí você teria que ter um conhecimento mediano de HTML e JavaScript.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Como fazer avaliações heurísticas em sites
• Construa e eles virão…ou não
• Curso online Web para Designers

Pesquisando o que seus usuários precisam e querem é um dos passos mais importantes na criação de uma arquitetura de informação eficaz. Existem várias maneiras de ir pesquisando sobre as necessidades do usuário.

Você poderá obter feedback através de entrevistas ou experiência com testes A / B e outros métodos de ensaio de usabilidade antes do lançamento (fase de teste beta) para ver se os usuários poderão navegar em seu site de forma eficiente.

Depois de saber que seus usuários realmente precisam, e, não apenas a sua percepção de que eles precisam torna-se simples adequar a sua arquitetura de informação para melhor atender a essas necessidades.

Cada local deve ter um propósito claro, se isso é para vender um produto, informar as pessoas sobre um assunto, proporcionar entretenimento e assim por diante. Sem um propósito claro, é praticamente impossível criar qualquer tipo de arquitetura eficaz.

A forma como as informações em um site é organizado deve ser diretamente relacionado ao que o objetivo do site é. Em um site onde o objetivo final é fazer com que os visitantes comprem alguma coisa, o conteúdo deve ser estabelecido de tal forma que os visitantes naveguem para esse objetivo.

Em um site que se destina a informar, o arquitetura deve levar as pessoas através do conteúdo de uma forma que uma página tem por base a última.

Você pode ter sub-metas dentro de um site, que exigem que você tenha subconjuntos de conteúdo com objetivos diferentes. Isso é bom, contanto que você entenda como cada parte de ajustes de conteúdo em relação aos objetivos de um site.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Como melhorar a usabilidade no seu layout
• Hierarquia visual de elementos
• Princípios e meios para melhorar a experiência do usuário

Antes de mais nada, vou tratar neste post sobre como fazer avaliações heurísticas em sites, mas pode ser também traduzido para qualquer outra área do design, inclusive o de design gráfico e de produto.

O que é uma avaliação heurística?

De acordo com este site,

A avaliação heurística permite uma avaliação contínua do processo, com baixo custo. Envolve especialistas avaliando o design com base em um conjunto de critérios de usabilidade ou heurísticas. O design é examinado em busca de instâncias nas quais esses critérios são violados. Os critérios de usabilidade são relacionados a princípios e guidelines e podem ser selecionados ou derivados deles.

Nestas avaliações, um pesquisador age como o usuário-alvo e tenta completar uma série de tarefas pré-determinadas no site desenvolvido. Por exemplo, tentar comprar um produto, tentar fazer um pagamento de um produto ou até mesmo encontrar informações importantes (como telefone, endereço ou e-mail para contato).

Um conjunto de critérios para análise (neste caso, proposto por Nielsen e Molich (1990)), inclui:

1. Diálogo simples e natural;
2. Fala a língua do usuário;
3. Minimza a carga cognitiva do usuário (“não faça o usuário ter que pensar”);
4. Consistência;
5. Feedback;
6. Saídas marcadas claramente;
7. Atalhos;
8. Mensagens de erro precisas e construtivas;
9. Previne erros;
10. Ajuda e documentação;

Em resumo, avaliações heurísticas são uma forma barata e rápida de analisar se um site serve ao seu propósito.

O bom deste tipo de análise é que qualquer pessoa pode ser a cobaia destes testes e o custo deste tipo de teste é baixíssimo. Estes testes vão servir para analisar o que funciona e o que pode ser melhorado, além de servir como base para quando o designer estiver considerando novos protótipos.

O que preciso para uma avaliação heurística?

Um computador, um checklist e de 3 a 10 avaliadores. Uma câmera ou software que grava a sua tela (como Camtasia ou iShowU) também é recomendado para uma análise posterior mais a fundo.

É preferível que cada avaliador seja único. Procure escolher pessoas diferentes, como por exemplo alguém mais jovem, outra pessoa mais de idade, um designer, um analista, uma secretária, etc. Quanto mais diverso for seu grupo avaliador, melhor! E eles nem precisam ser seu público-alvo.

Estes avaliadores podem ser seus amigos ou familiares, pessoas envolvidas ou não no projeto. Você pode por exemplo pegar colegas de trabalho, levá-los para a sala de conferência, pedir umas pizzas e fazer os testes em grupo, ou ligar para amigos diferentes e convidar para tomar um café por sua conta em algum lugar que tenha wi-fi e de onde você pode usar seu notebook.

Alguns experts recomendam trabalhar com o grupo como um todo, mas o processo também pode ser feito individualmente. Vou relatar como fazer os dois tipos de testes.

O checklist deve conter os critérios que devem ser analisados. Os avaliadores precisam ter a opção de marcar “concluído” ou “não concluído”, dar uma nota de 0 a 5 referente a facilidade de concluir a tarefa, além de um espaço para observações. Vou colocar um checklist abaixo que pode ser usado em qualquer site. No entanto, o seu deve conter os critérios específicos do seu site – os objetivos que os usuários devem atingir; em um site de e-commerce, o objetivo é fazer com que o usuário faça uma compra. Em um site empresaria, é fazer com que o usuário entre em contato para mais informações, etc.

Caso o site não seja um projeto pessoal, lembre-se de perguntar ao cliente a quem você está trabalhando o objetivo dele.

Como fazer uma avaliação heurística individual?

Com sua checklist em mãos, está na hora de chamar um dos seus avaliadores. Explique o que será feito – você estará observando como ele usa o seu site e como completa as tarefas determinadas na lista. Lembre-o de que não está sendo avaliado sua inteligência ou conhecimento técnico e se um erro aparecer ou ele não conseguir efetuar uma tarefa, o avaliador não será culpado de nada. É importante deixar isto claro ao avaliador para que ele não ache que está sendo testado (o objetivo é você testar o site!), assim ele terá mais liberdade e usará o site como usaria normalmente, sem tentar agradar você. Informe também que se ela não conseguir concluir uma tarefa, ela não precisa se debater e deve passar para a próxima.

Se você possuir uma câmera, tente gravar a reação facial da pessoa afim de analisar se ela está com cara pensativa, de perdida ou se ela apenas segue seus instintos. Use um software para gravar o que ela faz no computador – cada click e movimento de mouse.

Assim que o avaliador conseguir concluir uma tarefa, peça para que ela preencha o checklist informando se conseguiu ou não, a dificuldade e qualquer observação que ela tenha.

Como exemplo, vamos supor que você pediu para que o avaliador encontrasse o e-mail para contato no site. Ele conseguiu, mas demorou muito tempo procurando pelo endereço no site apenas para descobrir que o link para a página de contato estava um pouco apagada, sem contraste e com um tamanho de fonte pequeno. No checklist, ele deve dar uma nota de 2 a 4 (já que ele conseguiu fazer a tarefa, mas não foi fácil) e no campo das observações deve notar que “o link foi difícil de ser encontrado”.

Em uma folha que só você pode visualizar, cronometre o tempo que a pessoa demorou para efetuar cada tarefa e note também se ela teve dificuldade (ficou mexendo muito o mouse, clicou em páginas que pareciam ter a informação, usou o sistema de busca, etc) ou se ela fez algo imprevisto para chegar na informação (ex: procurou no Google).

Como fazer uma avaliação heurística em grupo?

Entregue uma checklist a cada pessoa e projete o site na parede com um projetor (ou use uma tela grande para que todos consigam ver nitidamente tudo). Você pode continuar de duas formas:

1. Você pode guiar as ações e pedir para que os avaliadores acompanhem e analisem se parecer ser algo que eles fariam naturalmente;
2. Perguntar o que eles fariam para conseguir completar o ítem da lista deles.

Agora basta escutar o que eles tem a dizer. Lembre-os que não há uma má opinião e nenhuma deve ser sensurada por mais ninguém. Colete todo o feedback pertinente.

Formatando os dados

Depois de fazer todos os testes com todos os analisadores, está na hora de compilar tudo e ver o que precisa ser feito.

Você pode pegar um screenshot da tela e apontar o que gera problemas aos usuários ou fazer uma apresentação em PowerPoint / Keynote para mostrar ao seu chefe. Até mesmo uma planilha com o problema e o grau de dificuldade que os analisadores tiveram pode servir.

Aproveite para incluir o que pode ser feito para mudar os problemas apresentados. A fonte precisa ser aumentada em algum lugar? Alguma informação precisa ser relocada? Um formulário de contato deve pedir menos dados desnecessários?

Resultado de uma avaliação heurística

Faça uma outra checklist destes problemas e categorize a importância de cada problema em “Urgente”, “Importante” e “Implementação futura”. Vá marcando o que for feito e se não foi feito, especificar o por que.

Pronto. Sua avaliação heurística está feita, e agora você pode ter certeza que seu site serve ao propósito. Após as implementações terem sido feitas, você ainda pode efetuar um novo teste (pode ser um grupo misto: algumas pessoas que já participaram do teste antes, e algumas outras novas pessoas).

O importante é você atingir uma porcentagem mínima de sucesso, como por exemplo 90% de sucesso em um objetivo importante do site (comprar algo na loja online) e 70% em objetivos secundários (encontrar um número de telefone para tirar dúvidas).

A forma gratuita de fazer uma análise heurística

Sim, existe uma forma de fazer esta análise onde você não gastará um centavo e não precisa lidar com mais ninguém – basta você mesmo fazer o teste, usando seu bom senso. No entanto, lembre-se sempre de pensar como um usuário pensaria.

Checklist básico de usabilidade

A lista abaixo é o básico que pode (e deve) ser usado em qualquer análise heurística. Existem várias listas similares, no entanto essa lista do Dr. Peter Meyers serve a qualquer propósito.

Acessibilidade

• Tempo de abertura do site é razoável
• Contraste entre texto e fundo é adequado
• Tamanho de fonte / espaçamento facilita a leitura
• Flash e add-ons são usados moderadamente
• Imagens possuem ALT tags
• Site tem uma página de Erro 404

Identidade

• Logo do site está bem posicionado
• Tagline da empresa é clara
• Propósito do site é entendido em 5 segundos
• Acesso rápido a informação da empresa
• Acesso rápido a contato com a empresa

Navegação

• Navegação principal é facilmente identificável
• Itens de navegação são claros e concisos
• Quantidade de botões e links é razoável
• Logo do site é linkado à página inicial
• Links são consistentes e fáceis de serem identificados
• Caixa de busca é de fácil acesso

Conteúdo

• Títulos são claros e descritivos
• Conteúdo crítico está acima da dobra
• Estilos e cores são consistentes
• Ênfase (bold, etc) é usado de forma moderada e adequada
• Anúncios e pop-ups são não obstrutivos
• Texto é conciso e explicativo
• URLs são amigáveis
• Títulos HTML são explicativos

Simples, não?

Existem outras listas mais completas na web, inclusive Jakob Nielsen tem alguns livros interessantes sobre isto – como “Projetando Websites com Usabilidade” e “Usability Engineering“.

Lembre-se sempre de incluir na lista os objetivos do seu site!

Boa análise a todos! ;)

Bibliografia – Qualitative Web Analytics, Avaliação heurística, Jakob Nielsen, Wikipedia

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• O que é um Teste A/B de Usabilidade?
• Construa e eles virão…ou não
• Curso online Web para Designers

Para definir melhor o problema, a partir de agora o chamaremos  de falta de heirarquia visual. Em outras oportunidades já falei um pouco sobre isso, mas, agora eu pretendo aprofundar um pouco mais no assunto.

A heirarquia visual propõe um caminho para a visualização do conteúdo de acordo com a sua importância, comparada com as demais. Algumas palavras ou trechos são essenciais para o entendimento do contexto, ou seja, existem palavras que devem ser vistas primeiro, outras em segundo e assim por diante.

Como, pode se ver na imagem ao lado, existe um comparativo entre elementos com uma heirarquiva gráfica definida com outros que não seguem um padrão de leitura.

Alguns elementos pesam graficamente (certamente foi a primeira imagem que você olhou) mais do que os outros, como podemos perceber a heirarquia visual tem um forte apelo para o design gráfico, os elementos com maior destaque guia os usuários para o resto das informações de acordo com a sua evolução.

Quando essa heirarquia visual é evidente e direta, o usuário navega pelo site com grande clareza e objetividade, de certa forma, isso é criar meios coerentes para que os usuários tenham uma boa experiencia durante a navegação no seu site.

Informações objetivas os motivam a passar mais tempo no site procurando por outras informações que lhe podem ser uteis.

Peso Visual

O peso visual dos elementos reforçam a heirarquia dos mesmos. Criando contrastes de cores, posicionamento e tamanho dos elementos, podemos atribuir mais importância para alguns objetos, como eu já citei em outro artigo, o UX bem feito se parece com uma conversa, flui naturalmente.

No caso da heirarquia visual partimos do mesmo princípio, o conjunto visual é como se fosse uma narativa, se conseguirmos explicar bem os pontos chaves da história, ela é facilmente entendida e passada adiante.

Por exemplo, não deixando espaço suficiente entre as linhas de texto, você pode inadvertidamente criar uma seção que é visualmente densa e muitas vezes mais difícil de ler e distrair heirarquia visual estabelecida.

Ao aplicar o espaçamento adequado, você permite que o texto para respire e as posições ao redor também, imagens e texto para mantém a sua prioridade e equilíbrio em relação ao texto.

Por meio destes elementos podemos melhorar muito a experiência do usuário em busca de uma determinada informação, em meio a milhares de informações perdidas na web, cabe a nós UX designers tornar esse mundo virtual um lugar melhor.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Como melhorar a usabilidade no seu layout
• Re-desenhando um site (dica)
• Princípios e meios para melhorar a experiência do usuário

Antes de começar os pitacos, vale lembrar que expêriencia do usuário ou simplesmente UX, é baseado em conceitos de ergonomia, usabilidade, arquitetura de informação e navegação.

Pronto, um erro comum nisso é pensar que que o UX designer é responsável por criar boas experiências, na verdade,  o UX cria artefatos que possibilitam um boa experiencia no site. O importante é desenvolver objetos sólidos que traduzem em experiências similares para todos os usuários.

Quando o trabalho de UX é bem feito, ele se torna invisível aos usuários comuns, ou seja, raramente será comentado sobre o grau de dificuldade do trabalho. Um trabalho de sucesso simplesmente guia o usuário para as informações, mas sem o usuário saber que na verdade existe um “mapa” que guia o caminho.

Um site bem feito é como uma boa conversa, flui naturalmente.  Em outras palavras é de suma importância o conteúdo, informações claras e objetivas contribuem para uma boa experiência.

A simplicidade vai além de “menos é mais” que normalmente lemos por aí, o simples tem a ver com clareza e não com elementos gráficos, animações e etc.

Quando alguém entende com clareza a proposta, significa que o UX designer foi claro, mesmo se a informação foi passada por meio de animações ou desenhos.

Aproveite e siga o Design Blog no Twitter! Assim você fica por dentro das novidades no mundo do design, com links super interessantes.

Artigos relacionados

• Como melhorar a usabilidade no seu layout
• Não pense no design baseado em suas preferências
• Hierarquia visual de elementos