O documento discute conceitos e técnicas de design de experiência do usuário, como personas, prototipação, wireframes e design gráfico. Ele fornece orientações sobre como projetar interfaces digitais que sejam intuitivas e atendam às necessidades dos usuários.

1. COMUNICAÇÃO
DIGITAL
CRP-0420
AULA 09: EXPERIÊNCIA DO USUÁRIO (2)

2. TRABALHO FINAL:
2100: RETROSPECTIVA DO SÉCULO 21.
INVENTÁRIO DOS PRINCIPAIS OBJETOS
E SERVIÇOS QUE MUDARAM O SÉCULO.

3. SUA IDEIA:
PROPOSTA DE ANO
CONTEXTO / PROBLEMA A ABORDAR
HARDWARE, SOFTWARE E SERVIÇOS;
PITCH DE EXPLICAÇÃO

4. TIMELINE

5. UX/UI

6. EXERCÍCIO:
IMAGINE PERSONAS, AÇÕES E
INTERFACES PARA UM APLICATIVO
SIMPLES DE GRAVAÇÃO DE ÁUDIO NO
SMARTPHONE. USE A PLATAFORMA
QUE VOCÊ ACHAR ADEQUADA.

21. COMUNICA MAL.
O PROBLEMA DO “MAU DESIGN”:
COMO A MÁ MÚSICA OU COZINHA.

22. O PROCESSO DE DESIGN DE
INTERAÇÃO
E SUAS ETAPAS:
1. PESQUISAR USUÁRIOS E SEU AMBIENTE;
2. MODELAR INTERAÇÕES E SEU CONTEXTO;
3. DEFINIR OBJETIVOS E DEMANDAS DE TODOS;
4. DETERMINAR ESTRUTURA E FLUXO DE
INTERAÇÃO;
5. REFINAR COMPORTAMENTOS, FORMATOS E
CONTEÚDOS;
6. DAR SUPORTE A DEMANDAS E NECESSIDADES.

23. PERSONAS

24. PERSONAS
ARQUÉTIPOS DE USUÁRIOS:
A MELHOR FORMA DE ACOMODAR UM
GRANDE NÚMERO DE USUÁRIOS É
DESENHAR PARA TIPOS DEFINIDOS
POR ATITUDES E COMPORTAMENTOS.

26. USUÁRIO:
A JORNADA DO

29. Pontos de
ACESSO:
• CADA ELEMENTO DA INTERFACE - IMAGEM, TEXTO,
CABEÇALHO, ÍCONE, LINK - É UM PONTO DE
ACESSO A NOVAS INFORMAÇÕES.
• O USUÁRIO NÃO PRECISA SABER O QUE O TEXTO
VAI DIZER, O QUE A BARRA DE NAVEGAÇÃO
CONTERÁ, OU O QUE OS GRÁFICOS DIRÃO.
• CADA ELEMENTO REQUER DEBATE E EXPLORAÇÃO
• QUE NOVAS FUNCIONALIDADES PODEM EXPANDIR
O PRODUTO E SEUS SERVIÇOS?

30. CARD SORTING:
TÉCNICA DE CRIAR NAVEGAÇÃO
ATRAVÉS DE PROTÓTIPOS DE PAPEL.

36. PROTÓTIPOS

37. PROTOTIPAÇÃO:
• REDUZ INTERPRETAÇÕES EQUIVOCADAS
• PROPORCIONA EXPERIÊNCIAS REAIS
• GERA NOVAS EXPERIÊNCIAS
• COMUNICA SEUS OBJETIVOS AO MOSTRAR E
CONTAR
• ECONOMIZA TEMPO, ESFORÇO E DINHEIRO
• FACILITA O FEEDBACK RÁPIDO
• REDUZ O RISCO

38. Finalidades mais comuns de
PROTÓTIPOS:
• CRIAR COMUNICAÇÃO COMPARTILHADA
• TRABALHAR COM PROJETOS COMUNS
• VENDER IDEIAS INTERNAMENTE E PARA CLIENTES
• TESTAR INTERAÇÕES E USABILIDADE
• AFERIR DE VIABILIDADE TÉCNICA E VALOR

44. QUANTIDADE
COMECE COM UMA GRANDE
DE IDEIAS. A QUALIDADE VEM COM O
TEMPO.

