Marketing, hosting, servidores, midia, tecnologia

Pensamento e processo costurados do projeto para em acoplamentos da escala.

Pensamento e processo costurados do projeto para em acoplamentos da escala

Você se torna um consultor assim que sai da cadeira, pula para fora dos seus corredores e camiseta para aquela sua roupa pontiaguda e informal de negócios. Ou, se você é o Alberto em seus jeans escuros rasgados e Yeezys.

Da mesma forma, você se torna cliente e, de repente, precisa explicar o que faz e por que embarca em seu voo pela linha de prioridade que paira sobre seu cartão de membro de ouro, mas corta os negócios anteriores e de primeira classe diretamente para sua classe econômica. assento.

Eu desenho experiências.
É o que sai da sua boca para a maioria das pessoas. Mas para aqueles que estão realmente interessados, enquanto despeja uma caneca de café, você diz que ela começa com:

01. O KICK OFF
INVESTIGAR O NEGÓCIO DO CLIENTE
Antes de começar a reunião, é sempre uma boa ideia ficar on-line e se familiarizar com os negócios e a história.

Na maioria dos casos, a documentação detalhando a necessidade por trás do produto está disponível de antemão de alguma forma ou de outra.
Se for um aplicativo pré-existente, independentemente de precisar de um novo design ou apenas de uma nova versão, algumas capturas de tela, documentos e / ou um vídeo de demonstração da funcionalidade devem ser fornecidos pelo cliente. Se estes estiverem faltando, um simples pedido deve ser feito para torná-los disponíveis.

A CHAMADA
Tendo reunido todas as informações necessárias, você está pronto e preparado para uma discussão apropriada.

A primeira coisa que vai acontecer é a rodada introdutória. Isso é fundamental porque você será capaz de extrair todos os atores e seus papéis.

Nesse estágio, é muito importante afirmar quem você é, qual é o seu conhecimento e como você pode ajudar o cliente a atingir suas metas. De igual importância é extrair toda a informação que falta, preocupações e todas as coisas pouco claras para você. A saída dessa ligação deve ser feita sem suposições ou fatos obscuros.

02. O WORKSHOP
AO REDOR DA MESA
Independentemente de você viajar para o cliente ou vice-versa, sua equipe deve ser composta por UI Designer, UX Designer (também o principal facilitador), Business Analyst e Dev Lead.
A equipe do cliente deve sempre incluir os proprietários do produto e os usuários finais, se possível.

Antes de começar o workshop, comece com uma rápida rodada de apresentações. Não mais do que 10 minutos. Desta forma, você terá uma imagem clara de quem é quem.
Depois disso, sugira ao proprietário do produto que detalhe as necessidades da empresa. Há momentos em que os clientes já vêm preparados com apresentações detalhando isso.

Pouco antes de começar, peça a todos que escrevam em um post-it e anote as expectativas do workshop. E no final, pergunte a todos se a expectativa deles foi atendida. Continue explicando como o workshop funcionará com os processos As-Is e To-Be.

Uma nota muito importante para fazer a todos na sala é que os títulos não se aplicam mais. Não importa se é um CEO ou um desenvolvedor de front-end. Todos são iguais em ideating e expressando-se em voz alta.

PROCESSO DE PENSAMENTO DO PROJETO
01. AS-IS
Agora é a parte em que vamos direto para a etapa AS-IS do workshop DT. Explique a todos que este é um processo interativo.

Espere o que? Como você chegou aqui, o que aconteceu com os outros passos do design thinking?
Bem, é aí que entra a parte “sob medida” do título. Nesse tipo de meio dia de oficinas, seus mapas de personas e empatia apertaram suas mãos 10 minutos atrás. Seus usuários finais.
Todo pensamento naquela sala foi anotado nas notas da BA. Portanto, sua única preocupação deve ser extrair essas idéias.

Poste uma linha de notas na parede representando as etapas do fluxo de trabalho do usuário.

Explique que, abaixo de cada etapa, você criará uma coluna de notas adesivas codificadas por cores que representam perguntas e comentários relacionados a essa etapa. Para comentários, considere as tecnologias e o contexto. Depois que as perguntas forem respondidas, poste comentários sobre elas.

Como é diagrama
Identifique pontos de dor para os usuários e oportunidades para melhorar o design.

Use uma segunda cor de lembrete para identificar oportunidades para o design. Cada ponto doloroso deve ter uma oportunidade correspondente, embora algumas oportunidades possam não estar relacionadas a pontos problemáticos – por exemplo, aqueles que respondem às tendências do mercado ou antecipam futuros pontos problemáticos.

Incentive todos os participantes a pensar em voz alta, adicionar pontos de dor, oportunidades e perguntas.
Guie esse processo do ponto de vista da UX para selecionar o que faz sentido a partir da perspectiva do produto.

Ponto de dor e oportunidades.
Se um processo AS-IS não existir, um “dia de uma vida” deve ser feito. No conceito do produto, o conceito de “dia de vida” explica como é um dia típico para um usuário.

02. TO-BE
Esse cenário permite que as equipes criem rapidamente em fluxos de trabalho futuros.

Diagrama To-Be
Poste uma linha de notas na parede representando as etapas do fluxo de trabalho do usuário. Abaixo de cada etapa, crie uma coluna de notas adesivas codificadas por cores que representam perguntas, comentários e ideias relacionadas a essa etapa. A maioria das ideias pode ser importada das oportunidades geradas no AS-IS. Depois que as perguntas forem respondidas, poste comentários sobre elas. Use este artefato como um trampolim para ideação em etapas específicas. Cada cenário a ser descrito deve ser documentado no Release.

Uma vez que este passo seja feito, esboços rápidos e rudimentares sobre idéias extraídas podem ser feitos para descrever como o produto pode parecer.

Nota: Este não é um passo necessário. E deve ser feito apenas se houver uma imagem muito clara do produto.

03. IDEAÇÃO
INDO DIGITAL
Com todas as informações coletadas no workshop, você pode se trancar em uma sala de reunião ao lado de sua equipe e divulgar tudo. Faça uso de seus quadros de comunicações e comece a desenhar cada tela e ações principais.

Dessa forma, você terá uma ideia clara sobre todo o fluxo de UX. Com base nisso, você pode criar um mapa UX para enviar com segurança o cliente para validar.

