Interação Humano-Computador · IFAL 2026.1

Avaliação de Interface por Percurso Cognitivo

Sistema avaliado: ADT Studio

Alunos Eliezir Moreira Raphael Phillipe

Professora Fabrísia Ferreira de Araújo

Disciplina Interação Humano-Computador

Data Abril de 2026

1

Sumário

O que será abordado

01
Definição — Percurso Cognitivo
Conceito, as 4 perguntas e escala de severidade · slides 3-5
02
Sistema Avaliado — ADT Studio
Visão geral e perfil do usuário · slides 6-7
03
Tarefa 1 — Criar um novo livro
10 passos, 6 problemas · slides 8-16
04
Tarefa 2 — Executar o pipeline
2 passos, 4 problemas · slides 17-21
05
Tarefa 3 — Revisar conteúdo e features
4 passos, 8 problemas · slides 22-27
06
Tarefa 4 — Visualizar e exportar
4 passos, 5 problemas · slides 28-33
07
Conclusão e Recomendações
23 problemas, 5 recomendações · slides 34-36

2

Metodologia

O que é Percurso Cognitivo?

"Um método de inspeção de usabilidade no qual o avaliador simula a perspectiva do usuário para identificar se uma interface é fácil de aprender através da exploração."

Lewis, Polson, Wharton & Rieman (1990) — CHI Conference Proceedings

Características

→ Não exige usuários reais
→ Foco na descoberta e aprendizado
→ Aplicado por especialistas em IHC
→ Segue tarefas específicas passo a passo

Quando usar

→ Protótipos e sistemas prontos
→ Avaliação de usabilidade prévia
→ Identificar barreiras de primeira vez
→ Complemento a testes com usuários

3

Metodologia — As 4 Perguntas

O método em cada passo

1

Percepção do objetivo

O usuário sabe que precisa realizar essa ação para atingir o objetivo?

2

Visibilidade do controle

O usuário consegue perceber o controle correto disponível na tela?

3

Associação

O usuário consegue associar o controle à ação que deseja realizar?

4

Feedback

O usuário recebe feedback adequado após executar a ação?

Resultado por pergunta: SIM PARCIAL NÃO — Falhas = problema de usabilidade

4

Metodologia — Classificação

Escala de Severidade

Cada problema identificado é classificado em um dos quatro níveis abaixo, do mais impactante ao menos impactante:

Crítico

O usuário não consegue completar a tarefa. Não há caminho alternativo óbvio.

Grave

O usuário consegue completar, mas com grande dificuldade ou após muitas tentativas.

Menor

O usuário consegue completar, mas com hesitação ou leve confusão.

Cosmético

Não impede nem atrasa, mas é uma oportunidade de melhoria.

Nesta avaliação, nenhum problema Crítico foi encontrado.

5

Sistema Avaliado

ADT Studio

Aplicação desktop para produção de livros digitais acessíveis. Extrai conteúdo de PDFs, processa com IA, tornando o conteúdo em PDF em livro interativo, com atividades, quizzes, glossários, TTS, tradução e mais.

Extract Storyboard Quizzes Captions Glossary TOC Translate Validation Export

6

Metodologia — Persona

Perfil do Usuário Avaliado

👩‍🏫

PerfilProfissional de educação ou produção editorial

ExperiênciaIntermediária com tecnologia — sabe usar aplicações desktop e formulários

LLMs / PipelineNenhuma experiência prévia com modelos de linguagem ou processamento automático

ObjetivoConverter PDF de livro educacional em formato digital acessível

Uso do sistemaPrimeiro acesso — nunca usou ADT Studio antes

7

Avaliação

Tarefa 1

Tarefa 1 de 4

Criar um novo livro a partir de um PDF

O usuário quer converter um livro em PDF em um formato digital acessível — Accessible Digital Textbook (ADT). Precisa fazer upload, configurar opções visuais, de processamento e idiomas.

8

Tarefa 1 · Passo 1

Tela Inicial — Clicar em "+ Add Book"

9

Tarefa 1 · Passo 2

Escolher um Preset

10

Tarefa 1 · Passo 3

Informações Básicas (Step 1 of 4)

11

Tarefa 1 · Passo 5

Layout Visual (Step 2 of 4)

P1 Objetivo · P2 Visibilidade · P3 Associação · P4 Feedback

P1

PARCIAL

P2

SIM

P3

PARCIAL

P4

SIM

