Como desenhar interações para o Google Glass

Google Glass

Bom, a essa altura você já ouviu falar muitas vezes do Google Glass e não vê a hora de desenhar algum aplicativo para ele.

Depois do primeiro round de óculos distribuídos pelo Google para alguns desenvolvedores parceiros, já tem bastante gente desenhando aplicativos para o Glass – tanto em startups quanto em agências digitais.

Então reuni aqui algumas informações e links que foram bastante úteis para começar a entender como o sistema funciona, antes mesmo de botar o óculos no rosto e testar as interações no próprio dispositivo.

Continuar lendo

A influência do tamanho da tela no tempo de interação

Já falamos por aqui que quanto menor o dispositivo, menos as pessoas navegam na web, e agora encontrei mais alguns números que comprovam a teoria.

A diferença é que agora não estamos falando sobre pageviews, mas sim sobre tempo médio gasto em cada interação com o dispositivo.

Tempo de interação por tipo de dispositivo

O que faz bastante sentido, já que as pessoas costumam realizar tarefas diferentes dependendo do dispositivo.

4-5” phones are great for checking emails, tweets, social networks (especially uploading photos you took on your phone), listening to music, and playing casual games like Angry Birds. Consumers surveys show that email is the #1 activity on smart phones.

7-10” tablets are great for reading books and magazines, surfing the web, watching videos, and playing casual to mid-core game, like Plants vs Zombies or Infinity Blade. Consumer surveys show that gaming is the #1 activity on tablets.

30-50” TVs are great for long session movies, TV shows, and video games. Big screen TVs are usually hooked up to the best speakers in the house, so it’s great for rich audio and video experiences. Perhaps most important, the 30-50” screen is for content you want to share with family and friends. Increasingly, the user experience in front of the TV now includes a 2nd screen in the form of a tablet/phone. This dual screen experience is common enough that the Wii U built an entire controller to facilitate this.

via

Designer de Interação está entre os 10 salários mais vantajosos de lista feita pelo Yahoo!

Um cara bem pago

O critério usado para montar a lista foi o seguinte:

“O que nós tentamos investigar são as ocupações cuja média de pagamento está bem acima da maioria e cujos trabalhadores reportam terem um nível relativamente baixo de stress (o que pode ser um indício de que o trabalho é pouco cansativo).”

A metodologia foi feita usando dados do site Payscale.com e levando em conta 3 critérios diferentes, mas com o mesmo peso:

  • o total médio de remuneração de um trabalhador com 10 anos de experiência, em relação à média dos outros empregos;
  • o nível de stress que os trabalhadores reportam em cada área;
  • o quão significativo os trabalhadores acham que seu trabalho é.

E aqui o trecho da lista que fala do cargo de Designer de Interação.

Interaction designer (US$116,000). Many websites rely on these technical experts to make the user’s experience engaging and fun–though often to lure users into a purchase or transaction rather than provide personal benefits to them. Other types of website architects and managers also made the overpaid list.

Vale lembrar que nos EUA o salário é anual, em dólares, e sem décimo-terceiro. O valor que eles colocaram entre parênteses é de um profissional “no meio da carreira”, seja lá o que isso signifique.

Não precisa fazer a conta: em Reais daria mais ou menos R$18.292 por mês. Mas é claro que a conversão não é tão simples assim.

Update: o Marcelo Eduardo deu uma ótima dica sobre o custo de vida nos EUA aí nos comentários, que ajuda a ter uma dimensão dos gastos que acompanham esse salário mais alto.

Outros cargos na lista top 10 do Yahoo! incluem: consultor de engenharia de software ($123,000), estrategista de marca ($90,700), diretor de pesquisa de marketing ($122,000), consultor de contabilidade ($81,700), analista de portfólio ($81,800), serviços financeiros em atacadistas ($109,000), advogado de patentes ($170,000), consultor de investimentos ($111,000) e cientista de dados ($133,000).

O Design de Interação dos novos Ubuntu Phones

Ubuntu Phones

Os Ubuntu Phones são uma plataforma mobile desenvolvida pela Canonical pra smartphones. A experiência de uso no celular é bastante parecida com a experiência do Ubuntu para desktop, com a diferença que agora o controle se dá através de uma interface touch – o que deixa as interações muito mais interessantes na minha opinião.

Abaixo um vídeo que mostra algumas maravilhas dessa nova interface:

Pictogramas, a regra do 80/10 e os ícones que não servem como ícones