O mapa UX é obrigatório antes de começar a projetar os wireframes. É a primeira coisa que você vai concordar com o cliente. Certifique-se de que cada página seja exibida como uma categoria com todos os recursos e ações.
Se o produto tiver vários usuários, use o plano horizontal para mostrar o caminho de cada função.

O próximo passo lógico seria pular para o wireframe, mas, em escala, a eficácia do ambiente virá do que passamos a chamar de wireframe avançado do PoC. O que significa projetar as telas principal ou principal (5-7) e estar pronto para testar rapidamente a funcionalidade principal. Isso significa que todo o resto deve ser assumido. Por exemplo: o usuário já está logado e passou pelo processo de registro.

PROTOTYPING
Com as telas principais instaladas, podemos criar rapidamente um protótipo interativo. O Invision provou ser a maneira mais rápida de criar e implantar um.

Ter um protótipo interativo pode economizar muitos e-mails de ida e volta ou revisões de design. O cliente terá mais facilidade em entender como tudo funciona se ele mesmo testar.

Depois de validar essas telas importantes, isso significa que a direção é aprovada e você pode continuar a projetar o restante das telas.

04. DESENHO VISUAL
Este passo é escrito por Alberto, meu parceiro no crime. Seus designs visuais estão no próximo nível. Tenha em mente que o processo difere com base na rotina, experiência e nível de criatividade de cada projetista.

PESQUISA
Tome seu tempo para esta etapa, pois é isso que vai moldar uma ideia em sua mente, inspire-se em diferentes plataformas como Dribbble, Behance, Abduzeedo ou Competition.

EXPLORAR
Não tenha medo de experimentar neste momento, desenhe várias versões da interface do usuário, não passe tempo com os detalhes, você terá tempo suficiente para refinar mais tarde. Tente encontrar a hierarquia visual correta, paleta de cores, tipografia e espaçamento; O céu é o limite. A propósito, não vá longe demais com o número de telas, concentre-se nos quatro ou cinco principais.

A DECISÃO
Deixe o seu design assar por uma noite e na manhã seguinte você ficará surpreso com o que você criou no dia anterior. Pode ser o pior projeto que você já fez ou o mais incrível. Na maioria dos casos, provavelmente será o pior. Mas você terá uma mente renovada para pensar em como transformá-lo naquilo que você queria que fosse em primeiro lugar.

FAZENDO COISAS FEITAS
Vamos fechar o parquinho, você teve tempo suficiente para isso. Comece a projetar a interface corretamente, bom o suficiente para compartilhar com alguns seres humanos reais. Você é apoiado por fortes wireframes, alguns dias de exploração e pesquisa; pare de chorar.

Ilustração retratando o processo.
Pensamento e processo costurados do projeto para em acoplamentos da escala.
Para o perfil de Adrian Storm
Adrian Storm
7 de abril
Você se torna um consultor assim que sai da cadeira, pula para fora dos seus corredores e camiseta para aquela sua roupa pontiaguda e informal de negócios. Ou, se você é o Alberto em seus jeans escuros rasgados e Yeezys.

Da mesma forma, você se torna cliente e, de repente, precisa explicar o que faz e por que embarca em seu voo pela linha de prioridade que paira sobre seu cartão de membro de ouro, mas corta os negócios anteriores e de primeira classe diretamente para sua classe econômica. assento.

Eu desenho experiências.
É o que sai da sua boca para a maioria das pessoas. Mas para aqueles que estão realmente interessados, enquanto despeja uma caneca de café, você diz que ela começa com:

01. O KICK OFF
INVESTIGAR O NEGÓCIO DO CLIENTE
Antes de começar a reunião, é sempre uma boa ideia ficar on-line e se familiarizar com os negócios e a história.

Na maioria dos casos, a documentação detalhando a necessidade por trás do produto está disponível de antemão de alguma forma ou de outra.
Se for um aplicativo pré-existente, independentemente de precisar de um novo design ou apenas de uma nova versão, algumas capturas de tela, documentos e / ou um vídeo de demonstração da funcionalidade devem ser fornecidos pelo cliente. Se estes estiverem faltando, um simples pedido deve ser feito para torná-los disponíveis.

A CHAMADA
Tendo reunido todas as informações necessárias, você está pronto e preparado para uma discussão apropriada.

A primeira coisa que vai acontecer é a rodada introdutória. Isso é fundamental porque você será capaz de extrair todos os atores e seus papéis.

Nesse estágio, é muito importante afirmar quem você é, qual é o seu conhecimento e como você pode ajudar o cliente a atingir suas metas. De igual importância é extrair toda a informação que falta, preocupações e todas as coisas pouco claras para você. A saída dessa ligação deve ser feita sem suposições ou fatos obscuros.

02. O WORKSHOP
AO REDOR DA MESA
Independentemente de você viajar para o cliente ou vice-versa, sua equipe deve ser composta por UI Designer, UX Designer (também o principal facilitador), Business Analyst e Dev Lead.
A equipe do cliente deve sempre incluir os proprietários do produto e os usuários finais, se possível.

Antes de começar o workshop, comece com uma rápida rodada de apresentações. Não mais do que 10 minutos. Desta forma, você terá uma imagem clara de quem é quem.
Depois disso, sugira ao proprietário do produto que detalhe as necessidades da empresa. Há momentos em que os clientes já vêm preparados com apresentações detalhando isso.

Pouco antes de começar, peça a todos que escrevam em um post-it e anote as expectativas do workshop. E no final, pergunte a todos se a expectativa deles foi atendida. Continue explicando como o workshop funcionará com os processos As-Is e To-Be.

Uma nota muito importante para fazer a todos na sala é que os títulos não se aplicam mais. Não importa se é um CEO ou um desenvolvedor de front-end. Todos são iguais em ideating e expressando-se em voz alta.

PROCESSO DE PENSAMENTO DO PROJETO
01. AS-IS
Agora é a parte em que vamos direto para a etapa AS-IS do workshop DT. Explique a todos que este é um processo interativo.

