lume.books & ideiasPortfólio
Web Design, UI & UX — Da percepção ao produto digital
Capítulo 04/48 · Pesquisa com pessoas sem inventar certezas
Web Design, UI & UX — Da percepção ao produto digitalParte I — Pensar antes de desenharCapítulo 04 · Edição de estudo

Use os exemplos como laboratório visual: passe o mouse, use Tab ou toque nos pontos destacados e tente explicar a decisão antes de abrir a nota. Para guardar uma ideia, selecione qualquer trecho.

CAPÍTULO 04 DE 48

Pesquisa com pessoas sem inventar certezas

Neste capítulo, você transforma pergunta de pesquisa em uma decisão visual que pode ser percebida, explicada e validada por pessoas reais. Você sairá com uma decisão documentada, um teste de percepção e uma melhoria aplicável ao projeto acumulado.

Parte I — Pensar antes de desenhar6 questões comentadasConceito · laboratório · projeto

Escrita, marcações e comentários ficam só neste navegador, separados por capítulo e sem sincronização com a conta. Evite informações sensíveis; limpar os dados do navegador pode remover seus registros.

02

Prepare-se — O que você vai construir

  • Explicar pergunta de pesquisa por meio de uma relação visual observável.
  • Relacionar evidência qualitativa à tarefa, ao conteúdo e à hierarquia.
  • Aplicar limite da amostra sem sacrificar clareza, acesso ou adaptação.

Se precisar de apoio, consulte o capítulo anterior e volte a estas tarefas. Não há obrigação de seguir um prazo.

03

Entenda — Modelo mental e estrutura

1. Projete uma relação, não uma decoração

Entrevistas e observação servem para compreender comportamentos e linguagem, não para pedir que participantes desenhem a solução. Uma amostra pequena revela padrões e dúvidas, mas não autoriza generalizações estatísticas. Em pergunta de pesquisa, forma e comportamento precisam tornar a tarefa mais legível. Relacione essa decisão com evidência qualitativa e limite da amostra antes de escolher cor, sombra ou movimento. Uma composição pode impressionar em uma captura e ainda falhar quando o texto muda, quando o contraste é reduzido ou quando alguém não entende onde tocar. Design de interface é a construção deliberada dessas pistas; experiência do usuário inclui o que acontece antes, durante e depois da tela.

Defina primeiro a tarefa que pergunta de pesquisa deve facilitar e como evidência qualitativa ajuda a orientar a atenção. Escreva uma hipótese curta: “para esta pessoa, neste contexto, esta escolha deve facilitar esta ação”. Isso separa intenção de preferência pessoal. Comece com conteúdo real e uma hierarquia em preto e branco. Acrescente estilo apenas quando ele reforçar agrupamento, prioridade, identidade ou feedback. Se duas escolhas competem pela atenção, decida qual delas serve ao objetivo principal e reduza a outra.

2. Leia a interface como um sistema

.nota-de-pesquisa { display: grid; grid-template-columns: 8rem 1fr; gap: .75rem; }
.evidencia { quotes: "“" "”"; }

Observe estrutura, tokens e estados, não apenas o resultado final. O exemplo materializa pergunta de pesquisa, usa evidência qualitativa como relação visual e mantém limite da amostra disponível para refinamento. O trecho é uma representação reproduzível da decisão, e não uma receita universal. Refaça-o com outro conteúdo, outro comprimento de título e outra densidade. Pergunte o que pertence ao sistema — espaçamento, escala, raio, contraste — e o que pertence somente a esta composição.

Use o laboratório visual deste capítulo quando ele estiver disponível. Passe o ponteiro, use Tab ou toque nos pontos numerados; cada anotação explica o que está acontecendo e por que aquela escolha existe. Depois oculte mentalmente a anotação e tente explicar a evidência com suas próprias palavras. A interação serve para treinar leitura crítica, não para transformar todo layout em um conjunto de efeitos.

3. Troque gosto por critério observável

Uma solução consistente faz pergunta de pesquisa servir à tarefa, demonstra evidência qualitativa sem ruído e testa limite da amostra em contexto. Critérios úteis descrevem tarefa, condição e evidência. “Está moderno” é uma opinião; “a ação primária é encontrada em até alguns segundos sem confundir-se com a secundária” pode ser observada. Compare versões com o mesmo conteúdo, registre o que mudou e faça uma pergunta por vez. Testes curtos com pessoas revelam problemas que a familiaridade de quem desenhou costuma esconder.