Ícone de combustível no painel do carro

Conta Tristan em seu blog sobre uma experiência que teve com o ícone de bomba de combustível em seu carro.

Uma vez ele leu que a seta que aparece próxima ao ícone de bomba de combustível indica em que lado do carro o combustível entra.

Isso seria realmente inteligente, uma vez que não existe uma padronização muito clara de em qual lateral do carro fica a entrada de combustível. E isso influencia diretamente na forma como você estaciona o carro no posto de gasolina.

Mas quando ele foi verificar em seu próprio carro, descobriu que essa seta não era universal. Em seu carro ela sequer aparecia.

Pesquisando mais, descobriu que na verdade é a orientação da bomba que diz em qual lado o combustível entra: se a mangueira de combustível aparece para a esquerda, o combustível entra pela lateral direita do carro. E vice-versa.

Bomba de combustível e lado do carro em que ele entra

Tristam pensou ter descoberto o maior segredo da indústria automotiva.

“Mas se isso fosse realmente verdade”, diz ele, “seria a iconografia mais estúpida que eu já vi”. Mesmo que você soubesse da relação entre o ícone da bomba e o lado do carro, ainda assim haveria uma ginástica bizarra em seu cérebro de “esquerda significa direita e direita significa esquerda”. E os pictogramas existem para que você não precise pensar nem por um segundo. Nesse caso, o fato do pictograma exigir uma explicação ou um raciocínio mais complexo do cérebro já o torna inválido imediatamente.

Anos atrás ele próprio tinha participado do processo de revisão do ISO7001, uma regulamentação que analisa pictogramas de sinalizações públicas para que se adequem ao padrão internacional.

E para que um pictograma seja incluído no padrão, ele precisa ser corretamente interpretado por 80% das pessoas, com menos de 10% das pessoas interpretando o significado exatamente inverso.

É a regra dos 80/10.

Um dos pictogramas que estavam sendo avaliados na ocasião era esse abaixo:

Pictograma para tsunamis

Pode não parecer, mas serve para indicar que determinado prédio é um abrigo seguro contra tsunamis. Esse era um dos pictogramas que não se adequavam à regra do 80/10.

Nas palavras de Tristam:

Lesson 1: If a pictogram fails the 80/10 rule don’t use it.  Redesign it or simply use words.

Voltando ao exemplo das bombas de combustível: a história do lado certo da bomba estava muito mal explicada. Se o mito da “seta” ou do “lado em que a mangueira aparece” existia, isso era um sinal de que as pessoas estavam sim querendo saber em qual lado do carro ficava a entrada de combustível, sem ter que necessariamente descer do carro para descobrir.

O que levou Tristam a escrever a segunda lição aprendida:

Lesson 2: If a myth exists it’s often a search for meaning that can be used to identify a design problem, which is the first step to a solution.

Depois de ler essa história, fiquei pensando como isso se aplicaria no design que fazemos no dia-a-dia aqui na agência.

Constantemente, vejo Visual Designers criando ícones para a interface de sites ou apps. Muitos deles tentam “soltar a mão” na hora de criar esses ícones, para que o visual fique o mais alinhado possível com a identidade do site/app em que ele aparece.

Mas sempre existe o risco de “soltar a mão demais” – e as pessoas não conseguirem entender o que aquele ícone está tentando dizer. A partir desse momento, o ícone perde a função de ícone e passa a ser apenas um elemento decorativo. Isso quando não corre o risco de confundir mais do que ajudar.

E não é complicado. Chame alguém na frente do computador e pergunte a ela: o que esse ícone quer dizer? Se ela pensar mais do que 2 segundos ou se ela disser uma resposta incorreta, você perdeu. Seu tempo.

TCC de Design Gráfico da Universidade Federal do Paraná

A sugestão foi enviada pela Patricia Bianco lá na nossa página do Facebook.

Trata-se de um aplicativo para tablets desenhado para que os alunos do Colégio Dom Bosco pudessem aprender física de forma muito mais interativa do que na apostila de papel. O projeto foi o trabalho de conclusão de curso da Patricia e do Maico Amorim no curso de Design Gráfico na UFPR.

E aqui você confere o trabalho completo: Material Didático em Mídia Digital

Arquitetura de informação ao vivo

Esses são 2 minutos dos 813 que durou a prova do líder do BBB10, realizada em meados de março. Foram mais de 7 milhões de votos, uma estrutura de servidores digna do livro dos récordes e muita gente morrendo de sono nos bastidores – tentando aguentar o pique dos participantes do reality show.

