A terceira onda: O design franciscano

Vai dar praia? Pergunta simples, não? Por que então ir até o Weather Channel, sofrer com pixels e mais pixels de publicidade e informações que não precisamos se podemos acessar o Será que vai chover? (ou o Umbrella Today? ou going to rain)? A terceira onda também é sobre simplicidade.


Nunca encontro o link para mudar para unidades métricas.

Se há uma probabilidade de 80% de chuva, chegamos à conclusão que vai chover. Mostrar apenas um “sim” ao invés de iconografia e cinco linhas de texto significa mais do que economia de processamento humano. É um novo estilo ou um novo refinamento de interface.


Tarefa realizada rapidamente!

Talvez este novo estilo tenha começado apenas como uma piada (Is Twitter down? e depois Can Rails scale?, Is McCain President?), mas podemos citar o Google como o início de tudo. No caso de mecanismos de busca, o principal é o foco na tarefa a ser realizada. Não há nada na interface que distraia o usuário do que ele deve fazer. Qualquer outra informação ganha pouco destaque para apenas quando o usuário procurar por mais informações: links com sublinhados e cores neutras, menus nos cantos da tela.

Semana passada, tive uma dúvida. Faltando apenas meia hora de ir para o Santos Dumont começou a chover muito. Tentei achar algum lugar que informasse se o aeroporto estava aberto ou não para decolagens.  Caí em várias páginas da Infraero: uma me contava a história do aeroporto, a outra era um release sobre as obras de expansão e a terceira era uma tabela estatísticas sobre vôos atrasados por companhia. Nenhuma delas me respondia a um a pergunta tão simples. Finalmente, e com a ajuda de amigos no Twitter, cheguei a uma tela que fazia consultas pelo número do vôo, mas já era hora de sair e desisti.

Não é sempre que estamos pesquisando sobre história da emancipação antilhana ou de ataques terroristas na Índia. Algumas vezes precisamos apenas saber se vai chover, se o vôo vai atrasar, se o Túnel Rebouças está aberto, se a Perimetral está engarrafada… Foco na tarefa, principalmente para nossos dias cada vez mais dependentes de dispositivos móveis. Para estas perguntas, é mandatório que as soluções sejam igualmente simples.

Mais exemplos:

Tags: , , ,

A volta do design 800×600

Quando as estatísticas começaram a mostrar que usuários estavam comprando placas de vídeo mais potentes e monitores maiores, vários clientes e designers começaram a comemorar. Mais largura de tela significa mais espaço para conteúdo e criação. Ao longo do tempo, desenvolver soluções em 800 pixels de largura (o que de fato são 780 pixels em uma janela maximizada no no Internet Explorer) se tornou um pesadelo para designers.

http://flickr.com/photos/salimfadhley/No entanto, os dispositivos móveis chegaram de vez ao país. O mercado começou a se preocupar com estes dispositivos com notícias sobre invasão dos iPhones anunciada pela imprensa em março. Ao contrário de celulares e smartphones, o iPhone renderiza as páginas como elas são na resolução de 320 por 480 pixels. O usuário pode usar zoom para aumentar a tela, mas qualquer design de interfaces planejado para funcionar bem em 1024 pixels de largura com fontes pequenas irá tornar a vida do usuário um pouco mais difícil.

O cenário ganha novos players com os subnotebooks de 7 e 8,9 polegadas, como o Asus Eee PC e o Positivo Mobo. É possível redefinir a resolução de tela, mas nestes dois casos o usuário deve preferir manter a definição de fábrica que é 800×600. Ainda estamos verificando que o consumo destes subnotebooks estão vindo da faixa de early adopters de tecnologia, mas o público final, principalmente no Brasil, deve ser a classe C. Lembrando sempre que esta é faixa de consumo em tecnologia doméstica que mais cresce no país.

Seja qual for o público-alvo, fãs de tecnologia ou não, há chances de que sites sejam cada vez mais acessados novamente por usuários com resoluções de tela pequenos. Se for imprescindível trabalhar em 1024 pixels, é fundamental pensar nestes usuários e oferecer a melhor experiência possível.

Possíveis soluções:

  • Trabalhar com telas flexíveis, tomando cuidado sempre com a largura máxima e mínima da coluna principal de leitura.
  • Fazer versões diferentes da folha de estilo usando JavaScript para verificar resolução de tela. Tenha em mente que é mais provável que o usuário com resolução maior esteja com os scripts habilitados em seu navegador. Aqui você trabalha apenas a parte de grid do seu CSS.

