Atividades das Aulas 01–02
Caso 1 — Totem de autoatendimento de fast-food
Contexto: restaurante com fila, pressa, ruído e uso individual ou familiar. O cliente quer montar e pagar seu pedido sem depender do balcão.
Pense antes de abrir
- Separe sistema, interface e interação.
- Analise usabilidade, UX, acessibilidade e comunicabilidade.
- Compare usuário novo, deficiência visual, auditiva e motora.
- Explique como o mesmo recurso pode ajudar um perfil e atrapalhar outro.
Análise sugerida
O sistema inclui hardware, software e contexto; a interface reúne tela, controles e feedback perceptíveis; a interação é a sequência de ações e respostas. O totem tende a oferecer autonomia e controle, mas pode criar barreiras de visão, alcance ou precisão. A mesma interface visual que funciona bem para deficiência auditiva pode ser uma barreira severa quando não há alternativa ao canal visual.
Caso 2 — Moto G: conectar a uma nova rede Wi-Fi
Perfis: adolescente familiarizado com o aparelho × pessoa idosa usando o primeiro smartphone.
Pense antes de abrir
- Quem sabe localizar o Wi-Fi pelo menu rápido?
- Quem reconhece rede, cadeado, intensidade de sinal e senha?
- Como cada perfil interpreta “Conectando”, “Conectado” e “Falha de autenticação”?
- Qual golfo cresce mais para o usuário iniciante?
Análise sugerida
Para o usuário familiarizado, os golfos tendem a ser pequenos. Para o iniciante, o golfo de execução pode ser bem maior porque localizar e interpretar Wi-Fi, rede e senha depende de conhecimento prévio. Estados claros como “Conectado” ajudam o golfo de avaliação, embora termos técnicos como “Falha de autenticação” ainda possam exigir interpretação.
Caso 3 — Google Agenda: signos de interface
Regra: um ícone pode ser estático; a mudança causada pelo clique é dinâmica; uma mensagem que explica estado ou uso pode ser metalinguística.
- Estáticos: grid, dias, “+”, engrenagem, lupa, perfil e seletores de agenda.
- Dinâmicos: avançar mês, abrir criação, exibir detalhes, arrastar evento, mostrar/ocultar agenda e trocar visualização.
- Metalinguísticos: orientações dos campos, ajuda, alertas, “Salvando...” e “Evento salvo”.
Por que o “?” pode cair em duas análises?
O ícone “?” é um signo estático porque seu significado pode ser interpretado visualmente. Quando o usuário o aciona e abre um texto que explica outros elementos ou operações, esse conteúdo funciona como signo metalinguístico.
Caso 4 — Botão claro, feedback ausente
Um app bancário mostra “Transferir” de forma evidente. O usuário preenche os dados e confirma, mas a tela fica parada por vários segundos sem mensagem, animação ou mudança visível.
- Qual golfo é pequeno? Por quê?
- Qual golfo é grande? Por quê?
- Que alteração concreta reduziria o problema?
- Como o problema afeta segurança e satisfação?
Resposta comentada
O golfo de execução é pequeno porque o caminho da ação está claro. O golfo de avaliação é grande porque não há informação suficiente para perceber o estado da transferência. Um estado “Processando...” seguido de confirmação ou erro visível reduz a incerteza, diminui repetição indevida e melhora segurança e satisfação.
Questões de treino — teoria aplicada
Responda antes de abrir o comentário. Estas questões foram mantidas do primeiro protótipo do notebook e agora seguem o visual do site.
1. Um app bancário tem “Transferir” bem visível, mas após confirmar fica vários segundos sem qualquer feedback. Qual golfo é pequeno, qual é grande e o que você mudaria?
Ver gabarito
O golfo de execução é pequeno, porque a ação para transferir está clara. O golfo de avaliação é grande, porque não há indicação do estado após confirmar. Uma melhoria seria mostrar “Processando...” imediatamente e depois “Transferência concluída” ou um erro específico.
2. Um app usa um ícone de nuvem com seta para baixo, mas usuários interpretam “sincronizar”, enquanto o designer pretendia “baixar arquivo”. Explique pela Engenharia Semiótica.
Ver gabarito
Há desalinhamento entre a intenção comunicativa do designer e a interpretação do signo pelo usuário. O sistema comunica mal a ação. É possível trocar o ícone, adicionar o rótulo “Baixar” ou usar um signo mais convencional para o público.
3. Um texto azul sublinhado parece um link, mas não é clicável. Qual conceito aparece e como isso afeta a usabilidade?
Ver gabarito
É uma falsa affordance: a aparência sugere uma ação inexistente. Isso gera tentativa frustrada, erro de interpretação e pode reduzir eficiência e satisfação.
4. Um banco organiza o app exatamente conforme seus departamentos internos (“Tesouraria”, “Operações”, “Produtos”), embora clientes pensem em “pagar”, “transferir” e “investir”. Qual abordagem predominou?
Ver gabarito
Predominou a visão centrada na máquina, ou “dentro para fora”. Uma abordagem “fora para dentro” reorganizaria o app a partir das tarefas e dos modelos mentais dos clientes.
5. Um usuário entende perfeitamente que precisa tocar em “Confirmar”, mas não consegue alcançar fisicamente o botão no topo de um totem. Qual critério está mais diretamente comprometido?
- Comunicabilidade
- Acessibilidade
- Significação
Ver gabarito
b) Acessibilidade. A pessoa entende a interface, mas existe uma barreira física para executar a ação.
6. Num painel com 20 botões, comandos de edição ficam juntos e comandos de exportação ficam em outro bloco com espaço entre os grupos. Qual princípio está sendo aplicado?
- Fechamento
- Proximidade
- Continuidade
Ver gabarito
b) Proximidade. A distância espacial faz o usuário perceber elementos próximos como pertencentes ao mesmo grupo funcional.
7. Uma equipe Scrum entrega funcionalidade a cada sprint, mas só testa usabilidade no fim do projeto. Qual é o problema e como integrar IHC melhor?
Ver gabarito
IHC virou uma etapa tardia, contrariando o caráter iterativo do processo. A equipe deve distribuir análise de contexto, prototipação e avaliação de qualidade de uso ao longo das sprints, envolvendo usuários e ajustando backlog e design conforme os resultados.
