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

UX is where we start

Bob Greenberg

Bob Greenberg (o “RG” da R/GA) e Nick Law (Global Chief Creative Officer), falando sobre por que a palavra “advertising” não serve muito para descrever o que a agência faz, e sobre como a R/GA inicia o seu processo criativo pela experiência do usuário (UX).

Dá para ativar Closed Caption no player:

O vídeo acima foi gravado após a R/GA ser nomeada Interactive Agency of the Year no One Show 2013, além de ter recebido 15 outros prêmios no festival.

Continuar lendo

O dia em que a função venceu

Função e forma é uma discussão antiga na área de Design. Cada um tem sua opinião. Aqui vai a do Museu do Design, de Londres, premiando o site Gov.uk como o melhor design do mundo como eles mesmo se apresentam:

The Designs of the Year awards, ‘The Oscars of the design world’ showcase the most innovative and imaginative designs from around the world, over the past year, spanning seven categories: Architecture, Digital, Fashion, Furniture, Graphics, Transport and Product.

gov.uk - Premiado melhor design 2013 - unificação de sites do governo

E o prêmio não foi fácil não: dá uma olhada na lista de concorrentes. O site teve a mais alta premiação entre todas as categorias.

Por isso, meus amigos, a função venceu aqui.

Tá, o que tem de tão especial esse site que parece uma página de resultados do Google?

Ele tem solução.

A estrutura do site foi pensada para responder perguntas, para dar as respostas sem frescuras, sem redes sociais, sem gifs, flash, applets e afins. Direto ao ponto – e são vários pontos – afinal, eles unificaram 750 sites do governo britânico e reorganizaram todo o conteúdo. Eles não simplesmente apresentaram o conteúdo de uma forma bacana. Eles entenderam o conteúdo e traduziram para o público. Eu quase choro pensando em como eles passaram por todo esse processo.

Uma rápida comparação: você quer informações para fazer o seu primeiro passaporte? Entenda a diferença do site do BR e UK.

Ben Terret fala do processo de maneira bastante clara nesse vídeo:

"We're trying to get design out of the way"

“We’re trying to get design out of the way”

Se você tiver tempo, dê uma olhada no blog do projeto. Tem muita coisa boa lá. No guia de estilo, por exemplo, o primeiro item é: Tom de voz. Não é lindo?

Pra fechar, a lista dos 10 princípios de design do GDS é a seguinte:

  1. Start with needs
  2. Do less
  3. Design with data
  4. Do the hard work to make it simple
  5. Iterate. Then iterate again.
  6. Build for inclusion
  7. Understand context
  8. Build digital services, not websites
  9. Be consistent, not uniform
  10. Make things open: it makes things better

Fica a dica mais importante para os aspirantes e – principalmente – para os experientes: você entende de todo processo para poder traduzi-lo de forma clara para o seu usuário?

Fonte: esse, esse outro, mais esse e esse aqui.

Uma UI que muda de forma

Obake

Obake, criada no MIT Media Lab e carinhosamente chamada de “uma interface de duas dimensões e meia”.

Essencialmente: um touchpad elástico com um display projetado em sua superfície. À medida em que você aperta ou puxa a interface, uma câmera captura o movimento e responde apropriadamente, modificando o conteúdo exibido.

 

O uso dos storyboards como documentação de base de UX Design

Recentemente, em um dos projetos que estou trabalhando, tive a oportunidade de testar uma nova forma de encarar as etapas e entregáveis do processo de Design.

Ao invés do tradicional waterfall, onde o processo segue a ordem Wireframes > Layouts > Protótipo > Front-End > Back-End, a ordem dos elementos e entregáveis aparece de forma um pouco invertida. É algo que muitas startups já aplicam, mas achei interessante ver o processo aplicado em uma agência e ser guiado essencialmente por profissionais de UX (mais do que project managers ou profissionais com funções similares).

São 3 grandes etapas, cada uma dividida em etapas menores e envolvendo um grupo diferente de profissionais:

  1. Storyboards de UX
  2. Backlog de telas para desenvolvedores e detalhamento de escopo
  3. Sketches de UX e styleguide de Design

Mas storyboards logo no começo, antes mesmo de um documento técnico que explica como o sistema funciona?

Continuar lendo

50 boas práticas de UX

…consolidadas em um único documento e separadas em categorias.

(Se você está lendo este post por RSS ou email e o documento acima não abrir, veja-o no blog)

Se estiver sem tempo de ver o documento todo, abaixo tem a lista com os títulos de cada um dos itens.

Getting Started

1. Pense grande

2. Conecte os objetivos

3. Envolva as outras áreas

Continuar lendo

O processo de design flexível

  • Um bom processo de design é sobre comunicação. Como você explica para as pessoas o que está na sua cabeça?
  • Qual é a quantidade mínima de trabalho que você precisa ter para vender suas ideias para o restante do time? Como comunicar um design de forma rápida e efetiva?
  • Crie uma argumentação que ajude as pessoas a entenderem o porquê das suas decisões de design. Explique a ideia por trás do design.
  • Ser ágil significa evoluir o seu processo a um ponto em que ele possa mudar quando necessário.
  • Bom design acontece quando existem restrições. Com o tempo, você encontra mais restrições, à medida em que toma novas decisões. Mas são restrições boas. O problema são as restrições que aparecem logo no começo do projeto, que são as restrições enviesadas.
  • Papel é um bom lugar para começar. Mantenha a fidelidade baixa e foque em fazer algo que as pessoas que estão em volta se sintam confortáveis em colaborar.
  • Sketchbooks não mostram se você é um bom artista, mas sim se você é um bom pensador.
  • Focar muito no estilo te faz pensar apenas em como dizer algo, mas não em o que dizer. Contexto e significado são a parte mais importante do processo de design.

Notas de Luke W sobre apresentação de Jason Santa Maria em Seattle, 2013.

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