A armadilha principal é: aplicar pergunta de pesquisa como efeito decorativo sem relacioná-lo à tarefa, ao conteúdo e ao contexto de uso.. Corrija a causa antes de polir. Confira leitura em sequência, contraste, foco, zoom, toque e estados vazios ou de erro. Ao terminar, você deve conseguir defender a decisão sem dizer apenas “porque ficou bonito”: explique qual problema ela resolve, que custo introduz, para quem funciona e que sinal faria você revisá-la.

04

Observe — Interface em contexto

Uma crítica de design começa pela intenção, não pela preferência. Para “Pesquisa com pessoas sem inventar certezas”, o requisito é: a interface deve tornar pergunta de pesquisa perceptível, usar evidência qualitativa com intenção e continuar compreensível quando limite da amostra variar. Observe a variação abaixo e preveja o efeito antes de renderizá-la.

.insight { color: green; }
/* Cor não separa observação, interpretação e hipótese. */

A variação isola evidência qualitativa. Compare hierarquia, esforço cognitivo, affordance e continuidade da tarefa antes de escolher a versão. Faça quatro leituras. Na primeira, afaste-se e identifique o primeiro elemento percebido. Na segunda, acompanhe alinhamentos, agrupamentos e ritmo. Na terceira, procure estados e pistas de interação. Na quarta, percorra o mesmo conteúdo sem cor, sem movimento e sem mouse. A informação central deve sobreviver a essas mudanças.

Compare a variação com o exemplo principal mantendo texto e tarefa iguais. Formule uma hipótese completa: “se eu alterar isto, espero reduzir ou aumentar aquilo, porque…”. Aplique uma única alteração e anote o resultado. A melhor versão não é necessariamente a mais silenciosa nem a mais expressiva; é a que combina propósito, identidade, legibilidade e custo de manutenção de forma consciente.

05

Experimente — Compare no laboratório

Monte um quadro de experimentação no navegador ou na ferramenta de prototipação que preferir. Reconstrua o exemplo, remova uma decisão visual e observe a perda de significado; depois crie uma segunda versão que aplique limite da amostra sem esconder pergunta de pesquisa. Trabalhe em três passes: conteúdo e fluxo; composição e tokens; estados e movimento. Em cada passe, deixe uma versão anterior ao lado da nova para que a comparação não dependa de memória.

Force condições adversas: texto 200% maior, viewport de 320 CSS pixels, contraste reforçado e navegação completa por teclado. Navegue por teclado, teste toque, amplie o texto e verifique se a ordem visual acompanha a ordem de leitura. Convide uma pessoa a narrar o que acredita ser clicável e o que espera que aconteça. Não explique a tela durante a primeira tentativa: registre hesitações, interpretações e desvios. Refine a menor decisão capaz de remover o obstáculo e repita a tarefa.

06

Pratique — Seis decisões de design

Resolva primeiro pelo raciocínio. Consultar o capítulo e testar hipóteses no navegador faz parte do processo; depois, releia as justificativas.

E1 — Aplicar em contexto

Qual decisão deve iniciar o trabalho de “Pesquisa com pessoas sem inventar certezas”?

E2 — Aplicar em contexto

Qual verificação oferece a evidência mais útil para este capítulo?

E3 — Aplicar em contexto

Qual prática deve ser evitada?

E4 — Aplicar em contexto

Qual escolha protege melhor uma experiência inclusiva?

E5 — Aplicar em contexto

Como avaliar duas direções visuais com menos viés?

E6 — Aplicar em contexto

Quando a entrega pode seguir para revisão?

07

Confira — Gabarito comentado

Abrir gabarito e explicações completas

E1 — C. Design começa pela tarefa e pela relação que precisa ser percebida. Defina primeiro a tarefa que pergunta de pesquisa deve facilitar e como evidência qualitativa ajuda a orientar a atenção. Assim, a estética recebe um papel verificável.