Espere o que? Como você chegou aqui, o que aconteceu com os outros passos do design thinking?
Bem, é aí que entra a parte “sob medida” do título. Nesse tipo de meio dia de oficinas, seus mapas de personas e empatia apertaram suas mãos 10 minutos atrás. Seus usuários finais.
Todo pensamento naquela sala foi anotado nas notas da BA. Portanto, sua única preocupação deve ser extrair essas idéias.

Poste uma linha de notas na parede representando as etapas do fluxo de trabalho do usuário.

Explique que, abaixo de cada etapa, você criará uma coluna de notas adesivas codificadas por cores que representam perguntas e comentários relacionados a essa etapa. Para comentários, considere as tecnologias e o contexto. Depois que as perguntas forem respondidas, poste comentários sobre elas.

Como é diagrama
Identifique pontos de dor para os usuários e oportunidades para melhorar o design.

Use uma segunda cor de lembrete para identificar oportunidades para o design. Cada ponto doloroso deve ter uma oportunidade correspondente, embora algumas oportunidades possam não estar relacionadas a pontos problemáticos – por exemplo, aqueles que respondem às tendências do mercado ou antecipam futuros pontos problemáticos.

Incentive todos os participantes a pensar em voz alta, adicionar pontos de dor, oportunidades e perguntas.
Guie esse processo do ponto de vista da UX para selecionar o que faz sentido a partir da perspectiva do produto.

Ponto de dor e oportunidades.
Se um processo AS-IS não existir, um “dia de uma vida” deve ser feito. No conceito do produto, o conceito de “dia de vida” explica como é um dia típico para um usuário.

02. TO-BE
Esse cenário permite que as equipes criem rapidamente em fluxos de trabalho futuros.

Diagrama To-Be
Poste uma linha de notas na parede representando as etapas do fluxo de trabalho do usuário. Abaixo de cada etapa, crie uma coluna de notas adesivas codificadas por cores que representam perguntas, comentários e ideias relacionadas a essa etapa. A maioria das ideias pode ser importada das oportunidades geradas no AS-IS. Depois que as perguntas forem respondidas, poste comentários sobre elas. Use este artefato como um trampolim para ideação em etapas específicas. Cada cenário a ser descrito deve ser documentado no Release.

Uma vez que este passo seja feito, esboços rápidos e rudimentares sobre idéias extraídas podem ser feitos para descrever como o produto pode parecer.

Nota: Este não é um passo necessário. E deve ser feito apenas se houver uma imagem muito clara do produto.

03. IDEAÇÃO
INDO DIGITAL
Com todas as informações coletadas no workshop, você pode se trancar em uma sala de reunião ao lado de sua equipe e divulgar tudo. Faça uso de seus quadros de comunicações e comece a desenhar cada tela e ações principais.

Dessa forma, você terá uma ideia clara sobre todo o fluxo de UX. Com base nisso, você pode criar um mapa UX para enviar com segurança o cliente para validar.

O mapa UX é obrigatório antes de começar a projetar os wireframes. É a primeira coisa que você vai concordar com o cliente. Certifique-se de que cada página seja exibida como uma categoria com todos os recursos e ações.
Se o produto tiver vários usuários, use o plano horizontal para mostrar o caminho de cada função.

O próximo passo lógico seria pular para o wireframe, mas, em escala, a eficácia do ambiente virá do que passamos a chamar de wireframe avançado do PoC. O que significa projetar as telas principal ou principal (5-7) e estar pronto para testar rapidamente a funcionalidade principal. Isso significa que todo o resto deve ser assumido. Por exemplo: o usuário já está logado e passou pelo processo de registro.

PROTOTYPING
Com as telas principais instaladas, podemos criar rapidamente um protótipo interativo. O Invision provou ser a maneira mais rápida de criar e implantar um.

Ter um protótipo interativo pode economizar muitos e-mails de ida e volta ou revisões de design. O cliente terá mais facilidade em entender como tudo funciona se ele mesmo testar.

Depois de validar essas telas importantes, isso significa que a direção é aprovada e você pode continuar a projetar o restante das telas.

04. DESENHO VISUAL
Este passo é escrito por Alberto, meu parceiro no crime. Seus designs visuais estão no próximo nível. Tenha em mente que o processo difere com base na rotina, experiência e nível de criatividade de cada projetista.

PESQUISA
Tome seu tempo para esta etapa, pois é isso que vai moldar uma ideia em sua mente, inspire-se em diferentes plataformas como Dribbble, Behance, Abduzeedo ou Competition.

EXPLORAR
Não tenha medo de experimentar neste momento, desenhe várias versões da interface do usuário, não passe tempo com os detalhes, você terá tempo suficiente para refinar mais tarde. Tente encontrar a hierarquia visual correta, paleta de cores, tipografia e espaçamento; O céu é o limite. A propósito, não vá longe demais com o número de telas, concentre-se nos quatro ou cinco principais.

A DECISÃO
Deixe o seu design assar por uma noite e na manhã seguinte você ficará surpreso com o que você criou no dia anterior. Pode ser o pior projeto que você já fez ou o mais incrível. Na maioria dos casos, provavelmente será o pior. Mas você terá uma mente renovada para pensar em como transformá-lo naquilo que você queria que fosse em primeiro lugar.

FAZENDO COISAS FEITAS
Vamos fechar o parquinho, você teve tempo suficiente para isso. Comece a projetar a interface corretamente, bom o suficiente para compartilhar com alguns seres humanos reais. Você é apoiado por fortes wireframes, alguns dias de exploração e pesquisa; pare de chorar.

PROCESSO COLABORATIVO
Compartilhe algumas telas (4 a 5) com todos (PMs, Licenciados, designers, desenvolvedores) envolvidos no projeto, comece a fazer perguntas amigáveis ​​como “Ei, cara, qual a sua impressão sobre essa obra de arte?”. Prepare-se para respostas como: “É muito vermelho” “É muito azul” ou “Não gosto”. Anote todos os comentários que você recebe. Faça perguntas de acompanhamento como “qual parte é vermelha, azul ou do que você não gosta; tudo ou apenas uma peça. A maioria das pessoas diz “não gosto”, mas não significa necessariamente a coisa toda.

REVISÕES
Depois de voltar à sua mesa, recapitule e divida todo o feedback que você recebeu na etapa anterior, acomode todas as alterações, se necessário, e reitere o processo até se sentir confiante sobre o que você criou até o momento. Esteja atento ao feedback que você recebe, tenha em mente as necessidades do negócio.