Menor · P1, P3

Terminologia técnica nos rótulos

"Render Strategy", "Page Grouping Mode" são jargões que afetam duas dimensões: o usuário pode não entender o que está decidindo (P1) nem diferenciar as opções pelo texto (P3). A preview ao vivo e os diagramas compensam, mas os títulos podem intimidar antes que o usuário explore esses recursos.

12

Tarefa 1 · Passo 7

Processamento de Conteúdo (Step 3 of 4)

P1 Objetivo · P2 Visibilidade · P3 Associação · P4 Feedback

P1

PARCIAL

P2

SIM

P3

PARCIAL

P4

SIM

Menor · P3

Sliders em pixels sem referência

Valores como "50px" ou "3000px" não têm significado prático para o usuário.

Cosmético · P1

Excesso de opções técnicas

Muitas configurações podem intimidar (necessário scroll para ver todas). Cada feature possui preview interativa que facilita a compreensão, e recomendações do preset ajudam.

13

Tarefa 1 · Passo 9

Idiomas (Step 4 of 4)

P1 Objetivo · P2 Visibilidade · P3 Associação · P4 Feedback

P1

SIM

P2

SIM

P3

PARCIAL

P4

SIM

Menor · P3

"Editing Language" vs "Output Languages"

A distinção pode confundir — o usuário pensa em "idioma do livro". O diagrama de preview ajuda a esclarecer a função de cada campo, mas a nomenclatura em si não é intuitiva.

Menor · P3

Seletor em 2 etapas

Busca por "pt-BR" diretamente não funciona — exige seleção idioma → região.

14

Tarefa 1 · Resumo

Problemas Identificados

#	Problema	Severidade	Perguntas
1	Ambiguidade entre "+ Add Book" e "Get started"	Menor	P2
2	Terminologia técnica nos rótulos visuais	Menor	P1, P3
3	Sliders em pixels sem referência	Menor	P3
4	Excesso de opções técnicas	Cosmético	P1
5	Distinção "Editing" vs "Output" confusa	Menor	P3
6	Seletor de idioma em 2 etapas	Menor	P3

5Menores

1Cosmético

Nenhum problema Crítico ou Grave

15

Tarefa 1 · Pontos Fortes

O que funciona bem

1

Wizard com progresso claro — "STEP X OF 4" em todas as telas orienta o usuário

2

Preview ao vivo — atualiza em tempo real conforme as escolhas do usuário

3

Autopreenchimento inteligente — nome e page range preenchidos após upload do PDF

4

Recomendações do preset — badges indicam a opção sugerida em cada etapa

5

Diagramas explicativos — hover mostra visualmente o efeito de cada feature

6

Localização — interface disponível em português, inglês e espanhol

16

Avaliação

Tarefa 2

Tarefa 2 de 4

Executar o pipeline de processamento

Após criar o livro, o usuário precisa acompanhar a extração do conteúdo do PDF e a geração do storyboard. A API key já está configurada.

17

Tarefa 2 · Passo 1

Overview do Pipeline

P1 Objetivo · P2 Visibilidade · P3 Associação · P4 Feedback

P1

PARCIAL

P2

PARCIAL

P3

PARCIAL

P4

PARCIAL

Grave · P1, P3

Execução automática sem confirmação

Extract + Storyboard iniciam automaticamente após criar o livro, sem o usuário solicitar ou confirmar.

Grave · P2, P4

Progresso oculto na aba Extract

O preview das páginas sendo extraídas só é visível na aba Extract, mas o usuário permanece no overview sem saber que precisa navegar até lá.

Grave · P1, P3

Botões de play expostos sem proteção

O usuário pode clicar play em várias etapas sem entender o que cada uma faz, gerando resultados sem configuração e sobrecarga cognitiva.

Menor · P1

Storyboard sem configuração prévia

Configurações avançadas não cobertas no wizard (AI Rendering, Activity Rendering) não são apresentadas antes da execução automática.

18

Tarefa 2 · Passo 2

Aba Extract — Páginas Extraídas

19

Tarefa 2 · Resumo

Problemas Identificados

#	Problema	Severidade	Perguntas
1	Execução automática sem confirmação	Grave	P1, P3
2	Progresso oculto na aba Extract	Grave	P2, P4
3	Botões de play expostos sem proteção	Grave	P1, P3
4	Storyboard sem configuração prévia	Menor	P1

3Graves

1Menor

Primeira tarefa com problemas Graves

