Resoluções de tela mais comuns, infográficos e cachorros

Imagine o iPhone como sendo um Chihuahua. O iPad como sendo um Beagle.

Apesar da (um tanto bizarra) metáfora entre cachorros e resoluções de tela usada no infográfico abaixo, alguns dados interessantes e atualizados:

Resolução de tela - estatísticas

Google e a granularidade do design

Já faz um tempo que o Google começou internamente o tal do Projeto Kennedy. Na prática, o projeto consistia em redesenhar e unificar a linguagem visual de todos os produtos da empresa, para que a experiência do usuário fosse mais uniforme em todos os lugares/contextos/devices/interfaces em que ela acontecia.

Começou com o redesenho do Gmail e do Google Reader (saudade), que deixaram de ter aquele azul todo e passaram a valorizar mais os espaços em branco e os tons de cinza. O vermelho também apareceu com mais força, em vários “calls-to-action” distribuídos pela interface. Depois de uma pequena pausa e de movimentações na liderança da empresa, o projeto voltou e amadureceu bastante. Em junho de 2012, quando o Google Now foi anunciado, as pessoas começaram a reparar em uma novidade nessa nova linha visual que o Google passava a adotar: os cards.

Google Now Card

Google Now Card - Birthday

Os cards são simplesmente cartões, brancos, digitais, que replicam a aparência de cartões físicos reais. São extremamente clean, usam o espaço em branco com bastante inteligência, possuem uma tipografia marcante e imagens sem bordas, estouradas na altura ou largura do card. Eles contêm informações variadas: de previsão do tempo a condições de trânsito, de lembretes de aniversários dos amigos a informações sobre sua caixa de entrada de emails – e por aí vai.

Há alguns meses o Google começou a mostrar mais detalhes sobre a interface do Google Glass.

No Google I/O, semana passada, o Google anunciou o redesign do Google Plus.

O que todos esses produtos têm em comum?

Continuar lendo

Framer: protótipos para dispositivos móveis com um framework em javascript

FramerJS

Framer is a modern prototyping tool. It can help you to quickly build and test complex interactions and rich animations for both desktop and mobile.

É assim que o Framer se apresenta em seu site. Hoje em dia fala-se muito em “design in the browser” e essa é uma boa ferramenta para isso.

O Framer tenta facilitar a vida dos designers que sabem um mínimo sobre html, javascript, css e jquery, criando um framework leve e funcional para simular como uma interface deve funcionar – tanto em um dispositivo móvel quanto em um navegador desktop.

Link: Framer.js >

Não pergunte ao usuário, pergunte ao seu dispositivo

Access your location

Você já deve ter usado algum site em seu celular que pede acesso à sua localização atual. O Google Maps é um exemplo disso. Ao invés de ter que preencher um formulário dizendo em qual endereço você está, é muito mais fácil pedir acesso ao GPS do smartphone e descobrir automaticamente qual é a localização da pessoa.

Com o aumento do acesso de dispositivos móveis a páginas web, pedir que o usuário preencha manualmente essas informações começa a perder o sentido. Os principais exemplos:

  • Localização atual
  • País ou região
  • Fuso horário

É claro que existem prós e contras em coletar essas informações automaticamente, como em toda decisão de design. Claro, evitar que o usuário preencha manualmente essas informações traz uma nítida melhoria na experiência (menos tempo perdido respondendo a essas perguntas), mas pode ter outras implicações indiretas.

Adivinhar o país do usuário pode pular um passo e levá-lo direto ao país correto, mas será que isso pode dar a sensação de invasão de privacidade?

Ou ainda: as pessoas usam esse site enquanto estão viajando?

Continuar lendo

Homens e mulheres usam aplicativos mobile de forma diferente?

Mulher usando o celular