45. Painéis de
CONTROLE:
• APRESENTAM AS INFORMAÇÕES MAIS
IMPORTANTES, NECESSÁRIAS PARA ATINGIR OS
OBJETIVOS
• SÃO GRÁFICOS NÃO PELA BELEZA, MAS PARA
FACILITAR A COMPREENSÃO, MANIPULAÇÃO E
CONTEXTO.
• DEVEM DETERMINAR PRIORIDADES, CONSOLIDAR E
ORGANIZAR A INFORMAÇÃO EM UMA ÚNICA TELA,
PARA QUE SEJA FACILMENTE MONITORADA
• NEM TODAS AS INFORMAÇÕES SÃO
QUANTIFICÁVEIS

56. Erros
COMUNS:
• EXCEDER OS LIMITES DE UMA TELA (SCROLL)
• FALTA DE CONTEXTO
• EXCESSO DE DETALHES
• MÍDIAS INADEQUADAS
• TELA CONGESTIONADA
• DECORAÇÃO INÚTIL
• MAU USO DE COR
• MÉTRICAS RUINS
• DADOS DESORGANIZADOS
• CODIFICAÇÃO IMPRECISA
Só esses elementos
são técnicos.

57. UI KITS
Ajudam a compor o layout

70. WIREFRAMES

71. Planejamento estrutural:
WIREFRAMES
• NÃO SÃO RASCUNHOS DO LAYOUT FINAL.
• COMO PLANTAS BAIXAS DE ARQUITETURA,
INTERMEDIÁRIOS ENTRE A TÉCNICA E A
COMUNICAÇÃO.
• CRIAM ARGUMENTOS RACIONAIS PARA A
DISCUSSÃO DO LAYOUT, AUMENTANDO A
USABILIDADE E CONSISTÊNCIA.
• COMEÇAM SIMPLES, SE TORNAM MAIS
DETALHADOS À MEDIDA QUE AUMENTA SUA
FUNCIONALIDADE.

83. Construindo
WIREFRAMES:
1. DEIXE O OBJETIVO BEM CLARO
2.SEJA FUNCIONAL, NÃO BONITO
3.TENHA O MÍNIMO DE ELEMENTOS
4.DESENHE TODAS AS AÇÕES
5.ORGANIZE-O POR PERSONAS
6.PROCURE ELEMENTOS REPETITIVOS
7.TESTE HIERARQUIAS E SENTIDO

84. DESIGN
GRÁFICO

85. Questões para o
DESIGN:
• QUEM USARÁ O PRODUTO?
• QUAIS SÃO AS PRINCIPAIS TAREFAS?
• QUE TECNOLOGIA DE COMUNICAÇÃO SERÁ
UTILIZADA?
• HÁ ALGUMA LIMITAÇÃO A CONSIDERAR?
• POR QUE USAR O PRODUTO E SEU PAINEL DE
CONTROLE EM UM LUGAR E NÃO EM OUTRO?
• COMO ESTIMULAR O USO?
• COMO DAR SUPORTE?

92. Questões para o
REDESIGN:
• ONDE PEGA? QUAIS SÃO AS CARACTERÍSTICAS OU
COMPLEXIDADES EXISTENTES QUE PREJUDICAM
OU ATRAPALHAM A EXPERIÊNCIA DO USUÁRIO?
• QUAIS SÃO AS CARACTERÍSTICAS ADICIONAIS QUE
O USUÁRIO GOSTARIA DE VER?
• QUE NOVAS FUNCIONALIDADES PODEM EXPANDIR
O PRODUTO E SEUS SERVIÇOS?
• HÁ PROBLEMAS DE COMPATIBILIDADE OU
RESTRIÇÕES DE USO?

100. Identifique os elementos
PRINCIPAIS:
• COMECE A ESTRUTURA PELOS ELEMENTOS MAIS
IMPORTANTES PARA A EXPERIÊNCIA DO
USUÁRIO.
• QUAL É SUA PRINCIPAL FINALIDADE?
• COMO GARANTIR QUE ESTEJA VISÍVEL E SEJA
FÁCIL DE ENCONTRAR?
• O QUE SE ESPERA QUE ELE FAÇA DEPOIS DE
ATINGIR SEU OBJETIVO?
• COMO TORNAR CLARA A AÇÃO?
• ESSA DIVISÃO DEVE SER FEITA POR PERSONA.