O mais importante: não deixe de testar. Por mais anti-gadget que seja o desenvolvedor, ele precisa conhecer e testar seus aplicativos e websites nestas novas plataformas.

Referências:

Tags: , , ,

Geocities é pop

Após ver esta alternativa para o site CSS Zen Garden, não pude deixar de quesítionar se os sites toscos de dez anos atrás não estão já se tornando um clássico do design. Todas aquelas GIFs animadas, cores berrantes e fundos de gosto duvidoso serão uma referência pop para futuras gerações de profissionais? Será que veremos livros da Taschen com estas coisas? Oh…

Leia:
  • O post sobre esta alternativa no blog do seu criador.

Relógios, homens e carrinhos de supermercado

Dias atrás, estava à toa ouvindo a conversa dos outros quando pesquei uma frase no meio do contexto. Minha sobrinha, que trabalha há bastante tempo com marketing de relógios, disse qual era a marca do relógio do personagem do Marcello Antony na novela das oito. Que meu marido não leia isso, mas a última coisa que iria reparar neste homem era o relógio. Seria bem diferente se ele sentasse num computador. Seja qual for o aplicativo que ele fosse abrir, eu reconheceria imediatamente.

Sempre é assim. Algo que nos é familiar ou que faz parte de nossos interesses imediatos são percebidos mais facilmente e nos causam um impacto maior que outros elementos do cenário.

Sabendo disso, podemos dar mais um passo em direção à empatia com nossos usuários. Conhecendo-os bem, você pode listar o que lhe é mais familiar e o que faz parte de seus interesses. De posse desta lista, construir uma interface mais eficiente fica bem mais fácil, acredite!

Sei que muitos designers podem me odiar por falar isso, mas acho que devemos utilizar mais convenções e menos invenções. Carrinhos de supermercado podem não ser os ícones mais fofos do universo, mas não há um usuário na Internet que não os reconheçam como um botão para acrescentar um produto à lista de compras ou ir fazer o check-out. Qualquer esforço contra uma convenção como esta pode custar um cliente em potencial.

Vejamos o caso da Casa & Vídeo. Aquelas sacolas amarelas de gosto duvidoso são uma marca das lojas na vida real, mas para alguém que não conheça a loja irá demorar um pouco para se tocar que aquela é a deixa para o check-out. Serão segundos a mais. Neste meio tempo, o usuário pode desistir da compra. Mas este não é o verdadeiro problema para mim, e sim a antipatia que este usuário pode criar com a loja virtual. É certo que a antipatia é um critério subjetivo demais, ainda mais se for uma antipatia inconsciente, mas não podemos ignorar mais critérios imensuráveis como este, não é?

Deixe sua página respirar!

Um gentil designer identificado apenas como A. esteve neste blog e respondeu a questão sobre o porquê devemos deixar espaços em branco nas páginas.

Leia a:

[…] Penso que utilizamos espaços em branco para focar a atenção dos olhos exatamente no conteúdo. Observe que um site muito congestionado e cheio de conteúdo não atrai a atenção para nenhum lugar. Veja o site do Ibest (http://www.ibest.com.br) que, apesar de organizado, possui muito conteúdo em pouco espaço, dificultando a procura do usuário por assunto que lhe interessam e também “afugentando” os demais que só estão de passagem.A.

Muito obrigada! Mais alguém?

Como aplicar os princípios hippies ao seu website

Confesso que sempre fui vaidosa. Sempre me enchi de penduricalhos, decotes baixos, saltos altos. Usei de todos os recursos para aparecer, principalmente quando era adolescente. Talvez este seja um reflexo da minha timidez, algo que discpulos de Freud possam explicar melhor do que eu.

Para pensar

Uma citação, para pensar:

Você sabe quando alcançou a perfeição no design, não quando não tem mais nada a acrescentar, mas quando não tem mais nada para retirar.
Antoine de Saint Exupéry

Templates? Tudo igualzinho??? Eca!

Estudo de caso:

Quando criei este blog, achei um template azulzinho básico que serviria bem para os meus propósitos. Fiquei postando toda feliz e quando estava sem nada para fazer, ia até a home do Blogger e clicava de modo aleatório num link da lista Flesh Blogs para ver qual era. Várias vezes me deparei com aquele mesmo template azulzinho básico e ficava com cara de tacho.