Resultado de uma pesquisa recente publicada na Wired.

  • Os aplicativos mais populares na App Store tendem a uma divisão 50/50 de gênero. Esses aplicativos estão disponíveis em várias plataforams, constatemente figurando entre as listas de apps mais populares, e são aqueles que você pensa a respeito assim que você ouve a palavra “app”. Flipboard, Foursquare, OpenTable, Foodspotting etc. O Foursquare foi o único que disse que as mulheres estão começando a baixar mais do os homens.
  • Um pouco do que já era esperado: homens tendem a baixar mais aplicativos de esportes e automotivos. Mulheres baixam mais aplicativos de catálogo de produtos (Catalog Spree tem 73% de usuários do sexo feminino). Mas na hora de comprar os produtos, a coisa praticamente se iguala: homens têm 2% a mais de probabilidade de comprar produtos através de mobile apps do que as mulheres.
  • Aplicativos de pagamento como o Venmo são usados mais por homens (60%) do que por mulheres.
  • Nos aplicativos de gaming, os homens dominam o ambiente do MMORPG (mas isso também acontece fora do universo mobile). Segundo a Storm8 (a 6ª empresa mais lucrativa de mobile apps em 2012), jogos têm uma base de usuários formada por 75% de homens.
  • Mas isso não significa que as mulheres não estejam jogando. 80% dos downloads de puzzles como Bubble Mania ou Jewel são feito por mulheres.
  • Quanto aos livros, as mulheres tendem a baixar e ler mais que os homens. Os homens preferem revistas digitais de finanças, negócios e notícias.
  • Aí vêm os apps de namoro. HowAboutWe e OKCupid têm 56% e 55% de homens, respectivamente. Mas as mulheres fazem login nesses apps com frequência 20% maior do que os homens.
  • Apps de fotografia têm mais usuários homens em iOS e mais usuárias mulheres em Android. Os outros tipos de app não mencionados na lista acima têm uma base equilibrada entre homens e mulheres.

Como a própria reportagem conclui…

O que isso significa? Nada.

Homens e mulheres não usam aplicativos mobile de forma muito diferente.

Aliás, o comportamento de homens e mulheres no universo mobile apps só replica o comportamento que já existe em outros meios (web, TV, revistas etc.).

Fim.

Market share de smartphones em todo o mundo

Duas tabelas legais extraídas desse artigo da Mailchimp sobre as fabricantes de celulares e o market share de cada uma nos últimos anos.

Tabela 1: Fabricantes de smartphones e sua distribuição no terceiro trimestre de 2011 e 2010.

Top five smartphone vendors, shipment and market share

Reparem no crescimento estrondoso da Samsung nesses últimos tempos.

Continuar lendo

Digital Disruption: estatísticas sobre o uso de internet e celular

Que tal 1,2 bilhões de usuários de internet no celular em todo o mundo?  Ou 29% dos consumidores pesquisando preços de produtos no celular, enquanto estão dentro da loja física?

Essas e outras estatísticas sobre o uso de internet e celular você vê no infográfico abaixo.

Estatísticas: Digital Disruption

Lições aprendidas em um projeto Mobile First

Tiradas desse post aqui da Smashing Magazine.

  • Make informed decisions.
    By making the website structure fluid, by testing and by identifying which sections could be reordered or re-structured to optimize for mobile, our small internal team was able to get started immediately and move quickly.
  • Teamwork is key.
    Everyone was able to present their case for what to add, remove or change, as long as it came from a place of putting the user’s goals first.
  • Don’t over-formalize the process. As with many design projects, quick sketches and white-boarding sessions, followed by small changes to design comps and actual code, brought the bigger picture into focus without us getting too carried away with an overly formal process.
  • Understand what devices your audience is using, but take a fully responsive approach.
    Lead Designer Alex Sylvia says, “We were conscious to test on the devices our clients were using, but we also wanted the design to react organically. The only way to discover that was to interact with the site at various sizes.” By using this approach while also testing on devices we knew our audience was using based on analytics, we got the best of both worlds.
  • Use the best technology for the job.
    One of our senior UI designers, Alec Harrison, quickly spun out design comps for the team member treatment, using LiveView to immediately showcase the comps on his iPhone. This provided the right context for improving the design.
  • Collaboration is key.
    Rather than designing independently, collaborating with a developer to make design decisions directly in code helped us reach an organic solution. Our lead developer, Sarah Canieso, had this to say about the process: “This project reiterated for me that responsive projects are very much a collaboration of design and code. It was a balance between the visual — where the design changed at different breakpoints — and maintaining functionality that would provide a good user experience across devices.”

Leia também:

Structured Content First: repensando o conteúdo antes de começar o design

O site é todo Responsive, seria um desperdício que os emails não fossem

5 coisas que aprendi em um projeto Mobile-First Responsive Design para o Google