TESTE DE USUÁRIO
Esta é a parte mais importante de todo o processo. Porque aqui os usuários reais lhe darão um feedback inestimável e novas idéias. Os usuários pensam de maneira diferente, e você ficará surpreso com a frequência com que essa coisa óbvia não é.

Este é um processo repetitivo. Você pode usá-lo sempre que precisar de feedback do usuário final. Isso pode ser feito assim que você tiver um protótipo ou mesmo teste com esboços desenhados à mão. Use conforme necessário.

Cada sessão não deve demorar mais de 30 minutos.
Ao testar, defina o estágio da seguinte maneira:

INTRO
Por exemplo, vamos testar um aplicativo de seguro de voo.
Breve introdução sobre o que o aplicativo faz.
“A aviação é um aplicativo que permitirá que você compre um seguro por voo.
O objetivo deste teste é verificar se o que criamos atrai os pilotos como você.
TAREFAS
Você precisará informar ao usuário que apenas os controles para determinadas tarefas funcionam e o que fazer se ele se perder.
O que precisamos para você é passar por algumas tarefas.
Estamos usando um aplicativo que simula um aplicativo real usando pontos de acesso nas imagens. Por favor, note que nem tudo funciona. Para ver quais botões você pode tocar, toque em qualquer lugar da tela e as áreas serão realçadas.

Por favor, pense em voz alta. Todos os seus pensamentos sobre o aplicativo, se você sentir que algo não faz sentido, algo leva muito tempo para você identificar ou se sentir perdido, etc.

– Vá até o registro.
– Planeje um voo
– Adicione uma aeronave
– Adicione um piloto
– Adicione uma reivindicação.
O feedback deve ser dado após as tarefas serem concluídas.
ENTREVISTADORES
Um máximo de duas pessoas. Um entrevistador e um observador. O observador pode tomar notas.
O entrevistador deve guiar o usuário calmamente e fornecer explicações sempre que possível.
REFINAMENTO DE PROJETO
Com base no resultado dos testes do usuário, essa etapa manterá o cronograma intacto e suas decisões cobertas.
É nessa etapa que os requisitos de negócios são definidos e discutidos.

Algumas reuniões devem ser realizadas em conjunto com o BA, o Cliente e o Dev Lead para bloquear tudo. Desta forma, tudo o que foi deixado de fora ou perdido pode vir à luz e endereçado.

05. DEV DIVULGAÇÃO
Isso é um envoltório
Exceto que não é.
Você realizou todos os passos, o design está pronto. Você tem o produto e agora precisa da distribuição. Se “Narcos” pensou em alguma coisa é como levar o seu produto para os usuários. Você ainda tem recursos para compartilhar com os desenvolvedores. Não importa se você usou Sketch, Figma ou Photoshop: Zepplin será seu amigo. Se você é da velha escola, exportar manualmente ativos pode ser sua coisa. Nós não julgamos.

06. ESTIMAÇÃO DO TEMPO
As estimativas não são prazos. Sempre prepare-se para as coisas levarem menos tempo ou mais.
Para os vários projetos aos quais apliquei, criei uma diretriz de tempo para cada etapa.

Um guia para estimativas de tempo de projeto
Em compromissos de escala, sua função o envolverá intensamente por cerca de duas semanas. Você deixará de ser a chave logo após os requisitos de negócios serem definidos. Você já definiu o tom, fez os testes e pode passar para o próximo compromisso.
O restante das telas estará nas mãos seguras da sua equipe de UX / UI. Você só precisa ficar de olho em como as coisas evoluem e entrar apenas se isso for realmente importante.