3:15 a.m. Equipe da AgênciaClick de plantão na agência

A prova, que teve a maior audiência da história de provas do líder do programa, reuniu dois ingredientes importantes para tanto engajamento do público: toneladas de interatividade com uma pitada de sadismo.

Mas passados a euforia e o sono, uma coisa chamou bastante atenção quando parei para pensar sobre a arquitetura de informação da prova. Ela segue por trilhas bastante diferentes da Arquitetura de Informação clássica, aparecendo desconstruída em sua forma e em seu processo. Suas preocupações são muito diferentes da AI à qual estamos habituados, e por isso resolvi compartilhar por aqui.

Listei abaixo algumas das excentricidades da AI desse projeto:

  • Seis interfaces diferentes
    Site do grupo Azul, site do grupo Laranja, interfaces que ficavam dentro das caixas, uma interface de monitoramento dos votos e uma interface administrativa. A prova que parece simples – ouvimos gente dizendo que era “só uma enquete” – acabou se desdobrando em seis sistemas diferentes que precisavam estar impecavelmente sincronizados entre si.

  • Um site em pop-up
    O espaço de interface que tínhamos era bem limitado. Isso porque o usuário precisava votar na enquete e assistir ao vídeo da prova ao mesmo tempo, em sites diferentes. A solução foi criar um site-pop-up, que abrisse ao lado do streaming de vídeo. Assim o usuário podia votar na próxima surpresinha ao mesmo tempo em que via os Brothers sofrerem as consequências dos votos – e esse “what you vote is what you get” acabou aumentando ainda mais a quantidade de interações.

  • Outras resoluções
    Esqueça o 1024x 768, ou qualquer outro número que você tenha aprendido até hoje. Cada uma das 6 interfaces rodou em uma resolução diferente: pop-up, netbook, TV widescreen e até a resolução da mesa de edição da Rede Globo. Em poucos dias aprendemos tudo sobre PAL-M e NTSC – ou muito mais do que ambiciona qualquer um que trabalhe com web.

  • Contraste resistente a fumaça
    Esqueça as preocupações de contraste que normalmente temos com os monitores de tubo e os de LCD. Isso é fichinha. O contraste da interface da prova precisava ser nítido o suficiente para resistir à fumaça fria que perambulava dentro das caixas, aos pingos de chuva que passavam em frente à câmera e às mudanças de luminosidade do local. E confesso: dependendo do ângulo e da câmera, algumas cenas não ficavam tão nítidas assim.

  • A arquitetura dos cubos
    A arte que estampava a parede dos cubos também precisou ser pensada. Era preciso garantir que, independente de qual câmera estivesse filmando e de quantas pessoas aparecessem na cena, a cor da parede sempre identificasse qual era o grupo que estava sendo filmado: Azul ou Laranja. Arquitetura tridimensional, pra valer; planta alta.

  • Uma interface admin à prova de nervosismo
    Além da prova acontecer ao vivo, ela ainda foi anunciada em horário nobre pelo próprio apresentador do programa. Uma falha, um clique errado, ou um nervosismo a mais por parte de quem estava controlando o sistema seriam naturais. Por isso, a interface de administração precisava ter um layout sóbrio, botões auto-explicativos e ainda ocultar qualquer ação que não pudesse ser acionada nem por engano.


  • Servidores, tremei
    Assim que o Bial anunciou a prova, imediatamente milhares de pessoas começaram a votar pelo site. Foram mais de 600 pessoas clicando no mesmo botão a cada segundo. A estrutura de servidores precisava estar preparada para receber e contabilizar todas essas interações, e depois enviar os dados para as outras interfaces, sem falhas. Os servidores aguentaram tudo com  louvor, mas muitas telas de erro precisaram ser desenhadas e guardadas na manga para uma eventualidade.

Essa foi a última de uma série de provas do BBB10 desenvolvidas aqui na agência. Foi uma experiência e tanto. Conhecer a estrutura da Rede Globo, trabalhar nos bastidores do Projac, desenhar e testar cada detalhe, projetar para milhões de usuários e enfrentar desafios para os quais as respostas não estejam catalogadas em patterns e libraries. E o melhor: experimentar a interação em tempo real na televisão, como dito no início do vídeo.

Como li em um blog esses dias: já estão decretando o fim do wireframe.