← Voltar ao Portal da Disciplina
Conheça meu trabalho como perito
← Voltar ao Portal da Disciplina
Conheça meu trabalho como peritoDisciplina: Interação Humano-Computador & UX
Data: 20 de Março de 2026
"O código é o meio,
a experiência é o fim."
Processo iterativo focado nas necessidades,
dores e objetivos do usuário em cada etapa.
Arquétipos baseados em comportamento e dores (não apenas demografia).
Mapeamento do fluxo para reduzir a Carga Cognitiva e aumentar a Retenção.
Tripé Estratégico: SEO + Usabilidade + Conversão
Pergunta: Qual pilar é priorizado quando o sistema permite completar o processo de forma rápida e sem obstáculos?
Segundo Benyon (2011), a Eficiência trata de realizar a tarefa com o mínimo de tempo e esforço mental possível.
Eficácia foca apenas em "concluir", não na rapidez. Engajamento foca na satisfação emocional, não na velocidade técnica.
A grande maioria associou corretamente a rapidez de fluxo ao pilar da Eficiência de Benyon.
Insight: A turma demonstra maturidade ao separar "conclusão de tarefa" (Eficácia) de "desempenho técnico" (Eficiência).
É o sucesso na tarefa.
Exemplo: O usuário conseguiu comprar o produto? Sim. Então o sistema é eficaz.
É o desempenho.
Exemplo: Ele comprou com poucos cliques e sem esforço? Se sim, o sistema é eficiente.
"A eficiência foca na economia de tempo e recursos mentais." — Benyon
Pergunta: Excesso de anúncios e desordem visual prejudicam qual conceito?
A desordem satura a memória de trabalho. Barreto (2018) reforça que a interface deve mediar, não confundir.
Confundir com Affordance. Affordance é sobre a "pista" de como usar um objeto, não sobre o cansaço mental causado pelo excesso.
Houve uma forte compreensão sobre como o ruído visual satura a Memória de Trabalho.
Atenção: 11% ainda confundem ruído visual com falha de Affordance. Reforçaremos a diferença hoje.
A Carga Cognitiva não é sobre "como o botão funciona" (isso é Affordance).
É sobre a quantidade de ruído que o cérebro precisa processar.
Dica do Professor: Se o usuário precisa "parar para pensar" demais, você falhou na Ergonomia Cognitiva.
Pergunta: Quais elementos devem ser considerados prioritariamente no UCD?
UCD não é estatística pura. Benyon (2011) destaca que personas são arquétipos de comportamento e motivação.
Focar apenas em Dados Demográficos (idade/local). Isso cria um perfil vazio que não explica o "porquê" das decisões do usuário.
A turma captou a essência do UCD: desenhar para pessoas, não para estatísticas demográficas.
Homem, 35 anos,
São Paulo - SP.
Dores: Medo de ser fraudado.
Objetivo: Rapidez na entrega.
Motivação: Praticidade.
No UCD, projetamos para as necessidades do usuário, não para o seu CEP.
Pergunta: Qual o objetivo de sugerir produtos com base em buscas anteriores?
Isso personaliza a jornada para aumentar a conversão. Alinha-se ao conceito de Eficiência de Benyon.
Achar que é apenas para "Economizar espaço". Sugestão é sobre relevância e jornada, não sobre layout físico.
Entendimento consolidado: a personalização é a chave para o ponto de contato ideal na jornada.
Pergunta: O uso destes termos serve para quê, considerando a Heurística H2?
Utilizar conceitos familiares reduz a curva de aprendizado. É a interface falando a língua do usuário, como defende Valente (2020).
Muitos acham que é apenas "Estética". Termos familiares são funcionais; eles ativam modelos mentais pré-existentes.
🏆 ACERTO INTEGRAL!
Todos os alunos dominam a importância das metáforas do mundo real para a usabilidade.
O Wireframe de Baixa Fidelidade é a planta baixa do software.
Foco: Estrutura, Fluxo e Hierarquia.
Ignoramos: Cores, Imagens e Tipografia final.
"A interface deve mediar a intenção do usuário. Se a usabilidade falha no rascunho, o visual não salvará o projeto."
Prototipar em baixa fidelidade é uma ferramenta de comunicação rápida e exploração de ideias com baixo custo.
Objetivo: Validar a lógica de navegação antes do código.
Segundo Valente (2020), a prototipagem é uma técnica fundamental de redução de riscos.
Errar no papel custa centavos. Errar no código custa milhares de reais.
Hierarquia de tags (H1, H2) definida na estrutura.
Uso de White Space para reduzir carga cognitiva.
Posicionamento estratégico de CTAs via Affordance.
O Wireframe não é apenas um desenho; é a materialização da estratégia de negócio.
Atração
Experiência
Resultado
No wireframe, definimos o que o Google lerá primeiro.
"A estrutura dita a relevância." — Conexão técnica com a Engenharia de Software.
O maior peso visual. Deve responder: "O que é isso?" em 3 segundos.
Destaque via Affordance. Mesmo sem cor, o tamanho e o respiro (White Space) indicam que é clicável.
Blocos menores para reduzir a Carga Cognitiva e facilitar a retenção.
"A ordem dos elementos no Wireframe dita a jornada mental do usuário." — Barreto (2018)
Reduzir o esforço para aumentar o tempo de tela.
Segundo Barreto (2018), o uso estratégico de White Space (Espaço Negativo) evita a saturação da memória de trabalho e guia o olhar do usuário.
Lei de Fitts: Áreas de interação devem ser fáceis de alcançar.
O wireframe deve deixar óbvio o que é clicável, mesmo sem cores. A forma dita a função.
Posicionar o botão de conversão exatamente após o usuário entender a solução do problema.
"Sistemas úteis são aqueles que antecipam as necessidades do usuário." — Benyon (2011)
Atividade: Elaborar um relatório crítico (mínimo 10 linhas).
Objetivo: Propor mudanças estruturais em um Artigo Técnico usando Wireframes de Baixa Fidelidade.
O Desafio: Como apresentar uma norma densa sobre Auditoria de Modelos e Algoritmos sem gerar exaustão mental no usuário?
Sua Missão: Analisar a estrutura do artigo e propor um Wireframe que transforme a densidade regulatória em clareza técnica e autoridade.
URL de Análise: https://spositol.github.io/pericia.judicial/artigo-resolucao-4966-auditoria-algoritmos.html
Quais seriam as 3 principais mudanças estruturais para equilibrar:
Baseado em Barreto (2018): A ordem de importância dos elementos guia o olhar ou confunde o usuário?
Baseado em Benyon / Valente: O layout atual satura a memória de trabalho ou permite uma leitura fluida (eficiente)?
Analise se o ponto de conversão (CTA) está "competindo" com a leitura ou se ele aparece no momento exato em que o usuário identifica o problema.
Projetar o "invisível" é projetar a eficiência da interação.
O wireframe é uma ferramenta de comunicação rápida e redução de custos. Erramos no papel para acertar no código.
A Hierarquia Visual e o White Space ditam a carga cognitiva. Projetamos o "invisível" para guiar a interação.
Lembrem-se: O wireframe de hoje dita o HTML Semântico de amanhã.
Próximo Passo: Evolução para Protótipos de Alta Fidelidade.
Roteiro de Execução:
Fundamentação: Este laboratório aplica os conceitos de Barreto (2018) sobre funcionalidade e Benyon (2011) sobre eficiência na jornada.
O wireframe é a fundação para o sucesso técnico e de usabilidade. Baixe os guias de estudo abaixo:
Próximo Passo: Evolução para Protótipos de Alta Fidelidade e Testes.
Como foi sua experiência com o tema de
Prototipagem de Baixa Fidelidade hoje?
Os resultados são monitorados em tempo real via Google Analytics 4.
Até a próxima aula!