Na The Economist, levamos a visualização de dados a sério. Toda semana nós publicamos cerca de 40 gráficos em toda a imprensa, o site e nossos aplicativos. Com cada um deles, tentamos ao máximo visualizar os números com precisão e de uma forma que melhor suporte a história. Mas às vezes nos enganamos. Podemos fazer melhor no futuro se aprendermos com nossos erros - e outras pessoas também aprenderem com eles.Depois de um mergulho profundo em nosso arquivo, encontrei vários exemplos instrutivos. Agrupamos nossos crimes em relação à visualização de dados em três categorias: gráficos que (1) são enganosos, (2) confusos e (3) não fazem sentido. Para cada um, sugiro uma versão melhorada que requer uma quantidade similar de espaço - uma consideração importante ao desenhar gráficos para serem publicados na impressão.(Um breve aviso: A maioria dos gráficos "originais" foram publicados antes do redesenho do gráfico. Os gráficos aprimorados são desenhados para se ajustarem às novas especificações. Os dados são os mesmos.)Gráficos enganososVamos começar com o pior dos crimes na visualização de dados: apresentar dados de maneira enganosa. Nós nunca fazemos isso de propósito! Mas isso acontece de vez em quando. Vamos ver os três exemplos do nosso arquivo.Erro: Truncar a escalaUm pouco de campo à esquerdaEste gráfico mostra o número médio de curtidas no Facebook em posts de páginas da esquerda política. O objetivo desse gráfico era mostrar a disparidade entre as postagens de Corbyn e outros.O gráfico original não apenas minimiza o número de curtidas de Corbyn, mas também exagera em outros posts. Na versão reformulada, mostramos o bar do Sr. Corbyn em sua totalidade. Todas as outras barras permanecem visíveis. (Seguidores ávidos deste blog terão visto outro exemplo dessa prática ruim.)Outra coisa estranha é a escolha da cor. Na tentativa de imitar o esquema de cores do Trabalhismo, usamos três tons de laranja / vermelho para distinguir entre Jeremy Corbyn, outros MPs e partidos / grupos. Nós não explicamos isso. Embora a lógica por trás das cores possa ser óbvia para muitos leitores, talvez faça pouco sentido para aqueles menos familiarizados com a política britânica.Download dos dados do gráficoErro: Forçando um relacionamento por escalas de colheitaUma correlação perfeita rara? Na verdade não.O gráfico acima acompanhava uma história sobre o declínio do peso dos cães. À primeira vista, parece que o peso e o tamanho do pescoço dos cães são perfeitamente correlacionados. Mas isso é verdade? Apenas até certo ponto.No gráfico original, ambas as escalas diminuem em três unidades (de 21 para 18 à esquerda; de 45 para 42 à direita). Em termos percentuais, a escala da esquerda diminui em 14% enquanto a da direita diminui em 7%. No gráfico redesenhado, mantive a escala dupla, mas ajustei suas faixas para refletir uma mudança proporcional comparável.Considerando o alegre tópico deste gráfico, esse erro pode parecer relativamente menor. A mensagem do gráfico, afinal, é a mesma em ambas as versões. Mas o takeaway é importante: se duas séries se seguem muito de perto, é provavelmente uma boa ideia dar uma olhada mais de perto na balança.Download dos dados do gráficoErro: Escolhendo o método errado de visualizaçãoOpiniões sobre o Brexit quase tão erráticas quanto suas negociaçõesPublicamos este quadro de votação no Espresso, nosso aplicativo de notícias diárias. Ele mostra atitudes para o resultado do referendo da UE, plotado como um gráfico de linhas. Olhando para os dados, parece que os entrevistados tinham uma visão bastante errática do resultado do referendo - aumentando e diminuindo em alguns pontos percentuais de uma semana para a próxima.Em vez de plotar as pesquisas individuais com uma curva suavizada para mostrar a tendência, conectamos os valores reais de cada pesquisa individual. Isso aconteceu, principalmente, porque nossa ferramenta de gráficos interna não plota linhas suavizadas. Até bem recentemente, estávamos menos à vontade com softwares estatísticos (como o R) que permitissem visualizações mais sofisticadas. Hoje, todos nós somos capazes de traçar um gráfico de votação como o redesenhado acima.Outra coisa a notar neste gráfico é a maneira em que a escala foi quebrada. O gráfico original distribui os dados mais amplamente do que deveria. Na versão reformulada, deixei mais espaço entre o início da escala e o menor ponto de dados. Francis Gagnon criou uma boa fórmula para isso: tentar deixar pelo menos 33% da área livre em um gráfico de linhas que não comece em zero.Download dos dados do gráficoGráficos confusosNão tão criminoso quanto um gráfico enganoso, gráficos difíceis de ler são um sinal de mau trabalho de visualização.Erro: Levar o "alongamento da mente" um pouco longe demais… que?Na The Economist, somos encorajados a produzir jornalismo de "alongamento mental". Mas, às vezes, levamos isso longe demais. O gráfico acima mostra o déficit comercial dos EUA e o número de pessoas empregadas na indústria.O gráfico é incrivelmente difícil de ler. Tem dois problemas principais. Primeiro, os valores de uma série de dados (déficit comercial) são inteiramente negativos, enquanto os demais (emprego industrial) são todos positivos. É um desafio combinar essas disparidades em um gráfico sem achatar nenhuma das séries de dados. A aparente "solução" para isso leva ao segundo problema: as duas séries de dados não compartilham uma linha de base comum. A linha de base do déficit comercial está no topo do gráfico (destacada por uma linha vermelha traçada em metade do corpo do gráfico). A linha de base da escala correta está na parte inferior.O gráfico reprojetado mostra que não houve necessidade de combinar as duas séries de dados. A relação entre o déficit comercial e o emprego industrial permanece clara e ocupa apenas uma quantidade mínima de espaço extra.Download dos dados do gráficoErro: uso confuso de cor50 tons de azulEste gráfico compara os gastos do governo com benefícios de aposentadoria com a parcela de pessoas de 65 anos ou mais para uma seleção de países, com um foco particular no Brasil. Para manter o gráfico pequeno, o visualizador apenas rotulou uma seleção de países e destacou aqueles em azul elétrico. A média da OCDE é destacada em azul claro.O visualizador (eu!) Ignorou o fato de que uma mudança de cor geralmente implica uma mudança categórica. À primeira vista, este parece ser o caso também neste gráfico - todas as cores azuis elétricas parecem pertencer a um grupo diferente do azul escuro. Este não é o caso. A única coisa que eles têm em comum é que foram escolhidos para serem rotulados.Na versão reformulada, a cor dos círculos permanece a mesma para todos os países. Eu mudei a opacidade daqueles que não são rotulados para fazer os outros se destacarem. A tipografia faz o resto: o Brasil, o país em foco, está escrito em negrito e a média da OCDE em itálico.Download dos dados do gráficoGráficos que escondem seu pontoOs erros nesta categoria final são menos óbvios. Gráficos como esses não são enganosos, nem são muito confusos. Eles simplesmente não conseguem justificar sua existência - muitas vezes porque foram visualizados incorretamente ou porque tentamos empinar demais em pouco espaço.Erro: Incluindo muitos detalhes“Quanto mais cores, melhor!” - Nenhum bom visualizador de dados, nuncaQue arco-íris! Publicamos este gráfico em uma coluna sobre o superávit orçamentário da Alemanha. Mostra os saldos orçamentais e os saldos das contas correntes de dez países da área do euro. Com tantas cores - algumas das quais são muito difíceis de distinguir ou até mesmo de ver porque os valores são muito pequenos - a mensagem do gráfico é impossível de entender. Quase te tenta a espreitar e seguir em frente. E, mais importante, uma vez que não estamos a traçar todos os países da área do euro, não faz qualquer sentido empilhar os dados.Revisei a história para ver se havia uma maneira de simplificar um pouco esse gráfico. A coluna menciona Alemanha, Grécia, Holanda, Espanha e o total da área do euro. Na versão reformulada do gráfico, decidi destacar apenas esses. Para resolver o problema de empilhar apenas uma seleção de países, adicionei outra categoria ("Outros") que inclui todos os outros países da área do euro. (O saldo total da conta corrente no gráfico redesenhado é menor do que no gráfico original. Isto é devido a uma revisão de dados do Eurostat.)Download dos dados do gráficoErro: muitos dados, espaço insuficienteConfinados pelo espaço limitado em uma página, muitas vezes somos tentados a forçar todos os dados que temos em um espaço muito pequeno. Embora isso economize um espaço valioso na página, isso tem consequências - conforme mostrado neste gráfico, de março de 2017. A história é sobre como a publicação científica é dominada pelos homens. Todos os pontos de dados são igualmente interessantes e relevantes para a história. Mas ao apresentar uma quantidade tão grande de dados - quatro categorias de campo de pesquisa, bem como a parcela de inventores - a informação é difícil de aceitar.Depois de refletir bastante, decidi não reprojetar esse gráfico. Se eu fosse manter todos os dados, o gráfico teria se tornado grande demais para ter uma história concisa. Em casos como este, seria melhor cortar alguma coisa. Alternativamente, poderíamos mostrar algum tipo de medida média, por ex. a participação média de publicações de mulheres em todos os campos. (Por favor, deixe-me saber se você tem alguma idéia sobre como visualizar isso em um espaço apertado! Eu adoraria ouvir suas idéias.)Download dos dados do gráficoAs melhores práticas em visualização de dados estão evoluindo rapidamente: o que pode ser aceitável hoje pode ser desaprovado amanhã. Novas e melhores técnicas estão surgindo o tempo todo. Você já cometeu um crime gráfico que poderia ter sido corrigido facilmente? Nos informe!