E2 — B. A evidência precisa exercitar percepção e tarefa. Peça a outra pessoa para localizar pergunta de pesquisa, interpretar evidência qualitativa e concluir a tarefa enquanto limite da amostra muda. Familiaridade e uma única viewport escondem obstáculos.

E3 — A. A armadilha é aplicar pergunta de pesquisa como efeito decorativo sem relacioná-lo à tarefa, ao conteúdo e ao contexto de uso. Ela transforma preferência em regra e costuma quebrar quando o contexto real aparece.

E4 — C. A experiência precisa sobreviver a diferentes formas de percepção e operação: Preservar ordem, contraste, nome acessível, foco visível e alternativa textual durante a demonstração de pergunta de pesquisa.

E5 — B. Uma comparação controlada liga decisão e consequência. Misturar variáveis impede saber o que realmente melhorou ou piorou a experiência.

E6 — A. Pronto para revisão significa apresentar intenção e evidência: A intenção de pergunta de pesquisa está documentada, evidência qualitativa foi comparado em pelo menos duas versões e limite da amostra não impede a tarefa principal.

08

Projete — Documente, compare e refine

Entrega incremental: um estudo comparativo de pesquisa com pessoas sem inventar certezas com hipótese, duas variações, estados principais e justificativa baseada em evidência. Registre em até cinco linhas a pessoa, o contexto e a tarefa principal. Inclua conteúdo real, uma versão deliberadamente problemática e uma versão revisada. Marque as decisões de pergunta de pesquisa, evidência qualitativa e limite da amostra; para cada uma, escreva intenção, evidência e limite. Finalize com uma checagem de contraste, teclado, toque, zoom e redução de movimento.

Consultar um modelo possível
.nota-de-pesquisa { display: grid; grid-template-columns: 8rem 1fr; gap: .75rem; }
.evidencia { quotes: "“" "”"; }

O modelo ilustra uma possibilidade. Use os critérios para revisar suas próprias ideias, não para copiar as mesmas frases.

Critérios para revisar

  • A intenção de pergunta de pesquisa está documentada, evidência qualitativa foi comparado em pelo menos duas versões e limite da amostra não impede a tarefa principal.
  • Preservar ordem, contraste, nome acessível, foco visível e alternativa textual durante a demonstração de pergunta de pesquisa.
  • A comparação torna identificáveis as contribuições de pergunta de pesquisa e evidência qualitativa.
  • A nota de decisão registra o teste de texto 200% maior, viewport de 320 CSS pixels, contraste reforçado e navegação completa por teclado.

Até 12.000 caracteres em cada versão. Produção livre, sem correção automática.

09

Retome — Organize sua revisão

  • Explique, sem mostrar a tela, a relação entre pergunta de pesquisa e evidência qualitativa.
  • Reconstrua a composição com conteúdo diferente e preserve o papel de limite da amostra.
  • Aplique o teste “Peça a outra pessoa para localizar pergunta de pesquisa, interpretar evidência qualitativa e concluir a tarefa enquanto limite da amostra muda.” ao projeto acumulado e registre uma melhoria.

Feche a explicação, tente lembrar um exemplo e depois confira. Retome uma dificuldade no próximo encontro e alguns dias depois; ajuste o intervalo ao que ainda precisa praticar.

Use exemplos concretos na autoavaliação: “consigo explicar com consulta” ou “quero praticar novamente”. Marcar como lida não representa uma certificação.

SEU PROGRESSO NO CAPÍTULO 04

Um capítulo, no seu ritmo.

— exercícios respondidos

Carregando progresso…

Você decide quando marcar este capítulo como lido. Isso não altera seus exercícios nem suas marcações.

Acompanhar todos os capítulos →

Progresso salvo só neste navegador, sem sincronização com sua conta.

Guardar uma ideia

Cor e significado

Você pode personalizar os significados no seu caderno.

Salvo só neste navegador, sem sincronização com a conta. Evite informações sensíveis em computadores compartilhados.

Do seu jeito de ler

Encontre o ritmo mais confortável para seus olhos.

Ambiente
Tipografia
Tamanho do texto
Entrelinhas
Largura da leitura

Preferências salvas neste navegador. O progresso indica a posição na página, não o domínio do conteúdo.

Seções do Capítulo 04