Categoria: Links

Transforme seu Perfil em um Infográfico

Autor: Luanildo Silva
Data: 10 agosto 2010
Em: DICA1, Links, infografico

View Comments

Existem diversas maneiras de colher dados para conhecer o perfil do internauta.

Antes de continuar você pode querer ler Mito – Usuários não utilizam a barra de rolagem e 5 Melhores Galerias de sites para Inspiração.

O site Íonz encontrou uma forma bem criativa de abastecer seu banco de dados com o perfil dos navegantes. Fizeram um sistema onde você responde à algumas perguntas, baseado nas respostas o sistema gera um infográfico traçando seu perfil, destacando suas preferências e mostrando a dos demais internautas.

Depois do infográfico gerado você tem a opção de personalizar e salvar como Papel de Parede do seu computador. Experimente, bem legal.

Continue lendo...

Mito – Usuários não utilizam a barra de rolagem

Autor: Luanildo Silva
Data: 07 agosto 2010
Em: DICA1, Design, Links, Usabilidade

View Comments

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

Continue lendo...

Uma análise da caixa de busca do portal ESPN Brasil

Autor: Luanildo Silva
Data: 06 julho 2010
Em: DICA1, Design, Imagens, Links, Usabilidade

View Comments

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.

Continue lendo...

Grande Botão de Chamada a ação

Autor: Luanildo Silva
Data: 27 junho 2010
Em: Design, Links, Usabilidade

View Comments

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.

Continue lendo...

Tags: ,

10 posts para aumentar o conhecimento

Autor: Luanildo Silva
Data: 06 maio 2010
Em: CSS, DICA1, Design, Links

View Comments

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.

Continue lendo...

Otimize seu Tempo comendo tomates – The Pomodoro Technique

Autor: Luanildo Silva
Data: 13 abril 2010
Em: Links, Metodologia Ágil, Pomodoro Techique, Scrum

View Comments

A partir do momento que decide da uma olhada no Ruby on rails, tenho descoberto coisas fantásticas, não só no framework, mas pelos caminhos que ele me leva a seguir.

O Ruby on rails é um framework adotado por muitos profissionais que utilizam praticas ágeis, então ao buscar referências sobre Ruby on Rails, consequentemente você acaba sendo fisgado pelo uso de metodologias ágeis a exemplo do Scrum e XP  e técnicas que lhe ajudam à otimizar seu tempo e ser mais produtivo.

Uma destas descobertas foi a Técnica Pomodoro (The Pomodoro Techique). Sei que já existe vários artigos falando sobre está técnica, citarei vários aqui, mas também vou deixar minha contribuição.

O que é o Pomodoro Techinique?

O Pomodoro Techinique é um método de gerenciamento de tempo criado pelo Italiano Francesco Cirillo nos anos 80 e adotada pelas equipes profissionais nos anos 90.

Fracesco não estava contente com a forma que gerenciava seu tempo, não conseguia concentrar-se muito tempo em uma tarefa, então decidiu desafiar-se e ver até onde iria seus poderes de concentração. Para isso utilizou basicamente um time de cozinha em forma de tomate, daí veio o nome Pomodoro que é tomate em Italiano. Além do pomodoro, um papel e um lápis.

Como funciona?

A técnica é muito simples, por isso está fazendo tanto sucesso.
Na folha de papel ou em uma planilha você vai anotar todas as tarefas que deverão ser executadas naquele dia, em ordem de prioridades..

Escolha uma tarefa e ajuste seu time para 25 minutos. Se não tiver um conômetro físico ou se preferir, existe vários programinhas para esta finalidade, vou citar dois bem interessantes o PomoDo e o Focus Booster.

Trabalhe na tarefa até o timer despertar então em sua planilha ou folha de papel marque um X ao lado da tarefa.

Descanse 5 minutos, assim completando um pomodoro que é formado por 25 minutos de execução + 5 minutos de descanso. Nestes 5 minutos aproveite para levantar, beber água, tomar um café ou conferir seu twitter e seus e-mails.

Continuem fazendo este ciclo de 25 e 5 minutos até completar a tarefa. Após completa-la risque da lista e inicie uma nova tarefa.

Depois de 4 pomodoros faça um intervalo maior, sugiro 25 minutos, mas pode ser maior ou menor.

E as interrupções?

Não vivemos sozinhos em um mundo isolado, então as interrupções e as distrações são constantes.

Regra numero 1 – Um pomodoro é indivisível, sempre terá 25 minutos de duração.

Se você começa um pomodoro e por distração ou por intervenções externas passa a executar outra tarefa, seja atender um telefonema, olhar o e-mail o twitter entre outras distrações, este pomodoro é anulado, sendo assim você deve marcar um traço (_) no lugar do X, zerar o conômetro e concentrar-se novamente na tarefa.

Outra dica bacana, que esta dando trabalho para por em pratica é:
Quando o timer sinalizar o fim dos 25 minutos, pare de trabalhar mesmo que ache que dá para completar a tarefa trabalhando por mais alguns minutos.

O que ganho com isso?

Basicamente produtividade e controle do tempo.
Você vai passar a ter relatórios de quanto tempo gasta para executar determinada tarefa, se pode diminuir este tempo, quais as interrupções mais frequentes, além de com a prática eliminar distrações que desperdiçam tempo.

Como utilizo o Pomodoro

Não têm muito tempo que utilizo a Técnica, mas já estou vendo resultados na produtividade.

Para aplicar a técnica utilizo o Focus Booster para contar o tempo e uma planilha para listar as tarefas, pomodoros executados e interrupções.

Com o botão direito do mouse, adiciono uma nota sobre a interrupção.

Lista de Tarefas

Mais detalhes sobre a técnica você encontra em:

The Pomodoro Technique – http://www.pomodorotechnique.com/

The Pomodoro Technique: A produtividade que vem do tomate - http://migre.me/wcoM

Seja produtivo consumindo tomates – http://migre.me/wcq8

Pomodoro Technique: Você usa da maneira correta? - http://migre.me/wcr2

Técnica Pomodoro (video) – http://migre.me/wcs3

Técnica Pomodoro: organize-se e tenha foco – http://migre.me/wcuC

Continue lendo...

Tags: ,