Erros, nós tiramos alguns

Na The Economist, levamos a visualização de dados a sério. Toda semana nós publicamos cerca de 40 gráficos em toda a imprensa, o site e nossos aplicativos. Com cada um deles, tentamos ao máximo visualizar os números com precisão e de uma forma que melhor suporte a história. Mas às vezes nos enganamos. Podemos fazer melhor no futuro se aprendermos com nossos erros – e outras pessoas também aprenderem com eles.

Depois de um mergulho profundo em nosso arquivo, encontrei vários exemplos instrutivos. Agrupamos nossos crimes em relação à visualização de dados em três categorias: gráficos que (1) são enganosos, (2) confusos e (3) não fazem sentido. Para cada um, sugiro uma versão melhorada que requer uma quantidade similar de espaço – uma consideração importante ao desenhar gráficos para serem publicados na impressão.

(Um breve aviso: A maioria dos gráficos “originais” foram publicados antes do redesenho do gráfico. Os gráficos aprimorados são desenhados para se ajustarem às novas especificações. Os dados são os mesmos.)

Gráficos enganosos
Vamos começar com o pior dos crimes na visualização de dados: apresentar dados de maneira enganosa. Nós nunca fazemos isso de propósito! Mas isso acontece de vez em quando. Vamos ver os três exemplos do nosso arquivo.

Erro: Truncar a escala

Um pouco de campo à esquerda
Este gráfico mostra o número médio de curtidas no Facebook em posts de páginas da esquerda política. O objetivo desse gráfico era mostrar a disparidade entre as postagens de Corbyn e outros.

O gráfico original não apenas minimiza o número de curtidas de Corbyn, mas também exagera em outros posts. Na versão reformulada, mostramos o bar do Sr. Corbyn em sua totalidade. Todas as outras barras permanecem visíveis. (Seguidores ávidos deste blog terão visto outro exemplo dessa prática ruim.)

Outra coisa estranha é a escolha da cor. Na tentativa de imitar o esquema de cores do Trabalhismo, usamos três tons de laranja / vermelho para distinguir entre Jeremy Corbyn, outros MPs e partidos / grupos. Nós não explicamos isso. Embora a lógica por trás das cores possa ser óbvia para muitos leitores, talvez faça pouco sentido para aqueles menos familiarizados com a política britânica.

Download dos dados do gráfico

Erro: Forçando um relacionamento por escalas de colheita

Uma correlação perfeita rara? Na verdade não.
O gráfico acima acompanhava uma história sobre o declínio do peso dos cães. À primeira vista, parece que o peso e o tamanho do pescoço dos cães são perfeitamente correlacionados. Mas isso é verdade? Apenas até certo ponto.

No gráfico original, ambas as escalas diminuem em três unidades (de 21 para 18 à esquerda; de 45 para 42 à direita). Em termos percentuais, a escala da esquerda diminui em 14% enquanto a da direita diminui em 7%. No gráfico redesenhado, mantive a escala dupla, mas ajustei suas faixas para refletir uma mudança proporcional comparável.

Considerando o alegre tópico deste gráfico, esse erro pode parecer relativamente menor. A mensagem do gráfico, afinal, é a mesma em ambas as versões. Mas o takeaway é importante: se duas séries se seguem muito de perto, é provavelmente uma boa ideia dar uma olhada mais de perto na balança.

Download dos dados do gráfico

Erro: Escolhendo o método errado de visualização

Opiniões sobre o Brexit quase tão erráticas quanto suas negociações
Publicamos este quadro de votação no Espresso, nosso aplicativo de notícias diárias. Ele mostra atitudes para o resultado do referendo da UE, plotado como um gráfico de linhas. Olhando para os dados, parece que os entrevistados tinham uma visão bastante errática do resultado do referendo – aumentando e diminuindo em alguns pontos percentuais de uma semana para a próxima.

Em vez de plotar as pesquisas individuais com uma curva suavizada para mostrar a tendência, conectamos os valores reais de cada pesquisa individual. Isso aconteceu, principalmente, porque nossa ferramenta de gráficos interna não plota linhas suavizadas. Até bem recentemente, estávamos menos à vontade com softwares estatísticos (como o R) que permitissem visualizações mais sofisticadas. Hoje, todos nós somos capazes de traçar um gráfico de votação como o redesenhado acima.

Outra coisa a notar neste gráfico é a maneira em que a escala foi quebrada. O gráfico original distribui os dados mais amplamente do que deveria. Na versão reformulada, deixei mais espaço entre o início da escala e o menor ponto de dados. Francis Gagnon criou uma boa fórmula para isso: tentar deixar pelo menos 33% da área livre em um gráfico de linhas que não comece em zero.

Download dos dados do gráfico

Gráficos confusos
Não tão criminoso quanto um gráfico enganoso, gráficos difíceis de ler são um sinal de mau trabalho de visualização.

Erro: Levar o “alongamento da mente” um pouco longe demais

… que?
Na The Economist, somos encorajados a produzir jornalismo de “alongamento mental”. Mas, às vezes, levamos isso longe demais. O gráfico acima mostra o déficit comercial dos EUA e o número de pessoas empregadas na indústria.

