Hoje muita gente se diz Designer de Interação, Arquiteto de Informação, User Experience Designer, se julga sênior com pouco mais de um ano de experiência na função e acha que Arquitetura de Informação é só fazer um wireframe e um prototipo navegável no Axure. Certo dia fizeram um vídeo de divulgação mostrando essa mágica e essencial profissão. Já era entusiasta, e depois do vídeo, meu amigo…
E tem a segunda parte…
.
É 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.
No último post sobre montagem de home office, falei recomendei as opções que eu gosto para mouse e teclado, e agora vou partir para uma parte importante que é a mesa.
Vale lembrar que você pode gastar de R$ 100,00 até R$ 2000,00 com uma mesa, tudo vai depender do quanto você quer gastar, do espaço que você tem, de qual material você precisa, o que vai ficar em cima da mesa, etc. Vou começar a lista com as mesas, e com preço crescente. Essas buscas foram feitas pela internet, e dependendo de onde você morar, vale a pena dar uma olhada em lojas especializadas para comparar preços e custo-benefício.
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.
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.
Estou quase terminando meu home-office, só falta o mouse e um apoio para os pés. Usei o notebook por um tempo mas acabei comprando um PC pra poder jogar quando não estou trabalhando. Durante todo esse caminho comprando as tralhas eu vi muitos tipos de peças, periféricos, acessórios e móveis com todo tipo custo-benefício. Acho que isso é algo que eu devo compartilhar ja que muita gente ainda não tem seu home-office pronto. Decidi começar com os periféricos básicos, o teclado e mouse. Agora vamos ao que interessa:
Teclados
Comfort Curve Keyboard 2000 (Microsoft)
De longe o melhor teclado que eu já usei. Teclas baixas, formato confortável e segundo a descrição, você pode derrubar água nele que ele não dá problema (nunca fiz esse teste, e não pretendo fazer). Recomendo pra quem quer jogar também!
Preço: à partir de R$ 48,99
Onde: Mercado Livre e Buscapé.
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;
}
Caso você faça um teste, o código acima vai aplicar a cor vermelha (#f00 ou #ff000) no primeiro item da lista.
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!
Estive pesquisando uns livros sobre design de interação e coisas do gênero e encontrei o livro “Interação Humano-Computador” em promoção no Walmart. O desconto é de 15%, deixando o livro por R$ 72,08, uma barganha.
Uma dica: O produto não terá os 15% se você acessar o site do Walmart diretamente, você precisa passar pelo Buscapé ou usar o link que ele fornece.
Só pra ter certeza, certifique-se que o mais barato é realmente o do Walmart (pode mudar depois que eu fizer o post), acompanhando a listagem do produto no site Buscapé.
Não perde tempo, compra!
Simone Barbosa e Bruno Santana da Silva publicam seu livro intitulado “Interação Humano-Computador” pela Elsevier. Além de apresentar uma visão extensa e abrangente dos principais conceitos, teorias e técnicas de IHC, o livro inclui excelente material sobre Engenharia Semiótica, em português.
Quando você optar por estudar, você nem sempre começa pelo lugar certo. Eu comecei com uma coisa sem ter idéia do que tava fazendo, com o tempo aprendi muito bem sobre algumas coisas próximas a essa, e hoje em dia leio muito sobre outra coisa, ao invés de estudar outras (sim, tá confuso, eu sei!) duas ou três coisas que vão completar o que eu já sei e abrir muitas portas.
Se quiser, pode tratar como desabafo, mas isso é mais uma realidade, visto que muitos diamantes que estão mais profundos não são lapidados pois existem outros (muitas vezes não tão bons quanto) mais acima, acessíveis e semi-prontos para a venda.
Não entendeu? Vou explicar tudo no resto do post.