dica1

Como disse em um post anterior, a algum tempo venho estudando assuntos relacionados a Usabilidade.
Baseado em um frase que sempre digo (“A melhor forma de otimizar o conhecimento é praticando.”) resolvi por em prática estes estudos.

Passeia a analisar alguns sites em busca de possíveis erros ou acertos.
Como apontar o erro dos outros é fácil, a vitima da vez é o portal da ESPN Brasil.

Conversando pelo Gtalk com meu caro colega @jroqueweb grande conhecedor de PHP, Java Script e afins, um ótimo profissional (aproveitando para fazer um merchan dele, “risos”), ele mim indicou um blog que até então não havia conhecido: Porra Usabilidade. Um dos primeiros post deste blog comenta sobre a caixa de busca do ESPN.

Tenha em mente ao decorrer deste texto a primeira lei de Steve Krug: “Não me Faça Pensar”.

Descontente com a informação do blog e com minha dificuldade, mostrei o site para algumas pessoas, entre homens e mulheres (9 exatamente) dei um termo e pedi que elas pesquisassem no portal em questão.

O resultado foi exatamente o que esperava:

3 dos voluntários desistiram depois de passar alguns instantes subindo e descendo a página em busca de onde começar a pesquisar.
1 indicou a região onde procuraria o campo de pesquisa, mas não identificou a existência dele.
1 encontrou, seguindo a lógica de que aquele campo era o único que ela poderia digitar algo.
4 encontraram, mas demoraram muito, muito além do normal.

Agora tenho a certeza de que há algo errado.

Vou apontar quatro coisas que claramente contribuem para o fracasso desta caixa de pesquisa.

1 - O campo para digitar o termo está sem bordas.
2 - A barra “/” antes da palavra é incomum em campos de pesquisa.
3 - O campo de pesquisa está posicionado em um local que comumente é utilizado para colocar banners.
4 - Não há nenhuma sinalização clara que ali é um campo de pesquisa, como um icone de uma “lupa” ou as palavras “pesquisar”, “buscar”.

Depois de apontar os erros vamos às possíveis soluções.

Primeiro adicionei uma borda. Utilizei dois tons de cores para testar:

Troquei a palavra “agora” por  ”buscar” e “pesquisar”:

Agora no contexto para visualizar melhor as alterações:

Como diz no post Search: Visible and Simple o campo de pesquisa deve ser visível e simples.

Comentem mim chamando de maluco e cego, ou dizendo que não estou equivocado.

Inspirado nos posts do @empreendemia comecei a assistir alguns vídeos das palestras fantásticas do TED (evento fantástico com as melhores palestras sobre marketing, psicologia, sociedade e tecnologia do mundo), o credito total desta frase entre parênteses é do Millor Machado (rsrsrsrs).

Continuando,
entre os vários vídeos que assisti, gostaria de compartilhar com vocês a palestra do Simon Sinek.

Na palestra: How great leaders inspire action (Como grandes líderes inspiram a ação) Simon fala sobre o modelo de liderança que desenvolveu (o Golden Circle) dando exemplos de como empresas como a Apple usufruem deste modelo para serem tão inovadoras.

Obs.: Todas as citações entre aspas (” “) são trechos da palestra do Simon Sinek.

O que é o Golden Circle (o Circulo dourado)?

Simon percebeu que todos os lideres inspiradores e organizações do mundo, pensam, agem e se comunicam da mesma forma. Percebendo isto, desenvolveu o que chama de o circulo dourado.

O circulo dourado funciona em três simples níveis: Why, How e What (O que você faz, como você faz e por que você faz).

What - Ele diz que cada pessoa, cada organização no planeta sabe o que faz (100%).

How – Algumas sabem como fazem, como funciona o processo.

Why - Mas poucas pessoas ou organizações sabem porque fazem o que fazem, o que os motivam. Qual a sua causa? Qual o seu propósito? Porque sua empresa existi? Porque você sai da cama pela manhã?

A maioria das pessoas e empresas se comunicam de fora para dentro:

Exemplo – Se a Apple fosse como todas as outras, uma mensagem de marketing seria algo parecido com:

“Nós fazemos ótimos Computadores
Eles são lindamente projetados, fáceis de usar, possui interface amigável.”
Quer comprar um? Não.

Como disse Simon: “É assim que a maioria de nós se comunica, é assim que o marketing é feito, é assim que as vendas são feitas”.

“Nós dizemos o que fazemos, como somos diferentes ou como somos melhores e nós esperamos algum tipo de atitude, uma compra, um voto, alguma coisa do tipo.”