O gráfico é incrivelmente difícil de ler. Tem dois problemas principais. Primeiro, os valores de uma série de dados (déficit comercial) são inteiramente negativos, enquanto os demais (emprego industrial) são todos positivos. É um desafio combinar essas disparidades em um gráfico sem achatar nenhuma das séries de dados. A aparente “solução” para isso leva ao segundo problema: as duas séries de dados não compartilham uma linha de base comum. A linha de base do déficit comercial está no topo do gráfico (destacada por uma linha vermelha traçada em metade do corpo do gráfico). A linha de base da escala correta está na parte inferior.

O gráfico reprojetado mostra que não houve necessidade de combinar as duas séries de dados. A relação entre o déficit comercial e o emprego industrial permanece clara e ocupa apenas uma quantidade mínima de espaço extra.

Download dos dados do gráfico

Erro: uso confuso de cor

50 tons de azul
Este gráfico compara os gastos do governo com benefícios de aposentadoria com a parcela de pessoas de 65 anos ou mais para uma seleção de países, com um foco particular no Brasil. Para manter o gráfico pequeno, o visualizador apenas rotulou uma seleção de países e destacou aqueles em azul elétrico. A média da OCDE é destacada em azul claro.

O visualizador (eu!) Ignorou o fato de que uma mudança de cor geralmente implica uma mudança categórica. À primeira vista, este parece ser o caso também neste gráfico – todas as cores azuis elétricas parecem pertencer a um grupo diferente do azul escuro. Este não é o caso. A única coisa que eles têm em comum é que foram escolhidos para serem rotulados.

Na versão reformulada, a cor dos círculos permanece a mesma para todos os países. Eu mudei a opacidade daqueles que não são rotulados para fazer os outros se destacarem. A tipografia faz o resto: o Brasil, o país em foco, está escrito em negrito e a média da OCDE em itálico.

Download dos dados do gráfico

Gráficos que escondem seu ponto
Os erros nesta categoria final são menos óbvios. Gráficos como esses não são enganosos, nem são muito confusos. Eles simplesmente não conseguem justificar sua existência – muitas vezes porque foram visualizados incorretamente ou porque tentamos empinar demais em pouco espaço.

Erro: Incluindo muitos detalhes

“Quanto mais cores, melhor!” – Nenhum bom visualizador de dados, nunca
Que arco-íris! Publicamos este gráfico em uma coluna sobre o superávit orçamentário da Alemanha. Mostra os saldos orçamentais e os saldos das contas correntes de dez países da área do euro. Com tantas cores – algumas das quais são muito difíceis de distinguir ou até mesmo de ver porque os valores são muito pequenos – a mensagem do gráfico é impossível de entender. Quase te tenta a espreitar e seguir em frente. E, mais importante, uma vez que não estamos a traçar todos os países da área do euro, não faz qualquer sentido empilhar os dados.

Revisei a história para ver se havia uma maneira de simplificar um pouco esse gráfico. A coluna menciona Alemanha, Grécia, Holanda, Espanha e o total da área do euro. Na versão reformulada do gráfico, decidi destacar apenas esses. Para resolver o problema de empilhar apenas uma seleção de países, adicionei outra categoria (“Outros”) que inclui todos os outros países da área do euro. (O saldo total da conta corrente no gráfico redesenhado é menor do que no gráfico original. Isto é devido a uma revisão de dados do Eurostat.)

Download dos dados do gráfico

Erro: muitos dados, espaço insuficiente

Confinados pelo espaço limitado em uma página, muitas vezes somos tentados a forçar todos os dados que temos em um espaço muito pequeno. Embora isso economize um espaço valioso na página, isso tem consequências – conforme mostrado neste gráfico, de março de 2017. A história é sobre como a publicação científica é dominada pelos homens. Todos os pontos de dados são igualmente interessantes e relevantes para a história. Mas ao apresentar uma quantidade tão grande de dados – quatro categorias de campo de pesquisa, bem como a parcela de inventores – a informação é difícil de aceitar.

Depois de refletir bastante, decidi não reprojetar esse gráfico. Se eu fosse manter todos os dados, o gráfico teria se tornado grande demais para ter uma história concisa. Em casos como este, seria melhor cortar alguma coisa. Alternativamente, poderíamos mostrar algum tipo de medida média, por ex. a participação média de publicações de mulheres em todos os campos. (Por favor, deixe-me saber se você tem alguma idéia sobre como visualizar isso em um espaço apertado! Eu adoraria ouvir suas idéias.)

Download dos dados do gráfico

As melhores práticas em visualização de dados estão evoluindo rapidamente: o que pode ser aceitável hoje pode ser desaprovado amanhã. Novas e melhores técnicas estão surgindo o tempo todo. Você já cometeu um crime gráfico que poderia ter sido corrigido facilmente? Nos informe!

design

Acessível não significa feio

Quando você está desenvolvendo um website ou um aplicativo, é fácil esquecer que está fazendo isso para pessoas com necessidades diferentes para você. Quando você finalmente lança um produto bom, brilhante e digno de ser dribbble no mundo, você pode pensar que será a mesma grande experiência para todos. No entanto, as coisas não são tão simples assim como a vida. As pessoas são diferentes, elas têm necessidades que variam e, se você planeja que todos possam usar seu site, certifique-se de ter tempo para torná-las acessíveis a eles.

Aqui estão algumas coisas que você pode fazer agora para melhorar a acessibilidade em seu site:

Contornos
Às vezes, um usuário pode não conseguir navegar em seu site com um mouse convencional. Alguns usuários dependem da navegação com o uso da tecla tab, acessando o botão ou a entrada de que precisam e continuando com a jornada.

No entanto, quando um usuário acessa um elemento, ele geralmente vê um esboço de foco bastante feio, o que estraga a estética que o site cuidadosamente projetado está tentando usar. No entanto, podemos melhorar isso.

Um ótimo design arruinado por um halo feio (cortesia de Dribbble)
A propriedade outline no CSS é bastante restritiva, mas na verdade existe uma boa alternativa a ela; a caixa-sombra. As sombras de caixa são suportadas em todos os navegadores (exceto no Opera Mini) e, quando aplicadas a um elemento em foco, têm um impacto muito semelhante ao contorno.

