Experiência do Usuário (Locaweb)

Recentemente precisei fazer uma pesquisa com ex-clientes de um produto da Locaweb, pois gostaríamos de saber por que eles haviam deixado de usá-lo. Eu tinha um problema nas mãos, pois ex-clientes não costumam falar. Eles estão frustrados, furiosos ou simplesmente não lembram mais.

Como eu poderia motivá-los a responder uma pesquisa online?

Decidi abordá-los de forma pessoal e informal. Primeiro, no e-mail que convidava-os a participar do questionário, em momento algum citei o termo “pesquisa”. E mais: apresentei-me, dei meu nome e um e-mail para maiores informações, disse o que fazia na Locaweb e por que estava entrando em contato. Então pedi que eles respondessem às perguntas publicadas em uma página do site. A idéia foi me comunicar com eles como uma pessoa que trabalha na Locaweb e que gostaria realmente de receber ajuda, fazê-los entender que não era um setor de atendimento que faz pesquisas de satisfação.

Dusty Users

Isso coincidiu e fechou com as idéias que li no livro “Designing the moment“  (Robert Hoekman Jr.) sobre “Dusty Users” ( clientes que cadastram-se para usar um serviço, mas não vão adiante).  Entre as soluções propostas para resgatar a atenção desses usuários, o autor fala sobre o tom amigável e bem humorado com que se pode abordar esses clientes e obter informações.

“So what do we do about this as designers? If our goal is to keep users interested and engaged what can we do to nudge these sleepers awake and get them moving again? (…) The things that really make us pay attention are personal. (…) they are personal messages focused around our needs that create a genuine connection”

“Most important, the messages we send out should be written using a human voice, not with stiff, corporate marketing fluff filled with buzzwords and catch phrases. These messages should be conversational. They should be focused entirely on the recipient, not on us.”

E, casualmente, logo depois da pesquisa enviada recebi newsletters de dois serviços que havia assinado por curiosidade, e que agora estavam me enquadrando como uma dusty user. Vejam o exemplo do Usabilla.com:

Hello,

Not so long ago you’ve created an account at Usabilla.com.
I’m very curious if you’ve already been able to set up your first test and would love to hear about your experiences.