Puxando para minha área, sempre vejo empresas dizendo, nós fazemos os melhores sites, os mais bonitos, nós utilizamos as melhores tecnologias, nós somos os melhores. “Mas nada disso é inspirador”.

É assim que a Apple atualmente se comunica:

“Tudo o que fazemos,
nós acreditamos em desafiar o status quo.
Nós acreditamos em pensar de forma diferente.
A forma que desafiamos o status quo.
É fazer nossos produtos bem projetados, fáceis de usar e interface amigável.
Acabamos fazendo excelentes computadores.
Quer comprar um?”

O que aconteceu neste exemplo foi a simples inversão do processo.

“Isso prova que as pessoas não compram o que você faz; Elas compram o porquê você faz.”

Isso explica por que todo mundo se sente confortável em comprar um produto da Apple.

“O objetivo não é fazer negócios com todo mundo que precisa do que você tem. O objetivo é fazer negócios com pessoas que acreditam no que você acredita.“

“O objetivo não é apenas contratar pessoas que precisão de um emprego; é contratar pessoas que acreditam no que você acredita.”

Logo em seguida ele diz: “Se você contratar pessoas apenas porque elas podem fazer um trabalho, elas vão trabalhar pelo seu dinheiro, mas se você contratar pessoas que acreditam no que você acredita, elas vão trabalhar para você com o sangue suor e lagrimas.”

No vídeo ele fala muito mais além disso, mas vou parar por aqui para o post não ficar tão grande, para conferir todas estas citações e várias outras, vale o investimento de  18 minutos para assistir a palestra. (Link direto para o vídeo).

Para assistir o vídeo legendado em português basta clicar em Subtitles e escolher Português(Brazil)

Ultimamente tenho pesquisado, lido e estudado bastante sobre usabilidade, uma área abrangente que têm me fascinado todos os dias.

Dentre vários artigos relacionados a usabilidade também conhecida como UX (User Experience), os que falam dos chamados Call to Action Buttons (Botões de chama a ação) têm uma atenção especial.

Minha intenção neste texto não é falar especificamente sobre os Botões, quem tiver curiosidade ou interesse sobre o assunto segue os links de meia dúzia de artigos bem interessantes.

Como disse e sugere o titulo, minha intenção não é falar sobre os Botões, mas sim falar sobre o botão. Estava a visitar os links que meus seletivos followings twittam, quando deparei com este, que apelidei de (Call to Action Button Big) Grande botão de chamada a ação, não resisti e resolvi escrever este rápido post.

Já tinha visto vários botões grandes, mas este superou todos eles. Tive que reduzir bastante a imagem para caber no post.

Para visualizar no tamanho original basta clicar na imagem ou ir até o site http://www.logolicia.com.br/

Uma coisa curiosa é que o Botão é tão grande que acaba tirando a atenção do usuário que está a utilizar o formulário, que deve ser preenchido antes de clicar no Big Button.

Faça sua analise sobre o Grande botão e deixe seu comentário.

Semana passada ocorreu um fato cômico na Perfil Virtual Agência Web da qual faço parte.

Vamos a narrativa do fato:

Ao comprar um refrigerante de uma marca famosa cujo o liquido é preto e saboroso (rsrsrs) ocorreu algo inédito.

Passamos quase 30 minutos tentando abrir o bendito refrigerante. Depois de passar por 3 pessoas, tentamos cortar o lacre com uma faca de serra, tentativa frustada, quando estávamos pensando em desistir, sério, iriamos desistir, até que Alexandre em um golpe sublime perfurou a tampa do tal refrigerante e encheu nossos copos espremendo a garrafa, ufa!

Foram minutos de muita tensão e agonia, pena que não tirei uma foto da garrafa.

Você deve estar se perguntando o que é que o fato desses malucos não terem conseguido abrir a garra do refrigerante da tal marca famosa tem haver com o título deste texto?

A resposta é simples:

Cuidado para não estar causando este mesmo trauma nos seus usuários, cuidado para não estar dificultando a vida destes inocentes que querem apenas encontrar com facilidade e rapidez as informações que desejam.

by kayla

A escolha do refrigerante, algo que era quase que automático, agora já tornou-se algo a se pensar, todas as vezes que vamos comprar refrigerante vem em nossas mentes o sufoco passado e por medo que a mesma dificuldade ocorra novamente optamos por uma outra marca.

O mesmo acontece em muitos sites que navegamos. Sites que dificultam nossa navegação e acesso ás informações nos causando uma má impressão o que nos faz deixar de utiliza-lo e ir em busca de um porto seguro, pois nosso tempo é valioso e não queremos passar minutos procurando algo que deveria estar em nosso alcance em poucos cliques.