20

Tarefa 2 · Pontos Fortes

O que funciona bem

1

Grid visual de extração — thumbnails das páginas com contadores de palavras e imagens, preview do texto extraído

2

Progresso em tempo real — páginas aparecem progressivamente no grid conforme são extraídas

3

StageRunCards consistentes — padrão visual unificado para todas as etapas do pipeline, com ícone, descrição e status

4

Sidebar com estado do pipeline — indicadores coloridos mostram etapas concluídas vs pendentes em um único painel

21

Avaliação

Tarefa 3

Tarefa 3 de 4

Revisar conteúdo gerado e adicionar features

O usuário quer revisar o storyboard gerado, editar textos e adicionar funcionalidades extras como quizzes, glossário e legendas.

22

Tarefa 3 · Passo 1

Visualizar o Storyboard

P1 Objetivo · P2 Visibilidade · P3 Associação · P4 Feedback

P1

SIM

P2

SIM

P3

PARCIAL

P4

PARCIAL

Menor · P4

Sem indicador de progresso

Páginas aparecem na sidebar durante a geração, mas sem diferenciação visual entre processadas e pendentes.

Menor · P3

Edição bloqueada sem aviso

Edição desabilitada durante geração — o motivo só aparece na sidebar direita ("Editing is disabled while the storyboard is running").

23

Tarefa 3 · Passos 2-3

Edição e Reordenação

P1 Objetivo · P2 Visibilidade · P3 Associação · P4 Feedback

P1

SIM

P2

PARCIAL

P3

PARCIAL

P4

SIM

Menor · P2

Edição inline não é descobrível

Sem indicação visual de que o conteúdo é editável. O usuário precisa descobrir por tentativa.

Menor · P2

Toolbar sem destaque

A barra de ferramentas de edição só aparece ao clicar em um elemento — sem nenhuma indicação prévia de sua existência.

Grave · P2, P3

Features avançadas sem onboarding

Toolbar expõe 13+ categorias Tailwind, Crop, AI Image, Segment — tudo em inglês técnico, sem tour guiado, tooltips ou tutorial em nenhum ponto da aplicação.

Menor · P3

Reordenação exige re-render via LLM

Mudar a ordem dos blocos de texto exige chamada ao LLM para re-gerar o HTML, quando poderia ser aplicada diretamente.

24

Tarefa 3 · Passo 4

Features Extras (Quizzes)

P1 Objetivo · P2 Visibilidade · P3 Associação · P4 Feedback

P1

SIM

P2

PARCIAL

P3

PARCIAL

P4

SIM

Grave · P2, P3

Configurações escondidas

Opções essenciais (intervalo de páginas, tipo de questões) ficam ocultas no ícone de engrenagem. O usuário executa com padrões sem saber que pode configurar.

Cosmético · P3

Descrição genérica no card

Sem preview ou exemplo do resultado esperado. Usuário não sabe o que será gerado antes de clicar play.

25

Tarefa 3 · Resumo

Problemas Identificados

#	Problema	Severidade	Perguntas
1	Sem indicador de progresso na geração	Menor	P4
2	Edição bloqueada sem aviso claro	Menor	P3
3	Edição inline não é descobrível	Menor	P2
4	Toolbar de edição sem destaque	Menor	P2
5	Features avançadas sem onboarding	Grave	P2, P3
6	Reordenação exige re-render via LLM	Menor	P3
7	Configurações das features escondidas	Grave	P2, P3
8	Descrição genérica sem preview	Cosmético	P3

2Graves

5Menores

1Cosmético

26

Tarefa 3 · Pontos Fortes

O que funciona bem

1

Edição inline direta — clicar no texto para editar é intuitivo uma vez descoberto; Save/Discard claros

2

Versionamento de edições — cada alteração gera uma nova versão, permitindo rollback seguro

3

Painel de dados completo — sidebar lateral com text groups, tipo de seção e drag-and-drop para reordenação

4

Toolbar de formatação rica — controle granular de tipografia, cores, layout e espaçamento via classes Tailwind

5

StageRunCards consistentes — padrão visual unificado para features extras com ícones e descrições

27

Avaliação

Tarefa 4

Tarefa 4 de 4

Visualizar e exportar o livro

O usuário quer verificar como o livro ficou no formato final e gerar um pacote para distribuição.

28

Tarefa 4 · Passo 1

Navegar até Preview