We’re currently running a large number of very exciting test cases for a variety of clients (see http://usabilla.com/references ). We’ve also been working on different demo cases to give you some ideas on how you could use Usabilla for different types of usability tests. You can find an overview of these cases at our blog: http://blog.usabilla.com/?cat=87 . We recently started a Facebook group, which we would like to use to discuss news, demo cases, and to learn from your stories: http://bit.ly/usabillafb .

Please let me know if you got any questions, tips, ideas, or need help to set up a test.

Kind regards,

Paul Veugen
Usabilla.com

Resultados

Ok, e sobre os resultados? Foram ótimos. A participação na pesquisa correspondeu a 7,8% do total de e-mails enviados com sucesso e a 60% dos cliques únicos no link da pesquisa. Isso ficou acima do que esperávamos em função das características do perfil convocado e também ficou acima da média das nossas outras iniciativas em pesquisa. Vejam o gráfico com o percentual de cliques no link da pesquisa (em relação ao total de visualizações únicas da mensagem):

Não ignore o feedback!

Outro resultado interessante, e que toca num ponto importante sobre esse tipo de abordagem: recebemos mais de 200 e-mails válidos (anti-spam e auto-reply não foram contabilizados) com clientes expondo seus motivos e agradecendo pelo contato. Esse feedback é importante, pois traz dados qualitativos sobre a questão da pesquisa. Porém, uma vez que você se apresenta aos seus clientes de forma tão próxima, você deve comprometer-se a atendê-los se eles solicitam a tréplica do contato.

Pense, primeiramente, se você terá tempo para ler as mensagens enviadas (Dica: programe uma hora do seu dia de trabalho para ler os e-mails e respondê-los). Considere que alguns (ou muitos) clientes verão nesse contato uma possibilidade de suporte do produto. Se pedirem ajuda, encaminhe as mensagens para a equipe responsável pelo suporte e informe a origem do contato. Se possível, envie você mesmo um e-mail respondendo que encaminhou o pedido ao suporte e que assim que possível a pessoa será atendida. Se for algum tipo de ajuda que você mesmo pode prestar, responda e agradeça.

De qualquer maneira, não deixe que os clientes percam a fé no seu contato, não utilize a abordagem pessoal como um método vazio. Faça isso porque você se importa com a opinião dos usuários do seu produto, porque se importa com eles.

Boa sorte nas pequisas!

Estamos procurando um excelente designer visual para se juntar ao nosso time de Experiência do Usuário.
O candidato deve ser um colaborador natural, capaz de desenvolver e apresentar suas ideias para um time de desenvolvimento multidisciplinar, e irá trabalhar em estreita colaboração com outras áreas da empresa, como Produtos, Engenharia e Marketing.

Perfil necessário:
- Larga experiência em design para web.
- Grande entendimento dos conceitos e princípios de usabilidade, design centrado no usuário e experiência do usuário.
- Habilidade para rapidamente criar layouts usando Photoshop/Fireworks/Illustrator ou outras ferramentas equivalentes.
- Capacidade de apresentar conceitos e idéias através de protótipos de baixa ou alta-fidelidade.
- Capacidade de traduzir os achados de pesquisas/testes de usabilidade em soluções de design.
- Capacidade de gerenciar suas próprias atividades, e fazer múltiplas tarefas, com pouca ou nenhuma supervisão.
- Essencial a capacidade de trabalhar em equipe, colaborando com outros designers, arquitetos da informação, engenheiros e gerentes de produtos.

Serão diferenciais:
- Experiência em desenvolvimento web (HTML/CSS/JS/AJAX/PHP/RUBY).
- Graduação em Design Gráfico, Design Industrial, Comunicação Visual ou áreas correlatas.

Pacote de remuneração atraente, compatível com o mercado. Excelente ambiente de trabalho. Empresa sediada em São Paulo.
Os interessados devem enviar um e-mail com currículo e portfólio para curriculo@locaweb.com.br informando no campo assunto o código ‘Blog –Desig09′.

Nos dias 2 e 3 de outubro participamos do 3º EBAI – Encontro Brasileiro de Arquitetura da Informação. O congresso proporcionou desde o contato com cases interessantes de profissionais da área até questionamentos sobre o que é Arquitetura de Informação e suas competências.

Começando pelos cases, destaco o da Agência Click, chamado “Bastidores da Criação e desenvolvimento do Novo portal FIAT” apresentado pela Silvia Melo e Fabricio. Pudemos ver as etapas de criação desde a proposta inicial até o resultado, passando por inúmeros questionamentos ao longo do projeto:

· Fundo escuro ou claro, o que isso comunica?
· Minimalismo ou fartura de informação?
· Como o usuário procura um carro novo: pelo modelo ou pelas características?

Novo portal da Fiat

Os testes de usabilidade aplicados durante o projeto foram essenciais para indicarem as correções e melhorias na experiência do usuário de forma ágil, um ponto a ser considerado ao fazermos qualquer projeto por menor que seja.

O INdT (Instituto Nokia de Tecnologia) mostrou os desafios de projetar interfaces para dispositivos móveis. Quando projetamos um site ou uma aplicação web, normalmente não precisamos nos preocupar tanto com o hardware dos usuários. As variações físicas não são tão extremas como encontramos em dispositivos móveis com telas, tamanhos e formatos tão diferentes que determinam o modo de interação com a interface. Além do aparelho, quando projetamos para mobile não temos certeza do ambiente e condições em que será usado.

O Rafael Kiso da Focusnetworks trouxe uma comparação do sistema AHEAD (voltado à manutenção preventiva de aviões) que teve em sua primeira versão uma interface projetada exclusivamente pelos programadores. A reformulação contou com testes, casos de uso, personas e preocupação com quem usa o sistema. Conclusão, o resultado foi que a Embraer teve respostas concretas de satisfação dos clientes, os quais reduziram significativamente custos, além de aproveitar o conhecimento dos usuários para alimentar o sistema e facilitar o trabalho de pessoas com a mesma função separadas geograficamente.

Veja o comparativo entre as duas versões.

As questões ‘teóricas’ ou até ‘filosóficas’ também levaram à reflexão de nossas responsabilidades e objetivos no trabalho de arquitetura de informação, design de interação, usabilidade, design centrado no usuário e todos os nomes que conhecemos.

Os pontos levantados pelo Gil Barros em sua apresentação ‘Com quantos chapéus se faz um arquiteto?’ e pelo convidado internacional Andrew Hinton foram úteis para pensarmos ainda mais a respeito dos papéis que podemos assumir como arquitetos de informação e designers de interação.
A experiência do usuário vai muito além de rotular um botão, escolher um ícone ou montar sitemaps. Devemos ter este tipo de preocupação, mas lembrarmos que nossa atuação pode ser bem mais ampla. Podemos desempenhar funções estratégicas de definição do produto por exemplo. Em um dos cases do INdT os testes da interface contribuíram com melhorias de hardware que seriam desenvolvidos futuramente.

Os elementos da experiência do usuário

O Ricardo Grandinetti da Fhios abordou o assunto da venda da Arquitetura de Informação aos clientes. Concordo plenamente que, para que possamos vender nosso trabalho, será preciso embasarmos em resultados e não apresentarmos apenas os métodos de desenvolvimento. Isso significa que as empresas só vão reconhecer a importância do design centrado no usuário quando perceberem que a forma como trabalhamos traz resultados tangíveis e superiores. O caso da Embraer será um ótimo argumento de venda de projetos futuros por quem desenvolveu. A empresa que contratou terá a visão de que poderiam ter desenvolvido o sistema desde a primeira versão desta forma e que os resultados e retorno financeiro poderiam ter acontecido mais cedo.

A apresentação do Felipe Memória, que foi trabalhar na Huge, mostrou um possível futuro para quem pretende trabalhar fora do Brasil. As diferenças de cultura, fluência no idioma (por exemplo, muitos pensam que são fluentes em inglês e chegando lá não conseguem defender uma idéia) e outros aspectos, aparentemente sem importância, acabam sendo um peso no dia a dia.

Website da Huge - career

E para finalizar, outro ponto importante comentado pelo Memória foi a respeito de profissionais que desejam ser realmente bons no que fazem. Para atingir este objetivo, devemos estar dispostos a trabalhar sempre mais do que os outros. Quanto mais praticamos, mais aprendemos e nos desenvolvemos. O talento e a sorte sempre ajudam, mas pessoas dedicadas conseguem destaque quando elas querem.

Joomla! é um CMS (Content Managment System) muito utilizado na elaboração de sites e até blogs. O Joomla! Day é um evento anual que acontece em diversos países.

O evento Joomla! Day Brasil 2009 ocorreu no dia 12 de setembro, no Rio de Janeiro, na Escola de Comando e Estado-Maior do Exército (ECEME) – Praia Vermelha. Mais de 200 pessoas estiveram presentes, e a Locaweb participou apresentando seu case: Locaweb com Joomla!

Heric Tilly e eu (Ester Razzo) fomos até lá para compartilharmos o que estamos desenvolvendo para o site da Locaweb.

Em novembro de 2008, foi decidido reestruturar o site da empresa com mais foco na experiência do usuário, arquitetura da informação e design de interação. Como a Locaweb é uma empresa voltada às metologias ágeis, o que mais queríamos é também tornar a manutenção do site ágil. Pra isso precisávamos de um CMS.

Dentre os Sistemas de Gerenciamento de Conteúdo disponíveis, optamos pelo Joomla!, pois vimos que seria mais fácil a transição, o treinamento dos usuários e a administração do conteúdo em si. A grande comunidade existente e as inúmeras extensões disponíveis também foram outros fatores importantes.

Atualmente o site tem mais de 100 mil visitas diárias, portanto precisávamos focar em performance e estabilidade. Utilizamos um plugin de conteúdo estático chamado Content Static que o Joomla! oferece, adaptamos para o nosso caso e o acesso ao banco de dados é quase nulo.

Os principais resultados que tivemos são a agilidade na manutenção do site e maior autonomia de vários departamentos da empresa na edição dos conteúdos.

Palestrantes

Participantes

Confira mais fotos e baixe as apresentações no Site Oficial do Evento Joomla! Day 2009.

Gestalt é uma teoria de como os seres humanos assimilam as coisas e o seu processo de percepção de acordo com as experiências passadas.

O estudo da Gestalt surgiu no início do século passado, na Alemanha, através de 3 psicólogos: Kurt Koffka, Wolfgang Köhler e Max Werteimer.

Há muito que falar da Gestalt, mas o que nos interessa é:

Como funciona e porque usar na Web.
Gestalt faz com que uma pessoa, ao entrar em seu site, tenha um conforto mental. Sinta o visual harmoniosamente agradável aos olhos. O inverso faz com que ela tenha a sensação de algo errado de forma inconsciente.

Percepção visual
As 7 figuras abaixo mostram imagens criadas pela sua mente.
A aproximação de vários elementos (quadrados,  triângulos,  linhas,  círculos,  pixels etc.) forma em sua mente um único objeto já conhecido por você.

Usamos então a Experiência do Usuário para tornar um layout visivelmente mais agradável.

Em um layout podemos usar vários princípios de Gestalt:  proximidade, continuidade, alinhamento, experiência passadas, entre outros.

• Proximidade: Onde elementos próximos são considerados partes de um mesmo grupo.
• Similaridade:  Agrupamos elementos parecidos, instintivamente.
• Continuidade: Qualquer padrão é contínuo, mesmo que ele se interrompa.
• Alinhamento: Elementos seguindo as suas linhas-base dão aspecto de organização.
• Experiências passadas ou associação: a experiência é única para cada indivíduo, é a memória de algo que vimos. Sabendo o público-alvo, podemos ter uma base de suas experiências globais.

Veja o exemplo logo abaixo:

Obs.: Não é necessário conter todos esses itens na composição do layout de um site. Estes são apenas exemplos para serem procurados em seu próprio site.

No conteúdo da página, podemos ver que existem 6 tipos de chamadas diferenciadas por cor forma e tamanho.

Proximidade com similaridade e sem backgrounds
No layout acima existem blocos para separação dos tópicos com espaçamento entre os textos que geram colunas.
Com os textos ligados aos respectivos tópicos, pela cor negritada do titulo, podemos ver quando o texto começa e acaba devido ao espaçamento entre um título e outro.

Proximidade com backgrounds iguais e formas diferentes
Cores deixam os elementos visualmente relacionados de alguma maneira.
Mesmo não lendo o seu conteúdo, podemos ver que existe uma relação por terem o mesmo background. (elemento posicionado no lado superior direito).

Proximidade com backgrounds e formas iguais
Possuem conteúdos relacionados entre si, por terem a mesma cor, tamanho e espaçamento entre eles.

Percebam que elementos próximos são elementos relacionados, quando o elemento possui a proximidade por similaridades ou formas o seu conteúdo tem peso igual.

Alinhamento
Todo conteúdo deve seguir sua linha base, caso contrário seu layout ficará desalinhado. Não que seja um erro, às vezes é necessário algo diferenciado para dar destaque/tirar a atenção do usuário para algum item na página. É algo como um processo quebrado ou sair da rotina na mente humana.

Exemplo de layout desalinhado:

(Um elemento desalinhado ou uma cor diferente fora do padrão quebra o processo e o resultado é um destaque).

Exemplo de layout alinhado:

Nesse caso, todos os itens da página estão visualmente organizados, mesmo tendo formas e conteúdo diferentes. E nenhum elemento briga com outro por serem todos uniformes.

Obs.: O destaque e o posicionamento dos elementos na página que dizem qual o seu peso e relevância.

Experiências passadas ou Associação
Registramos o que visualizamos o tempo todo, adquirimos conhecimento dia após dia e podemos incluir nossas experiências como elementos do mundo (real) na web. Essas experiências registradas são conhecidas também como Semiótica (estudo dos signos - as representações do que vemos no mundo e que estão registradas em nossa mente).  Usamos e devemos usar semiótica sempre na criação de ícones. Um exemplo de semiótica usada em ícones é o símbolo usado para site em construção:

Podemos usar esse princípio para facilitar a experiência do usuário dentro do site.
Por exemplo, o X de fechar dos navegadores e outros programas que já são comumente posicionados no canto superior direito, podemos usá-lo também em outras situações, como em um modal.

Avaliando todos os princípios de Gestalt podemos proporcionar uma melhor experiência para nossos usuários.
Em todos os casos, é necessário bom senso para fazer um layout e lembrar sempre do equilíbrio, proporção, simetria, contraste, ordem, consistência, proximidade e alinhamento.

Referências:
Instituto Gestalt de São Paulo
Luli Radfahrer
Desenvolvimento para Web

O Andrew, PO (product owner) do Cloud Computing da Locaweb, fez um webcast bem bacana sobre HTML 5, falando dessa linguagem que deve mudar a web e do que já foi desenvolvido até agora. Confiram!

Você também pode ver os slides da apresentação no Slideshare.

Dessa vez a WordPress.org está convocando usuários do sistema e moderadores voluntários de diversos países para testes de usabilidade das funcionalidades da interface do sistema. Conheça os detalhes do projeto no WordPress Blog.

Quer melhorar as URLs de seu site? Adote URLs amigáveis.

O uso de uma URL amigável só traz vantagens, tanto na indexação (SEO), pois poderá conter a sua palavra-chave, quanto na memorização.

Imagine você ter que decorar a URL de um site assim:

Aplicando a URL amigável, esse endereço complexo poderia ficar assim:

Agora vou exemplificar como criar uma url amigável de forma rápida.

Para editar o seu arquivo .htaccess,  verifique na raiz de sua hospedagem se o arquivo já existe.  Caso não exista,  crie um e publique na raiz do seu site com o conteúdo a seguir:

Você também pode criar redirecionamentos, caso mude alguma url do site.

Neste exemplo,  ao acessar  “http://www.teste.com.br/produtos-descricao” o usuário é redirecionado para “http://www.teste.com.br/produtos-lista”

O parâmetro NC é usado para não haver diferença se o usuário digitar maiúsculas ou minúsculas na URL e R=301 significa que o redirect é permanente.

Caso queria criar algo mais complexo, você pode consultar o manual mod_rewrite no site do Apache.

Publicamos um tópico no Fórum da Locaweb pedindo indicações de painéis de controle que os clientes acham interessantes. Seria muito bacana se os visitantes do UXBlog deixassem suas opiniões por lá.

Link pro tópico:  O melhor e o pior em um painel de controle

Se você contratou qualquer plano de hospedagem ou registrou algum domínio na Locaweb, gostaríamos que respondesse ao nosso questionário de satisfação.

É uma pesquisa rápida, queremos conhecer como foi a sua experiência e utilizar as respostas para fazer um processo de compra cada vez melhor. Nem precisamos dizer que, para isso, sua participação é fundamental. ; )

Para participar acesse o endereço www.locaweb.com.br/pesquisa