Como as pessoas realmente usam o iPhone

É bem claro que muita coisa mudou nesses últimos 3 anos e meio desde o upload dessa apresentação pro Slideshare, mas o conteúdo dele é válido e bem útil nos dias de hoje.

 

I LUV UX DESIGN – O que faz um User Experience Designer

Certo dia fizeram uma animação toda bonitinha mostrando o que um UX Designer faz. E o resultado foi ótimo!

E tem a segunda parte…

Dá pra aproveitar e mandar pros seus tios que te pedem pra consertar a impressora, né?

 

Se livrando do “.last” em uma listagem em blocos

É comum vermos desenvolvedores “sujando” o código html com uma classe “.last” em uma itens de lista para remover alguma formatação de margin ou padding que mantém o último item de uma linha onde deveria estar, e não na linha debaixo. Não entendeu? Vou desenhar – literalmente.

Nesta página temos uma lista comum, com três produtos, alinhados quase corretamente, mas existe um espaço perceptível do lado esquerdo, entre o começo da div de conteúdo e o começo da lista. Não viu? Dê uma olhada neste segundo exemplo.

O bloco de fundo verde é a área de conteúdo, o roxo é o conteúdo da lista e o amarelo é o item. Se você imaginar que esta lista está ao lado de alguma outra coluna, como um menu, etc., o último objeto ficará colado na coluna do lado esquerdo (ou direito, depende da sua especificação pra marge no css), ou o item vai para a linha debaixo.

… 

 

Cuidado! O Box-Shadow pode prejudicar a rolagem da sua página!

O texto abaixo é de autoria de Ross Allen, e foi publicado no blog de desenvolvedores do airbnb. A tradução e distribuição do artigo foi autorizada pelo autor.

Trabalhando em um dos Chromebooks que a Google empresta durante os vôos da Virgin America, eu percebi a rolagem de algumas páginas do site airbnb.com ficavam lerdas, mais do que o de costume quando uso meu notebook de trabalho. A princípio culpei o hardware humilde do Chromebook, mas alguns outros sites com bastante conteúdo estavam com a rolagem normal. Percebi que o problema era o box-shadow, aplicado na lista de resultados da busca, então decidi investigar.

Usei a aba de timeline do Chrome para ver a duração do preenchimento do box-shadow nos elementos. Antes de cada teste, eu juntei alguns resultados rolando o conteúdo da página até o mesmo local, usando window.scroll(0, 140). Então, cliquei duas vezes na seta para rolar a página, sendo que cada clique corresponde a um scroll de 40 pixels, e guardei os resultados.

Elemento com 10px de blur-radius do Box-Shadow, que equivale 3 aplicações a cada 40px de rolagem.

Para checar se o problema era realmente o Box-shadow, diminui a quantidade de blur (blur-radius) pela metade. O resultado foi uma rolagem mais suave, e os números mostraram que a aplicação foi feita em metade do tempo.

Elemento com 5px de blur-radius do Box-Shadow, que equivale 3~4 aplicações a cada 40px de rolagem.

Já que percebi que o box-shadow era o culpado, resolvi removê-lo por inteiro. A rolagem foi bem mais suave.

Então, só pra finalizar o teste, apliquei um box-shadow monstruoso. O Chromebook não gostou nem um pouco de um blur-radius de 300 pixels. Ele levou exatamente dois segundos para preencher a área com sombra a cada clique para rolar a página para baixo (40 pixels por clique, lembra?). Veja a performance na tabela abaixo:

Efeitos da pesquisa no produto

Alteramos o box-shadow para 3 pixels e adicionamos um offset de 3px para manter um visual mais simples e não prejudicar a performance de aparelhos com um poder de processamento mais fraco.

Porque isso foi importante? Eu tenho por volta de 3 visitantes usuários de Chromebook!

Seus visitantes que usam Chromebook podem ser poucos – ou nenhum, como é o caso de muitos sites no Brasil – mas o Chromebook é baseado no Chrome, que usa a engine Webkit, a mesma utilizada nos navegadores de iOS e Android. Se o CSS afeta a performance do seu produto no Chromebook, é bem provável que afete também quem está usando/visualizando via Android/iOS.

Recomendo que acesse a área de comentários deste post e do post original para acompanhar debates sobre este assunto.

 

Como fazer testes de usabilidade em aplicativos iPad

Ta aí algo bom de compartilhar. O pessoal da Faber Ludens fez um vídeo mostrando como fazer um tese de usabilidade utilizando um labotarório móvel. Eles estavam analizando o aplicativo do Jornal “O Globo”. Sem mais bla bla blá, vamos ao vídeo:

Vale muito a pena ver que eles utilizam a câmera que fica acima do ombro do usuário capta os gestos que ele faz com a mão sem tocar a tela, que normalmente não são capturados por um heatmap, etc.

Vocês podem ver um texto mais descritivo sobre no Blog da Faber Ludens.

😉

 

Seletor :nth-child

Acho justo que você saiba que esse seletor não funciona no IE – quer dizer, até funciona, mas só na versão 9. Já nos demais navegadores populares (FF 3.5+, Chrome 4, Safari 4) tá tudo bem, menos no Opera, que tem alguns problemas.

Como você já deve saber, o seletor first-child funciona para o primeiro item (filho) e o last-child para o último item (também filho), o nth-child seleciona esses itens de um jeito mais específico, deixando você livre da necessidade de aplicar alguma classe ou fazer alguma “gambiarra” do tipo.

Vamos para alguns exemplos:

Selecionando o primeiro item de uma lista, teremos o seguinte CSS e o respectivo código HTML:

ul li:first-child {
	color:#f00;
	}
  • Primeiro Item
  • Segundo Item
  • Terceiro Item
  • Quarto Item
  • Quinto (e último) Item

Caso você faça um teste, o código acima vai aplicar a cor vermelha (#f00 ou #ff000) no primeiro item da lista.

… 

 

Solução para inline-block no Internet Explorer 7

Se levarmos em conta todo aquele papo de código semântico na hora de passar um layout de imagem pra html e css sempre teremos a companhia de algumas tags, e uma delas é a
<ul>, que deve ser usada para uma lista (o rly?). Ultimamente tenho trabalhado com layouts melhores e devido as exigências de onde eu trabalho, preciso codificar páginas que sejam compatíveis com o IE7, já que não damos mais suporte ao IE6.

Quando você busca utilizar uma lista e precisa estipular tamanhos e alguns outros atributos nela e nos items, você precisa utilizar o elemento “block”, e em alguns casos, se esse elemento tiver que ficar em linha, será necessário usar o “inline-block”. Mas e aí, o que tem demais? O inline-block não está implementado no IE7.

SELETOR {display:inline-block;}

Para solucionarmos esse problema, só precisamos duplicar o seletor e colocar um “* + html” antes do seletor, trocar o display por inline e pronto!

Exemplo:

* + html SELETOR {display:inline;zoom:1;}

Pronto, problema resolvido!

Aprendi com o Édipo!

 

Palestra sobre Design de Interação

Design de Interação

Pra quem não sabe nada sobre Design de Interação, vale a pena ver essa palestra, ela é curta e bem objetiva.

… 

 

Em um tempo em que tempo vale ouro…

Para refletir:

Picasso estava uma vez na praia a desenhar. foi interpelado por uma senhora que o reconheceu. “Você não é o picasso? faça-me o meu retrato!”
“Com certeza”-respondeu o pintor. E a senhora sentou-se em pose e ele ficou ali um bocado a olhar. Passado um pouco abriu o bloco, e com um unico traço do pincel capturou toda a essência da senhora. “Fantástico-disse ela-sou mesmo eu! Quanto quer pelo retrato?”
“500.000 dolares”-disse-lhe.
“Tanto??? Mas você só demorou dez segundos a fazer isso…”
“Não, minha senhora, demorei a minha vida inteira…”

Fontes: Idéias feitas em lugares comuns e vitrine viva

 

Otimização Avançada de PNG

Preparar imagens pra sites é algo que nem todo mundo costuma dedicar tempo ou atenção, mas você já parou pra pensar como seria a página do UOL se tivesse imagens sem otimização ou feitas incorretamente?

Em alguns blogs, que possuem menos acessos que o UOL (ou qualquer outro site com muitos acessos), isso costuma ser a diferença entre passar o mês com o plano de R$ 30,00 ou ver seu servidor cair no meio do mês, ter que correr atrás da empresa de hospedagem e pegar um plano mais caro (e com mais espaço pra transferência).

Vale lembrar que alguns servidores de hospedagem, por mais que tenham transferência ilimitada, quebram quando existem muitos acessos simultâneos.

O Yahoo! criou uma ferramenta chamada Smush It que otimiza suas imagens. Basta fazer o upload e a página retornará a imagem otimizada. Não dê uma de espertinho e use o link direto pois a imagem expira.

Tá procurando uma hospedagem? Usa a Neep!