P1 Objetivo · P2 Visibilidade · P3 Associação · P4 Feedback

P1

SIM

P2

PARCIAL

P3

PARCIAL

P4

PARCIAL

Grave · P2

Preview/Export no final da sidebar

Posicionados após 10 etapas de pipeline, transmitem a ideia de sequência obrigatória. Na verdade, apenas Extract e Storyboard são pré-requisitos.

Menor · P3, P4

Empacotamento automático sem aviso

Ao clicar em Preview, o sistema executa empacotamento antes de mostrar o livro — sem explicar o porquê ou mostrar progresso detalhado.

29

Tarefa 4 · Passo 2

Navegar pelo Preview

P1 Objetivo · P2 Visibilidade · P3 Associação · P4 Feedback

P1

SIM

P2

SIM

P3

PARCIAL

P4

SIM

Menor · P3

Cards flutuantes sem introdução

Accessibility Assessment e Reviewer Validation aparecem sem contexto. Termos WCAG (color-contrast, aria-label) podem intimidar o usuário novato.

✓ Pontos fortes

Preview fiel à experiência final do usuário. Navegação intuitiva por páginas. Quizzes e features interativas funcionais no iframe.

30

Tarefa 4 · Passos 3-4

Exportar o Livro

P1 Objetivo · P2 Visibilidade · P3 Associação · P4 Feedback

P1

SIM

P2

SIM

P3

PARCIAL

P4

PARCIAL

Cosmético · P3

"Project Archive" ambíguo

Terminologia dos formatos é familiar ao público-alvo, mas "Project Archive" pode ser confundido com exportação final — é apenas backup interno.

Cosmético · P3

Checklist WCAG técnico

Códigos como "1.1.1 Non-text Content" sem tradução para linguagem acessível ao usuário novato.

31

Tarefa 4 · Resumo

Problemas Identificados

#	Problema	Severidade	Perguntas
1	Preview/Export no final da sidebar — sequência aparente	Grave	P2
2	Empacotamento automático sem aviso	Menor	P3, P4
3	Cards de acessibilidade sem introdução	Menor	P3
4	"Project Archive" confundível com exportação final	Cosmético	P3
5	Checklist WCAG com terminologia técnica	Cosmético	P3

1Grave

2Menores

2Cosméticos

32

Tarefa 4 · Pontos Fortes

O que funciona bem

1

Preview fiel à experiência final — iframe renderiza o livro exatamente como o usuário final verá, com quizzes e features interativas

2

Dialog de exportação bem estruturado — capa do livro, feature toggles intuitivos e checklist de acessibilidade em um único painel

3

Múltiplos formatos de exportação — 4 opções (Archive, Web, SCORM, WebPub) atendem diferentes necessidades de distribuição

4

Controle granular na exportação — toggles para incluir/excluir features e reordenar idiomas antes de gerar o pacote

5

Verificação de acessibilidade integrada — cards de Accessibility Assessment e Reviewer Validation permitem revisar qualidade antes de exportar

33

Conclusão

Visão Geral dos Problemas

23

Problemas totais

0

Críticos

6

Graves

13

Menores

4

Cosméticos

T1 · Criar livro

5 Menores, 1 Cosmético — wizard bem estruturado, problemas de terminologia

T2 · Pipeline

3 Graves, 1 Menor — execução automática e falta de controle do usuário

T3 · Storyboard

2 Graves, 5 Menores, 1 Cosmético — ausência de onboarding e edição oculta

T4 · Preview/Export

1 Grave, 2 Menores, 2 Cosméticos — sidebar sugere sequência obrigatória

34

Conclusão

Principais Recomendações

1

Implementar onboarding — tour guiado na primeira visita ao storyboard e às ferramentas de edição, com tooltips contextuais

2

Confirmar antes de executar — pedir confirmação antes de rodar Extract/Storyboard automaticamente após criar o livro

3

Separar etapas opcionais na sidebar — divisor visual entre obrigatórias (Extract, Storyboard) e opcionais, com Preview acessível mais cedo

4

Exibir configurações antes de executar — mostrar opções essenciais no StageRunCard ou abrir painel de config na primeira execução

5

Tornar a edição descobrível — cursor de texto ao hover, toolbar persistente, e indicação visual de que o conteúdo é editável

35

Obrigado!

Eliezir Moreira

Raphael Phillipe

IHC · IFAL 2026.1 · Profa. Fabrísia Ferreira de Araújo

36