Atomic Design: redesenhando os entregáveis de designers e desenvolvedores

Atomic Design

Então Brad Frost foi lá e fez.

Desde que começou-se a falar em Responsive Design, muita gente tem se perguntado (e me perguntado) como fica a documentação e a entrega das telas de determinado produto. Já falamos sobre isso aqui no blog, e também como Designers e Desenvolvedores têm se aproximado cada vez mais para fazer isso acontecer.

Até alguns anos atrás era muito comum que em um projeto fossem desenvolvidos wireframes, layouts e depois mockups clicáveis de uma determinada interface. Um processo de trabalho em cascata, onde cada entrega é validada com o cliente para que a etapa seguinte se inicie. Essa é uma forma segura de garantir que o visual designer só começará a trabalhar quando o wireframe tiver sido aprovado pelo cliente e pelo restante do time, evitando horas desperdiçadas em refação.

Acontece que no exemplo citado acima, o time acaba desenvolvendo 3 protótipos sequenciais. O wireframe nada mais é do que um protótipo, uma simulação de como a interface deve funcionar. O layout em jpg também é um protótipo, uma segunda simulação da mesma interface. E quando o UX utiliza uma ferramenta de criação de layouts clicáveis ou wireframes clicáveis, ele acaba criando um terceiro protótipo da mesma tela.

Daqui

Então Brad Frost foi lá e fez.

E usando uma metáfora bastante conhecida da gente: átomos, moléculas, organismos, templates e páginas.

Continuar lendo

O método de Deprivation Testing usado pelo Github

Tirando doce de criança

Outro dia li um texto na Fast.Co sobre como o Github tem um approach diferente na hora de testar as funcionalidades que seus usuários consideram mais importantes dentro do site.

Alguns produtos fazem isso através de testes com protótipos de papel, colocando “rascunhos” dessas funcionalidades na frente de pessoas que realmente usam o produto e perguntando para elas o que elas acham.

Outros fazem testes A/B, colocando versões diferentes do produto no ar (com e sem a funcionalidade) e depois averiguando os números para entender se aquela feature teve boa aceitação.

E existem muitas outras formas de pesquisa para descobrir isso.

O que o Github faz é o que eles chamam de Deprivation Testing (Teste de Deprivação?).

Chrissie Brodigan, pesquisador de design e experiência do usuário do Github, fala sobre como designers e desenvolvedores podem medir quais funcionalidades são mais vitais ao removê-las do site e verificarem o quão chateados ficam os seus usuários.

Tira o doce da criança e vê o quão alto ela chora.

Abaixo a explicação de Brodigan, traduzida, sobre como funciona esse estudo:

Continuar lendo

Equilíbrio e estratégia em projetos digitais

Sun.Tzu.A.Arte.da.Guerra.TVRIP.Xvid.Documentario

A Arte da Guerra de Sun Tzu e os mais diversos livros sobre estratégia invadem dia a dia nossas livrarias. Uma oferta gigantesca de publicações ensinando como aplicar as táticas no dia a dia, para acertar mais no trabalho, nos relacionamentos, na vida -  tanto do ponto de vista da arte militar como das ciências de comportamento humano e psicologia.

Quem trabalha em agências já está acostumado também às piadinhas sobre o processo caótico nos projetos digitais.

Nas listas temáticas de AI e UX no Facebook, volta e meia essa forma volátil e rasa de tratar os objetivos e planejamento de projetos digitais vêm à pauta do dia, quase como um desabafo. Pouco tempo atrás, o vídeo do Redesign do logo PARE foi usado para ilustrar o fenômeno:

Continuar lendo

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

Modelo de contrato para trabalho de UX

Contract for User Experience Design Work

Um link útil: a Smashing Magazine divulgou alguns modelos de contrato de freelance, e um deles era específico sobre UX. Está em inglês, mas mesmo que você não o utilize exatamente do jeito que é, serve para dar uma olhada e ver se você não está esquecendo de nada. O modelo foi criado e publicado por Gabriel Gallagher e está disponível no seu perfil no docracy: Contract for User Experience Design >

Tem também um artigo muito útil do 24ways falando sobre como fazer um “killer contract” de UX.

Abaixo alguns trechos:

Your killer contract should cover:

  • A simple overview of who is hiring who, what they are being hired to do, when and for how much
  • What both parties agree to do and what their respective responsibilities are
  • The specifics of the deal and what is or isn’t included in the scope
  • What happens when people change their minds (as they almost always do)
  • A simple overview of liabilities and other legal matters
  • You might even include a few jokes

Ah, se você trabalha fazendo freelas de UX com frequência e quiser compartilhar algum outro modelo de contrato ou alguma dica, mande por email (blog.arquiteturadeinformacao@gmail.com) que a gente compartilha aqui.