Guia de Shishir para Enquadrar Problemas na Lousa
Shishir Mehrotra
Uma frase agora banal, mas muito usada: Uma imagem vale mais do que mil palavras
Qualquer pessoa que tenha trabalhado de perto comigo rapidamente refletirá sobre meu profundo amor por lousas. Adoro o espaço em branco aberto e a flexibilidade de desenhar e redesenhar, de enquadrar e reenquadrar.
Quando Matt (Chefe de Crescimento) e eu começamos a construir o Coda, passamos incontáveis horas em lousas e, gradualmente, formalizamos nossas técnicas. Ao fazer isso, desenvolvemos uma forma abreviada que facilitou tanto a criação do quadro certo quanto a rápida compreensão pelos outros.
Insight: Usando cores como um atalho
Originalmente isso aconteceu por acaso. Tínhamos uma pequena caixa de marcadores de lousa com um conjunto fixo de cores e começamos a revezá-las. Descobrimos rapidamente que, se concordássemos antecipadamente sobre o que cada cor significava, era muito mais fácil colaborar. Na verdade, muitas vezes começávamos com um de nós enquadrando um problema, e depois trocávamos de lugar para que o outro pudesse terminar.
Ao longo dos anos, essas atribuições de cores permaneceram conosco. Estas são as cores que definimos:
Perguntas (Preto): Definindo o espaço. Definindo as grandes perguntas. Destas, uma ou duas serão a(s) eigenquestion(s).
Opções (Azul): Usado para ajudar a pensar de forma ampla — definindo possíveis respostas ou opções.
Exemplos tangíveis (Cinza ou Marrom): Usado para tornar uma opção concreta. Qual é o visual?
Destaques (Roxo): Destacando o conceito importante em um exemplo concreto que demonstra a opção azul. Frequentemente usado para ênfase ou para chamar a atenção.
Uma escolha (Laranja): Aponta uma decisão ou espaço onde estamos inclinados entre as opções.
Um problema (Vermelho): Isso tem problemas potenciais ou pode ser realmente complicado. Cautela.
Um benefício (Verde): Isso parece realmente bom — apontando uma grande potencialidade.
É isso, um sistema simples, mas um atalho muito útil. Por exemplo, poderíamos olhar um diagrama e dizer coisas como:
"Parece que você ainda está enquadrando, ainda está tudo azul"
Você está pronto para as concessões? Deixe-me pegar o verde/vermelho"
Hora de decidir? Aqui está a caneta laranja
"Talvez essas não sejam as perguntas certas?" Vamos voltar para a caneta preta"
Um exemplo (e um template)
Embora eu adore lousas físicas, ao longo dos anos, à medida que nosso time se tornou mais distribuído, eu me voltei com mais frequência para uma alternativa digital. A lousa digital que eu prefiro é a Miro (mais sobre isso em um post separado).
Este é um exemplo de como essa técnica de coloração funciona na prática! Se você quiser se aprofundar, confira este documento, Eigenquestions: A Arte de Enquadrar Problemas.
Shishir Mehrotra
Cofundador e CEO @ Coda
Louco por produtividade de longo prazo, finalmente tendo a oportunidade de criar o documentário dos meus sonhos. Desenvolvi produtos anteriormente no YouTube, Microsoft e Centrata. Formado pelo MIT. Moro na região da Baía de São Francisco, sou casado com a namorada que conheci na universidade e tenho duas filhas maravilhosas.
Categorias
Templates similares
Template de Wireframe para Site
Template de Wireframe para Site
Wireframing é um método para projetar um site no nível estrutural. Um wireframe é um layout estilizado de uma página da web que mostra os elementos de interface em cada página. Use este Template de Wireframe para iterar sobre páginas da web de forma rápida e econômica. Você pode compartilhar o wireframe com clientes ou colegas de equipe e colaborar com as partes interessadas. Os wireframes permitem que os times obtenham o suporte de stakeholders sem investir muito tempo ou recursos. Eles ajudam a garantir que a estrutura e o fluxo do seu site atenderão às necessidades e expectativas do usuário.
Template de Esboço Online

Template de Esboço Online
Antes de seguir em frente com uma ideia promissora, observe-a de forma ampla — para saber como ela funciona e quão bem atende seus objetivos. É isso que os esboços fazem. Este template oferece uma poderosa ferramenta de colaboração remota para os estágios iniciais de prototipagem, seja para esboçar páginas web e aplicativos móveis, desenhar logotipos ou planejar eventos. Então, você pode facilmente compartilhar seu esboço com seu time e salvar cada etapa do seu esboço antes de modificá-lo e desenvolvê-lo.
Template para Wireframe de Apps
Template para Wireframe de Apps
Pronto para começar a criar um aplicativo? Não apenas imagine como ele funcionará e como os usuários interagirão com ele – deixe que um wireframe mostre isso para você. A criação de wireframes é uma técnica para criar um layout básico de cada tela. Quando você faz wireframes, idealmente no início do processo, você perceberá o que cada tela deve realizar e obterá o apoio de stakeholders importantes – tudo isso antes de adicionar o design e o conteúdo, o que economizará tempo e dinheiro. E ao considerar as etapas da jornada do usuário, você proporcionará uma experiência mais envolvente e bem-sucedida.
Template de Wireframe para Site
Template de Wireframe para Site
Wireframing é um método para projetar um site no nível estrutural. Um wireframe é um layout estilizado de uma página da web que mostra os elementos de interface em cada página. Use este Template de Wireframe para iterar sobre páginas da web de forma rápida e econômica. Você pode compartilhar o wireframe com clientes ou colegas de equipe e colaborar com as partes interessadas. Os wireframes permitem que os times obtenham o suporte de stakeholders sem investir muito tempo ou recursos. Eles ajudam a garantir que a estrutura e o fluxo do seu site atenderão às necessidades e expectativas do usuário.
Template de Esboço Online

Template de Esboço Online
Antes de seguir em frente com uma ideia promissora, observe-a de forma ampla — para saber como ela funciona e quão bem atende seus objetivos. É isso que os esboços fazem. Este template oferece uma poderosa ferramenta de colaboração remota para os estágios iniciais de prototipagem, seja para esboçar páginas web e aplicativos móveis, desenhar logotipos ou planejar eventos. Então, você pode facilmente compartilhar seu esboço com seu time e salvar cada etapa do seu esboço antes de modificá-lo e desenvolvê-lo.
Template para Wireframe de Apps
Template para Wireframe de Apps
Pronto para começar a criar um aplicativo? Não apenas imagine como ele funcionará e como os usuários interagirão com ele – deixe que um wireframe mostre isso para você. A criação de wireframes é uma técnica para criar um layout básico de cada tela. Quando você faz wireframes, idealmente no início do processo, você perceberá o que cada tela deve realizar e obterá o apoio de stakeholders importantes – tudo isso antes de adicionar o design e o conteúdo, o que economizará tempo e dinheiro. E ao considerar as etapas da jornada do usuário, você proporcionará uma experiência mais envolvente e bem-sucedida.