Zorro, famoso herói do cinema, conhecido por suas aventuras ao defender os fracos e oprimidos utilizando sua habilidade com a espada, inspirou vários filmes e livros da literatura popular, e depois deste post vai inspirar também Webdesigners.

OffTopic: Antes de continuar você pode querer ler 85 caixas de busca para inspiração e 5 Melhores Galerias de sites para Inspiração.

O personagem adota a letra “Z” como sua assinatura (três linhas cruzadas), marcando-a com sua espada em paredes e nas roupas de seus inimigos, como sinal de sua passagem. (fonte: Wikipédia).

Apesar de possuir características bem semelhantes, nós sabemos que o Zorro na sua identidade secreta não era Webdesigner. Mas o que este herói pode nos ensinar?

Existem várias técnicas para elaborar layouts com o máximo de usabilidade e que sejam visualmente agradáveis. Uma destas técnicas tem tudo haver com o personagem em questão.

Este método é conhecido como Z-Layout e carinhosamente apelidado por mim como: a técnica de Zorro (rsrsrs).

O Z-Layout utiliza a letra “Z” como guia para a construção da página, sendo muito simples de ser aplicada, pois constituí em posicionar na parte superior do Z os itens que você deseja que o navegante visualize primeiro ao acessar a página e na parte inferior as chamadas a ação, levando em consideração que o usuário vai seguir de forma natural o caminho do Z da mesma forma que lêem livros (de cima para baixo, da esquerda para direita).

É bom deixar claro que esta não é uma solução definitiva e não é necessariamente aplicável a todos os projetos. Existem mecanismos com maior eficácia e que podem ser utilizados em conjunto com o Z-Layout.

O Z-Layout pode ser utilizado como ponto de partida para construção de um layout por abordar os requisitos fundamentais para qualquer site eficaz: hierarquia, marca, estrutura e apelo à ação.

Veja alguns exemplos de aplicações do Z-Layout:

O “Z” pode ser posicionado de diversas maneiras, buscando sempre a obtenção do melhor resultado.

Para escrever este post utilizei como base o texto em inglês Understanding the Z-Layout in Web Design.

Espero que o Zorro tenha inspirado vocês neste post.

Até a próxima aventura!

Você gostou do post? Não esqueça de Compartilhar com seus amigos. O Dica1 agradece!

Navegando pela Web sempre deparo com várias caixas de busca bem interessantes.

Selecionei 85 caixas de busca que podem servir de referência para Web Designers que estejam em busca de inspiração.

Antes de continuar você pode querer ler Uma análise da caixa de busca do portal ESPN Brasil e 5 Melhores Galerias de sites para Inspiração.

Há uma longa e antiga discussão entre os Web Designers se o usuário utiliza ou não a barra de rolagem ao navegar no site, impulssionado por esta duvida, muitos projetistas preferem apertar “acima da dobra”* todo conteúdo considerado de maior importância.

Antes de continuar você pode querer ler Uma análise da caixa de busca do portal ESPN Brasil e Cuidado para não estar traumatizando seus usuários.

*Acima da dobra é um termo referente ao conteúdo localizado na metade superior da primeira página de um jornal.  É comumente utilizado na web para descrever a área que você vê em um site antes de ter que rolar a página.

Neste excelente artigo The myth of the page fold: evidence from user testing mostra que foram feitas mais de 800 seções de testes no período de 6 anos constatando que as pessoas não tem problema em utilizar a rolagem do site.

Assim como no jornal onde o objetivo é que ele seja todo lido e não apenas o conteúdo acima da dobra, o site deve ser planejado para que o usuário seja atraído a navegar por toda a página.

Sendo assim uma das coisas que pode definir se o usuário vai rolar ou não a página é o posicionamento do conteúdo. No texto citado acima o autor mostra que menos conteúdo acima da dobra incentiva o usuário rolar a página em busca de mais  conteúdo.

Outra prática também citada no texto é posicionar o conteúdo abaixo da dobra de forma que parte dele apareça na área visível da página.

Um ótimo exemplo é o site da 37 Signals, o conteúdo está bem distribuído em uma longa página e a cada etapa da rolagem o usuário têm próximo de se a possibilidade de acessar as páginas dos produtos caso seja convencido.

Outro detalhe muito interessante é que no rodapé foram posicionadas as mesmas opções que estão no topo do site, poupando o usuário em ter que rolar até o início da página para acessar os produtos.

Alguns posts sobre o assunto que vale a pena conferir:
Myth #3: People don’t scroll
Scrolling and Attention
Life Below 600px
Screen Resolution and Page Layout

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.

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.

Call to Action Buttons: Examples and Best Practices

Good Call-To-Action Buttons

25 Examples of Convincing Call-to-Action Buttons

Web Design Trends: Call To Action Buttons

35 Creative call to action buttons for inspiration

“Call To Action” Buttons: Guidelines, Best Practices And Examples

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).

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.