Suporte para sombras de caixa nos navegadores (via Can I Use)
O que é ainda melhor na propriedade box-shadow é que ela realmente envolve seu elemento com firmeza (digamos que você tivesse um botão com um raio de 4px, um contorno produziria um halo retangular em volta dele, mas uma shadow box abraça todos as curvas). Uma sombra de caixa também pode ser personalizada um pouco mais que um contorno. Na verdade, há um ótimo site para isso. Adicionando uma transição (novamente – suportado em tudo, exceto o Opera Mini) é a cereja no topo do bolo visual. Veja um exemplo:

Estados de focalização
Quando o cursor precisa passar por cima de um elemento antes que um conjunto de ações ou informações possa se tornar visível, isso é problemático para usuários que precisam usar ampliadores de tela que seguem o cursor. Considere esta interação:

Você precisa que um usuário passe o mouse sobre um elemento para ver algumas informações em uma lista
A informação pop-up é exibida, mas para lê-lo o usuário precisa rolar o cursor sobre ela
Mover o cursor significa que o pop-up desaparece e, inadvertidamente, o cursor faz com que outro pop-up apareça
Este é um ciclo infernal para qualquer pessoa que precise usar um computador desse tipo. No entanto, poderia ser melhorado.

Se você planejar a hierarquia de informações que deseja exibir, talvez uma lista de linha única não seja a melhor maneira de apresentar seus dados. Talvez um cartão possa funcionar melhor.

Os cartões podem ser uma boa solução ao procurar exibir muitas informações relacionadas na tela ao mesmo tempo
Se você precisa ter um pop-up em seu design, é recomendável permitir que o usuário role até o pop-up sem que ele desapareça. Isso significa que, se uma pessoa precisar usar uma ferramenta de ampliação, ela poderá se mover pelo pop-up e lê-la totalmente sem que ela desapareça.

Legibilidade

Menu de hambúrguer com pouca legibilidade
Ao tentar projetar uma interface elegante, pode ser tentador ter tipos de letra com cores semelhantes – no entanto, como você pode ver no exemplo acima, mesmo com ótima visão, você mal consegue distinguir o texto na barra lateral.

Há uma maneira de melhorar isso. Você pode usar ferramentas como o analisador de contraste de cores do WebAIM para garantir que suas opções de cores sejam apropriadas para seu público.

Exemplos de legibilidade do texto (7: 1 te daria um passe no WCAG AAA em texto normal)
Há também outra ótima ferramenta que uso ao projetar para acessibilidade. É um plug-in que você pode obter para o Sketch chamado Color Contrast Analyzer. É ótimo para tornar o fluxo de trabalho um pouco mais rápido, pois você pode selecionar duas camadas (o plano de fundo e o texto) e clicar nesse plug-in, informando se ele passou ou falhou nas verificações de acessibilidade, além da proporção.

Analisador de contraste de cores para esboço
Outra coisa a ter em mente ao escolher um tipo de letra é usar ou não uma fonte serif ou sans-serif. Algumas pessoas com pouca visão lutam para ler fontes com serifa, pois incluem algumas decorações que distraem a forma da letra. Alguns tipos de letra sem serifa populares e comuns incluem Arial, Calibri e Helvetica.

Uma versão mais legível da barra lateral que vimos anteriormente
Daltonismo
O daltonismo afeta cerca de 300 milhões de pessoas em todo o mundo, o que significa cerca de 1 em 12 homens e 1 em 200 mulheres. A razão para os homens serem mais suscetíveis ao daltonismo é devido aos genes para o daltonismo mais comumente hereditário, oriundo do cromossomo X. Um homem terá um cromossomo X enquanto uma mulher terá dois. Para as mulheres, isso significa que, mesmo que elas herdem o daltonismo em um cromossomo X, o fato de o outro cromossomo X não ter esse traço genético significará que ele não sofrerá de daltonismo.

Então, como isso se aplica a você, desenvolvendo seu novo produto digital?

Bem, considere que você está fazendo algum tipo de aplicativo de teste. No momento, a única maneira de dizer ao usuário se a resposta escolhida é certa ou errada é usar uma cor de texto verde ou vermelha na resposta.

Um exemplo de uma interface de teste
Ótimo, mas considere se o usuário é daltônico. Qual resposta está correta agora? É difícil dizer (talvez até impossível).

Um exemplo de como a interface aparece para alguém com acromatopsia (daltonismo parcial ou total)
No entanto, existem soluções para esse problema de design.

Em primeiro lugar, considere o uso de iconografia ou texto para enfatizar diferentes significados. Por exemplo, com o aplicativo de teste, se uma pergunta estivesse correta, você poderia colocar uma marca de seleção ao lado dela e torná-la em negrito.

Um novo visual para o aplicativo de teste
Isso permitiria agora que um usuário daltônico entendesse que essa resposta está correta.

Como alguém com acromatopsia agora veria essa interface
Em segundo lugar, pense em padrões e formas. Imagine que você esteja exibindo um gráfico com cores diferentes para itens diferentes. Isso seria muito difícil para um usuário daltônico compreender, no entanto, se adicionássemos um padrão único a cada seção, ficaria claro quais rótulos se relacionam com quais seções.

Um gráfico que é difícil de interpretar se você tiver acromatopsia (à direita)
O uso de padrões e formas neste gráfico pode facilitar muito a compreensão, não apenas dos usuários daltônicos, mas de todos os usuários.

Um design gráfico mais acessível incorporando formas e pequenos padrões
Aqui está uma ferramenta útil que eu uso para verificar meus projetos de problemas de acessibilidade ao considerar o daltonismo: Coblis

Conclusão
Em geral, há muitas maneiras de melhorar a acessibilidade do seu produto digital – muitas para mencionar aqui de uma só vez. No entanto, a implementação dessas pequenas melhorias no seu site ou aplicativo não apenas permite que um conjunto de usuários completamente novo interaja com ele, como também melhora a usabilidade para a maioria das pessoas. Tornar as coisas mais fáceis de usar não significa que você precise torná-las mais feias e valorizar a função em relação à forma, isso significa tomar melhores decisões de design para resolver a ampla gama de cenários com os quais as pessoas precisam lidar.

Se a única maneira de tornar seu site ou aplicativo mais acessível é sacrificar a forma, talvez a forma nunca tenha sido ótima para começar.

Tem algum outro problema de design acessível? Deixe um comentário e eu posso tentar resolvê-los na minha próxima postagem com foco em acessibilidade.