Um layout mal elaborado pode espantar o usuário que consequentemente pode acabar encontrando um site do concorrente que sassei a sua sede sem dificuldades.

Então fica a Dica: Cuidado para não estar traumatizando seus usuários

No meu próximo post vou estar mostrando algumas coisas que facilitam a vida dos navegantes.

Por enquanto deixe seu comentário expressando alguma frustração que já passou ao navegar em algum site ou até mesmo tentando abrir uma garrafa de refrigerante (rsrsrsrs).

É incrível como conhecemos a obra, ligamos a obra ao nome do pintor, mas se ele ressuscitasse e passasse em nossa frente, dificilmente o reconheceríamos.

Vamos fazer um teste

Estes são uns dos grandes pintores admirados por todo o mundo, conseguiria identifica-los se eles passassem diante de você?

Neste exemplo utilizei pintores, mas pare e pense, quantos trechos de código dos outros já salvou sua pele,  em quantos layouts já se inspirou e você não está nem ai para o dono da obra.

E quem conseguir identifica-los deixa os nomes deles no comentário.

Vivo vasculhando a web em busca de conteúdo relevante para aumentar meu conhecimento e de alguma forma ajudar no meu dia a dia profissional.

Selecionei 10 posts entre os que li esta semana, ou melhor de segunda-feira até hoje (quinta feira). São textos muito interessantes, espero que tenha utilidade para vocês assim como tiveram para mim.

Solve any CSS problem in 3 minutes (or less)

Como o titulo sugere: Resolva qualquer problema CSS em 3 minutos (ou menos). Neste post do blog Five Finger Coding da uma dica muito útil no dia dia de quem monta layouts em CSS e HTML e vai te livrar de muitas dores de cabeça, digo isso por experiência própria, utilizo esta simples técnica desde que comecei a Montar Layouts e ela tem me auxiliado sempre.

The Secret Behind Great Designs: A Young Web Designer’s View

Esse foi um dos posts que mais gostei.
Todos os Web Designers querem criar sites bonitos que se destaquem entre os damais e que sejam notados por outras pessoas.

“As web designers, we all want to create beautiful websites that get noticed. We want our designs to look great and stand out from among the rest. So how do we get the experience and the skills needed to create amazing designs? In this article, we will let you in on a little secret that can greatly impact your path to becoming a great designer.”

Como criar o blog que a sua empresa precisa

Artigo do Blog Gestão Feminina dando algumas dicas de como criar um blog para a sua empresa.

“Muitos empresários ainda não descobriram, mas aquela área “notícias” no menu do site da sua empresa está cada vez mais perdendo a importância.”

Stopping Shopping Cart Abandonment

A taxa de abandono de carrinho de compras é mais de 50%.
Erin Richey Jo, mostra o que pode estar interferindo no processo fazendo com que os clientes desistam de finalizar a compra.

Good Call-to-Action Buttons

O que você pode fazer para tornar suas chamadas à ação mais eficazes?
“The call-to-action button” ou no bom português: Os botões de chamada à ação, são peças importantes no layout e dependo da localização, cor, tamanho e estilo podem nos proporcionar experiências boas ou ruins.
O autor cita um exemplo em que este conjunto de fatores utilizados de maneira correta, aumentou em 11% a quantidade de clicks.

25 Examples of Convincing Call-to-Action Buttons

Uma analise de 25 Exemplos de botões bem sucedidos.

Getting Real: Copywriting is interface design

O autor diz que Copywriting é o jeito como você rotula um botão, o jeito que você explica alguma coisa, o jeito que você rotula o conteudo.

“Is it “There are new messages: 5″ or “There are 5 new messages” or is it “5″ or “five” or “messages” or “posts”? All of this matters.”

“É “Há novas mensagens: 5″ ou “Há 5 novas mensagens” ou é “5″ ou “cinco” ou “mensagens” ou “posts”? Tudo isso importa.”

Hiring tip

Este post assim como o titulo, é bem curto, 6 linhas apenas.
Se os candidatos a vaga de emprego estiverem em geral as mesmas qualificações e especializações, dê preferência a contratar o melhor escritor.

How To Successfully Educate Your Clients On Web Development

“Alguma vez você já teve um cliente que queria uma logo maior em seu site? Talvez um logo feito em Flash, com uma terra girando e brilhos!?
Neste post você vai encontrar algumas dicas de como contornar situações como estas.

The Poetics Of Coding

Inspirado no slogan do WordPress Código é poesia “Code Is Poetry”, o autor mostra como escrever código é bem semelhante a escrever uma poesia.