106. Foco na
COMUNICAÇÃO:
• INTERFACES SÃO MUITO VARIÁVEIS.
• É IMPORTANTE EVIDENCIAR OS PONTOS MAIS
IMPORTANTES E COMO CHEGAR A ELES.
• APRESENTE OS ELEMENTOS MAIS IMPORTANTES
EM UM PONTO VISÍVEL PARA QUE NÃO SEJA
PRECISO USAR MÚLTIPLAS TELAS OU BARRAS DE
ROLAGEM.
• NUNCA DEIXE QUE A ESTRUTURA SE
SOBREPONHA AO CONTEÚDO.
• SEMPRE QUE POSSÍVEL, CONDUZA A AÇÃO.

110. GRÁFICO:
PROJETO
REPRODUZA ELEMENTOS USADOS EM
TODO O SITE NA MESMA POSIÇÃO, PARA
QUE NÃO “PULEM” QUANDO
TROCAM DE PÁGINA.
CUIDADO COM ELEMENTOS FLUTUANTES.

111. BRANCO
O ESPAÇO EM
FACILITA A COMPREENSÃO.

115. MOOD BOARDS
COMO SÃO AS REFERÊNCIAS VISUAIS
DE SUAS PERSONAS?

126. PERGUNTAS:
1. QUAL É A MOTIVAÇÃO PARA O PRODUTO?
2. QUE NECESSIDADE ELE SUPRE?
3. QUAL É SUA MECÂNICA, DINÂMICA E ESTÉTICA?
4. QUE PERSONAS O UTILIZARIAM, COMO SERIAM OS
CENÁRIOS E JORNADAS DE USUÁRIO?
5. COMO É A CURVA DE APRENDIZADO (INICIANTE A
EXPERT) POR PERSONA?
6. QUE INTERFACE(S) O PRODUTO USA? QUANDO E COMO?
7. ELE TEM PAINEL DE CONTROLE? QUAL É O WIREFRAME?

127. FIM

128. TAREFAS:

129. GDOCS
ATUALIZE SEU PROJETO, “CALIBRADO”
PELA CLASSE. DESCREVA SUA PROPOSTA
DE ANO, QUAL O CONTEXTO E PROBLEMA
A ABORDAR. FUNDAMENTE COM
BIBLIOGRAFIAS DE AULAS ANTERIORES
OU PAPERS.
FONTES PODEM SER BUSCADAS EM
SCHOLAR.GOOGLE.COM

130. GDOCS
DE ONDE VIRÃO SEUS DADOS? QUE APIS
VOCÊ PRETENDE USAR, E QUE DADOS
VOCÊ PRETENDE USAR DE CADA API?
FONTES PODEM SER BUSCADAS EM
PROGRAMMABLEWEB.COM/APIS

131. PALESTRAS TED:
HANNAH FRY: THE MATHEMATICS OF LOVE
AARON KOBLIN: VISUALIZING OURSELVES WITH
CROWD-SOURCED DATA
NOREENA HERTZ: HOW TO USE EXPERTS
KEVIN ALLOCCA: WHY VIDEOS GO VIRAL
STEVEN LEVITT: FREAKONOMICS OF CRACK DEALING
AL GORE: AVERTING THE CLIMATE CRISIS

132. DOCUMENTÁRIOS:
EVERYTHING IS A REMIX
FORECASTING, PHILIP TETLOCK
FUTURESCAPE - S01 E01, 03 E 04

133. LEITURAS
THE NEXT 100 YEARS - CAPS 7 E 8
WHAT TECHNOLOGY WANTS - CAPS 13 E 14
THE FUTURE: 6 DRIVERS OF CHANGE - CAPS
FUTURE PERFECT - CAP 6
FUTURE, DECLASSIFIED - CAPS 3 E 4
THE NEW DIGITAL AGE - CAPS 1 E 2
THE NEXT DECADE - CAPS 1 E 3
PRESENT SHOCK - CAPS 1 E 4

134. PENSADOR DO TEMA:
GEORGE FRIEDMAN - BIT.LY/CD08-1
DOUGLAS RUSHKOFF - HTTPS://
YOUTU.BE/DQKQKCE1XL0